MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: login backoffice

Browse Source
This commit is contained in:
Hafid Nur
2025-04-03 16:28:54 +07:00
parent f87dc4c782
commit 33c04707f8
4 changed files with 66 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backoffice/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<base href="/" /> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/logos/simple.svg" />
<link rel="stylesheet" href="/src/styles.css" /> <link rel="stylesheet" href="/src/styles.css" />
</head> </head>
<body> <body>
apps/backoffice/src/app/_hooks/use-login.ts
+31
View File
@@ -0,0 +1,31 @@
import { useForm } from 'react-hook-form';
import {
authLoginSchema,
TLoginRequest,
usePostLogin,
} from '@imphnen-frontend-service/service';
import { zodResolver } from '@hookform/resolvers/zod';
import { useNavigate } from 'react-router-dom';
export const useLogin = () => {
const postLogin = usePostLogin();
const form = useForm<TLoginRequest>({
resolver: zodResolver(authLoginSchema),
mode: 'all',
});
const navigate = useNavigate();
const onSubmit = form.handleSubmit((data) => {
postLogin.mutate(data, {
onSuccess: () => {
console.log('Success Login');
navigate('/dashboard');
},
});
});
return {
form,
onSubmit,
};
};
apps/backoffice/src/app/page.tsx
+27 -39
View File
@@ -1,30 +1,10 @@
import { FC, ReactElement, useState } from 'react'; import { FC, ReactElement } from 'react';
import { useNavigate } from 'react-router';
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputField } from '@imphnen-frontend-service/ui/molecules'; import { useLogin } from './_hooks/use-login';
import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
export const Components: FC = (): ReactElement => { export const Components: FC = (): ReactElement => {
const navigate = useNavigate(); const { form, onSubmit } = useLogin();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
try {
const payload = { email, password };
console.log(payload); // for debugging
const response = await postLogin(payload);
const { access_token, refresh_token } = response.data.token;
sessionStorage.setItem('access_token', access_token);
localStorage.setItem('refresh_token', refresh_token);
console.log('Login successful:', response); // for debugging
navigate('/dashboard');
} catch (error) {
console.log('Login error:', error); // for debugging
}
};
return ( return (
<div className="flex justify-center items-center min-h-screen"> <div className="flex justify-center items-center min-h-screen">
@@ -33,21 +13,29 @@ export const Components: FC = (): ReactElement => {
<h1 className="text-primary-500 text-p1 font-semibold"> <h1 className="text-primary-500 text-p1 font-semibold">
Welcome to IMPHNEN Backoffice Welcome to IMPHNEN Backoffice
</h1> </h1>
<InputField <form onSubmit={onSubmit} className="flex flex-col gap-8">
label="Email" <ControlledInputField
placeholder="Masukkan Email" control={form.control}
type="email" label="Email"
size="lg" placeholder="Masukkan Email"
className="w-full" type="email"
/> name="email"
<InputField size="lg"
label="Password" className="w-full"
placeholder="Masukkan password" />
type="password" <ControlledInputField
size="lg" control={form.control}
className="w-full" label="Password"
/> placeholder="Masukkan Password"
<Button onClick={() => navigate('/dashboard')}>Login</Button> type="password"
name="password"
size="lg"
className="w-full"
/>
<Button type="submit" size="md" className="w-full">
Login
</Button>
</form>
</div> </div>
</div> </div>
); );
libs/ui/src/molecules/input-field/input-field.tsx
+7 -2
View File
@@ -75,10 +75,15 @@ export const InputField: FC<TInputFieldProps> = ({
{...rest} {...rest}
/> />
{error ? ( {error ? (
<p className="text-danger-500 text-xs mt-1">{error}</p> <p className="text-danger-500 text-xs mt-1 text-left">{error}</p>
) : ( ) : (
helperText && ( helperText && (
<p className={cn('text-cs mt-1', sizeClasses[size].helperText)}> <p
className={cn(
'text-cs mt-1 text-left',
sizeClasses[size].helperText
)}
>
{helperText} {helperText}
</p> </p>
) )