Can delete API token from UI

matrixgw_frontend/src/api/TokensApi.ts

@@ -43,4 +43,16 @@ export class TokensApi {
       })
     ).data;
   }
+
+  /**
+   * Delete a token
+   */
+  static async Delete(t: Token): Promise<void> {
+    return (
+      await APIClient.exec({
+        uri: `/token/${t.id}`,
+        method: "DELETE",
+      })
+    ).data;
+  }
 }

matrixgw_frontend/src/routes/APITokensRoute.tsx

@@ -2,7 +2,7 @@ import AddIcon from "@mui/icons-material/Add";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { Alert, AlertTitle, IconButton, Tooltip } from "@mui/material";
 import type { GridColDef } from "@mui/x-data-grid";
-import { DataGrid } from "@mui/x-data-grid";
+import { DataGrid, GridActionsCellItem } from "@mui/x-data-grid";
 import { QRCodeCanvas } from "qrcode.react";
 import React from "react";
 import { APIClient } from "../api/ApiClient";
@@ -12,6 +12,11 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { CopyTextChip } from "../widgets/CopyTextChip";
 import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
+import DeleteIcon from "@mui/icons-material/DeleteOutlined";
+import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
+import { useConfirm } from "../hooks/contexts_provider/ConfirmDialogProvider";
+import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
+import { time } from "../utils/DateUtils";
 
 export function APITokensRoute(): React.ReactElement {
   const count = React.useRef(0);
@@ -127,6 +132,30 @@ function TokensListGrid(p: {
   list: Token[];
   onReload: () => void;
 }): React.ReactElement {
+  const snackbar = useSnackbar();
+  const confirm = useConfirm();
+  const alert = useAlert();
+
+  // Delete a token
+  const handleDeleteClick = (token: Token) => async () => {
+    try {
+      if (
+        !(await confirm(
+          `Do you really want to delete the token named '${token.name}' ?`
+        ))
+      )
+        return;
+
+      await TokensApi.Delete(token);
+      p.onReload();
+
+      snackbar("The token was successfully deleted!");
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to delete API token! ${e}`);
+    }
+  };
+
   const columns: GridColDef<(typeof p.list)[number]>[] = [
     { field: "id", headerName: "ID", flex: 1 },
     {
@@ -159,7 +188,18 @@ function TokensListGrid(p: {
       headerName: "Last usage",
       flex: 3,
       renderCell(params) {
-        return <TimeWidget time={params.row.last_used} />;
+        return (
+          <span
+            style={{
+              color:
+                params.row.last_used + params.row.max_inactivity < time()
+                  ? "red"
+                  : undefined,
+            }}
+          >
+            <TimeWidget time={params.row.last_used} />
+          </span>
+        );
       },
     },
     {
@@ -167,7 +207,18 @@ function TokensListGrid(p: {
       headerName: "Max inactivity",
       flex: 3,
       renderCell(params) {
-        return <TimeWidget time={params.row.max_inactivity} isDuration />;
+        return (
+          <span
+            style={{
+              color:
+                params.row.last_used + params.row.max_inactivity < time()
+                  ? "red"
+                  : undefined,
+            }}
+          >
+            <TimeWidget time={params.row.max_inactivity} isDuration />
+          </span>
+        );
       },
     },
     {
@@ -175,7 +226,18 @@ function TokensListGrid(p: {
       headerName: "Expiration",
       flex: 3,
       renderCell(params) {
-        return <TimeWidget time={params.row.expiration} showDate />;
+        return (
+          <span
+            style={{
+              color:
+                params.row.expiration && params.row.expiration < time()
+                  ? "red"
+                  : undefined,
+            }}
+          >
+            <TimeWidget time={params.row.expiration} showDate />
+          </span>
+        );
       },
     },
     {
@@ -184,6 +246,24 @@ function TokensListGrid(p: {
       flex: 2,
       type: "boolean",
     },
+    {
+      field: "actions",
+      type: "actions",
+      headerName: "Actions",
+      flex: 2,
+      cellClassName: "actions",
+      getActions: ({ row }) => {
+        return [
+          <GridActionsCellItem
+            key={row.id}
+            icon={<DeleteIcon />}
+            label="Delete"
+            onClick={handleDeleteClick(row)}
+            color="inherit"
+          />,
+        ];
+      },
+    },
   ];
 
   if (p.list.length === 0)