Merge branch 'develop' into feat/backoffice-login

libs/service/src/schemas/auth/index.ts

@@ -2,8 +2,16 @@ import { z } from 'zod';
 
 export const authLoginSchema = z.object({
   email: z
-    .string()
-    .min(1, 'Email cannot be empty')
-    .email('Email must be valid'),
-  password: z.string().min(1, 'Password cannot be empty'),
+    .string({
+      required_error: 'Email tidak boleh kosong',
+      invalid_type_error: 'Email harus berupa string',
+    })
+    .min(1, 'Email tidak boleh kosong')
+    .email('Email harus valid'),
+  password: z
+    .string({
+      required_error: 'Password tidak boleh kosong',
+      invalid_type_error: 'Password harus berupa string',
+    })
+    .min(1, 'Password tidak boleh kosong'),
 });

libs/ui/src/molecules/input-field/input-field.tsx

@@ -75,12 +75,12 @@ export const InputField: FC<TInputFieldProps> = ({
         {...rest}
       />
       {error ? (
-        <p className="text-danger-500 text-xs mt-1 text-left">{error}</p>
+        <p className="text-danger-500 text-label2 text-left">{error}</p>
       ) : (
         helperText && (
           <p
             className={cn(
-              'text-cs mt-1 text-left',
+              'text-label2 text-left',
               sizeClasses[size].helperText
             )}
           >

libs/ui/src/organisms/navbar/navbar.tsx

@@ -2,11 +2,12 @@ import { MenuOutlined } from '@ant-design/icons';
 import { FC, ReactElement, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from '../../atoms/button';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { useModalLogin, useSession } from '@imphnen-frontend-service/utils';
 
 export const Navbar: FC = (): ReactElement => {
   const { session, signOut, isAuthenticated } = useSession();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const { setShowModalLogin } = useModalLogin();
 
   return (
     <div className="bg-primary-50 w-full px-[32px] pt-[32px] md:px-[60px] md:pt-[60px] lg:px-[80px] sticky top-0 z-50">
@@ -44,7 +45,7 @@ export const Navbar: FC = (): ReactElement => {
               </li>
               {!isAuthenticated ? (
                 <li>
-                  <Button>Login</Button>
+                  <Button onClick={() => setShowModalLogin(true)}>Login</Button>
                 </li>
               ) : (
                 <li className="flex gap-x-4">
@@ -88,12 +89,12 @@ export const Navbar: FC = (): ReactElement => {
                     </li>
                     {!isAuthenticated ? (
                       <li>
-                        <Link
-                          to="#"
-                          className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                        <Button
+                          onClick={() => setShowModalLogin(true)}
+                          className="block w-full text-gray-100 transition-colors px-4 py-2 text-center font-semibold"
                         >
                           Login
-                        </Link>
+                        </Button>
                       </li>
                     ) : (
                       <li>{session.user?.fullname}</li>

libs/utils/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './use-query-state';
 export * from './use-session';
+export * from './use-modal-login';

libs/utils/src/hooks/use-modal-login.tsx

@@ -0,0 +1,28 @@
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+interface ModalLoginContextType {
+  showModalLogin: boolean;
+  setShowModalLogin: (value: boolean) => void;
+}
+
+const ModalLoginContext = createContext<ModalLoginContextType | undefined>(
+  undefined
+);
+
+export const ModalLoginProvider = ({ children }: { children: ReactNode }) => {
+  const [showModalLogin, setShowModalLogin] = useState(false);
+
+  return (
+    <ModalLoginContext.Provider value={{ showModalLogin, setShowModalLogin }}>
+      {children}
+    </ModalLoginContext.Provider>
+  );
+};
+
+export const useModalLogin = () => {
+  const context = useContext(ModalLoginContext);
+  if (!context) {
+    throw new Error('useModalLogin must be used within an ModalLoginProvider');
+  }
+  return context;
+};