Previous commit extended

src/client/src/AdminsOverview.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
 import Appbar from "./components/AsuraBar";
 import ErrorSnackbar from "./components/ErrorSnackbar";
-
+import LoginPage from "./LoginPage";
 import {Button, Box, TextField, Stack, InputLabel, Paper, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Typography} from '@mui/material';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -124,18 +124,29 @@ export default function Users(props) {
                 setUsers(data.data);
             })
             .catch((err) => showError(err));
-        } 
-        React.useEffect(() => {
-            getUsers()
-        }, []);
+    } 
+    React.useEffect(() => {
+        getUsers()
+    }, []);
 
-        return (
-            <>
+    if (!props.user.isLoggedIn) { return <LoginPage user={props.user} />; }
+    if (!props.user.isManager) {
+        return (<>
             <Appbar user={props.user} pageTitle="Admins" />
-            <div className="admins">
-                <AdminCreator />
-                <UserList users={users}/>
+            <Paper sx={{minHeight: "30vh", width:"90vw", margin:"10px auto", padding: "25px"}} component={Stack} direction="column" justifycontent="center">
+            <div align="center">
+                <Typography variant="h4">You do not have permission to view this page. If you believe this is incorrect, please contact a manager.</Typography>
             </div>
-            </>
-        );
+            </Paper>
+        </>);
+    }
+    return (
+        <>
+        <Appbar user={props.user} pageTitle="Admins" />
+        <div className="admins">
+            <AdminCreator />
+            <UserList users={users}/>
+        </div>
+        </>
+    );
 }

src/client/src/LoginPage.js

@@ -15,11 +15,11 @@ export default function LoginPage(props) {
     return (
         <>
             <Appbar user={props.user} pageTitle="Login" /> 
-            <Paper sx={{width: "70vw", margin: "1.5% auto"}} component={Stack} direction="column" justifyContent="center" alignItems="center">
-                <Typography variant="h4" component="h4">
-                    You must be logged in to access administrator features.
-                </Typography>
-                <Stack  direction="column" paddingTop={'0.5%'} alignItems={'center'}>
+            <Paper sx={{width: "70vw", margin: "1.5% auto", padding: "25px"}} component={Stack} direction="column" justifyContent="center" alignItems="center">
+                <Stack  direction="column" paddingTop={'0.5%'} alignItems={'center'} textAlign={"center"} >
+                    <Typography variant="h4" component="h4">
+                        You must be logged in to access administrator features.
+                    </Typography>
                     <a href={process.env.REACT_APP_LOGIN_URL}>
                         <img src="/btn_google_signing_dark.png" alt="Sign in with google" />
                     </a>

src/client/src/TournamentCreator.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import Appbar from "./components/AsuraBar";
 import ErrorSnackbar from "./components/ErrorSnackbar";
-
+import LoginPage from "./LoginPage";
 import { Button, TextField, Stack, InputLabel, Select, Container, Slider, Paper, Box, Grid, Typography } from '@mui/material';
 import DateTimePicker from '@mui/lab/DateTimePicker';
 import AdapterDateFns from '@mui/lab/AdapterDateFns';
@@ -168,6 +168,8 @@ export default function TournamentCreator(props) {
     setOpenError(true);
   }
 
+  if (!props.user.isLoggedIn) { return <LoginPage user={props.user} />; }
+
   return (
     <>
       <Appbar user={props.user} pageTitle="New tournament" /> 

src/client/src/TournamentMatches.js

@@ -9,7 +9,7 @@ function MatchHistory() {
   );
 }
 
-export default function TournamentMatches() {
+export default function TournamentMatches(props) {
   return (
     <>
       <Appbar user={props.user} />

src/client/src/components/AsuraBar.js

@@ -9,7 +9,7 @@ import LogoutIcon from '@mui/icons-material/Logout';
 import LoginIcon from '@mui/icons-material/Login';
 import logo from "./../Asura2222.png";
 
-function LoggedInMenu() {
+function LoggedInMenu(props) {
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -32,7 +32,9 @@ function LoggedInMenu() {
           <Link to="/" 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 && 
           <Link to="/admins" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<EditIcon />} >Admins</Button></MenuItem></Link>
+          }
       </Menu> 
     </> 
   );  
@@ -83,7 +85,7 @@ export default function Appbar(props) {
               </Grid>
               { props.pageTitle !== "Login" ?
                 <Grid item xs={2}>
-                  { props.user.isLogggedIn ? <LoggedInMenu /> : <NotLoggedInButton /> } 
+                  { props.user.isLoggedIn ? <LoggedInMenu user={props.user} /> : <NotLoggedInButton /> } 
                 </Grid> : 
                 <Grid item xs={2}>
                 </Grid>