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

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

@@ -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;
 };

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

@@ -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>

libs/utils/src/hooks/use-auth-store.ts

@@ -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,

libs/utils/src/hooks/use-session.ts

@@ -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,
   };
 };