From ec9492c9331ce38e4a2bdb9f3782bb9ce5889fec Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Fri, 30 May 2025 11:35:00 +0200
Subject: [PATCH] Show a message on tokens list route when no token was created
yet
---
.../src/routes/TokensListRoute.tsx | 135 ++++++++++--------
1 file changed, 72 insertions(+), 63 deletions(-)
diff --git a/virtweb_frontend/src/routes/TokensListRoute.tsx b/virtweb_frontend/src/routes/TokensListRoute.tsx
index 8ed1b0e..0988ac0 100644
--- a/virtweb_frontend/src/routes/TokensListRoute.tsx
+++ b/virtweb_frontend/src/routes/TokensListRoute.tsx
@@ -10,6 +10,7 @@ import {
TableContainer,
TableHead,
TableRow,
+ Typography,
} from "@mui/material";
import React from "react";
import { useNavigate } from "react-router-dom";
@@ -58,70 +59,78 @@ export function TokensListRouteInner(p: {
</RouterLink>
}
>
- <TableContainer component={Paper}>
- <Table>
- <TableHead>
- <TableRow>
- <TableCell>Name</TableCell>
- <TableCell>Description</TableCell>
- <TableCell>Created</TableCell>
- <TableCell>Updated</TableCell>
- <TableCell>Last used</TableCell>
- <TableCell>IP restriction</TableCell>
- <TableCell>Max inactivity</TableCell>
- <TableCell>Rights</TableCell>
- <TableCell>Actions</TableCell>
- </TableRow>
- </TableHead>
- <TableBody>
- {p.list.map((t) => {
- return (
- <TableRow
- key={t.id}
- hover
- onDoubleClick={() => navigate(APITokenURL(t))}
- style={{ backgroundColor: ExpiredAPIToken(t) ? "red" : "" }}
- >
- <TableCell>
- {t.name} {ExpiredAPIToken(t) && <i>(Expired)</i>}
- </TableCell>
- <TableCell>{t.description}</TableCell>
- <TableCell>
- <TimeWidget time={t.created} />
- </TableCell>
- <TableCell>
- <TimeWidget time={t.updated} />
- </TableCell>
- <TableCell>
- <TimeWidget time={t.last_used} />
- </TableCell>
- <TableCell>{t.ip_restriction}</TableCell>
- <TableCell>
- {t.max_inactivity && timeDiff(0, t.max_inactivity)}
- </TableCell>
- <TableCell>
- {t.rights.map((r, n) => {
- return (
- <div key={n}>
- {r.verb} {r.path}
- </div>
- );
- })}
- </TableCell>
+ {p.list.length > 0 && (
+ <TableContainer component={Paper}>
+ <Table>
+ <TableHead>
+ <TableRow>
+ <TableCell>Name</TableCell>
+ <TableCell>Description</TableCell>
+ <TableCell>Created</TableCell>
+ <TableCell>Updated</TableCell>
+ <TableCell>Last used</TableCell>
+ <TableCell>IP restriction</TableCell>
+ <TableCell>Max inactivity</TableCell>
+ <TableCell>Rights</TableCell>
+ <TableCell>Actions</TableCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {p.list.map((t) => {
+ return (
+ <TableRow
+ key={t.id}
+ hover
+ onDoubleClick={() => navigate(APITokenURL(t))}
+ style={{ backgroundColor: ExpiredAPIToken(t) ? "red" : "" }}
+ >
+ <TableCell>
+ {t.name} {ExpiredAPIToken(t) && <i>(Expired)</i>}
+ </TableCell>
+ <TableCell>{t.description}</TableCell>
+ <TableCell>
+ <TimeWidget time={t.created} />
+ </TableCell>
+ <TableCell>
+ <TimeWidget time={t.updated} />
+ </TableCell>
+ <TableCell>
+ <TimeWidget time={t.last_used} />
+ </TableCell>
+ <TableCell>{t.ip_restriction}</TableCell>
+ <TableCell>
+ {t.max_inactivity && timeDiff(0, t.max_inactivity)}
+ </TableCell>
+ <TableCell>
+ {t.rights.map((r, n) => {
+ return (
+ <div key={n}>
+ {r.verb} {r.path}
+ </div>
+ );
+ })}
+ </TableCell>
- <TableCell>
- <RouterLink to={APITokenURL(t)}>
- <IconButton>
- <VisibilityIcon />
- </IconButton>
- </RouterLink>
- </TableCell>
- </TableRow>
- );
- })}
- </TableBody>
- </Table>
- </TableContainer>
+ <TableCell>
+ <RouterLink to={APITokenURL(t)}>
+ <IconButton>
+ <VisibilityIcon />
+ </IconButton>
+ </RouterLink>
+ </TableCell>
+ </TableRow>
+ );
+ })}
+ </TableBody>
+ </Table>
+ </TableContainer>
+ )}
+
+ {p.list.length === 0 && (
+ <Typography style={{ textAlign: "center" }}>
+ No API token created yet.
+ </Typography>
+ )}
</VirtWebRouteContainer>
);
}