add manual virtual api key create ui

2026-09-02 09:19:08 +02:00 · 2026-08-10 21:44:22 -04:00
parent 4c1f7f6243
commit 6d45486bb5
16 changed files with 1974 additions and 18 deletions
@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { AxiosResponse } from "axios";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { Button } from "@app/components/ui/button";
+import CopyTextBox from "@app/components/CopyTextBox";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import type { GetVirtualApiKeyResponse } from "@server/routers/virtualApiKey/types";
+
+type ViewVirtualApiKeySecretProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    virtualApiKeyId: string | null;
+    name?: string | null;
+};
+
+export default function ViewVirtualApiKeySecret({
+    open,
+    setOpen,
+    virtualApiKeyId,
+    name
+}: ViewVirtualApiKeySecretProps) {
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const [loading, setLoading] = useState(false);
+    const [credential, setCredential] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!open || !virtualApiKeyId) {
+            return;
+        }
+
+        let cancelled = false;
+        setLoading(true);
+        setCredential(null);
+
+        api.get<AxiosResponse<GetVirtualApiKeyResponse>>(
+            `/virtual-api-key/${virtualApiKeyId}`
+        )
+            .then((res) => {
+                if (cancelled) {
+                    return;
+                }
+                const key = res.data.data.virtualApiKey;
+                if (key.secret) {
+                    setCredential(`vk-${key.virtualApiKeyId}.${key.secret}`);
+                } else {
+                    toast({
+                        variant: "destructive",
+                        title: t("virtualApiKeysErrorFetchSecret"),
+                        description: t(
+                            "virtualApiKeysErrorFetchSecretDescription"
+                        )
+                    });
+                }
+            })
+            .catch((e) => {
+                if (cancelled) {
+                    return;
+                }
+                toast({
+                    variant: "destructive",
+                    title: t("virtualApiKeysErrorFetchSecret"),
+                    description: formatAxiosError(
+                        e,
+                        t("virtualApiKeysErrorFetchSecretDescription")
+                    )
+                });
+            })
+            .finally(() => {
+                if (!cancelled) {
+                    setLoading(false);
+                }
+            });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [open, virtualApiKeyId]);
+
+    return (
+        <Credenza
+            open={open}
+            onOpenChange={(val) => {
+                setOpen(val);
+                if (!val) {
+                    setCredential(null);
+                    setLoading(false);
+                }
+            }}
+        >
+            <CredenzaContent>
+                <CredenzaHeader>
+                    <CredenzaTitle>
+                        {t("virtualApiKeysViewSecretTitle")}
+                    </CredenzaTitle>
+                    <CredenzaDescription>
+                        {name ? name : t("virtualApiKeysViewSecretDescription")}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+                <CredenzaBody>
+                    <div className="space-y-4 px-1">
+                        {loading && (
+                            <p className="text-sm text-muted-foreground">
+                                {t("loading")}
+                            </p>
+                        )}
+                        {!loading && credential && (
+                            <CopyTextBox text={credential} wrapText={false} />
+                        )}
+                    </div>
+                </CredenzaBody>
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button variant="outline">{t("close")}</Button>
+                    </CredenzaClose>
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}