Adds an AdminPanel with currently active registration tokens.

frontend/src/components/AdminPanel.jsx

@@ -0,0 +1,178 @@
+import {useState, useEffect} from 'react';
+import Checkbox from '@mui/material/Checkbox';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { DateTimePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+import moment from 'moment';
+import {get_registration_tokens, add_registration_token, delete_registration_token, unpack_api_result} from '../api/Api';
+
+function AdminPanel(props) {
+
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [registrationTokens, setRegistrationTokens] = useState([]);
+  const [expires, setExpires] = useState(null);
+  const [isSingleUse, setIsSingleUse] = useState(false);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  };
+
+  const refetchTokens = () => {
+    if(props.user !== null) {
+      unpack_api_result(get_registration_tokens(props.user.jwt), props.setFlash)
+        .then(result => setRegistrationTokens(result.registration_tokens));
+    }
+  }
+
+  const deleteToken = (id) => {
+    if(props.user !== null) {
+      unpack_api_result(delete_registration_token(props.user.jwt, id), props.setFlash)
+        .then(() => refetchTokens())
+    }
+  }
+
+  const handleAddToken = () => {
+    let input = {
+      single_use: isSingleUse,
+      expires: expires,
+    }
+
+    if(props.user !== null) {
+      unpack_api_result(add_registration_token(props.user.jwt, input), props.setFlash)
+        .then(() => refetchTokens())
+    }
+  }
+
+  useEffect(() => {
+    refetchTokens()
+  }, [])
+
+  let columns = [
+    {
+      id: 'single_use', 
+      label: 'Single Use',
+      minWidth: 30,
+      format: value => (value ? "Yes" : "No")
+    },
+    { id: 'token', label: 'Token', minwidht: 300},
+    {
+      id: 'expires',
+      label: 'Expires',
+      minwidth: 200,
+      format: value => (moment(value).format('LL HH:mm'))
+    },
+    {
+      id: 'delete_button',
+      label: '',
+      minwidth: 20,
+    }
+  ];
+
+  return (
+    <>
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <div className="Add-GameNight">
+          <form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
+            <DateTimePicker
+              label="Gamenight date and time"
+              variant="standard"
+              value={expires}
+              onChange={setExpires}
+              inputFormat="dd-MM-yyyy HH:mm"
+              renderInput={(params) => <TextField {...params} />}/> 
+            
+            <Checkbox 
+              label="Single use"
+              value={isSingleUse}
+              onChange={(e) => setIsSingleUse(e.target.checked)}/>
+
+            <Button 
+              variant="outlined"
+              color="success"
+              onClick={handleAddToken}>
+              Create
+            </Button>
+          </form>
+        </div>
+      </LocalizationProvider>
+
+      <TableContainer sx={{ maxHeight: 440 }}>
+        <Table stickyHeader>
+          <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <TableCell
+                  key={column.id}
+                  align={column.align}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {registrationTokens
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map((row) => {
+                return (
+                  <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
+                    {columns.map((column) => {
+                      const value = row[column.id];
+                      return (
+                        <TableCell key={column.id} align={column.align}>
+                          {column.format
+                            ? column.format(value)
+                            : value}
+                        </TableCell>
+                      );
+                    })}
+                    <TableCell>
+                      <IconButton 
+                        edge="end"
+                        color="error"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          deleteToken(row.id)
+                        }}>
+          <DeleteIcon />
+        </IconButton>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {registrationTokens.length > rowsPerPage && <TablePagination
+        rowsPerPageOptions={[10, 25, 100]}
+        component="div"
+        count={registrationTokens.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}/>
+      }
+    </>
+  );
+}
+
+export default AdminPanel

frontend/src/components/MenuBar.jsx

@@ -7,6 +7,29 @@ import IconButton from '@mui/material/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 
 function MenuBar(props) {
+
+  let adminPanelButton = null;
+  if (props.user?.role === 'Admin') {
+    adminPanelButton = (
+      <Button 
+        color="inherit" 
+        onClick={props.onAdmin}>
+          AdminPanel
+      </Button>
+    );
+  }
+
+  let userButton = null;
+  if (props.user != null) {
+    userButton = (
+      <Button 
+        color="inherit" 
+        onClick={props.onUser}>
+          {props.user.username}
+      </Button>
+    );
+  }
+
   return (
     <AppBar position="static">
       <Toolbar>
@@ -15,16 +38,19 @@ function MenuBar(props) {
           edge="start"
           color="inherit"
           aria-label="menu"
-          sx={{ mr: 2 }}
-        >
+          sx={{ mr: 2 }}>
           <MenuIcon />
         </IconButton>
         <Typography
+          style={{cursor:'pointer'}}
           variant="h6"
           component="div"
-          sx={{ flexGrow: 1 }}>
+          sx={{ flexGrow: 1 }}
+          onClick={props.onReset}>
             Gamenight!
         </Typography>
+        {userButton !== null && userButton}
+        {adminPanelButton !== null && adminPanelButton}
         <Button 
           color="inherit" 
           onClick={props.onLogout}>