Merge pull request #74 from UoaWDCC/don/WFJB2-108

Don/WFJB2-108: Route login/signup

web/src/api/login.ts

@@ -1,47 +1,41 @@
-import {apiInstance} from "@/api/ApiInstance";
-
+import { apiInstance } from '@/api/ApiInstance';
 export async function login(email: string, password: string) {
   let userRole;
   try {
-    const res = await apiInstance.get(`user/${email}/role`)
-    userRole = res.data
+    const res = await apiInstance.get(`user/${email}/role`);
+    userRole = res.data;
 
-    if (userRole == null) {
-      throw Error("Invalid credentials");
+    if (!userRole) {
+      throw Error('Invalid credentials');
     }
   } catch (e) {
-    throw Error("Invalid credentials")
+    throw Error('Invalid credentials');
   }
 
   let loginUrl;
-  console.log(userRole)
   if (userRole === 'admin') {
-    loginUrl = 'login-admin'
+    loginUrl = 'login-admin';
   } else if (userRole === 'alumni') {
-    loginUrl = 'login-alumni'
+    loginUrl = 'login-alumni';
   } else if (userRole === 'member') {
-    loginUrl = 'login-member'
+    loginUrl = 'login-member';
   } else if (userRole === 'sponsor') {
-    loginUrl = 'login-sponsor'
+    loginUrl = 'login-sponsor';
   } else {
-    throw Error("Unknown login type")
+    throw Error('Unknown login type');
   }
 
   try {
     const res = await apiInstance.post(loginUrl, {
-      "email": email,
-      "password": password
-    })
-    const {userId, token} = res.data;
-    localStorage.setItem('accessToken', token)
-    console.log(`Successfully logged in as UserID ${userId}`)
+      email,
+      password,
+    });
+    const { userId, token } = res.data;
+    localStorage.setItem('accessToken', token);
+    console.log(`Successfully logged in as UserID ${userId}`);
 
-    // Todo: After successful login. Create endpoint to get whoami() and link that to redux state.
+    return { userType: userRole }; // Return userType
   } catch (e) {
-    throw Error("Invalid credentials")
+    throw Error('Invalid credentials');
   }
 }
-
-export async function logout() {
-  localStorage.removeItem('accessToken')
-}

web/src/app/components/AuthForms/LoginForm.tsx

@@ -4,39 +4,47 @@ import { NavLink } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { toast } from 'react-toastify';
-import {login} from "@/api/login";
-import {useState} from "react";
+import { login } from '@/api/login';
+import { useState } from 'react';
 
 export function LoginForm() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  // const handleLoginAs = (userType: 'student' | 'sponsor' | 'alumni' | 'admin') => {
-  //
-  //
-  //    // dispatch(setUserType(userType)); Todo: Move this to API folder
-  //   // const profilePath = {
-  //   //   student: '/profile/student',
-  //   //   sponsor: '/profile/sponsor',
-  //   //   alumni: '/profile/alumni',
-  //   //   admin: '/profile/admin',
-  //   // }[userType];
-  //   // toast.success('Logged in as ' + userType);
-  //   // navigate(profilePath, { replace: true });
-  // };
 
   async function onLogin() {
-    await login(email, password)
-      .then((response) => {
-        toast.success('Login Successful');
-        // Todo: Do something afterwards.
-        // handleLoginAs(response.data.userType);
-      }).catch((error) => {
-        console.log(error)
-        toast.error(error.toString());
-      })
+    try {
+      const { userType } = await login(email, password);
+      toast.success('Login Successful');
+
+      // Redirect based on user type
+      switch (userType) {
+        case 'admin':
+          navigate('/profile/admin', { replace: true });
+          break;
+        case 'alumni':
+          navigate('/profile/alumni', { replace: true });
+          break;
+        case 'member':
+          navigate('/profile/student', { replace: true });
+          break;
+        case 'sponsor':
+          navigate('/profile/sponsor', { replace: true });
+          break;
+        default:
+          navigate('/'); // Default fallback
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+        console.error(error);
+      } else {
+        toast.error('An unknown error occurred');
+        console.error('Unknown error:', error);
+      }
+    }
   }
 
   return (
@@ -52,8 +60,20 @@ export function LoginForm() {
           Login
         </Title>
 
-        <TextInput placeholder="Enter email" size="lg" mb="lg" value={email} onChange={(event) => setEmail(event.target.value)}/>
-        <PasswordInput placeholder="Enter password" mt="xl" size="lg" value={password} onChange={(event) => setPassword(event.target.value)}/>
+        <TextInput
+          placeholder="Enter email"
+          size="lg"
+          mb="lg"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+        <PasswordInput
+          placeholder="Enter password"
+          mt="xl"
+          size="lg"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+        />
         <Checkbox label="Remember Me" mt="xl" size="md" />
         <Button fullWidth mt="xl" mb="md" size="lg" onClick={onLogin}>
           Login

web/src/app/components/AuthForms/SignupForm.tsx

@@ -14,6 +14,7 @@ import { NavLink } from 'react-router-dom';
 import { Role } from '../../type/role';
 import {toast} from "react-toastify";
 import {createFSAEUserDto, register_alumni, register_member, register_sponsor} from "@/api/register";
+import { useNavigate } from 'react-router-dom';
 
 interface Field {
   label: string;
@@ -108,6 +109,7 @@ const FormComponent: React.FC<FormComponentProps> = ({ fields, onSubmit }) => (
 );
 
 const SignupForm = ({ role }: { role: Role }) => {
+  const navigate = useNavigate();
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const formData = new FormData(event.target as HTMLFormElement);
@@ -135,6 +137,7 @@ const SignupForm = ({ role }: { role: Role }) => {
     } else {
       toast.error('Registering Unknown Role');
     }
+    navigate('/', { replace: true });
   };
 
   return (

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+