Merge branch 'LC/login-wiring' into 'main'

Login now calls backend

See merge request ma03081/COM3014!13

client/src/components/Login/Login.scss

@@ -9,4 +9,4 @@
 .login-card {
   width: 20vw;
   min-width: 350px;
-}
+}
\ No newline at end of file

client/src/components/Login/Login.tsx

 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
+import { AxiosError } from 'axios';
 import { useAuth } from '../../hooks/useAuth';
+import { loginUser } from '../../services/Login/Login';
 import './Login.scss';
 
-interface ILogin {
+export interface ILoginForm {
   email: string;
   password: string;
 }
 
 export function Login() {
-  const [error, setError] = useState('');
-  const { giveAuth } = useAuth();
+  const { giveAuth, updateUser } = useAuth();
   const navigate = useNavigate();
-  const { register, handleSubmit } = useForm<ILogin>({mode: 'onChange'});
+  const [error, setError] = useState('');
+  const { register, handleSubmit } = useForm<ILoginForm>({mode: 'onChange'});
+
+  const onSubmit = async (formValue: ILoginForm) => {
+    setError('');
+
+    try {
+      const result = await loginUser(formValue);
+      giveAuth();
+      updateUser(result.data);
+      navigate('/customer-dashboard');
+    } catch (error) {
+      const errorMessage = (error as AxiosError).response?.data;
 
-  const onSubmit = (formValue: ILogin) => {
-    setError('TODO: remove me once actual errors are implemented');
-    console.log('ready to make login api call', formValue);
-    giveAuth();
-    navigate('/');
+      if (typeof errorMessage == 'string') {
+        setError(errorMessage);
+      } else {
+        setError('An unexpected error has occurred');
+      }
+    }
   };
 
   return (
@@ -51,4 +65,4 @@ export function Login() {
   );  
 }
 
-export default Login;
+export default Login;
\ No newline at end of file

client/src/components/Register/Register.tsx

@@ -39,7 +39,13 @@ export function Register() {
       updateUser(result.data);
       navigate('/customer-dashboard');
     } catch (error) {
-      setError(((error as AxiosError).response?.data ?? 'unexpected error') as string);
+      const errorMessage = (error as AxiosError).response?.data;
+
+      if (typeof errorMessage == 'string') {
+        setError(errorMessage);
+      } else {
+        setError('An unexpected error has occurred');
+      }
     }
   };
 

client/src/services/Login/Login.ts

+import { AxiosResponse } from 'axios';
+import Api from '../../helpers/Api';
+import { ILoginForm } from '../../components/Login/Login';
+import { IUser } from '../../providers/AuthProvider';
+
+export async function loginUser(form: ILoginForm): Promise<AxiosResponse<IUser>> {
+  return Api.post('User/login', {
+    Email: form.email,
+    Password: form.password
+  });
+}