Feature f3

features.txt

@@ -1,8 +1,8 @@
 Frontend features:
 MERGED feature-f1: Boilerplate code for a React app (along with MUI integration)
 MERGED feature-f2: Routing paths and corresponding empty page components
-feature-f3: Basic authentication (create a global state for user role and render pages accordingly) 
-feature-f4: Login screen
+MERGED feature-f3: Basic authentication (create a global state for user role and render pages accordingly) 
+RESOLVED IN "f3" feature-f4: Login screen
 MERGED feature-f5: /students ,/students/{studentId}, /students/{studentId}/internships, /students/{studentId}/internships/{internshipType} pages
 DISCARDED feature-f6: /students -- add student functionality
 feature-f7: /internships -- add internship functionality

frontend/src/contexts/UserContext.js

@@ -0,0 +1,14 @@
+import { createContext, useState } from "react";
+
+export const UserContext = createContext();
+
+export function UserProvider({ children }) {
+  // Initialize state variables for the user's ID and role
+  const [user, setUser] = useState({ id: null, role: null });
+
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+}

frontend/src/index.js

@@ -2,10 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { UserProvider } from './contexts/UserContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <UserProvider>
+      <App />
+    </UserProvider>
   </React.StrictMode>
 );

frontend/src/pages/common_pages/home/HomePage.js

@@ -5,12 +5,14 @@ import InstructorHomePage from '../../instructor_pages/home/InstructorHomePage'
 import SecretaryHomePage from '../../secretary_pages/home/SecretaryHomePage'
 import StudentHomePage from '../../student_pages/home/StudentHomePage'
 import TAHomePage from '../../ta_pages/home/TAHomePage'
+import { useContext } from 'react'
+import { UserContext } from '../../../contexts/UserContext'
 
 export default function HomePage(){
     // TODO: determine role based on authentication
-    const role = "student";
+    const {user} = useContext(UserContext);
 
-    switch(role){
+    switch(user.role){
         case "admin":
             return <AdminHomePage/>;
         case "instructor":

frontend/src/pages/common_pages/login_page/LoginPage.js

@@ -1,14 +1,78 @@
-import { Container, Typography } from '@mui/material'
+import { 
+    TextField, 
+    Button, 
+    Select, 
+    MenuItem, 
+    FormControl, 
+    InputLabel, 
+    Box 
+  } from '@mui/material';
 
 // styles
 import './LoginPage.css'
+import { useNavigate} from 'react-router-dom';
+import { UserContext } from '../../../contexts/UserContext';
+import { useContext, useState } from 'react';
 
-export default function LoginPage(){
-    return(
-        <Container>
-            <Typography>
-                Login Page
-            </Typography>
-        </Container>
-    )
+
+export default function LoginPage() {
+    const navigate = useNavigate();
+
+    // Initialize state variables for ID, password, and role
+    const [id, setId] = useState('');
+    const [password, setPassword] = useState('');
+    const [role, setRole] = useState('student');
+
+    // Handle form submission
+    const handleSubmit = (event) => {
+      event.preventDefault();
+
+      // TODO: Validate ID and password
+      // TODO: Authenticate user with server
+      // TODO: Store user ID and role in context
+
+      // For now, just log the user in and set their ID and role in context
+      console.log(`Logged in as ${id} with role ${role}`);
+      setUser({ id, role });
+      navigate("/home")
+    };
+
+    // Get the setUser function from the context
+    const { setUser } = useContext(UserContext);
+
+    return (
+        <Box sx={{ maxWidth: 400, mx: 'auto', mt: 10, p: 2, bgcolor: 'background.paper', borderRadius: 2 }}>
+          <form onSubmit={handleSubmit}>
+            <TextField 
+              label="ID"
+              variant="outlined"
+              fullWidth
+              margin="normal"
+              value={id} 
+              onChange={(e) => setId(e.target.value)} 
+            />
+            <TextField 
+              label="Password"
+              variant="outlined"
+              fullWidth
+              margin="normal"
+              type="password"
+              value={password} 
+              onChange={(e) => setPassword(e.target.value)} 
+            />
+            <FormControl fullWidth margin="normal">
+              <InputLabel>Role</InputLabel>
+              <Select value={role} onChange={(e) => setRole(e.target.value)}>
+                <MenuItem value="student">Student</MenuItem>
+                <MenuItem value="admin">Admin</MenuItem>
+                <MenuItem value="instructor">Instructor</MenuItem>
+                <MenuItem value="secretary">Secretary</MenuItem>
+              </Select>
+            </FormControl>
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <Button variant="contained" type="submit">Login</Button>
+            </Box>
+          </form>
+        </Box>
+    );
 }