Init login page

src/App.tsx

@@ -5,14 +5,15 @@ import {  BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-
 import { EntryPage } from './components/entry-page/EntryPage';
 import { RegisterForm } from './components/register/RegisterForm';
 import { LoginForm } from './components/LoginForm';
+import { Form } from './components/Form';
 
 function App() {
 	return (
 		<Router>
 			<Routes>
-				<Route path='register/:buildingId' element={<EntryPage children={<RegisterForm/>}/>} />
+				<Route path='register/:buildingId' element={<EntryPage children={<Form children={<RegisterForm />} title="Create Account"/>}/>} />
 				<Route path='register/error' element={<EntryPage children={<div>Invalid invitational link - screen to be implemented</div>} />} />
-				<Route path='login' element={<EntryPage children={<LoginForm />}/>}/>
+				<Route path='login' element={<EntryPage children={<Form children={<LoginForm/>} title="Login" />}/>}/>
 				<Route path='*' element={<Navigate replace to="login"/>} /> 
 			</Routes>
 		</Router>

src/components/Form.tsx

+import { Box, Typography } from "@mui/material";
+import { ReactNode } from "react";
+
+const classes = {
+    wrapper: { 
+        height: '100%',
+        display: 'flex', 
+        flexDirection: 'column',
+        justifyContent: 'center',
+        gap: '20px' 
+    },
+    title: { 
+        fontFamily: 'Inter', 
+        fontWeight: 'bold',
+    }
+} as const;
+
+export const Form = ({ children, title }: { children?: ReactNode, title: string }) => {
+    return (
+        <Box style={classes.wrapper}>
+            <Typography sx={classes.title} variant='h4'>{title}</Typography>
+            {children}
+        </Box>
+    );
+}
\ No newline at end of file

src/components/LoginForm.tsx

+import { Button, TextField } from "@mui/material"
+import { useState } from "react";
+import { LoginInfo } from "../internal-types";
+
+const classes = {
+    textField: {
+        '& label.Mui-focused': {
+            color: 'rgb(30, 41, 60)'
+        },
+        '& .MuiOutlinedInput-root': {
+            '& input': {
+                zIndex: '5'
+            },
+            '& fieldset': {
+                borderColor: 'rgb(203, 213, 224)',
+                backgroundColor: 'white'
+            },
+            '&:hover fieldset': {
+                borderColor: 'rgb(203, 213, 224)',
+            },
+            '&.Mui-focused': {
+                '& fieldset': {
+                    borderColor: 'rgb(203, 213, 224)'
+                }
+            },
+        }
+    },
+    select: {
+        '& label.Mui-focused': {
+            color: 'red'
+        }
+        ,
+        '& fieldset': {
+            borderColor: 'rgb(203, 213, 224)',
+            backgroundColor: 'white',
+            zIndex: 0
+        },
+        '& svg': {
+            zIndex: 2
+        },
+        '& div': {
+            zIndex: 3
+        },
+
+    },
+    loginButton: {
+        alignSelf: 'flex-end',
+        '&.MuiButton-root': {
+            backgroundColor: 'rgb(19, 71, 175)',
+            borderRadius: 40,
+            padding: '10px',
+            paddingInline: '25px'
+        }
+    }
+} as const;
+
 export const LoginForm = () => {
-    return (<div>
-        Hello from LoginForm
-    </div>)
+
+    const [loginInfo, setLoginInfo] = useState<LoginInfo>({username: '', password: ''});
+
+    return (
+        <>
+            <TextField
+                variant="outlined"
+                size='small'
+                label="Username"
+                sx={classes.textField}
+                value={loginInfo.username}
+                onChange={(e) => {
+                    setLoginInfo({...loginInfo, username: e.target.value})
+                }}
+            />
+            <TextField
+                variant="outlined"
+                size='small'
+                type="password"
+                label="Password"
+                sx={classes.textField}
+                value={loginInfo.password}
+                onChange={(e) => {
+                    setLoginInfo({...loginInfo, password: e.target.value})
+                }}
+            />
+            <Button sx={classes.loginButton} variant='contained'>Login</Button>
+        </>)
 }
\ No newline at end of file

src/components/register/RegisterForm.tsx

@@ -85,8 +85,7 @@ export const RegisterForm = (): JSX.Element => {
         <>
             {invalidUrl && <Navigate replace to='../register/error' />}
             {buildingUnits &&
-                <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-                    <Typography sx={{ fontFamily: 'Inter', fontWeight: 'bold' }} variant='h4'>Create Account</Typography>
+                <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
                     <Box sx={{ display: 'flex', gap: '20px' }}>
                         <TextField
                             hiddenLabel
@@ -161,7 +160,7 @@ export const RegisterForm = (): JSX.Element => {
                             multiple
                             onChange={(e) => {
                                 let units: string[] = typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value;
-                                setRegisterInfo({...registerInfo, units})
+                                setRegisterInfo({ ...registerInfo, units })
                             }}
                         >
                             {buildingUnits.map((unit: any, index) => <MenuItem value={unit.address} key={index}>{unit.address}</MenuItem>)}
@@ -169,7 +168,7 @@ export const RegisterForm = (): JSX.Element => {
                     </FormControl>
 
                     <Button sx={classes.registerButton} variant='contained'>Register</Button>
-                </div>
+                </Box>
             }
         </>);
 };
\ No newline at end of file

src/internal-types.ts

@@ -7,3 +7,8 @@ export type RegistrationInfo = {
     mobile: string,
     units: string[]
 }
+
+export type LoginInfo = {
+    username: string,
+    password: string
+}
\ No newline at end of file