Add API tokens support (#9)

Make it possible to create token authorized to query predetermined set of routes.

Reviewed-on: #9
Co-authored-by: Pierre HUBERT <pierre.git@communiquons.org>
Co-committed-by: Pierre HUBERT <pierre.git@communiquons.org>

virtweb_frontend/src/routes/ViewApiTokenRoute.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@mui/material";
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { APIToken, APITokenURL, TokensApi } from "../api/TokensApi";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import {
+  APITokenDetails,
+  TokenWidgetStatus,
+} from "../widgets/tokens/APITokenDetails";
+
+export function ViewApiTokenRoute() {
+  const { id } = useParams();
+
+  const [token, setToken] = React.useState<APIToken | undefined>();
+
+  const load = async () => {
+    setToken(await TokensApi.GetSingle(id!));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={id}
+      ready={token !== undefined}
+      errMsg="Failed to fetch API token information!"
+      load={load}
+      build={() => <ViewAPITokenRouteInner token={token!} />}
+    />
+  );
+}
+
+function ViewAPITokenRouteInner(p: { token: APIToken }): React.ReactElement {
+  const navigate = useNavigate();
+
+  return (
+    <VirtWebRouteContainer
+      label={`API token ${p.token.name}`}
+      actions={
+        <span style={{ display: "flex", alignItems: "center" }}>
+          <Button
+            variant="contained"
+            style={{ marginLeft: "15px" }}
+            onClick={() => navigate(APITokenURL(p.token, true))}
+          >
+            Edit
+          </Button>
+        </span>
+      }
+    >
+      <APITokenDetails token={p.token} status={TokenWidgetStatus.Read} />
+    </VirtWebRouteContainer>
+  );
+}