Adds an AdminPanel with currently active registration tokens.
This commit is contained in:
@@ -4,32 +4,56 @@ import MenuBar from './components/MenuBar';
|
||||
import Login from './components/Login';
|
||||
import Gamenights from './components/Gamenights';
|
||||
import Gamenight from './components/Gamenight';
|
||||
import AdminPanel from './components/AdminPanel';
|
||||
|
||||
import { get_gamenights, get_games, unpack_api_result, login } from './api/Api';
|
||||
|
||||
const localStorageUserKey = 'user';
|
||||
|
||||
function App() {
|
||||
|
||||
const [user, setUser] = useState(null);
|
||||
const [gamenights, setGamenights] = useState([]);
|
||||
const [flashData, setFlashData] = useState({});
|
||||
const [games, setGames] = useState([]);
|
||||
const [activeGamenightId, setActiveGamenightId] = useState(null);
|
||||
const [appState, setAppState] = useState('LoggedOut')
|
||||
|
||||
const handleLogin = (input) => {
|
||||
unpack_api_result(login(input), setFlashData)
|
||||
.then(result => {
|
||||
setUser(result.user);
|
||||
localStorage.setItem(localStorageUserKey, JSON.stringify(result.user));
|
||||
});
|
||||
})
|
||||
.then(() => setAppState('LoggedIn'))
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(activeGamenightId !== null) {
|
||||
setAppState('GamenightDetails');
|
||||
} else {
|
||||
setAppState('LoggedIn')
|
||||
}
|
||||
|
||||
}, [activeGamenightId])
|
||||
|
||||
const onLogout = () => {
|
||||
setUser(null);
|
||||
localStorage.removeItem(localStorageUserKey);
|
||||
setAppState('LoggedOut')
|
||||
};
|
||||
|
||||
const onAdmin = () => {
|
||||
setAppState('AdminPanel')
|
||||
}
|
||||
|
||||
const onUser = () => {
|
||||
setAppState('UserPage')
|
||||
}
|
||||
|
||||
const onReset = () => {
|
||||
setAppState('LoggedIn')
|
||||
}
|
||||
|
||||
const setFlash = (data) => {
|
||||
setFlashData(data);
|
||||
};
|
||||
@@ -38,64 +62,67 @@ function App() {
|
||||
setUser({...user});
|
||||
};
|
||||
|
||||
const dismissActiveGamenight = () => {
|
||||
setActiveGamenightId(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (user !== null) {
|
||||
if (appState === 'LoggedIn') {
|
||||
unpack_api_result(get_gamenights(user.jwt), setFlashData)
|
||||
.then(result => setGamenights(result.gamenights));
|
||||
}
|
||||
}, [user])
|
||||
}, [appState])
|
||||
|
||||
useEffect(() => {
|
||||
if (user !== null) {
|
||||
if (appState === 'LoggedIn') {
|
||||
unpack_api_result(get_games(user.jwt), setFlashData)
|
||||
.then(result => setGames(result.games));
|
||||
}
|
||||
}, [user])
|
||||
}, [appState])
|
||||
|
||||
useEffect(() => {
|
||||
setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
|
||||
}, []);
|
||||
|
||||
let page;
|
||||
if(user === null) {
|
||||
page = (
|
||||
let mainview;
|
||||
if(appState === 'LoggedOut') {
|
||||
return (
|
||||
<div className="App">
|
||||
<Login onChange={handleLogin}/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
let mainview;
|
||||
if(activeGamenightId === null) {
|
||||
mainview = (
|
||||
<Gamenights
|
||||
user={user}
|
||||
games={games}
|
||||
setFlash={setFlash}
|
||||
refetchGamenights={refetchGamenights}
|
||||
gamenights={gamenights}
|
||||
onSelectGamenight={(g) => setActiveGamenightId(g.id)}/>
|
||||
)
|
||||
} else {
|
||||
mainview = (
|
||||
<Gamenight
|
||||
gamenightId={activeGamenightId}
|
||||
onDismis={dismissActiveGamenight}
|
||||
setFlash={setFlash}
|
||||
} else if(appState === 'GamenightDetails') {
|
||||
mainview = (
|
||||
<Gamenight
|
||||
gamenightId={activeGamenightId}
|
||||
onDismis={() => setActiveGamenightId(null)}
|
||||
setFlash={setFlash}
|
||||
user={user}
|
||||
/>)
|
||||
} else if(appState === 'LoggedIn') {
|
||||
mainview = (
|
||||
<Gamenights
|
||||
user={user}
|
||||
/>)
|
||||
}
|
||||
|
||||
page = (
|
||||
<>
|
||||
<MenuBar user={user} onLogout={onLogout} />
|
||||
{mainview}
|
||||
</>
|
||||
games={games}
|
||||
setFlash={setFlash}
|
||||
refetchGamenights={refetchGamenights}
|
||||
gamenights={gamenights}
|
||||
onSelectGamenight={(g) => setActiveGamenightId(g.id)}/>
|
||||
);
|
||||
} else if(appState === 'AdminPanel') {
|
||||
mainview = (
|
||||
<AdminPanel
|
||||
user={user}
|
||||
setFlash={setFlash}/>
|
||||
);
|
||||
}
|
||||
let page = (
|
||||
<>
|
||||
<MenuBar
|
||||
user={user}
|
||||
onUser={onUser}
|
||||
onAdmin={onAdmin}
|
||||
onLogout={onLogout}
|
||||
onReset={onReset}/>
|
||||
{mainview}
|
||||
</>
|
||||
);
|
||||
|
||||
return page;
|
||||
}
|
||||
|
||||
@@ -87,4 +87,33 @@ export function login(body) {
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
}
|
||||
|
||||
export function get_registration_tokens(token) {
|
||||
return fetchResource('api/admin/registration_tokens', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function add_registration_token(token, registration_token) {
|
||||
return fetchResource('api/admin/registration_tokens', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(registration_token)
|
||||
});
|
||||
}
|
||||
|
||||
export function delete_registration_token(token, registration_token_id) {
|
||||
return fetchResource(`api/admin/registration_tokens/${registration_token_id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
}
|
||||
});
|
||||
}
|
||||
178
frontend/src/components/AdminPanel.jsx
Normal file
178
frontend/src/components/AdminPanel.jsx
Normal file
@@ -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
|
||||
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user