refactor: extract api implementation to package

Extracts the API implementation to a package so we can
potentially reuse it across different applications in the
event that we move off using a Next.js API route.

Additionally tidies up the tokens page and form to be more simplified.

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
@@ -6,6 +8,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import type { ApiToken } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -29,24 +32,18 @@ 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;
-  onDelete: () => void;
+  token: Pick<ApiToken, 'id' | 'name'>;
+  onDelete?: () => void;
+  children?: React.ReactNode;
 };
 
-export default function DeleteTokenDialog({
-  trigger,
-  tokenId,
-  tokenName,
-  onDelete,
-}: DeleteTokenDialogProps) {
+export default function DeleteTokenDialog({ token, onDelete, children }: DeleteTokenDialogProps) {
   const router = useRouter();
   const { toast } = useToast();
-  const [isOpen, setIsOpen] = useState(false);
-  const [isDeleteEnabled, setIsDeleteEnabled] = useState(false);
 
-  const deleteMessage = `delete ${tokenName}`;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const deleteMessage = `delete ${token.name}`;
 
   const ZDeleteTokenDialogSchema = z.object({
     tokenName: z.literal(deleteMessage, {
@@ -58,7 +55,7 @@ export default function DeleteTokenDialog({
 
   const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
     onSuccess() {
-      onDelete();
+      onDelete?.();
     },
   });
 
@@ -69,14 +66,10 @@ export default function DeleteTokenDialog({
     },
   });
 
-  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setIsDeleteEnabled(event.target.value === deleteMessage);
-  };
-
   const onSubmit = async () => {
     try {
       await deleteTokenMutation({
-        id: tokenId,
+        id: token.id,
       });
 
       toast({
@@ -86,7 +79,8 @@ export default function DeleteTokenDialog({
       });
 
       setIsOpen(false);
-      router.push('/settings/token');
+
+      router.refresh();
     } catch (error) {
       toast({
         title: 'An unknown error occurred',
@@ -100,7 +94,6 @@ export default function DeleteTokenDialog({
 
   useEffect(() => {
     if (!isOpen) {
-      setIsDeleteEnabled(false);
       form.reset();
     }
   }, [isOpen, form]);
@@ -111,12 +104,13 @@ export default function DeleteTokenDialog({
       onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
     >
       <DialogTrigger asChild={true}>
-        {trigger ?? (
+        {children ?? (
           <Button className="mr-4" variant="destructive">
             Delete
           </Button>
         )}
       </DialogTrigger>
+
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Are you sure you want to delete this token?</DialogTitle>
@@ -144,21 +138,15 @@ export default function DeleteTokenDialog({
                         {deleteMessage}
                       </span>
                     </FormLabel>
+
                     <FormControl>
-                      <Input
-                        className="bg-background"
-                        type="text"
-                        {...field}
-                        onChange={(value) => {
-                          onInputChange(value);
-                          field.onChange(value);
-                        }}
-                      />
+                      <Input className="bg-background" type="text" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
+
               <DialogFooter>
                 <div className="flex w-full flex-1 flex-nowrap gap-4">
                   <Button
@@ -173,7 +161,7 @@ export default function DeleteTokenDialog({
                   <Button
                     type="submit"
                     variant="destructive"
-                    disabled={!isDeleteEnabled}
+                    disabled={!form.formState.isValid}
                     loading={form.formState.isSubmitting}
                   >
                     I'm sure! Delete it

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

@@ -5,20 +5,21 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
-import { DateTime } from 'luxon';
 import { useForm } from 'react-hook-form';
 import type { z } from 'zod';
 
 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 type { TCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
 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 { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -27,46 +28,35 @@ 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';
+const ZCreateTokenFormSchema = ZCreateTokenMutationSchema;
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
 
 export type ApiTokenFormProps = {
   className?: string;
 };
 
-type TCreateTokenMutationSchema = z.infer<typeof ZCreateTokenMutationSchema>;
-
 export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
   const router = useRouter();
+
   const [, copy] = useCopyToClipboard();
   const { toast } = useToast();
-  const [newlyCreatedToken, setNewlyCreatedToken] = useState({ id: 0, token: '' });
-  const [showNewToken, setShowNewToken] = useState(false);
 
-  const { data: tokens, isLoading: isTokensLoading } = trpc.apiToken.getTokens.useQuery();
+  const [newlyCreatedToken, setNewlyCreatedToken] = useState('');
+
   const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
     onSuccess(data) {
-      setNewlyCreatedToken({ id: data.id, token: data.token });
+      setNewlyCreatedToken(data.token);
     },
   });
 
-  const form = useForm<TCreateTokenMutationSchema>({
-    resolver: zodResolver(ZCreateTokenMutationSchema),
-    values: {
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
       tokenName: '',
     },
   });
 
-  /* 
-    This method is called in "delete-token-dialog.tsx" after a successful mutation
-    to avoid deleting the snippet with the newly created token from the screen
-    when users delete any of their tokens except the newly created one.
-  */
-  const onDelete = (tokenId: number) => {
-    if (tokenId === newlyCreatedToken.id) {
-      setShowNewToken(false);
-    }
-  };
-
   const copyToken = async (token: string) => {
     try {
       const copied = await copy(token);
@@ -100,8 +90,8 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
         duration: 5000,
       });
 
-      setShowNewToken(true);
       form.reset();
+
       router.refresh();
     } catch (error) {
       if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
@@ -124,94 +114,42 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
 
   return (
     <div className={cn(className)}>
-      <h2 className="mt-6 text-xl">Your existing tokens</h2>
-      {tokens?.length === 0 ? (
-        <div className="mb-4">
-          <p className="text-muted-foreground mt-2 text-sm italic">
-            Your tokens will be shown here once you create them.
-          </p>
-        </div>
-      ) : (
-        <div></div>
-      )}
-
-      {!tokens && isTokensLoading ? (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
-        </div>
-      ) : (
-        <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}
-            >
-              <div>
-                <p className="mb-4">
-                  {token.name} <span className="text-sm italic">({token.algorithm})</span>
-                </p>
-                <p className="text-sm">
-                  Created:{' '}
-                  {token.createdAt
-                    ? DateTime.fromJSDate(token.createdAt).toLocaleString(DateTime.DATETIME_FULL)
-                    : 'N/A'}
-                </p>
-                <p className="mb-4 text-sm">
-                  Expires:{' '}
-                  {token.expires
-                    ? DateTime.fromJSDate(token.expires).toLocaleString(DateTime.DATETIME_FULL)
-                    : 'N/A'}
-                </p>
-                <DeleteTokenDialog
-                  tokenId={token.id}
-                  tokenName={token.name}
-                  onDelete={() => onDelete(token.id)}
-                />
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {newlyCreatedToken.token && showNewToken && (
-        <div className="border-primary mb-8 break-words rounded-sm border p-4">
-          <p className="text-muted-foreground mt-2 text-sm italic">
-            Your token was created successfully! Make sure to copy it because you won't be able to
-            see it again!
-          </p>
-          <p className="mb-4 mt-4 font-mono text-sm font-light">{newlyCreatedToken.token}</p>
-          <Button
-            variant="outline"
-            className="mt-4"
-            onClick={() => void copyToken(newlyCreatedToken.token)}
-          >
-            Copy token
-          </Button>
-        </div>
-      )}
-
-      <h2 className="text-xl">Create a new token</h2>
-      <p className="text-muted-foreground mt-2 text-sm italic">
-        Enter a representative name for your new token.
-      </p>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
-          <fieldset className="mt-6 flex w-full flex-col gap-y-4">
+          <fieldset className="mt-6 flex w-full flex-col gap-4 md:flex-row ">
             <FormField
               control={form.control}
               name="tokenName"
               render={({ field }) => (
-                <FormItem>
+                <FormItem className="flex-1">
                   <FormLabel className="text-muted-foreground">Token Name</FormLabel>
-                  <FormControl>
-                    <Input type="text" {...field} value={field.value ?? ''} />
-                  </FormControl>
+
+                  <div className="flex items-center gap-x-4">
+                    <FormControl className="flex-1">
+                      <Input type="text" {...field} />
+                    </FormControl>
+
+                    <Button
+                      type="submit"
+                      className="hidden md:inline-flex"
+                      disabled={!form.formState.isDirty}
+                      loading={form.formState.isSubmitting}
+                    >
+                      Create token
+                    </Button>
+                  </div>
+
+                  <FormDescription>
+                    Please enter a meaningful name for your token. This will help you identify it
+                    later.
+                  </FormDescription>
+
                   <FormMessage />
                 </FormItem>
               )}
             />
 
-            <div className="mt-4">
+            <div className="md:hidden">
               <Button
                 type="submit"
                 disabled={!form.formState.isDirty}
@@ -223,6 +161,25 @@ export const ApiTokenForm = ({ className }: ApiTokenFormProps) => {
           </fieldset>
         </form>
       </Form>
+
+      {newlyCreatedToken && (
+        <Card className="mt-8" gradient>
+          <CardContent className="p-4">
+            <p className="text-muted-foreground mt-2 text-sm">
+              Your token was created successfully! Make sure to copy it because you won't be able to
+              see it again!
+            </p>
+
+            <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+              {newlyCreatedToken}
+            </p>
+
+            <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken)}>
+              Copy token
+            </Button>
+          </CardContent>
+        </Card>
+      )}
     </div>
   );
 };