Visual updates

src/client/src/ProfilePage.js

@@ -1,15 +1,18 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import Appbar from "./components/AsuraBar";
+import LoginPage from "./LoginPage";
 import ErrorSnackbar from "./components/ErrorSnackbar";
 import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material';
 
 export default function ProfilePage(props) {
     let user = props.user;
+
+    if (!props.user.isLoggedIn) { return <LoginPage user={props.user} />; }
+
     return (<>
         <Appbar user={props.user} pageTitle="Profile" />
         <Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
-            {user.isLoggedIn ? <>
             <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
                 <div align="center">
                 <h2><b>Your profile</b></h2>
@@ -17,16 +20,9 @@ export default function ProfilePage(props) {
                     <h3><b>Name: </b> {user.name}</h3>
                     <h3><b>Email: </b> {user.email}</h3>
                     <h3><b>Role: </b> {user.isManager ? "Manager" : "Administrator"}</h3>
-                        <h3><b>Picture: </b> <img src={user.imgURL} alt="Your profile"></img></h3>
                 </Box>
                 </div>
             </Paper>
-            </> : <>
-                <Box sx={{ padding: "20px", width: "90vw", height: "30vh", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center", alignContent: "center", flexGrow: 1}}>
-                    You are not logged in.
-                </Box>
-            </>}
-
         </Container>
     </>)
 }

src/client/src/components/AsuraBar.js

@@ -29,7 +29,7 @@ function LoggedInMenu(props) {
         <MenuIcon />
         </IconButton>
         <Menu anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{'aria-labelledby': 'basic-button',}} sx={{position:"absolute"}}>
-          <Link to="/" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<AccountCircleIcon />}>Profile</Button></MenuItem></Link>
+          <Link to="/profile" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<AccountCircleIcon />}>Profile</Button></MenuItem></Link>
           <Link to="/history" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<HistoryIcon />}>History</Button></MenuItem></Link>
           <Link to="/api/logout" style={{color:"black"}}><MenuItem onClick={logout}><Button endIcon={<LogoutIcon />} >Logout</Button></MenuItem></Link>
           { props.user.isManager &&