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

Merge pull request #16 from IMPHNEN/feat/backoffice-login

Browse Source 
Backoffice login
This commit is contained in:
Maulana Sodiqin
2025-04-03 23:02:36 +08:00
committed by GitHub
parent 79cb9d81fc 988476b409
commit 585ad482f2
8 changed files with 75 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.example
+1
View File
@@ -0,0 +1 @@
VITE_API_URL=https://api.example.com
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
+26 -18
View File
@@ -1,10 +1,10 @@
import { FC, ReactElement } 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();
return ( return (
<div className="flex justify-center items-center min-h-screen"> <div className="flex justify-center items-center min-h-screen">
@@ -13,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>
); );
apps/backoffice/vite.config.ts
+2 -2
View File
@@ -8,11 +8,11 @@ export default defineConfig(() => ({
root: __dirname, root: __dirname,
cacheDir: '../../node_modules/.vite/apps/backoffice', cacheDir: '../../node_modules/.vite/apps/backoffice',
server: { server: {
port: 4200, port: 3000,
host: 'localhost', host: 'localhost',
}, },
preview: { preview: {
port: 4300, port: 3001,
host: 'localhost', host: 'localhost',
}, },
plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])], plugins: [react(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
libs/ui/src/atoms/input/input.tsx
+3 -1
View File
@@ -40,7 +40,8 @@ export const Input: FC<TInputProps> = ({
}): ReactElement => { }): ReactElement => {
const [showPassword, setShowPassword] = useState(false); // State for password visibility const [showPassword, setShowPassword] = useState(false); // State for password visibility
const togglePasswordVisibility = () => { const togglePasswordVisibility = (e: React.FormEvent) => {
e.preventDefault();
if (!disabled) setShowPassword((prev) => !prev); if (!disabled) setShowPassword((prev) => !prev);
}; };
@@ -63,6 +64,7 @@ export const Input: FC<TInputProps> = ({
{type === 'password' && ( {type === 'password' && (
<div className="absolute end-0 px-[12px] h-full flex items-center"> <div className="absolute end-0 px-[12px] h-full flex items-center">
<Button <Button
type="button"
variant="text" variant="text"
size={size} size={size}
onClick={togglePasswordVisibility} onClick={togglePasswordVisibility}
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-xl mt-1">{error}</p> <p className="text-danger-500 text-label2 text-left">{error}</p>
) : ( ) : (
helperText && ( helperText && (
<p className={cn('text-cs mt-1', sizeClasses[size].helperText)}> <p
className={cn(
'text-label2 text-left',
sizeClasses[size].helperText
)}
>
{helperText} {helperText}
</p> </p>
) )
libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+4 -9
View File
@@ -7,20 +7,19 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Button } from '../../atoms'; import { Button } from '../../atoms';
import { FC, ReactElement } from 'react'; import { FC, ReactElement } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { useSession } from '@imphnen-frontend-service/utils';
export const BackofficeSidebar: FC = (): ReactElement => { export const BackofficeSidebar: FC = (): ReactElement => {
const { signOut } = useSession();
const location = useLocation(); const location = useLocation();
const navigate = useNavigate();
const isActive = (path: string) => location.pathname.includes(path); const isActive = (path: string) => location.pathname.includes(path);
return ( return (
<aside className="sticky top-0 left-0 w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between"> <aside className="sticky top-0 left-0 w-[280px] bg-white min-h-screen py-[60px] px-[28px] shadow-xl flex flex-col justify-between">
<div className="flex flex-col gap-20 justify-between items-center"> <div className="flex flex-col gap-20 justify-between items-center">
{/* Logo */}
<img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" /> <img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />
{/* Navigation Menu */}
<nav className="flex flex-col gap-4 w-full"> <nav className="flex flex-col gap-4 w-full">
<Link <Link
to="/dashboard" to="/dashboard"
@@ -72,14 +71,10 @@ export const BackofficeSidebar: FC = (): ReactElement => {
</nav> </nav>
</div> </div>
{/* Log Out Button */}
<div className="w-full"> <div className="w-full">
<hr className="mb-5 border-primary-200" /> <hr className="mb-5 border-primary-200" />
<Button <Button
onClick={() => { onClick={signOut}
navigate('/');
}}
variant="text" variant="text"
className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full" className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
> >