Merge pull request #59 from CS3219-AY2425S1/D4-ui-fixes

D4 UI fixes

Author: cyiting

frontend/package.json

@@ -60,6 +60,7 @@
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.11",

frontend/src/routes/login/logic.ts

@@ -1,5 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
@@ -15,6 +17,8 @@ export const loginFormSchema = z.object({
 type ILoginFormSchema = z.infer<typeof loginFormSchema>;
 
 export const useLoginForm = () => {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
   const navigate = useNavigate();
   const form = useForm<ILoginFormSchema>({
     resolver: zodResolver(loginFormSchema),
@@ -35,9 +39,19 @@ export const useLoginForm = () => {
         // TODO: Revalidate with is-authed User Svc EP and put as user
         // details provider on each route request
         localStorage.setItem('cachedUserID', userID);
+        navigate(0);
+      } else {
+        setErrorMessage('An error occured. Please try again later.');
+      }
+    },
+    onError: (error: AxiosError) => {
+      if (error.response?.status === 401 || error.response?.status === 404) {
+        setErrorMessage('Invalid Username or Password.');
+      } else if (error.response?.status === 409) {
+        setErrorMessage('Too many failed attempts. Please try again later.');
+      } else {
+        setErrorMessage('An error occurred. Please try again later.');
       }
-
-      navigate(0);
     },
   });
 
@@ -52,5 +66,5 @@ export const useLoginForm = () => {
     sendLoginRequest(payload);
   };
 
-  return { form, onSubmit: form.handleSubmit(onSubmit), isPending };
+  return { form, onSubmit: form.handleSubmit(onSubmit), isPending, errorMessage };
 };

frontend/src/routes/login/login-form.tsx

@@ -15,7 +15,7 @@ import { ROUTES } from '@/lib/routes';
 import { useLoginForm } from './logic';
 
 export const LoginForm = () => {
-  const { form, onSubmit, isPending } = useLoginForm();
+  const { form, onSubmit, isPending, errorMessage } = useLoginForm();
 
   return (
     <Card className='bg-primary-foreground border-border mx-auto flex size-full max-w-sm flex-col justify-center md:ml-auto md:mr-8 md:max-h-[600px]'>
@@ -61,6 +61,7 @@ export const LoginForm = () => {
                 </FormItem>
               )}
             />
+            {errorMessage && <p className='mt text-center text-sm text-red-500'>{errorMessage}</p>}
             <Button className='w-full' type='submit'>
               Login
             </Button>

frontend/src/routes/match/logic.ts

@@ -29,8 +29,8 @@ export const loader =
   };
 
 const formSchema = z.object({
-  selectedTopics: z.string().min(1, 'Topic cannot be empty').array(),
-  difficulty: z.string().min(1, 'Difficulty cannot be empty'),
+  selectedTopics: z.array(z.string()).min(1, 'Please select at least one topic'),
+  difficulty: z.string().min(1, 'Please select a difficulty'),
 });
 
 export type IRequestMatchFormSchema = z.infer<typeof formSchema>;
@@ -61,8 +61,6 @@ export const useRequestMatchForm = () => {
         setSocketPort(data.socketPort);
         return;
       }
-
-      console.error(`[MatchService::match::request]: Unexpected response: ${JSON.stringify(data)}`);
     },
   });
 

frontend/src/routes/match/waiting-room/waiting.tsx

@@ -174,7 +174,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
       <div className='flex flex-col items-center justify-center'>
         {uiState.icon}
         {uiState.description.startsWith('RoomId') ? (
-          <p className='flex flex-col gap-1'>
+          <div className='flex flex-col gap-1'>
             <div className='flex flex-col gap-0'>
               <label className='text-lg'>Room Id:</label>
               <span className='text-md max-w-[400px] truncate text-balance font-mono'>
@@ -187,7 +187,7 @@ export const WaitingRoom = ({ socketPort, setIsModalOpen }: IWaitingRoomProps) =
                 {uiState.description.split('\nQuestionId: ')[1]}
               </span>
             </div>
-          </p>
+          </div>
         ) : (
           <p className='mt-4 whitespace-pre-wrap text-lg'>{uiState.description}</p>
         )}

frontend/src/routes/signup/logic.ts

@@ -1,5 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
@@ -49,6 +51,7 @@ type ISignupFormSchema = z.infer<typeof signUpSchema>;
 
 export const useSignupForm = () => {
   const navigate = useNavigate();
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const form = useForm<ISignupFormSchema>({
     resolver: zodResolver(signUpSchema),
@@ -71,9 +74,25 @@ export const useSignupForm = () => {
     mutationFn: signUp,
     onSuccess: (_response, _params, _context) => {
       form.reset();
+      setErrorMessage(null);
+      const userID = _response?.data?.id;
+
+      if (userID) {
+        // TODO: Revalidate with is-authed User Svc EP and put as user
+        // details provider on each route request
+        localStorage.setItem('cachedUserID', userID);
+      }
+
       // TODO: Add email validation page OR sign user in
       navigate('/');
     },
+    onError: (error: AxiosError) => {
+      if (error.response?.status === 409) {
+        setErrorMessage('User with this username or email already exists.');
+      } else {
+        setErrorMessage('An error occurred. Please try again later.');
+      }
+    },
   });
 
   const onSubmit = (formData: ISignupFormSchema) => {
@@ -90,5 +109,5 @@ export const useSignupForm = () => {
     sendSignUpRequest(payload);
   };
 
-  return { form, onSubmit: form.handleSubmit(onSubmit), status, isPending };
+  return { form, onSubmit: form.handleSubmit(onSubmit), status, isPending, errorMessage };
 };

frontend/src/routes/signup/signup-form.tsx

@@ -14,7 +14,7 @@ import { ROUTES } from '@/lib/routes';
 import { useSignupForm } from './logic';
 
 export const SignUpForm = () => {
-  const { form, onSubmit, isPending: isDisabled } = useSignupForm();
+  const { form, onSubmit, isPending: isDisabled, errorMessage } = useSignupForm();
   return (
     <Card className='bg-primary-foreground border-border flex  max-w-sm flex-col justify-center border'>
       <CardHeader className='flex items-center'>
@@ -118,6 +118,9 @@ export const SignUpForm = () => {
                 </FormItem>
               )}
             />
+            {errorMessage && (
+              <p className='mt-2 text-center text-sm text-red-500'>{errorMessage}</p>
+            )}
             <Button type='submit' disabled={isDisabled} className='mt-4 w-full'>
               Sign Up
             </Button>

frontend/src/services/match-service.ts

@@ -28,7 +28,7 @@ export const requestMatch = (
     })
     .catch((error) => {
       console.error('Request failed:', error);
-      return null;
+      throw error;
     });
 };