feat: Regen api keys

4 files changed, 152 insertions, 21 deletions

diff --git a/apps/web/components/settings/AddApiKey.tsx b/apps/web/components/settings/AddApiKey.tsx
index 326da229..c8baa626 100644
--- a/apps/web/components/settings/AddApiKey.tsx
+++ b/apps/web/components/settings/AddApiKey.tsx
@@ -5,7 +5,6 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import { Button } from "@/components/ui/button";
-import CopyBtn from "@/components/ui/copy-button";
 import {
   Dialog,
   DialogClose,
@@ -33,24 +32,7 @@ import { PlusCircle } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-function ApiKeySuccess({ apiKey }: { apiKey: string }) {
-  const { t } = useTranslation();
-  return (
-    <div>
-      <div className="py-4 text-sm text-muted-foreground">
-        {t("settings.api_keys.key_success_please_copy")}
-      </div>
-      <div className="flex space-x-2 pt-2">
-        <Input value={apiKey} readOnly />
-        <CopyBtn
-          getStringToCopy={() => {
-            return apiKey;
-          }}
-        />
-      </div>
-    </div>
-  );
-}
+import ApiKeySuccess from "./ApiKeySuccess";
 
 function AddApiKeyForm({ onSuccess }: { onSuccess: (key: string) => void }) {
   const { t } = useTranslation();
@@ -145,7 +127,10 @@ export default function AddApiKey() {
           </DialogTitle>
         </DialogHeader>
         {key ? (
-          <ApiKeySuccess apiKey={key} />
+          <ApiKeySuccess
+            apiKey={key}
+            message={t("settings.api_keys.key_success")}
+          />
         ) : (
           <AddApiKeyForm onSuccess={setKey} />
         )}
diff --git a/apps/web/components/settings/ApiKeySettings.tsx b/apps/web/components/settings/ApiKeySettings.tsx
index 2b9d19d1..bc4b71c5 100644
--- a/apps/web/components/settings/ApiKeySettings.tsx
+++ b/apps/web/components/settings/ApiKeySettings.tsx
@@ -11,6 +11,7 @@ import { api } from "@/server/api/client";
 
 import AddApiKey from "./AddApiKey";
 import DeleteApiKey from "./DeleteApiKey";
+import RegenerateApiKey from "./RegenerateApiKey";
 
 export default async function ApiKeys() {
   // oxlint-disable-next-line rules-of-hooks
@@ -41,7 +42,10 @@ export default async function ApiKeys() {
                 <TableCell>**_{k.keyId}_**</TableCell>
                 <TableCell>{k.createdAt.toLocaleString()}</TableCell>
                 <TableCell>
-                  <DeleteApiKey name={k.name} id={k.id} />
+                  <div className="flex items-center gap-2">
+                    <RegenerateApiKey name={k.name} id={k.id} />
+                    <DeleteApiKey name={k.name} id={k.id} />
+                  </div>
                 </TableCell>
               </TableRow>
             ))}
diff --git a/apps/web/components/settings/ApiKeySuccess.tsx b/apps/web/components/settings/ApiKeySuccess.tsx
new file mode 100644
index 00000000..370d711b
--- /dev/null
+++ b/apps/web/components/settings/ApiKeySuccess.tsx
@@ -0,0 +1,24 @@
+import CopyBtn from "@/components/ui/copy-button";
+import { Input } from "@/components/ui/input";
+
+export default function ApiKeySuccess({
+  apiKey,
+  message,
+}: {
+  apiKey: string;
+  message: string;
+}) {
+  return (
+    <div>
+      <div className="py-4 text-sm text-muted-foreground">{message}</div>
+      <div className="flex space-x-2 pt-2">
+        <Input value={apiKey} readOnly />
+        <CopyBtn
+          getStringToCopy={() => {
+            return apiKey;
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/settings/RegenerateApiKey.tsx b/apps/web/components/settings/RegenerateApiKey.tsx
new file mode 100644
index 00000000..1c034026
--- /dev/null
+++ b/apps/web/components/settings/RegenerateApiKey.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
+import { api } from "@/lib/trpc";
+import { RefreshCcw } from "lucide-react";
+
+import ApiKeySuccess from "./ApiKeySuccess";
+
+export default function RegenerateApiKey({
+  id,
+  name,
+}: {
+  id: string;
+  name: string;
+}) {
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const [key, setKey] = useState<string | undefined>(undefined);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  const mutator = api.apiKeys.regenerate.useMutation({
+    onSuccess: (resp) => {
+      setKey(resp.key);
+      router.refresh();
+    },
+    onError: () => {
+      toast({
+        description: t("common.something_went_wrong"),
+        variant: "destructive",
+      });
+      setDialogOpen(false);
+    },
+  });
+
+  const handleRegenerate = () => {
+    mutator.mutate({ id });
+  };
+
+  return (
+    <Dialog
+      open={dialogOpen}
+      onOpenChange={(o) => {
+        setDialogOpen(o);
+        setKey(undefined);
+      }}
+    >
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm" title="Regenerate">
+          <RefreshCcw className="h-4 w-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {key
+              ? t("settings.api_keys.key_regenerated")
+              : t("settings.api_keys.regenerate_api_key")}
+          </DialogTitle>
+          {!key && (
+            <DialogDescription>
+              {t("settings.api_keys.regenerate_warning", { name })}
+            </DialogDescription>
+          )}
+        </DialogHeader>
+        {key ? (
+          <ApiKeySuccess
+            apiKey={key}
+            message={t("settings.api_keys.key_regenerated_please_copy")}
+          />
+        ) : (
+          <p className="text-sm">
+            {t("settings.api_keys.regenerate_confirmation")}
+          </p>
+        )}
+        <DialogFooter className="sm:justify-end">
+          {!key ? (
+            <>
+              <DialogClose asChild>
+                <Button type="button" variant="outline">
+                  {t("actions.cancel")}
+                </Button>
+              </DialogClose>
+              <ActionButton
+                variant="destructive"
+                onClick={handleRegenerate}
+                loading={mutator.isPending}
+              >
+                {t("actions.regenerate")}
+              </ActionButton>
+            </>
+          ) : (
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                {t("actions.close")}
+              </Button>
+            </DialogClose>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}