From 6aacc0c7a86e36c52a3c2c1d26fe58cefcd3bec4 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Mon, 12 Feb 2024 14:52:00 +0000
Subject: feature: Add support for managing API keys

---
 .../dashboard/settings/components/AddApiKey.tsx    | 148 +++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 packages/web/app/dashboard/settings/components/AddApiKey.tsx

(limited to 'packages/web/app/dashboard/settings/components/AddApiKey.tsx')

diff --git a/packages/web/app/dashboard/settings/components/AddApiKey.tsx b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
new file mode 100644
index 00000000..f4f2894c
--- /dev/null
+++ b/packages/web/app/dashboard/settings/components/AddApiKey.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, SubmitErrorHandler } from "react-hook-form";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { useState } from "react";
+import { Copy } from "lucide-react";
+
+function ApiKeySuccess({ apiKey }: { apiKey: string }) {
+  return (
+    <div>
+      <div className="py-4">
+        Note: please copy the key and store it somewhere safe. Once you close
+        the dialog, you won&apos;t be able to access it again.
+      </div>
+      <div className="flex space-x-2 pt-2">
+        <Input value={apiKey} readOnly />
+        <Button onClick={() => navigator.clipboard.writeText(apiKey)}>
+          <Copy className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function AddApiKeyForm({ onSuccess }: { onSuccess: (key: string) => void }) {
+  const formSchema = z.object({
+    name: z.string(),
+  });
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  async function onSubmit(value: z.infer<typeof formSchema>) {
+    try {
+      const resp = await api.apiKeys.create.mutate({ name: value.name });
+      onSuccess(resp.key);
+    } catch (e) {
+      toast({ description: "Something went wrong", variant: "destructive" });
+      return;
+    }
+    router.refresh();
+  }
+
+  const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
+    toast({
+      description: Object.values(errors)
+        .map((v) => v.message)
+        .join("\n"),
+      variant: "destructive",
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit, onError)}
+        className="flex w-full space-x-3 space-y-8 pt-4"
+      >
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => {
+            return (
+              <FormItem className="flex-1">
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="Name" {...field} />
+                </FormControl>
+                <FormDescription>
+                  Give your API key a unique name
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            );
+          }}
+        />
+        <Button className="h-full" type="submit">
+          Create
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+export default function AddApiKey() {
+  const [key, setKey] = useState<string | undefined>(undefined);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+  return (
+    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+      <DialogTrigger asChild>
+        <Button>New API Key</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {key ? "Key was successfully created" : "Create API key"}
+          </DialogTitle>
+          <DialogDescription>
+            {key ? (
+              <ApiKeySuccess apiKey={key} />
+            ) : (
+              <AddApiKeyForm onSuccess={setKey} />
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="sm:justify-end">
+          <DialogClose asChild>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setKey(undefined)}
+            >
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
-- 
cgit v1.2.3-70-g09d2