Start to build routes to create, view and edit API token

virtweb_frontend/src/widgets/forms/IPInput.tsx

@@ -22,14 +22,16 @@ export function IPInput(p: {
 export function IPInputWithMask(p: {
   label: string;
   editable: boolean;
+  ipAndMask?: string;
   ip?: string;
   mask?: number;
-  onValueChange?: (ip?: string, mask?: number) => void;
+  onValueChange?: (ip?: string, mask?: number, ipAndMask?: string) => void;
   version: 4 | 6;
 }): React.ReactElement {
   const showSlash = React.useRef(!!p.mask);
 
   const currValue =
+    p.ipAndMask ??
     (p.ip ?? "") + (p.mask || showSlash.current ? "/" : "") + (p.mask ?? "");
 
   const { onValueChange, ...props } = p;
@@ -38,7 +40,7 @@ export function IPInputWithMask(p: {
       onValueChange={(v) => {
         showSlash.current = false;
         if (!v) {
-          onValueChange?.(undefined, undefined);
+          onValueChange?.(undefined, undefined, undefined);
           return;
         }
 
@@ -52,7 +54,11 @@ export function IPInputWithMask(p: {
           mask = sanitizeMask(p.version, split[1]);
         }
 
-        onValueChange?.(ip, mask);
+        onValueChange?.(
+          ip,
+          mask,
+          mask || showSlash.current ? `${ip}/${mask ?? ""}` : ip
+        );
       }}
       value={currValue}
       {...props}

virtweb_frontend/src/widgets/tokens/APITokenDetails.tsx

@@ -0,0 +1,216 @@
+import { Button, Grid } from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { NWFilter, NWFilterApi } from "../../api/NWFilterApi";
+import { NetworkApi, NetworkInfo } from "../../api/NetworksApi";
+import { ServerApi } from "../../api/ServerApi";
+import { APIToken, TokensApi } from "../../api/TokensApi";
+import { VMApi, VMInfo } from "../../api/VMApi";
+import { useAlert } from "../../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { AsyncWidget } from "../AsyncWidget";
+import { TabsWidget } from "../TabsWidget";
+import { EditSection } from "../forms/EditSection";
+import { IPInput, IPInputWithMask } from "../forms/IPInput";
+import { ResAutostartInput } from "../forms/ResAutostartInput";
+import { SelectInput } from "../forms/SelectInput";
+import { TextInput } from "../forms/TextInput";
+import { RadioGroupInput } from "../forms/RadioGroupInput";
+
+export enum TokenWidgetStatus {
+  Create,
+  Read,
+  Update,
+}
+
+interface DetailsProps {
+  token: APIToken;
+  status: TokenWidgetStatus;
+  onChange?: () => void;
+}
+
+export function APITokenDetails(p: DetailsProps): React.ReactElement {
+  const [vms, setVMs] = React.useState<VMInfo[]>();
+  const [networks, setNetworks] = React.useState<NetworkInfo[]>();
+  const [nwFilters, setNetworkFilters] = React.useState<NWFilter[]>();
+  const [tokens, setTokens] = React.useState<APIToken[]>();
+
+  const load = async () => {
+    setVMs(await VMApi.GetList());
+    setNetworks(await NetworkApi.GetList());
+    setNetworkFilters(await NWFilterApi.GetList());
+    setTokens(await TokensApi.GetList());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={"1"}
+      load={load}
+      errMsg="Failed to load some system entities!"
+      build={() => (
+        <APITokenDetailsInner
+          vms={vms!}
+          networks={networks!}
+          nwFilters={nwFilters!}
+          tokens={tokens!}
+          {...p}
+        />
+      )}
+    />
+  );
+}
+
+enum TokenTab {
+  General = 0,
+  Rights,
+  RawRights,
+  Danger,
+}
+
+type DetailsInnerProps = DetailsProps & {
+  vms: VMInfo[];
+  networks: NetworkInfo[];
+  nwFilters: NWFilter[];
+  tokens: APIToken[];
+};
+
+function APITokenDetailsInner(p: DetailsInnerProps): React.ReactElement {
+  const [currTab, setCurrTab] = React.useState(TokenTab.General);
+
+  return (
+    <>
+      <TabsWidget
+        currTab={currTab}
+        onTabChange={setCurrTab}
+        options={[
+          { label: "General", value: TokenTab.General, visible: true },
+          {
+            label: "Rights",
+            value: TokenTab.Rights,
+            visible: true,
+          },
+          {
+            label: "Raw rights",
+            value: TokenTab.RawRights,
+            visible: true,
+          },
+
+          {
+            label: "Danger zone",
+            value: TokenTab.Danger,
+            color: "red",
+            visible: p.status === TokenWidgetStatus.Read,
+          },
+        ]}
+      />
+      {currTab === TokenTab.General && <NetworkDetailsTabGeneral {...p} />}
+      {/* todo: rights */}
+      {currTab === TokenTab.Danger && <APITokenTabDanger {...p} />}
+    </>
+  );
+}
+
+function NetworkDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
+  const [ipVersion, setIpVersion] = React.useState<4 | 6>(
+    (p.token.ip_restriction ?? "").includes(":") ? 6 : 4
+  );
+
+  return (
+    <Grid container spacing={2}>
+      {/* Metadata section */}
+      <EditSection title="Metadata">
+        {p.status !== TokenWidgetStatus.Create && (
+          <TextInput label="UUID" editable={false} value={p.token.id} />
+        )}
+
+        <TextInput
+          label="Name"
+          editable={p.status === TokenWidgetStatus.Create}
+          value={p.token.name}
+          onValueChange={(v) => {
+            p.token.name = v ?? "";
+            p.onChange?.();
+          }}
+          size={ServerApi.Config.constraints.api_token_name_size}
+        />
+
+        <TextInput
+          label="Description"
+          editable={p.status === TokenWidgetStatus.Create}
+          value={p.token.description}
+          onValueChange={(v) => {
+            p.token.description = v ?? "";
+            p.onChange?.();
+          }}
+          multiline={true}
+          size={ServerApi.Config.constraints.api_token_description_size}
+        />
+      </EditSection>
+
+      <EditSection title="General settings">
+        {(p.status === TokenWidgetStatus.Create || p.token.ip_restriction) && (
+          <RadioGroupInput
+            {...p}
+            editable={p.status === TokenWidgetStatus.Create}
+            options={[
+              { label: "IPv4", value: "4" },
+              { label: "IPv6", value: "6" },
+            ]}
+            value={ipVersion.toString()}
+            onValueChange={(v) => {
+              setIpVersion(Number(v) as any);
+            }}
+          />
+        )}
+        <IPInputWithMask
+          {...p}
+          label="Token IP network restriction"
+          ipAndMask={p.token.ip_restriction}
+          editable={p.status === TokenWidgetStatus.Create}
+          version={ipVersion}
+          onValueChange={(_ip, _mask, ipAndMask) => {
+            p.token.ip_restriction = ipAndMask;
+            p.onChange?.();
+          }}
+        />
+
+        {/* TODO : remaining */}
+      </EditSection>
+    </Grid>
+  );
+}
+
+function APITokenTabDanger(p: DetailsInnerProps): React.ReactElement {
+  const confirm = useConfirm();
+  const snackbar = useSnackbar();
+  const alert = useAlert();
+  const navigate = useNavigate();
+
+  const requestDelete = async () => {
+    try {
+      if (
+        !(await confirm(
+          "Do you really want to delete this API token?",
+          `Delete API token ${p.token.name}`,
+          "Delete"
+        ))
+      )
+        return;
+
+      await TokensApi.Delete(p.token);
+
+      navigate("/tokens");
+      snackbar("The API token was successfully deleted!");
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to delete the API token!\n${e}`);
+    }
+  };
+
+  return (
+    <Button color="error" onClick={requestDelete}>
+      Delete this API token
+    </Button>
+  );
+}