feat: confirm to delete dialog

apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteTokenDialogProps = {
+  trigger?: React.ReactNode;
+  tokenId: number;
+  tokenName: string;
+};
+
+export default function DeleteTokenDialog({ trigger, tokenId, tokenName }: DeleteTokenDialogProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const deleteMessage = `delete ${tokenName}`;
+
+  const ZDeleteTokenDialogSchema = z.object({
+    tokenName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>;
+
+  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation();
+
+  const form = useForm<TDeleteTokenByIdMutationSchema>({
+    resolver: zodResolver(ZDeleteTokenDialogSchema),
+    values: {
+      tokenName: '',
+    },
+  });
+
+  const onSubmit = async () => {
+    try {
+      await deleteTokenMutation({
+        id: tokenId,
+      });
+
+      toast({
+        title: 'Token deleted',
+        description: 'The token was deleted successfully.',
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+      router.push('/settings/token');
+    } catch (error) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 5000,
+        description:
+          'We encountered an unknown error while attempting to delete this team. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
+    >
+      <DialogTrigger asChild={true}>
+        {trigger ?? (
+          <Button className="mr-4" variant="destructive">
+            Delete
+          </Button>
+        )}
+      </DialogTrigger>
+      <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>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="tokenName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Confirm by typing
+                      <span className="font-sm ml-2 font-mono tracking-widest">
+                        {deleteMessage}
+                      </span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <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
+                    type="submit"
+                    variant="destructive"
+                    disabled={!form.formState.isDirty}
+                    loading={form.formState.isSubmitting}
+                  >
+                    I'm sure! Delete it
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,7 +1,5 @@
 'use client';
 
-import { useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -14,14 +12,6 @@ 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,
@@ -33,6 +23,8 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
+
 export type ApiTokenFormProps = {
   className?: string;
 };
@@ -43,12 +35,9 @@ 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),
@@ -57,25 +46,6 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
     },
   });
 
-  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 = (token: string) => {
     void copy(token).then(() => {
       toast({
@@ -97,6 +67,7 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
         duration: 5000,
       });
 
+      form.reset();
       router.refresh();
     } catch (error) {
       if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
@@ -109,6 +80,7 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
         toast({
           title: 'An unknown error occurred',
           variant: 'destructive',
+          duration: 5000,
           description:
             'We encountered an unknown error while attempting create the new token. Please try again later.',
         });
@@ -118,35 +90,6 @@ export const ApiTokenForm = ({ 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) => (
@@ -181,16 +124,7 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
                     })
                   : 'N/A'}
               </p>
-              <Button
+              <DeleteTokenDialog tokenId={token.id} tokenName={token.name} />
-                variant="destructive"
-                className="mr-4"
-                onClick={() => {
-                  setTokenIdToDelete(token.id);
-                  setIsOpen(true);
-                }}
-              >
-                Delete
-              </Button>
               <Button variant="outline" className="mt-4" onClick={() => copyToken(token.token)}>
                 Copy token
               </Button>
@@ -217,7 +151,11 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
             />
 
             <div className="mt-4">
-              <Button type="submit" loading={form.formState.isSubmitting}>
+              <Button
+                type="submit"
+                disabled={!form.formState.isDirty}
+                loading={form.formState.isSubmitting}
+              >
                 Create token
               </Button>
             </div>