Add delete API key (#25)

apps/web/src/app/(dashboard)/api-keys/add-api-key.tsx

@@ -14,7 +14,7 @@ import {
 
 import { api } from "~/trpc/react";
 import { useState } from "react";
-import { CheckIcon, ClipboardCopy, Plus } from "lucide-react";
+import { CheckIcon, ClipboardCopy, Eye, EyeOff, Plus } from "lucide-react";
 import { toast } from "@unsend/ui/src/toaster";
 
 export default function AddApiKey() {
@@ -23,6 +23,7 @@ export default function AddApiKey() {
   const [apiKey, setApiKey] = useState("");
   const addDomainMutation = api.apiKey.createToken.useMutation();
   const [isCopied, setIsCopied] = useState(false);
+  const [showApiKey, setShowApiKey] = useState(false);
 
   const utils = api.useUtils();
 
@@ -73,20 +74,48 @@ export default function AddApiKey() {
           <DialogHeader>
             <DialogTitle>Copy API key</DialogTitle>
           </DialogHeader>
-          <div className="py-2 bg-muted rounded-lg px-2 flex items-center justify-between">
+          <div className="py-1 bg-secondary rounded-lg px-4 flex items-center justify-between mt-2">
-            <p>{apiKey}</p>
+            <div>
-            <Button
+              {showApiKey ? (
-              variant="ghost"
+                <p className="text-sm">{apiKey}</p>
-              className="hover:bg-transparent p-0 cursor-pointer  group-hover:opacity-100"
-              onClick={handleCopy}
-            >
-              {isCopied ? (
-                <CheckIcon className="h-4 w-4 text-green-500" />
               ) : (
-                <ClipboardCopy className="h-4 w-4" />
+                <div className="flex gap-1">
+                  {Array.from({ length: 30 }).map((_, index) => (
+                    <div
+                      key={index}
+                      className="w-1 h-1 bg-muted-foreground rounded-lg"
+                    />
+                  ))}
+                </div>
               )}
-            </Button>
+            </div>
+            <div className="flex gap-4">
+              <Button
+                variant="ghost"
+                className="hover:bg-transparent p-0 cursor-pointer  group-hover:opacity-100"
+                onClick={() => setShowApiKey(!showApiKey)}
+              >
+                {showApiKey ? (
+                  <Eye className="h-4 w-4" />
+                ) : (
+                  <EyeOff className="h-4 w-4" />
+                )}
+              </Button>
+
+              <Button
+                variant="ghost"
+                className="hover:bg-transparent p-0 cursor-pointer  group-hover:opacity-100"
+                onClick={handleCopy}
+              >
+                {isCopied ? (
+                  <CheckIcon className="h-4 w-4 text-green-500" />
+                ) : (
+                  <ClipboardCopy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
           </div>
+          <div></div>
           <DialogFooter>
             <Button
               type="submit"
@@ -110,7 +139,7 @@ export default function AddApiKey() {
               id="name"
               placeholder="prod key"
               defaultValue=""
-              className="col-span-3"
+              className="col-span-3 mt-1"
               onChange={(e) => setName(e.target.value)}
               value={name}
             />

apps/web/src/app/(dashboard)/api-keys/api-list.tsx

@@ -10,6 +10,7 @@ import {
 } from "@unsend/ui/src/table";
 import { formatDistanceToNow } from "date-fns";
 import { api } from "~/trpc/react";
+import DeleteApiKey from "./delete-api-key";
 
 export default function ApiList() {
   const apiKeysQuery = api.apiKey.getApiKeys.useQuery();
@@ -24,7 +25,8 @@ export default function ApiList() {
               <TableHead>Token</TableHead>
               <TableHead>Permission</TableHead>
               <TableHead>Last used</TableHead>
-              <TableHead className="rounded-tr-xl">Created at</TableHead>
+              <TableHead>Created at</TableHead>
+              <TableHead className="rounded-tr-xl">Action</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -41,6 +43,9 @@ export default function ApiList() {
                 <TableCell>
                   {formatDistanceToNow(apiKey.createdAt, { addSuffix: true })}
                 </TableCell>
+                <TableCell>
+                  <DeleteApiKey apiKey={apiKey} />
+                </TableCell>
               </TableRow>
             ))}
           </TableBody>

apps/web/src/app/(dashboard)/api-keys/delete-api-key.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Button } from "@unsend/ui/src/button";
+import { Input } from "@unsend/ui/src/input";
+import { Label } from "@unsend/ui/src/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@unsend/ui/src/dialog";
+import { api } from "~/trpc/react";
+import React, { useState } from "react";
+import { ApiKey, Domain } from "@prisma/client";
+import { toast } from "@unsend/ui/src/toaster";
+import { Trash2 } from "lucide-react";
+
+export const DeleteApiKey: React.FC<{
+  apiKey: Partial<ApiKey> & { id: number };
+}> = ({ apiKey }) => {
+  const [open, setOpen] = useState(false);
+  const [domainName, setDomainName] = useState("");
+  const deleteApiKeyMutation = api.apiKey.deleteApiKey.useMutation();
+
+  const utils = api.useUtils();
+
+  function handleSave() {
+    deleteApiKeyMutation.mutate(
+      {
+        id: apiKey.id,
+      },
+      {
+        onSuccess: () => {
+          utils.apiKey.invalidate();
+          setOpen(false);
+          toast.success(`API key deleted`);
+        },
+      }
+    );
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(_open) => (_open !== open ? setOpen(_open) : null)}
+    >
+      <DialogTrigger asChild>
+        <Button variant="ghost" size="sm">
+          <Trash2 className="h-4 w-4 text-red-600/80" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete API key</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete{" "}
+            <span className="font-semibold text-primary">{apiKey.name}</span>?
+            You can't reverse this.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-2">
+          <Label htmlFor="name" className="text-right">
+            Type <span className="text-primary">{apiKey.name}</span> to confirm
+          </Label>
+          <Input
+            id="name"
+            defaultValue=""
+            className="mt-2"
+            onChange={(e) => setDomainName(e.target.value)}
+            value={domainName}
+          />
+        </div>
+        <DialogFooter>
+          <Button
+            type="submit"
+            variant="destructive"
+            onClick={handleSave}
+            disabled={
+              deleteApiKeyMutation.isPending || apiKey.name !== domainName
+            }
+          >
+            {deleteApiKeyMutation.isPending ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteApiKey;

apps/web/src/server/api/routers/api.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 import { createTRPCRouter, teamProcedure } from "~/server/api/trpc";
-import { addApiKey } from "~/server/service/api-service";
+import { addApiKey, deleteApiKey } from "~/server/service/api-service";
 
 export const apiRouter = createTRPCRouter({
   createToken: teamProcedure
@@ -33,4 +33,10 @@ export const apiRouter = createTRPCRouter({
 
     return keys;
   }),
+
+  deleteApiKey: teamProcedure
+    .input(z.object({ id: z.number() }))
+    .mutation(async ({ input }) => {
+      return deleteApiKey(input.id);
+    }),
 });

apps/web/src/server/service/api-service.ts

@@ -57,3 +57,16 @@ export async function retrieveApiKey(token: string) {
     throw error;
   }
 }
+
+export async function deleteApiKey(id: number) {
+  try {
+    await db.apiKey.delete({
+      where: {
+        id,
+      },
+    });
+  } catch (error) {
+    console.error("Error deleting API key:", error);
+    throw error;
+  }
+}