diff --git a/virtweb_frontend/src/dialogs/CreatedTokenDialog.tsx b/virtweb_frontend/src/dialogs/CreatedTokenDialog.tsx
new file mode 100644
index 0000000..b654db9
--- /dev/null
+++ b/virtweb_frontend/src/dialogs/CreatedTokenDialog.tsx
@@ -0,0 +1,58 @@
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Typography,
+} from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import { APITokenURL, CreatedAPIToken } from "../api/TokensApi";
+import { CopyToClipboard } from "../widgets/CopyToClipboard";
+import { InlineCode } from "../widgets/InlineCode";
+
+export function CreatedTokenDialog(p: {
+ createdToken: CreatedAPIToken;
+}): React.ReactElement {
+ const navigate = useNavigate();
+
+ const close = () => {
+ navigate(APITokenURL(p.createdToken.token));
+ };
+ return (
+
+ );
+}
+
+function InfoBlock(
+ p: React.PropsWithChildren<{ label: string; value: string }>
+): React.ReactElement {
+ return (
+
+ {p.label}
+
+ {p.value}
+
+
+ );
+}
diff --git a/virtweb_frontend/src/routes/EditAPITokenRoute.tsx b/virtweb_frontend/src/routes/EditAPITokenRoute.tsx
index 4f1358d..7063028 100644
--- a/virtweb_frontend/src/routes/EditAPITokenRoute.tsx
+++ b/virtweb_frontend/src/routes/EditAPITokenRoute.tsx
@@ -1,7 +1,13 @@
import { Button } from "@mui/material";
import React from "react";
import { useNavigate, useParams } from "react-router-dom";
-import { APIToken, APITokenURL, TokensApi } from "../api/TokensApi";
+import {
+ APIToken,
+ APITokenURL,
+ CreatedAPIToken,
+ TokensApi,
+} from "../api/TokensApi";
+import { CreatedTokenDialog } from "../dialogs/CreatedTokenDialog";
import { useAlert } from "../hooks/providers/AlertDialogProvider";
import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
import { useSnackbar } from "../hooks/providers/SnackbarProvider";
@@ -18,6 +24,10 @@ export function CreateApiTokenRoute(): React.ReactElement {
const snackbar = useSnackbar();
const navigate = useNavigate();
+ const [createdToken, setCreatedToken] = React.useState<
+ CreatedAPIToken | undefined
+ >();
+
const [token] = React.useState({
id: "",
name: "",
@@ -32,8 +42,7 @@ export function CreateApiTokenRoute(): React.ReactElement {
try {
const res = await TokensApi.Create(n);
snackbar("The api token was successfully created!");
- // TODO : show a modal to give token information
- navigate(APITokenURL(res.token));
+ setCreatedToken(res);
} catch (e) {
console.error(e);
alert(`Failed to create API token!\n${e}`);
@@ -41,12 +50,16 @@ export function CreateApiTokenRoute(): React.ReactElement {
};
return (
- navigate("/tokens")}
- onSave={createApiToken}
- />
+ <>
+ {createdToken && }
+
+ navigate("/tokens")}
+ onSave={createApiToken}
+ />
+ >
);
}
diff --git a/virtweb_frontend/src/widgets/InlineCode.tsx b/virtweb_frontend/src/widgets/InlineCode.tsx
new file mode 100644
index 0000000..38c94c5
--- /dev/null
+++ b/virtweb_frontend/src/widgets/InlineCode.tsx
@@ -0,0 +1,18 @@
+export function InlineCode(p: React.PropsWithChildren): React.ReactElement {
+ return (
+
+ {p.children}
+
+ );
+}
diff --git a/virtweb_frontend/src/widgets/net/NetworkHookStatusWidget.tsx b/virtweb_frontend/src/widgets/net/NetworkHookStatusWidget.tsx
index 191ca7d..b5d2237 100644
--- a/virtweb_frontend/src/widgets/net/NetworkHookStatusWidget.tsx
+++ b/virtweb_frontend/src/widgets/net/NetworkHookStatusWidget.tsx
@@ -3,6 +3,7 @@ import React, { PropsWithChildren } from "react";
import { NetworkHookStatus, ServerApi } from "../../api/ServerApi";
import { AsyncWidget } from "../AsyncWidget";
import { CopyToClipboard } from "../CopyToClipboard";
+import { InlineCode } from "../InlineCode";
export function NetworkHookStatusWidget(p: {
hiddenIfInstalled: boolean;
@@ -72,25 +73,6 @@ function NetworkHookStatusWidgetInner(p: {
);
}
-function InlineCode(p: PropsWithChildren): React.ReactElement {
- return (
-
- {p.children}
-
- );
-}
-
function CodeBlock(p: PropsWithChildren): React.ReactElement {
return (