From 46e01d6580d554e994c63cc756091e84f4e0024e Mon Sep 17 00:00:00 2001
From: Kinzi <100537572+Kinzi-c@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:05:49 +1200
Subject: [PATCH 1/3] add login logic buttons for testing purpose

---
 .../app/components/AuthForms/LoginForm.tsx    | 24 +++++++++++++++++++
 web/src/app/pages/Login.page.tsx              | 24 +------------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/web/src/app/components/AuthForms/LoginForm.tsx b/web/src/app/components/AuthForms/LoginForm.tsx
index a7e5166..827652b 100644
--- a/web/src/app/components/AuthForms/LoginForm.tsx
+++ b/web/src/app/components/AuthForms/LoginForm.tsx
@@ -1,8 +1,32 @@
 import { Flex, TextInput, PasswordInput, Checkbox, Button, Title, Text } from '@mantine/core';
 import classes from './authform.module.css';
 import { NavLink } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { setUserType } from '../../features/user/userSlice';
+import { toast } from 'react-toastify';
 
 export function LoginForm() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const handleLoginAs = (userType: 'student' | 'sponsor' | 'alumni' | 'admin') => {
+    // Simulate successful login (to be replaced with the actual authentication logic)
+    const mockToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
+    localStorage.setItem('accessToken', mockToken);
+    // If authentication is successful: Update Redux store with userType
+    dispatch(setUserType(userType));
+    // Redirect to the appropriate profile page based on userType
+    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 });
+  };
+
   return (
     <Flex
       gap="xl"
diff --git a/web/src/app/pages/Login.page.tsx b/web/src/app/pages/Login.page.tsx
index 1b1958e..2ad9ac8 100644
--- a/web/src/app/pages/Login.page.tsx
+++ b/web/src/app/pages/Login.page.tsx
@@ -1,33 +1,11 @@
-import { useNavigate } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
-import { setUserType } from '../features/user/userSlice';
-import { toast } from 'react-toastify';
 import { LoginForm } from '../components/AuthForms/LoginForm';
 import { LoginSideImage } from '../components/LoginSideImage/LoginSideImage';
-import { Grid, GridCol } from '@mantine/core';
+import { Grid } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 
 export function Login() {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
-  const handleLoginAs = (userType: 'student' | 'sponsor' | 'alumni' | 'admin') => {
-    // Simulate successful login (to be replaced with the actual authentication logic)
-    const mockToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
-    localStorage.setItem('accessToken', mockToken);
-    // If authentication is successful: Update Redux store with userType
-    dispatch(setUserType(userType));
-    // Redirect to the appropriate profile page based on userType
-    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 });
-  };
   return (
     <Grid>
       {isSmallScreen ? (

From b71526ef5dc6dc2ffd883e6c0f95682eb6b5a2a3 Mon Sep 17 00:00:00 2001
From: Kinzi <100537572+Kinzi-c@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:21:08 +1200
Subject: [PATCH 2/3] Add different login buttons for testing purposes

---
 web/src/app/components/AuthForms/LoginForm.tsx | 15 ++++++++++++++-
 web/src/app/components/Navbar/Navbar.tsx       |  7 +++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/src/app/components/AuthForms/LoginForm.tsx b/web/src/app/components/AuthForms/LoginForm.tsx
index 827652b..c97501f 100644
--- a/web/src/app/components/AuthForms/LoginForm.tsx
+++ b/web/src/app/components/AuthForms/LoginForm.tsx
@@ -46,7 +46,20 @@ export function LoginForm() {
         <Button fullWidth mt="xl" mb="md" size="lg">
           Login
         </Button>
-
+        <Flex justify="center" gap="md" mt="md" mr="md">
+          <Button variant="filled" color="green" onClick={() => handleLoginAs('student')}>
+            Login as Student
+          </Button>
+          <Button variant="filled" color="blue" onClick={() => handleLoginAs('sponsor')}>
+            Login as Sponsor
+          </Button>
+          <Button variant="filled" color="violet" onClick={() => handleLoginAs('alumni')}>
+            Login as Alumni
+          </Button>
+          <Button variant="filled" color="red" onClick={() => handleLoginAs('admin')}>
+            Login as Admin
+          </Button>
+        </Flex>
         <Text ta="center" mt="xl">
           Don&apos;t have an account?{' '}
           <NavLink to="/" className={classes.link}>
diff --git a/web/src/app/components/Navbar/Navbar.tsx b/web/src/app/components/Navbar/Navbar.tsx
index cac9544..10663d5 100644
--- a/web/src/app/components/Navbar/Navbar.tsx
+++ b/web/src/app/components/Navbar/Navbar.tsx
@@ -74,14 +74,17 @@ function Navbar() {
   const [opened, { toggle, open, close }] = useDisclosure();
   // Use a media query to determine small screen size for the collapsible menu
   const [isMobile, setIsMobile] = useState(false);
+
   useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth <= 768);
     };
     window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
 
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   return (
     <>
       <Flex

From faf206443c6bf959ac28f0781f824b0dfe18156b Mon Sep 17 00:00:00 2001
From: Kinzi <100537572+Kinzi-c@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:24:10 +1200
Subject: [PATCH 3/3] Make Navbar sticky

---
 web/src/app/components/AuthForms/LoginForm.tsx  | 8 ++++----
 web/src/app/components/Navbar/Navbar.module.css | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/app/components/AuthForms/LoginForm.tsx b/web/src/app/components/AuthForms/LoginForm.tsx
index c97501f..b5631cd 100644
--- a/web/src/app/components/AuthForms/LoginForm.tsx
+++ b/web/src/app/components/AuthForms/LoginForm.tsx
@@ -48,16 +48,16 @@ export function LoginForm() {
         </Button>
         <Flex justify="center" gap="md" mt="md" mr="md">
           <Button variant="filled" color="green" onClick={() => handleLoginAs('student')}>
-            Login as Student
+            Student
           </Button>
           <Button variant="filled" color="blue" onClick={() => handleLoginAs('sponsor')}>
-            Login as Sponsor
+            Sponsor
           </Button>
           <Button variant="filled" color="violet" onClick={() => handleLoginAs('alumni')}>
-            Login as Alumni
+            Alumni
           </Button>
           <Button variant="filled" color="red" onClick={() => handleLoginAs('admin')}>
-            Login as Admin
+            Admin
           </Button>
         </Flex>
         <Text ta="center" mt="xl">
diff --git a/web/src/app/components/Navbar/Navbar.module.css b/web/src/app/components/Navbar/Navbar.module.css
index 658d8e0..6121cc4 100644
--- a/web/src/app/components/Navbar/Navbar.module.css
+++ b/web/src/app/components/Navbar/Navbar.module.css
@@ -1,5 +1,5 @@
 .Navbar {
-  position: absolute;
+  position: fixed;
   z-index: 2;
   width: 100vw;
   background-color: rgba(000, 000, 000, 0.5);