feat(backoffice): implement login and logout

- Tambah fitur login dan logout pada Backoffice
- Ubah port development server dan atasi CORS
- Update type login response
- Update component Input agar toggle password berfungsi dengan benar

apps/backoffice/src/app/page.tsx

@@ -16,6 +16,10 @@ export const Components: FC = (): ReactElement => {
       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) {
@@ -39,6 +43,7 @@ export const Components: FC = (): ReactElement => {
             className="w-full"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
+            autoFocus
           />
           <InputForm
             label="Password"

apps/backoffice/vite.config.ts

@@ -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/service/src/types/auth/index.ts

@@ -10,9 +10,27 @@ export type TLoginResponse = {
       refresh_token: string;
     };
     user: {
+      role: {
+        id: string;
+        name: string;
+        permission: [
+          {
+            id: string;
+            name: string;
+            created_at: string;
+            updated_at: string;
+          }
+        ]
+        created_at: string;
+        updated_at: string;
+      };
       fullname: string;
       email: string;
+      avatar: string;
+      phone_number: string;
       is_active: boolean;
+      gender: string;
+      birthdate: string;
     };
   };
 };

libs/ui/src/atoms/input/input.tsx

@@ -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/organisms/backoffice-sidebar/backoffice-sidebar.tsx

@@ -14,6 +14,13 @@ export const BackofficeSidebar: FC = (): ReactElement => {
   const navigate = useNavigate();
   const isActive = (path: string) => location.pathname.includes(path);
 
+  const handleLogout = () => {
+    sessionStorage.removeItem('access_token');
+    localStorage.removeItem('refresh_token');
+
+    navigate('/');
+  };
+
   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">
@@ -77,9 +84,7 @@ export const BackofficeSidebar: FC = (): ReactElement => {
         <hr className="mb-5 border-primary-200" />
 
         <Button
-          onClick={() => {
-            navigate('/');
-          }}
+          onClick={handleLogout}
           variant="text"
           className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
         >