felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Visual updates

This commit is contained in:
Felix Albrigtsen 2022-04-24 14:48:38 +02:00
parent 36019f2963
commit 5b44e46d31
3 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/client/src/ProfilePage.js
View File

@ -1,32 +1,28 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Appbar from "./components/AsuraBar"; import Appbar from "./components/AsuraBar";
import LoginPage from "./LoginPage";
import ErrorSnackbar from "./components/ErrorSnackbar"; import ErrorSnackbar from "./components/ErrorSnackbar";
import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material'; import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material';
export default function ProfilePage(props) { export default function ProfilePage(props) {
let user = props.user; let user = props.user;
if (!props.user.isLoggedIn) { return <LoginPage user={props.user} />; }
return (<> return (<>
<Appbar user={props.user} pageTitle="Profile" /> <Appbar user={props.user} pageTitle="Profile" />
<Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center"> <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">
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center"> <div align="center">
<div align="center"> <h2><b>Your profile</b></h2>
<h2><b>Your profile</b></h2> <Box>
<Box> <h3><b>Name: </b> {user.name}</h3>
<h3><b>Name: </b> {user.name}</h3> <h3><b>Email: </b> {user.email}</h3>
<h3><b>Email: </b> {user.email}</h3> <h3><b>Role: </b> {user.isManager ? "Manager" : "Administrator"}</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> </Box>
</>} </div>
</Paper>
</Container> </Container>
</>) </>)
} }

2
src/client/src/components/AsuraBar.js
View File

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