feat: gacha auth integration (#32)

* feat(gacha): register and login integration * fix: navbar and gacha landing page - display fullname when user authenticated - fix styling and responsive * fix: minor fix UI
2025-05-27 01:41:13 +07:00
parent aaf5b4262d
commit 9f25941a4a
13 changed files with 415 additions and 330 deletions
@@ -2,6 +2,7 @@ import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 import { useLogin } from '../../_hooks/use-login';
+import ModalFormVerifyEmail from './modal-form-verify-email';

 interface IModalFormLogin {
  isOpen: boolean;
@@ -16,12 +17,23 @@ const ModalFormLogin = ({
  onForgotPassword,
  setIsOpenRegisterModal,
 }: IModalFormLogin) => {
-  const { form, onSubmit } = useLogin();
+  const {
+    form,
+    onSubmit,
+    isLoading,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useLogin();

  return (
+    <>
      <Modal
        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-      isOpen={isOpen}
+        isOpen={isOpen && !showVerifyModal}
        onClose={onClose}
      >
        <Modal.Header className="space-y-4">
@@ -51,12 +63,17 @@ const ModalFormLogin = ({
              className="w-full"
            />
            <h1 className="text-end text-primary-500 text-xl font-medium">
-            <Button variant="text" onClick={onForgotPassword}>
+              <Button variant="text" type="button" onClick={onForgotPassword}>
                Lupa Password?
              </Button>
            </h1>
-          <Button type="submit" size="md" className="w-full">
-            Login
+            <Button
+              type="submit"
+              size="md"
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Loading...' : 'Login'}
            </Button>
            <div className="flex justify-center gap-2 pt-2.5 font-medium">
              <p className="text-neutral-500">Belum punya akun?</p>
@@ -71,6 +88,16 @@ const ModalFormLogin = ({
          </form>
        </Modal.Content>
      </Modal>
+
+      <ModalFormVerifyEmail
+        isOpen={showVerifyModal}
+        onClose={closeVerifyModal}
+        verifyForm={verifyForm}
+        onVerifySubmit={onVerifySubmit}
+        isVerifying={isVerifying}
+        email={emailToVerify}
+      />
+    </>
  );
 };

@@ -1,11 +1,8 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useQueryState } from '@imphnen-frontend-service/utils';
 import { useRegister } from '../../_hooks/use-register';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { UseFormReturn } from 'react-hook-form';
-import { TRegisterRequest } from '@imphnen-frontend-service/service';
-import { useEffect } from 'react';
+import ModalFormVerifyEmail from './modal-form-verify-email';

 interface IModalFormRegisterProps {
  isOpen: boolean;
@@ -13,68 +10,33 @@ interface IModalFormRegisterProps {
 }

 const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
-  const { form, onSubmit, isStepOneValid } = useRegister();
-
  const {
-    step: currentStep,
-    nextStep,
-    prevStep,
-    resetStep,
-  } = useQueryState('registerStep', {
-    defaultValue: 1,
-    maxValue: 2,
-    minValue: 1,
-  });
-
-  useEffect(() => {
-    if (!isStepOneValid && currentStep === 2) {
-      prevStep();
-    }
-  }, [isStepOneValid, currentStep, prevStep]);
+    form,
+    verifyForm,
+    onSubmit,
+    onVerifySubmit,
+    showVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    isRegistering,
+    registeredEmail,
+  } = useRegister();

  return (
+    <>
      <Modal
        className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
-      isOpen={isOpen}
-      onClose={() => {
-        onClose();
-        resetStep();
-      }}
+        isOpen={isOpen && !showVerifyModal}
+        onClose={onClose}
      >
        <Modal.Header className="space-y-4">
          <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
          <h1 className="text-primary-500 text-p1 text-center font-semibold">
            Register
          </h1>
-        <h2 className="text-neutral-500 text-lg text-center">
-          {currentStep === 1 ? 'Info Akun' : 'Informasi Pengiriman Hadiah'}
-        </h2>
        </Modal.Header>
        <Modal.Content>
          <form onSubmit={onSubmit} className="space-y-6">
-          {currentStep === 1 && (
-            <StepOne
-              form={form}
-              nextStep={nextStep}
-              isStepOneValid={isStepOneValid}
-            />
-          )}
-          {currentStep === 2 && <StepTwo form={form} prevStep={prevStep} />}
-        </form>
-      </Modal.Content>
-    </Modal>
-  );
-};
-
-interface IStepOneProps {
-  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
-  nextStep: () => void;
-  isStepOneValid: boolean;
-}
-
-const StepOne = ({ form, nextStep, isStepOneValid }: IStepOneProps) => {
-  return (
-    <>
            <ControlledInputField
              control={form.control}
              name="fullname"
@@ -111,25 +73,6 @@ const StepOne = ({ form, nextStep, isStepOneValid }: IStepOneProps) => {
              size="lg"
              className="w-full"
            />
-      <Button
-        size="md"
-        className="w-full"
-        onClick={nextStep}
-        disabled={!isStepOneValid}
-      >
-        Selanjutnya
-      </Button>
-    </>
-  );
-};
-
-interface IStepTwoProps {
-  form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
-  prevStep: () => void;
-}
-
-const StepTwo = ({ form, prevStep }: IStepTwoProps) => (
-  <>
            <ControlledInputField
              control={form.control}
              name="phone_number"
@@ -139,42 +82,28 @@ const StepTwo = ({ form, prevStep }: IStepTwoProps) => (
              size="lg"
              className="w-full"
            />
-    <ControlledInputField
-      control={form.control}
-      name="referral_code"
-      label="Kode Referral"
-      placeholder="Masukkan Kode Referral"
-      type="text"
-      size="lg"
+            <Button
+              size="md"
              className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="referred_by"
-      label="Referral By"
-      placeholder="Masukkan Referral By"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <ControlledInputField
-      control={form.control}
-      name="student_type"
-      label="Tipe Pelajar"
-      placeholder="Masukkan Tipe Pelajar"
-      type="text"
-      size="lg"
-      className="w-full"
-    />
-    <div className="flex gap-6">
-      <Button size="md" variant="text" className="w-[40%]" onClick={prevStep}>
-        Kembali
+              type="submit"
+              disabled={isRegistering || !form.formState.isValid}
+            >
+              {isRegistering ? 'Mendaftar...' : 'Register'}
            </Button>
-      <Button size="md" className="w-full" type="submit">
-        Gacha Sekarang
-      </Button>
-    </div>
+          </form>
+        </Modal.Content>
+      </Modal>
+
+      <ModalFormVerifyEmail
+        isOpen={showVerifyModal}
+        onClose={closeVerifyModal}
+        verifyForm={verifyForm}
+        onVerifySubmit={onVerifySubmit}
+        isVerifying={isVerifying}
+        email={registeredEmail}
+      />
    </>
-);
+  );
+};

 export default ModalFormRegister;
@@ -0,0 +1,63 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
+import { UseFormReturn } from 'react-hook-form';
+
+interface IModalFormVerifyEmailProps {
+  isOpen: boolean;
+  onClose: () => void;
+  verifyForm: UseFormReturn<{ otp: string }, any>;
+  onVerifySubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  isVerifying: boolean;
+  email?: string;
+}
+
+const ModalFormVerifyEmail = ({
+  isOpen,
+  onClose,
+  verifyForm,
+  onVerifySubmit,
+  isVerifying,
+  email,
+}: IModalFormVerifyEmailProps) => {
+  return (
+    <Modal
+      className="py-[45px] min-w-[400px] lg:min-w-[455px] px-7"
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <Modal.Header className="space-y-4">
+        <img src="/logos/logo.svg" alt="" className="h-[70px] w-auto" />
+        <h1 className="text-primary-500 text-p1 text-center font-semibold">
+          Verifikasi Email
+        </h1>
+        <h2 className="text-neutral-500 text-lg text-center">
+          Masukkan kode OTP yang telah dikirim ke {email ? email : 'email Anda'}
+        </h2>
+      </Modal.Header>
+      <Modal.Content>
+        <form onSubmit={onVerifySubmit} className="space-y-6">
+          <ControlledInputField
+            control={verifyForm.control}
+            name="otp"
+            label="Kode OTP"
+            placeholder="Masukkan Kode OTP"
+            type="text"
+            size="lg"
+            className="w-full"
+          />
+          <Button
+            size="md"
+            className="w-full"
+            type="submit"
+            disabled={isVerifying}
+          >
+            {isVerifying ? 'Memverifikasi...' : 'Verifikasi'}
+          </Button>
+        </form>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalFormVerifyEmail;
@@ -2,9 +2,13 @@ import { useForm } from 'react-hook-form';
 import {
  authLoginSchema,
  TLoginRequest,
+  usePostLogin,
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useSession } from '@imphnen-frontend-service/utils';
+import { useAuthStore } from '@imphnen-frontend-service/utils';
+import { toast } from 'sonner';
+import { useNavigate } from 'react-router';
+import { useVerifyEmail } from './use-verify-email';

 export const useLogin = () => {
  const form = useForm<TLoginRequest>({
@@ -12,12 +16,63 @@ export const useLogin = () => {
    mode: 'all',
  });

-  const { signIn } = useSession();
+  const navigate = useNavigate();
+  const { mutate, isPending } = usePostLogin();
+  const { setLoading, setSession, clearSession } = useAuthStore();

-  const onSubmit = form.handleSubmit((data) => signIn(data));
+  const {
+    openVerifyModal,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useVerifyEmail();
+
+  const onSubmit = form.handleSubmit((data) => {
+    setLoading(true);
+    mutate(data, {
+      onSuccess: (response) => {
+        toast.success('Login sukses');
+
+        if (response.data.token && response.data.user) {
+          setSession(response.data);
+        } else {
+          const { token, ...userData } = response.data;
+
+          const loginData = {
+            token,
+            userData,
+          };
+          setSession(loginData);
+        }
+
+        navigate(0);
+      },
+      onError: (error) => {
+        const errorMessage = error?.response?.data?.message;
+
+        if (errorMessage === 'Account not active, please verify your email') {
+          toast.error('Akun belum aktif, silakan verifikasi email Anda');
+          openVerifyModal(data.email);
+        } else {
+          toast.error(errorMessage ?? 'Terjadi Kesalahan yang tidak diketahui');
+          clearSession();
+        }
+      },
+    });
+  });

  return {
    form,
    onSubmit,
+    isLoading: isPending,
+    showVerifyModal,
+    verifyForm,
+    onVerifySubmit,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
  };
 };
@@ -6,9 +6,20 @@ import {
 } from '@imphnen-frontend-service/service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
+import { useVerifyEmail } from './use-verify-email';

 export const useRegister = () => {
  const postRegister = usePostRegister();
+  const {
+    verifyForm,
+    onVerifySubmit,
+    showVerifyModal,
+    openVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    emailToVerify,
+  } = useVerifyEmail();
+
  const form = useForm<TRegisterRequest>({
    resolver: zodResolver(authRegisterSchema),
    mode: 'all',
@@ -23,13 +34,23 @@ export const useRegister = () => {

  const onSubmit = form.handleSubmit((data) => {
    postRegister.mutate(data, {
-      onSuccess: () => toast.success('Registrasi sukses'),
-      onError: (error) => toast.error(error.message),
+      onSuccess: () => {
+        toast.success('Registrasi sukses. Silakan verifikasi email Anda.');
+        openVerifyModal(data.email);
+      },
+      onError: (error) => toast.error(error.message || 'Registrasi gagal'),
    });
  });

  return {
    form,
+    verifyForm,
    onSubmit,
+    onVerifySubmit,
+    showVerifyModal,
+    closeVerifyModal,
+    isVerifying,
+    isRegistering: postRegister.isPending,
+    registeredEmail: emailToVerify,
  };
 };
@@ -0,0 +1,62 @@
+import { useForm } from 'react-hook-form';
+import {
+  TVerifyEmailRequest,
+  usePostVerifyEmail,
+} from '@imphnen-frontend-service/service';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useVerifyEmail = () => {
+  const [showVerifyModal, setShowVerifyModal] = useState(false);
+  const [emailToVerify, setEmailToVerify] = useState('');
+  const navigate = useNavigate();
+
+  const postVerifyEmail = usePostVerifyEmail();
+
+  const verifyForm = useForm<{ otp: string }>({
+    mode: 'all',
+    defaultValues: {
+      otp: '',
+    },
+  });
+
+  const onVerifySubmit = verifyForm.handleSubmit((data) => {
+    const otpNumber = data.otp;
+
+    const verifyData: TVerifyEmailRequest = {
+      email: emailToVerify,
+      otp: otpNumber,
+    };
+
+    postVerifyEmail.mutate(verifyData, {
+      onSuccess: () => {
+        toast.success('Verifikasi email sukses');
+
+        navigate(0);
+      },
+      onError: (error) =>
+        toast.error(error.message || 'Verifikasi email gagal'),
+    });
+  });
+
+  const openVerifyModal = (email: string) => {
+    setEmailToVerify(email);
+    setShowVerifyModal(true);
+  };
+
+  const closeVerifyModal = () => {
+    setShowVerifyModal(false);
+    verifyForm.reset();
+  };
+
+  return {
+    verifyForm,
+    onVerifySubmit,
+    showVerifyModal,
+    openVerifyModal,
+    closeVerifyModal,
+    isVerifying: postVerifyEmail.isPending,
+    emailToVerify,
+  };
+};
@@ -66,11 +66,15 @@ export const Components: FC = (): ReactElement => {
        <div className="order-1 lg:order-none flex flex-col col-span-4 justify-center items-center mb-8 relative">
          <div className="relative h-[150px] md:h-[230px]">
            <img
+              width={400}
+              height={400}
              src="/merch/1.png"
              alt="Merch 1"
              className="relative top-[3px] md:top-[6px] left-[4px] md:left-[7px] z-10 w-[165px] md:w-[266px]"
            />
            <img
+              width={400}
+              height={400}
              className="absolute top-0 left-0 min-w-[174px] md:min-w-[280px] z-0"
              src="/merch/Vector-1.svg"
              alt=""
@@ -88,7 +92,7 @@ export const Components: FC = (): ReactElement => {
            ~ 175k ~
          </div>
        </div>
-        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative overflow-hidden">
+        <div className="order-2 flex flex-col col-span-4 justify-center items-center mb-8 relative">
          <div className="relative h-[130px] md:h-[230px]">
            <img
              width={400}
@@ -105,8 +109,6 @@ export const Components: FC = (): ReactElement => {
              alt="Merch 3"
            />
            <img
-              width={400}
-              height={400}
              className="absolute hidden lg:block -bottom-[100px] -left-[55px]"
              src="/landing-arrow-2.svg"
              alt="Merch 1"
@@ -35,7 +35,7 @@ if (!rootElement) throw new Error('Failed to find the root element');
 createRoot(rootElement).render(
  <StrictMode>
    <QueryProvider>
-      <Toaster />
+      <Toaster position="top-right"/>
      <RouterProvider router={router} />
    </QueryProvider>
  </StrictMode>
@@ -1,109 +1,15 @@
-import {
-  PERMISSIONS,
-  SessionToken,
-  SessionUser,
-} from '@imphnen-frontend-service/utils';
-import { LoaderFunctionArgs, redirect } from 'react-router';
+// import { SessionToken, SessionUser } from '@imphnen-frontend-service/utils';
+import { LoaderFunctionArgs } from 'react-router';

-const mappingPublicRoutes = [
-  '/',
-  '/auth/login',
-  '/auth/forgot',
-  '/auth/new-password',
-];
+// const mappingPublicRoutes = ['/'];

-const mappingRoutePermissions = [
-  {
-    path: '/dashboard',
-    permissions: [],
-  },
-  {
-    path: '/users',
-    permissions: [PERMISSIONS.USERS.READ_LIST],
-  },
-  {
-    path: '/users/create',
-    permissions: [PERMISSIONS.USERS.CREATE],
-  },
-  {
-    path: '/users/update',
-    permissions: [PERMISSIONS.USERS.UPDATE],
-  },
-  {
-    path: '/users/detail',
-    permissions: [PERMISSIONS.USERS.READ_DETAIL],
-  },
-  {
-    path: '/roles',
-    permissions: [PERMISSIONS.ROLES.READ_LIST],
-  },
-  {
-    path: '/roles/create',
-    permissions: [PERMISSIONS.ROLES.CREATE],
-  },
-  {
-    path: '/roles/update',
-    permissions: [PERMISSIONS.ROLES.UPDATE],
-  },
-  {
-    path: '/roles/detail',
-    permissions: [PERMISSIONS.ROLES.READ_DETAIL],
-  },
-  {
-    path: '/permissions',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_LIST],
-  },
-  {
-    path: '/permissions/create',
-    permissions: [PERMISSIONS.PERMISSIONS.CREATE],
-  },
-  {
-    path: '/permissions/update',
-    permissions: [PERMISSIONS.PERMISSIONS.UPDATE],
-  },
-  {
-    path: '/permissions/detail',
-    permissions: [PERMISSIONS.PERMISSIONS.READ_DETAIL],
-  },
-];
-
-//TODO : Fix this later
-// const redirectToFirstAccessibleRoute = (userPermissions: string[]) => {
-//   const fallback = mappingRoutePermissions.find((route) =>
-//     route.permissions.some((perm) => userPermissions.includes(perm))
-//   );
-//   return redirect(fallback?.path ?? '/auth/login');
-// };
+// const mappingRoutePermissions = [
+//   {
+//     path: '/',
+//     permissions: [],
+//   },
+// ];

 export const middleware = async ({ request }: LoaderFunctionArgs) => {
-  const url = new URL(request.url);
-  const pathname = url.pathname;
-  const session = SessionUser.get();
-  const session_token = SessionToken.get();
-  const token = session_token?.token?.access_token;
-  const userPermissions =
-    session?.role?.permissions?.map?.((perm) => perm?.name) ?? [];
-
-  if (mappingPublicRoutes.includes(pathname)) {
-    if (token) return redirect('/dashboard');
-    return null;
-  }
-
-  if (!session) return redirect('/auth/login');
-
-  const matchedRoute = mappingRoutePermissions.find(
-    (route) => route.path === pathname
-  );
-
-  if (matchedRoute) {
-    const hasPermission =
-      !matchedRoute.permissions ||
-      matchedRoute.permissions.some((perm) => userPermissions.includes(perm));
-
-    if (!hasPermission) {
-      return '/dashboard';
-    }
-  }
-
  return null;
 };
@@ -35,7 +35,7 @@ export const postVerifyEmail = async (
  const { data } = await api({
    method: 'POST',
    url: '/auth/verify-email',
-    data: {otp: parseInt(payload.otp), email: payload.email},
+    data: { otp: parseInt(payload.otp), email: payload.email },
  });
  return data;
 };
@@ -29,7 +29,7 @@ export const Navbar: FC = (): ReactElement => {
                <Button
                  size="md"
                  variant="text"
-                  className="lg:text-[19px] lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
+                  className="lg:text-p2 lg:max-h-[44px] text-primary-500 hover:text-primary-600 transition-colors"
                >
                  <Link to="#">Home</Link>
                </Button>
@@ -38,7 +38,7 @@ export const Navbar: FC = (): ReactElement => {
                <Button
                  size="md"
                  variant="text"
-                  className="lg:text-[19px] lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
+                  className="lg:text-p2 lg:max-h-[44px] text-gray-600 hover:text-gray-700 transition-colors"
                >
                  <Link to="#">Merch Gacha</Link>
                </Button>
@@ -49,13 +49,17 @@ export const Navbar: FC = (): ReactElement => {
                </li>
              ) : (
                <li className="flex gap-x-4">
-                  <span className="text-lg">{session.user?.fullname}</span>
-                  <div
+                  <span className="lg:text-p3 pb-[10px] self-end">
+                    {session?.user?.fullname}
+                  </span>
+                  <Button
                    onClick={signOut}
-                    className="text-lg text-red-500 font-bold"
+                    variant="text"
+                    size="md"
+                    className="lg:text-p2 text-red-500 font-bold hover:text-red-600"
                  >
                    Logout
-                  </div>
+                  </Button>
                </li>
              )}
            </ul>
@@ -97,7 +101,19 @@ export const Navbar: FC = (): ReactElement => {
                        </Button>
                      </li>
                    ) : (
-                      <li>{session.user?.fullname}</li>
+                      <>
+                        <li className="px-4 py-2 text-center text-gray-600 font-semibold">
+                          {session?.user?.fullname}
+                        </li>
+                        <li>
+                          <div
+                            onClick={signOut}
+                            className="block text-red-500 font-bold transition-colors px-4 py-2 text-center cursor-pointer"
+                          >
+                            Logout
+                          </div>
+                        </li>
+                      </>
                    )}
                  </ul>
                </div>
@@ -25,7 +25,7 @@ export const useAuthStore = create<SessionState>((set) => {

  return {
    isLoading: false,
-    session: isAuthenticated ? { ...session, ...user } : undefined,
+    session: isAuthenticated ? { token: session.token, user } : undefined,
    status: isAuthenticated
      ? ESessionStatus.Authenticated
      : ESessionStatus.Unauthenticated,
@@ -6,7 +6,10 @@ import { useNavigate } from 'react-router';
 export const useSession = () => {
  const navigate = useNavigate();
  const { mutate, isPending } = usePostLogin();
-  const { setLoading, setSession, clearSession, session } = useAuthStore();
+  const { setLoading, setSession, clearSession, session, status } =
+    useAuthStore();
+  const isAuthenticated = status === 'authenticated';
+
  const signIn = (payload: TLoginRequest) => {
    setLoading(true);
    mutate(payload, {
@@ -33,5 +36,6 @@ export const useSession = () => {
    signIn,
    signOut,
    isLoading: isPending,
+    isAuthenticated,
  };
 };