Josef/admin log in page

web/src/app/Router.tsx

@@ -18,6 +18,7 @@ import { SponsorSignUp } from './pages/Sponsor/SponsorSignup.page';
 import { AlumniSignUp } from './pages/Alumni/AlumniSignup.page';
 import { AdminSignUp } from './pages/Admin/AdminSignup.page';
 import SignupSwitcher from './pages/General/SignupSwitcher.page';
+import { AdminLogin } from './pages/Admin/AdminLogin.page';
 
 // Protected route is currently commented out. To be enabled once the Authentication Logic has been implemented
 const router = createBrowserRouter([
@@ -37,6 +38,14 @@ const router = createBrowserRouter([
       </AppLayout>
     ),
   },
+  {
+    path: '/fsae-administrator-login',
+    element: (
+      <AppLayout>
+        <AdminLogin />
+      </AppLayout>
+    ),
+  },
   {
     path: '/signup',
     element: (

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

@@ -0,0 +1,76 @@
+import {
+  Flex,
+  TextInput,
+  PasswordInput,
+  Checkbox,
+  Button,
+  Title,
+  useMantineTheme,
+} from '@mantine/core';
+import styles 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 AdminLoginForm() {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const theme = useMantineTheme();
+  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 });
+  };
+
+  const handleLogin = () => {
+    console.log('Login button clicked');
+  };
+
+  return (
+    <Flex
+      gap="xl"
+      justify="center"
+      align="center"
+      direction="column"
+      className={styles.loginFormContainer}
+    >
+      <form className={styles.form}>
+        <Title order={3} ta="center" mt="md" mb={50}>
+          Login
+        </Title>
+
+        <TextInput placeholder="Enter email" size="lg" mb="lg" />
+        <PasswordInput placeholder="Enter password" mt="xl" size="lg" />
+        <Checkbox label="Remember Me" mt="xl" size="md" />
+        <Button
+          fullWidth
+          mt="xl"
+          mb="md"
+          size="lg"
+          color={theme.colors.customPapayaOrange[1]}
+          onClick={handleLogin}
+        >
+          Login
+        </Button>
+        <Flex justify="center" gap="md" mt="md" mr="md">
+          <Button variant="filled" color="red" onClick={() => handleLoginAs('admin')}>
+            Temp Admin Login
+          </Button>
+        </Flex>
+      </form>
+    </Flex>
+  );
+}

web/src/app/components/Tabs/EmailTab.tsx

@@ -1,6 +1,6 @@
-import { Stack, TextInput, PasswordInput, Flex } from '@mantine/core';
+import { Stack, TextInput, Flex } from '@mantine/core';
 import styles from '../Tabs/Settings.module.css';
-import { useState } from 'react';
+import { useState, FC } from 'react';
 
 interface EmailTabProp {
   email: string;
@@ -9,7 +9,6 @@ interface EmailTabProp {
 const EmailTab: FC<EmailTabProp> = ({ email }) => {
   const [isPortrait, setIsPortrait] = useState(window.innerHeight > window.innerWidth);
 
-
   return (
     <Flex direction="column" align="center" justify="center">
       <Stack className={styles.container} w="100%" justify="center" align="center">

web/src/app/components/Tabs/PasswordTab.tsx

@@ -1,6 +1,6 @@
-import { Stack, TextInput, PasswordInput, Flex } from '@mantine/core';
+import { Stack, PasswordInput, Flex } from '@mantine/core';
 import styles from '../Tabs/Settings.module.css';
-import { useState } from 'react';
+import { useState, FC } from 'react';
 
 interface PasswordTabProp {
   password: string;

web/src/app/pages/Admin/AdminLogin.page.tsx

@@ -0,0 +1,27 @@
+import { AdminLoginForm } from '@/app/components/AuthForms/AdminLoginForm';
+import { LoginSideImage } from '../../components/LoginSideImage/LoginSideImage';
+import { Grid } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+export function AdminLogin() {
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  return (
+    <Grid>
+      {isSmallScreen ? (
+        <Grid.Col span={12}>
+          <AdminLoginForm />
+        </Grid.Col>
+      ) : (
+        <>
+          <Grid.Col span={6}>
+            <LoginSideImage />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <AdminLoginForm />
+          </Grid.Col>
+        </>
+      )}
+    </Grid>
+  );
+}