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="/" />
<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" />
</head>
<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 { useNavigate } from 'react-router';
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 => {
const navigate = useNavigate();
const { form, onSubmit } = useLogin();
return (
<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">
Welcome to IMPHNEN Backoffice
</h1>
<InputField
label="Email"
placeholder="Masukkan Email"
type="email"
size="lg"
className="w-full"
/>
<InputField
label="Password"
placeholder="Masukkan password"
type="password"
size="lg"
className="w-full"
/>
<Button onClick={() => navigate('/dashboard')}>Login</Button>
<form onSubmit={onSubmit} className="flex flex-col gap-8">
<ControlledInputField
control={form.control}
label="Email"
placeholder="Masukkan Email"
type="email"
name="email"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
label="Password"
placeholder="Masukkan Password"
type="password"
name="password"
size="lg"
className="w-full"
/>
<Button type="submit" size="md" className="w-full">
Login
</Button>
</form>
</div>
</div>
);
apps/backoffice/vite.config.ts
+2 -2
View File
@@ -8,11 +8,11 @@ export default defineConfig(() => ({
root: __dirname,
cacheDir: '../../node_modules/.vite/apps/backoffice',
server: {
port: 4200,
port: 3000,
host: 'localhost',
},
preview: {
port: 4300,
port: 3001,
host: 'localhost',
},
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 => {
const [showPassword, setShowPassword] = useState(false); // State for password visibility
const togglePasswordVisibility = () => {
const togglePasswordVisibility = (e: React.FormEvent) => {
e.preventDefault();
if (!disabled) setShowPassword((prev) => !prev);
};
@@ -63,6 +64,7 @@ export const Input: FC<TInputProps> = ({
{type === 'password' && (
<div className="absolute end-0 px-[12px] h-full flex items-center">
<Button
type="button"
variant="text"
size={size}
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}
/>
{error ? (
<p className="text-danger-500 text-xl mt-1">{error}</p>
<p className="text-danger-500 text-label2 text-left">{error}</p>
) : (
helperText && (
<p className={cn('text-cs mt-1', sizeClasses[size].helperText)}>
<p
className={cn(
'text-label2 text-left',
sizeClasses[size].helperText
)}
>
{helperText}
</p>
)
libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+4 -9
View File
@@ -7,20 +7,19 @@ import {
} from '@ant-design/icons';
import { Button } from '../../atoms';
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 => {
const { signOut } = useSession();
const location = useLocation();
const navigate = useNavigate();
const isActive = (path: string) => location.pathname.includes(path);
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">
<div className="flex flex-col gap-20 justify-between items-center">
{/* Logo */}
<img src="/logos/simple.svg" alt="IMPHNEN Logo" className="w-[150px]" />
{/* Navigation Menu */}
<nav className="flex flex-col gap-4 w-full">
<Link
to="/dashboard"
@@ -72,14 +71,10 @@ export const BackofficeSidebar: FC = (): ReactElement => {
</nav>
</div>
{/* Log Out Button */}
<div className="w-full">
<hr className="mb-5 border-primary-200" />
<Button
onClick={() => {
navigate('/');
}}
onClick={signOut}
variant="text"
className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
>