feat: add delete and copy token on token page

apps/web/src/app/(dashboard)/settings/token/page.tsx

@@ -1,10 +1,6 @@
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-
 import { ApiTokenForm } from '~/components/forms/token';
 
-export default async function ApiToken() {
-  const { user } = await getRequiredServerComponentSession();
-
+export default function ApiToken() {
   return (
     <div>
       <h3 className="text-lg font-medium">API Token</h3>
@@ -15,7 +11,7 @@ export default async function ApiToken() {
 
       <hr className="my-4" />
 
-      <ApiTokenForm user={user} className="max-w-xl" />
+      <ApiTokenForm className="max-w-xl" />
     </div>
   );
 }

apps/web/src/components/forms/token.tsx

@@ -1,17 +1,27 @@
 'use client';
 
+import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
-import type { User } from '@documenso/prisma/client';
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
@@ -24,19 +34,21 @@ import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type ApiTokenFormProps = {
-  user: User;
   className?: string;
 };
 
 type TCreateTokenMutationSchema = z.infer<typeof ZCreateTokenMutationSchema>;
 
-export const ApiTokenForm = ({ user, className }: ApiTokenFormProps) => {
+export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
   const router = useRouter();
-
+  const [, copy] = useCopyToClipboard();
   const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+  const [tokenIdToDelete, setTokenIdToDelete] = useState<number>(0);
 
   const { data: tokens } = trpc.apiToken.getTokens.useQuery();
   const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation();
+  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation();
 
   const form = useForm<TCreateTokenMutationSchema>({
     resolver: zodResolver(ZCreateTokenMutationSchema),
@@ -45,12 +57,32 @@ export const ApiTokenForm = ({ user, className }: ApiTokenFormProps) => {
     },
   });
 
-  const deleteToken = () => {
-    console.log('deleted');
+  const deleteToken = async (id: number) => {
+    try {
+      await deleteTokenMutation({
+        id,
+      });
+
+      toast({
+        title: 'Token deleted',
+        description: 'The token was deleted successfully.',
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+      router.refresh();
+    } catch (error) {
+      console.error(error);
+    }
   };
 
-  const copyToken = () => {
-    console.log('copied');
+  const copyToken = (token: string) => {
+    void copy(token).then(() => {
+      toast({
+        title: 'Token copied to clipboard',
+        description: 'The token was copied to your clipboard.',
+      });
+    });
   };
 
   const onSubmit = async ({ tokenName }: TCreateTokenMutationSchema) => {
@@ -86,10 +118,42 @@ export const ApiTokenForm = ({ user, className }: ApiTokenFormProps) => {
 
   return (
     <div className={cn(className)}>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you sure you want to delete this token?</DialogTitle>
+
+            <DialogDescription>
+              Please note that this action is irreversible. Once confirmed, your token will be
+              permanently deleted.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                variant="secondary"
+                className="flex-1"
+                onClick={(prev) => setIsOpen(!prev)}
+              >
+                Cancel
+              </Button>
+
+              <Button variant="destructive" onClick={async () => deleteToken(tokenIdToDelete)}>
+                I'm sure! Delete it
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
       <h2 className="mt-6 text-xl">Your existing tokens</h2>
       <ul className="mb-4 flex flex-col gap-2">
         {tokens?.map((token) => (
-          <li className="border-muted mb-4 mt-4 break-words rounded-sm border-2 p-4" key={token.id}>
+          <li
+            className="border-muted mb-4 mt-4 break-words  rounded-sm border-2 p-4"
+            key={token.id}
+          >
             <div>
               <p>
                 {token.name} <span className="text-sm italic">({token.algorithm})</span>
@@ -117,10 +181,17 @@ export const ApiTokenForm = ({ user, className }: ApiTokenFormProps) => {
                     })
                   : 'N/A'}
               </p>
-              <Button variant="destructive" className="mr-4 mt-4" onClick={deleteToken}>
+              <Button
+                variant="destructive"
+                className="mr-4"
+                onClick={() => {
+                  setTokenIdToDelete(token.id);
+                  setIsOpen(true);
+                }}
+              >
                 Delete
               </Button>
-              <Button variant="outline" className="mt-4" onClick={copyToken}>
+              <Button variant="outline" className="mt-4" onClick={() => copyToken(token.token)}>
                 Copy token
               </Button>
             </div>

packages/trpc/server/api-token-router/router.ts

@@ -1,7 +1,7 @@
 import { TRPCError } from '@trpc/server';
 
 import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
-import { deleteApiTokenById } from '@documenso/lib/server-only/public-api/delete-api-token-by-id';
+import { deleteTokenById } from '@documenso/lib/server-only/public-api/delete-api-token-by-id';
 import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
 import { getApiTokenById } from '@documenso/lib/server-only/public-api/get-api-token-by-id';
 
@@ -62,7 +62,7 @@ export const apiTokenRouter = router({
       try {
         const { id } = input;
 
-        return await deleteApiTokenById({
+        return await deleteTokenById({
           id,
           userId: ctx.user.id,
         });