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/app/(dashboard)/settings/token/page.tsx

@@ -1,9 +1,21 @@
+import { DateTime } from 'luxon';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
+import { Button } from '@documenso/ui/primitives/button';
+
+import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
+import { LocaleDate } from '~/components/formatter/locale-date';
 import { ApiTokenForm } from '~/components/forms/token';
 
-export default function ApiToken() {
+export default async function ApiTokensPage() {
+  const { user } = await getRequiredServerComponentSession();
+
+  const tokens = await getUserTokens({ userId: user.id });
+
   return (
     <div>
-      <h3 className="text-lg font-medium">API Tokens</h3>
+      <h3 className="text-2xl font-semibold">API Tokens</h3>
 
       <p className="text-muted-foreground mt-2 text-sm">
         On this page, you can create new API tokens and manage the existing ones.
@@ -12,6 +24,45 @@ export default function ApiToken() {
       <hr className="my-4" />
 
       <ApiTokenForm className="max-w-xl" />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-xl font-medium">Your existing tokens</h4>
+
+      {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>
+      )}
+
+      {tokens.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {tokens.map((token) => (
+            <div key={token.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h5 className="text-base">{token.name}</h5>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Created on <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
+                  </p>
+                  <p className="text-muted-foreground mt-1 text-xs">
+                    Expires on <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
+                  </p>
+                </div>
+
+                <div>
+                  <DeleteTokenDialog token={token}>
+                    <Button variant="destructive">Delete</Button>
+                  </DeleteTokenDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

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>
   );
 };

apps/web/src/pages/api/v1/[...ts-rest].tsx

@@ -1,227 +1,5 @@
-import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
-import { deleteDocument } from '@documenso/lib/server-only/document/delete-document';
-import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
-import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { sendDocument } from '@documenso/lib/server-only/document/send-document';
-import { setFieldsForDocument } from '@documenso/lib/server-only/field/set-fields-for-document';
-import { getUserByApiToken } from '@documenso/lib/server-only/public-api/get-user-by-token';
-import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
-import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
-import { contract } from '@documenso/trpc/api-contract/contract';
-import { createNextRoute, createNextRouter } from '@documenso/trpc/server/public-api/ts-rest';
+import { createNextRouter } from '@documenso/api/next';
+import { ApiContractV1 } from '@documenso/api/v1/contract';
+import { ApiContractV1Implementation } from '@documenso/api/v1/implementation';
 
-const router = createNextRoute(contract, {
-  getDocuments: async (args) => {
-    const page = Number(args.query.page) || 1;
-    const perPage = Number(args.query.perPage) || 10;
-    const { authorization } = args.headers;
-    let user;
-
-    try {
-      user = await getUserByApiToken({ token: authorization });
-    } catch (e) {
-      return {
-        status: 401,
-        body: {
-          message: e.message,
-        },
-      };
-    }
-
-    const { data: documents, totalPages } = await findDocuments({ page, perPage, userId: user.id });
-
-    return {
-      status: 200,
-      body: {
-        documents,
-        totalPages,
-      },
-    };
-  },
-  getDocument: async (args) => {
-    const { id: documentId } = args.params;
-    const { authorization } = args.headers;
-    let user;
-
-    try {
-      user = await getUserByApiToken({ token: authorization });
-    } catch (e) {
-      return {
-        status: 401,
-        body: {
-          message: e.message,
-        },
-      };
-    }
-
-    try {
-      const document = await getDocumentById({ id: Number(documentId), userId: user.id });
-
-      return {
-        status: 200,
-        body: document,
-      };
-    } catch (e) {
-      return {
-        status: 404,
-        body: {
-          message: e.message ?? 'Document not found',
-        },
-      };
-    }
-  },
-  deleteDocument: async (args) => {
-    const { id: documentId } = args.params;
-    const { authorization } = args.headers;
-
-    let user;
-
-    try {
-      user = await getUserByApiToken({ token: authorization });
-    } catch (e) {
-      return {
-        status: 401,
-        body: {
-          message: e.message,
-        },
-      };
-    }
-
-    try {
-      const document = await getDocumentById({ id: Number(documentId), userId: user.id });
-
-      const deletedDocument = await deleteDocument({
-        id: Number(documentId),
-        userId: user.id,
-        status: document.status,
-      });
-
-      return {
-        status: 200,
-        body: deletedDocument,
-      };
-    } catch (e) {
-      return {
-        status: 404,
-        body: {
-          message: e.message ?? 'Document not found',
-        },
-      };
-    }
-  },
-  createDocument: async (args) => {
-    const { body } = args;
-
-    try {
-      const { url, key } = await getPresignPostUrl(body.fileName, body.contentType);
-
-      return {
-        status: 200,
-        body: {
-          url,
-          key,
-        },
-      };
-    } catch (e) {
-      return {
-        status: 404,
-        body: {
-          message: e.message ?? 'An error has occured while uploading the file',
-        },
-      };
-    }
-  },
-  sendDocumentForSigning: async (args) => {
-    const { authorization } = args.headers;
-    const { id } = args.params;
-    const { body } = args;
-    let user;
-
-    try {
-      user = await getUserByApiToken({ token: authorization });
-    } catch (e) {
-      return {
-        status: 401,
-        body: {
-          message: e.message,
-        },
-      };
-    }
-
-    const document = await getDocumentById({ id: Number(id), userId: user.id });
-
-    if (!document) {
-      return {
-        status: 404,
-        body: {
-          message: 'Document not found',
-        },
-      };
-    }
-
-    if (document.status === 'PENDING') {
-      return {
-        status: 400,
-        body: {
-          message: 'Document is already waiting for signing',
-        },
-      };
-    }
-
-    try {
-      await setRecipientsForDocument({
-        userId: user.id,
-        documentId: Number(id),
-        recipients: [
-          {
-            email: body.signerEmail,
-            name: body.signerName ?? '',
-          },
-        ],
-      });
-
-      await setFieldsForDocument({
-        documentId: Number(id),
-        userId: user.id,
-        fields: body.fields.map((field) => ({
-          signerEmail: body.signerEmail,
-          type: field.fieldType,
-          pageNumber: field.pageNumber,
-          pageX: field.pageX,
-          pageY: field.pageY,
-          pageWidth: field.pageWidth,
-          pageHeight: field.pageHeight,
-        })),
-      });
-
-      if (body.emailBody || body.emailSubject) {
-        await upsertDocumentMeta({
-          documentId: Number(id),
-          subject: body.emailSubject ?? '',
-          message: body.emailBody ?? '',
-        });
-      }
-
-      await sendDocument({
-        documentId: Number(id),
-        userId: user.id,
-      });
-
-      return {
-        status: 200,
-        body: {
-          message: 'Document sent for signing successfully',
-        },
-      };
-    } catch (e) {
-      return {
-        status: 500,
-        body: {
-          message: e.message ?? 'An error has occured while sending the document for signing',
-        },
-      };
-    }
-  },
-});
-
-export default createNextRouter(contract, router);
+export default createNextRouter(ApiContractV1, ApiContractV1Implementation);