Merge branch 'main' into fix/show-teams-url-new

2025-11-13 16:23:06 +10:00 · 2024-05-24 14:58:42 +10:00
parent c98c1b9467 ef5d267e96
commit 22b8c2044b
99 changed files with 3488 additions and 57742 deletions
--- a/apps/marketing/next.config.js
+++ b/apps/marketing/next.config.js
@ -18,6 +18,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
  path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );

+const FONT_NOTO_SANS_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
  experimental: {
@ -38,6 +42,7 @@ const config = {
  env: {
    NEXT_PUBLIC_PROJECT: 'marketing',
    FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
+    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
  },
  modularizeImports: {
    'lucide-react': {
--- a/apps/marketing/public/pdf.worker.min.js
+++ b/apps/marketing/public/pdf.worker.min.js
--- a/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
+++ b/apps/marketing/src/app/(marketing)/singleplayer/client.tsx
@ -8,7 +8,7 @@ import { useRouter } from 'next/navigation';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { DocumentDataType, Prisma } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@ -115,7 +115,7 @@ export const SinglePlayerClient = () => {
    }

    try {
-      const putFileData = await putFile(uploadedFile.file);
+      const putFileData = await putPdfFile(uploadedFile.file);

      const documentToken = await createSinglePlayerDocument({
        documentData: {
@ -248,6 +248,7 @@ export const SinglePlayerClient = () => {
                  recipients={uploadedFile ? [placeholderRecipient] : []}
                  fields={fields}
                  onSubmit={onFieldsSubmit}
+                  canGoBack={true}
                  isDocumentPdfLoaded={true}
                />
              </fieldset>
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@ -18,6 +18,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
  path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );

+const FONT_NOTO_SANS_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
  output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
@ -42,6 +46,7 @@ const config = {
    APP_VERSION: version,
    NEXT_PUBLIC_PROJECT: 'web',
    FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
+    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
  },
  modularizeImports: {
    'lucide-react': {
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -28,6 +28,7 @@
    "cookie-es": "^1.0.0",
    "formidable": "^2.1.1",
    "framer-motion": "^10.12.8",
+    "input-otp": "^1.2.4",
    "lucide-react": "^0.279.0",
    "luxon": "^3.4.0",
    "micro": "^10.0.1",
--- a/apps/web/public/pdf.worker.min.js
+++ b/apps/web/public/pdf.worker.min.js
--- a/apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx
+++ b/apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx
@ -2,7 +2,8 @@

 import Link from 'next/link';

-import { type Document, DocumentStatus } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
+import { type Document, SigningStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@ -17,9 +18,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type AdminActionsProps = {
  className?: string;
  document: Document;
+  recipients: Recipient[];
 };

-export const AdminActions = ({ className, document }: AdminActionsProps) => {
+export const AdminActions = ({ className, document, recipients }: AdminActionsProps) => {
  const { toast } = useToast();

  const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
@ -47,7 +49,9 @@ export const AdminActions = ({ className, document }: AdminActionsProps) => {
            <Button
              variant="outline"
              loading={isResealDocumentLoading}
-              disabled={document.status !== DocumentStatus.COMPLETED}
+              disabled={recipients.some(
+                (recipient) => recipient.signingStatus !== SigningStatus.SIGNED,
+              )}
              onClick={() => resealDocument({ id: document.id })}
            >
              Reseal document
--- a/apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx
+++ b/apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx
@ -53,7 +53,7 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument

      <h2 className="text-lg font-semibold">Admin Actions</h2>

-      <AdminActions className="mt-2" document={document} />
+      <AdminActions className="mt-2" document={document} recipients={document.Recipient} />

      <hr className="my-4" />
      <h2 className="text-lg font-semibold">Recipients</h2>
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx
@ -332,6 +332,7 @@ export const EditDocumentForm = ({
              isDocumentPdfLoaded={isDocumentPdfLoaded}
              onSubmit={onAddSettingsFormSubmit}
            />
+
            <AddSignersFormPartial
              key={recipients.length}
              documentFlow={documentFlow.signers}
--- a/apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/edit/document-edit-page-view.tsx
@ -36,11 +36,6 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie

  const { user } = await getRequiredServerComponentSession();

-  const isDocumentEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
  const document = await getDocumentWithDetailsById({
    id: documentId,
    userId: user.id,
@ -74,6 +69,11 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
    documentMeta.password = securePassword;
  }

+  const isDocumentEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
  return (
    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
      <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
--- a/apps/web/src/app/(dashboard)/documents/data-table.tsx
+++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx
@ -3,6 +3,7 @@
 import { useTransition } from 'react';

 import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';

 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
@ -62,7 +63,12 @@ export const DocumentsDataTable = ({
          {
            header: 'Created',
            accessorKey: 'createdAt',
-            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+            cell: ({ row }) => (
+              <LocaleDate
+                date={row.original.createdAt}
+                format={{ ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }}
+              />
+            ),
          },
          {
            header: 'Title',
--- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx
+++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx
@ -10,8 +10,9 @@ import { useSession } from 'next-auth/react';
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
@ -57,7 +58,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
    try {
      setIsLoading(true);

-      const { type, data } = await putFile(file);
+      const { type, data } = await putPdfFile(file);

      const { id: documentDataId } = await createDocumentData({
        type,
@ -83,13 +84,21 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
      });

      router.push(`${formatDocumentsPath(team?.url)}/${id}/edit`);
-    } catch (error) {
-      console.error(error);
+    } catch (err) {
+      const error = AppError.parseError(err);

-      if (error instanceof TRPCClientError) {
+      console.error(err);
+
+      if (error.code === 'INVALID_DOCUMENT_FILE') {
+        toast({
+          title: 'Invalid file',
+          description: 'You cannot upload encrypted PDFs',
+          variant: 'destructive',
+        });
+      } else if (err instanceof TRPCClientError) {
        toast({
          title: 'Error',
-          description: error.message,
+          description: err.message,
          variant: 'destructive',
        });
      } else {
--- a/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx
@ -1,10 +1,14 @@
 'use client';

-import { useState } from 'react';
+import { useEffect, useState } from 'react';

 import { useRouter } from 'next/navigation';

-import type { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
+import {
+  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+  SKIP_QUERY_BATCH_META,
+} from '@documenso/lib/constants/trpc';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@ -19,52 +23,135 @@ import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
 import { AddTemplatePlaceholderRecipientsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+import { AddTemplateSettingsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-settings';
+import type { TAddTemplateSettingsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-settings.types';
 import { useToast } from '@documenso/ui/primitives/use-toast';

+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export type EditTemplateFormProps = {
  className?: string;
-  user: User;
-  template: Template;
-  recipients: Recipient[];
-  fields: Field[];
-  documentData: DocumentData;
+  initialTemplate: TemplateWithDetails;
+  isEnterprise: boolean;
  templateRootPath: string;
 };

-type EditTemplateStep = 'signers' | 'fields';
-const EditTemplateSteps: EditTemplateStep[] = ['signers', 'fields'];
+type EditTemplateStep = 'settings' | 'signers' | 'fields';
+const EditTemplateSteps: EditTemplateStep[] = ['settings', 'signers', 'fields'];

 export const EditTemplateForm = ({
+  initialTemplate,
  className,
-  template,
-  recipients,
-  fields,
-  user: _user,
-  documentData,
+  isEnterprise,
  templateRootPath,
 }: EditTemplateFormProps) => {
  const { toast } = useToast();
  const router = useRouter();

-  const [step, setStep] = useState<EditTemplateStep>('signers');
+  const team = useOptionalCurrentTeam();
+
+  const [step, setStep] = useState<EditTemplateStep>('settings');
+
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const utils = trpc.useUtils();
+
+  const { data: template, refetch: refetchTemplate } =
+    trpc.template.getTemplateWithDetailsById.useQuery(
+      {
+        id: initialTemplate.id,
+      },
+      {
+        initialData: initialTemplate,
+        ...SKIP_QUERY_BATCH_META,
+      },
+    );
+
+  const { Recipient: recipients, Field: fields, templateDocumentData } = template;

  const documentFlow: Record<EditTemplateStep, DocumentFlowStep> = {
+    settings: {
+      title: 'General',
+      description: 'Configure general settings for the template.',
+      stepIndex: 1,
+    },
    signers: {
      title: 'Add Placeholders',
      description: 'Add all relevant placeholders for each recipient.',
-      stepIndex: 1,
+      stepIndex: 2,
    },
    fields: {
      title: 'Add Fields',
      description: 'Add all relevant fields for each recipient.',
-      stepIndex: 2,
+      stepIndex: 3,
    },
  };

  const currentDocumentFlow = documentFlow[step];

-  const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation();
-  const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation();
+  const { mutateAsync: updateTemplateSettings } = trpc.template.updateTemplateSettings.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.template.getTemplateWithDetailsById.setData(
+        {
+          id: initialTemplate.id,
+        },
+        (oldData) => ({ ...(oldData || initialTemplate), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.template.getTemplateWithDetailsById.setData(
+        {
+          id: initialTemplate.id,
+        },
+        (oldData) => ({ ...(oldData || initialTemplate), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.template.getTemplateWithDetailsById.setData(
+        {
+          id: initialTemplate.id,
+        },
+        (oldData) => ({ ...(oldData || initialTemplate), ...newData }),
+      );
+    },
+  });
+
+  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
+    try {
+      await updateTemplateSettings({
+        templateId: template.id,
+        teamId: team?.id,
+        data: {
+          title: data.title,
+          globalAccessAuth: data.globalAccessAuth ?? null,
+          globalActionAuth: data.globalActionAuth ?? null,
+        },
+        meta: data.meta,
+      });
+
+      // Router refresh is here to clear the router cache for when navigating to /documents.
+      router.refresh();
+
+      setStep('signers');
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating the document settings.',
+        variant: 'destructive',
+      });
+    }
+  };

  const onAddTemplatePlaceholderFormSubmit = async (
    data: TAddTemplatePlacholderRecipientsFormSchema,
@ -72,9 +159,11 @@ export const EditTemplateForm = ({
    try {
      await addTemplateSigners({
        templateId: template.id,
+        teamId: team?.id,
        signers: data.signers,
      });

+      // Router refresh is here to clear the router cache for when navigating to /documents.
      router.refresh();

      setStep('fields');
@ -100,6 +189,9 @@ export const EditTemplateForm = ({
        duration: 5000,
      });

+      // Router refresh is here to clear the router cache for when navigating to /documents.
+      router.refresh();
+
      router.push(templateRootPath);
    } catch (err) {
      toast({
@ -110,6 +202,15 @@ export const EditTemplateForm = ({
    }
  };

+  /**
+   * Refresh the data in the background when steps change.
+   */
+  useEffect(() => {
+    void refetchTemplate();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step]);
+
  return (
    <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
      <Card
@ -117,7 +218,11 @@ export const EditTemplateForm = ({
        gradient
      >
        <CardContent className="p-2">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            key={templateDocumentData.id}
+            documentData={templateDocumentData}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
+          />
        </CardContent>
      </Card>

@ -135,12 +240,25 @@ export const EditTemplateForm = ({
            currentStep={currentDocumentFlow.stepIndex}
            setCurrentStep={(step) => setStep(EditTemplateSteps[step - 1])}
          >
+            <AddTemplateSettingsFormPartial
+              key={recipients.length}
+              template={template}
+              documentFlow={documentFlow.settings}
+              recipients={recipients}
+              fields={fields}
+              onSubmit={onAddSettingsFormSubmit}
+              isEnterprise={isEnterprise}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+            />
+
            <AddTemplatePlaceholderRecipientsFormPartial
              key={recipients.length}
              documentFlow={documentFlow.signers}
              recipients={recipients}
              fields={fields}
              onSubmit={onAddTemplatePlaceholderFormSubmit}
+              isEnterprise={isEnterprise}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
            />

            <AddTemplateFieldsFormPartial
--- a/apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx
@ -5,10 +5,9 @@ import { redirect } from 'next/navigation';

 import { ChevronLeft } from 'lucide-react';

+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
-import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { getTemplateWithDetailsById } from '@documenso/lib/server-only/template/get-template-with-details-by-id';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';

@ -35,7 +34,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)

  const { user } = await getRequiredServerComponentSession();

-  const template = await getTemplateById({
+  const template = await getTemplateWithDetailsById({
    id: templateId,
    userId: user.id,
  }).catch(() => null);
@ -44,21 +43,13 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
    redirect(templateRootPath);
  }

-  const { templateDocumentData } = template;
-
-  const [templateRecipients, templateFields] = await Promise.all([
-    getRecipientsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-    getFieldsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-  ]);
+  const isTemplateEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });

  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
        Templates
@ -73,13 +64,10 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
      </div>

      <EditTemplateForm
-        className="mt-8"
-        template={template}
-        user={user}
-        recipients={templateRecipients}
-        fields={templateFields}
-        documentData={templateDocumentData}
+        className="mt-6"
+        initialTemplate={template}
        templateRootPath={templateRootPath}
+        isEnterprise={isTemplateEnterprise}
      />
    </div>
  );
--- a/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx
@ -1,21 +1,16 @@
 'use client';

-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';

 import { useRouter } from 'next/navigation';

-import { zodResolver } from '@hookform/resolvers/zod';
-import { FilePlus, X } from 'lucide-react';
+import { FilePlus, Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
-import { useForm } from 'react-hook-form';
-import * as z from 'zod';

 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
-import { base64 } from '@documenso/lib/universal/base64';
-import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
  Dialog,
  DialogClose,
@ -27,24 +22,8 @@ import {
  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  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';

-const ZCreateTemplateFormSchema = z.object({
-  name: z.string(),
-});
-
-type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;
-
 type NewTemplateDialogProps = {
  teamId?: number;
  templateRootPath: string;
@ -56,50 +35,20 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
  const { data: session } = useSession();
  const { toast } = useToast();

-  const form = useForm<TCreateTemplateFormSchema>({
-    defaultValues: {
-      name: '',
-    },
-    resolver: zodResolver(ZCreateTemplateFormSchema),
-  });
-
  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();

  const [showNewTemplateDialog, setShowNewTemplateDialog] = useState(false);
-  const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
+  const [isUploadingFile, setIsUploadingFile] = useState(false);

  const onFileDrop = async (file: File) => {
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const base64String = base64.encode(new Uint8Array(arrayBuffer));
-
-      setUploadedFile({
-        file,
-        fileBase64: `data:application/pdf;base64,${base64String}`,
-      });
-
-      if (!form.getValues('name')) {
-        form.setValue('name', file.name);
-      }
-    } catch {
-      toast({
-        title: 'Something went wrong',
-        description: 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onSubmit = async (values: TCreateTemplateFormSchema) => {
-    if (!uploadedFile) {
+    if (isUploadingFile) {
      return;
    }

-    const file: File = uploadedFile.file;
+    setIsUploadingFile(true);

    try {
-      const { type, data } = await putFile(file);
-
+      const { type, data } = await putPdfFile(file);
      const { id: templateDocumentDataId } = await createDocumentData({
        type,
        data,
@ -107,7 +56,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo

      const { id } = await createTemplate({
        teamId,
-        title: values.name ? values.name : file.name,
+        title: file.name,
        templateDocumentDataId,
      });

@ -127,26 +76,16 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
        description: 'Please try again later.',
        variant: 'destructive',
      });
+
+      setIsUploadingFile(false);
    }
  };

-  const resetForm = () => {
-    if (form.getValues('name') === uploadedFile?.file.name) {
-      form.reset();
-    }
-
-    setUploadedFile(null);
-  };
-
-  useEffect(() => {
-    if (!showNewTemplateDialog) {
-      form.reset();
-      setUploadedFile(null);
-    }
-  }, [form, showNewTemplateDialog]);
-
  return (
-    <Dialog open={showNewTemplateDialog} onOpenChange={setShowNewTemplateDialog}>
+    <Dialog
+      open={showNewTemplateDialog}
+      onOpenChange={(value) => !isUploadingFile && setShowNewTemplateDialog(value)}
+    >
      <DialogTrigger asChild>
        <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
          <FilePlus className="-ml-1 mr-2 h-4 w-4" />
@ -162,80 +101,23 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
          </DialogDescription>
        </DialogHeader>

-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="flex flex-col gap-y-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Template name</FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      <span className="text-muted-foreground text-xs">
-                        Leave this empty if you would like to use your document's name for the
-                        template
-                      </span>
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+        <div className="relative">
+          <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />

-              <div className="mt-1.5">
-                {uploadedFile ? (
-                  <Card gradient className="h-[40vh]">
-                    <CardContent className="flex h-full flex-col items-center justify-center p-2">
-                      <button
-                        onClick={() => resetForm()}
-                        title="Remove Template"
-                        className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
-                      >
-                        <X className="h-6 w-6" />
-                        <span className="sr-only">Remove Template</span>
-                      </button>
+          {isUploadingFile && (
+            <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
+              <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
+            </div>
+          )}
+        </div>

-                      <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
-                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
-                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                      </div>
-
-                      <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
-                        Uploaded Document
-                      </p>
-
-                      <span className="text-muted-foreground/80 mt-1 text-sm">
-                        {uploadedFile.file.name}
-                      </span>
-                    </CardContent>
-                  </Card>
-                ) : (
-                  <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
-                )}
-              </div>
-
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                    Cancel
-                  </Button>
-                </DialogClose>
-
-                <Button
-                  loading={form.formState.isSubmitting}
-                  disabled={!uploadedFile}
-                  type="submit"
-                >
-                  Create template
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isUploadingFile}>
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
--- a/apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx
+++ b/apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx
@ -1,14 +1,21 @@
+import { useEffect, useState } from 'react';
+
 import { useRouter } from 'next/navigation';

 import { zodResolver } from '@hookform/resolvers/zod';
-import { Plus } from 'lucide-react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { InfoIcon, Plus } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';

+import {
+  TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+  TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+} from '@documenso/lib/constants/template';
+import { AppError } from '@documenso/lib/errors/app-error';
 import type { Recipient } from '@documenso/prisma/client';
-import { RecipientRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
  Dialog,
  DialogClose,
@ -19,24 +26,59 @@ import {
  DialogTitle,
  DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import { useOptionalCurrentTeam } from '~/providers/team';

-const ZAddRecipientsForNewDocumentSchema = z.object({
-  recipients: z.array(
-    z.object({
-      email: z.string().email(),
-      name: z.string(),
-      role: z.nativeEnum(RecipientRole),
-    }),
-  ),
-});
+const ZAddRecipientsForNewDocumentSchema = z
+  .object({
+    sendDocument: z.boolean(),
+    recipients: z.array(
+      z.object({
+        id: z.number(),
+        email: z.string().email(),
+        name: z.string(),
+      }),
+    ),
+  })
+  // Display exactly which rows are duplicates.
+  .superRefine((items, ctx) => {
+    const uniqueEmails = new Map<string, number>();
+
+    for (const [index, recipients] of items.recipients.entries()) {
+      const email = recipients.email.toLowerCase();
+
+      const firstFoundIndex = uniqueEmails.get(email);
+
+      if (firstFoundIndex === undefined) {
+        uniqueEmails.set(email, index);
+        continue;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', index, 'email'],
+      });
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', firstFoundIndex, 'email'],
+      });
+    }
+  });

 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;

@ -54,35 +96,33 @@ export function UseTemplateDialog({
  const router = useRouter();
  const { toast } = useToast();

+  const [open, setOpen] = useState(false);
+
  const team = useOptionalCurrentTeam();

-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddRecipientsForNewDocumentSchema>({
+  const form = useForm<TAddRecipientsForNewDocumentSchema>({
    resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
    defaultValues: {
-      recipients:
-        recipients.length > 0
-          ? recipients.map((recipient) => ({
-              nativeId: recipient.id,
-              formId: String(recipient.id),
-              name: recipient.name,
-              email: recipient.email,
-              role: recipient.role,
-            }))
-          : [
-              {
-                name: '',
-                email: '',
-                role: RecipientRole.SIGNER,
-              },
-            ],
+      sendDocument: false,
+      recipients: recipients.map((recipient) => {
+        const isRecipientEmailPlaceholder = recipient.email.match(
+          TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+        );
+
+        const isRecipientNamePlaceholder = recipient.name.match(
+          TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+        );
+
+        return {
+          id: recipient.id,
+          name: !isRecipientNamePlaceholder ? recipient.name : '',
+          email: !isRecipientEmailPlaceholder ? recipient.email : '',
+        };
+      }),
    },
  });

-  const { mutateAsync: createDocumentFromTemplate, isLoading: isCreatingDocumentFromTemplate } =
+  const { mutateAsync: createDocumentFromTemplate } =
    trpc.template.createDocumentFromTemplate.useMutation();

  const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
@ -91,6 +131,7 @@ export function UseTemplateDialog({
        templateId,
        teamId: team?.id,
        recipients: data.recipients,
+        sendDocument: data.sendDocument,
      });

      toast({
@ -101,23 +142,35 @@ export function UseTemplateDialog({

      router.push(`${documentRootPath}/${id}`);
    } catch (err) {
-      toast({
+      const error = AppError.parseError(err);
+
+      const toastPayload: Toast = {
        title: 'Error',
        description: 'An error occurred while creating document from template.',
        variant: 'destructive',
-      });
+      };
+
+      if (error.code === 'DOCUMENT_SEND_FAILED') {
+        toastPayload.description = 'The document was created but could not be sent to recipients.';
+      }
+
+      toast(toastPayload);
    }
  };

-  const onCreateDocumentFromTemplate = handleSubmit(onSubmit);
-
  const { fields: formRecipients } = useFieldArray({
-    control,
+    control: form.control,
    name: 'recipients',
  });

+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
  return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
      <DialogTrigger asChild>
        <Button className="cursor-pointer">
          <Plus className="-ml-1 mr-2 h-4 w-4" />
@ -126,121 +179,110 @@ export function UseTemplateDialog({
      </DialogTrigger>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
-          <DialogTitle>Document Recipients</DialogTitle>
-          <DialogDescription>Add the recipients to create the template with.</DialogDescription>
+          <DialogTitle>Create document from template</DialogTitle>
+          <DialogDescription>
+            {recipients.length === 0
+              ? 'A draft document will be created'
+              : 'Add the recipients to create the document with'}
+          </DialogDescription>
        </DialogHeader>
-        <div className="flex flex-col space-y-4">
-          {formRecipients.map((recipient, index) => (
-            <div
-              key={recipient.id}
-              data-native-id={recipient.id}
-              className="flex flex-wrap items-end gap-x-4"
-            >
-              <div className="flex-1">
-                <Label htmlFor={`recipient-${recipient.id}-email`}>
-                  Email
-                  <span className="text-destructive ml-1 inline-block font-medium">*</span>
-                </Label>

-                <Controller
-                  control={control}
-                  name={`recipients.${index}.email`}
-                  render={({ field }) => (
-                    <Input
-                      id={`recipient-${recipient.id}-email`}
-                      type="email"
-                      className="bg-background mt-2"
-                      disabled={isSubmitting}
-                      {...field}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                {formRecipients.map((recipient, index) => (
+                  <div className="flex w-full flex-row space-x-4" key={recipient.id}>
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.email`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel required>Email</FormLabel>}
+
+                          <FormControl>
+                            <Input {...field} placeholder={recipients[index].email || 'Email'} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                    />
-                  )}
-                />
-              </div>

-              <div className="flex-1">
-                <Label htmlFor={`recipient-${recipient.id}-name`}>Name</Label>
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.name`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel>Name</FormLabel>}

-                <Controller
-                  control={control}
-                  name={`recipients.${index}.name`}
-                  render={({ field }) => (
-                    <Input
-                      id={`recipient-${recipient.id}-name`}
-                      type="text"
-                      className="bg-background mt-2"
-                      disabled={isSubmitting}
-                      {...field}
+                          <FormControl>
+                            <Input {...field} placeholder={recipients[index].name || 'Name'} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                    />
-                  )}
-                />
+                  </div>
+                ))}
              </div>

-              <div className="w-[60px]">
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.role`}
-                  render={({ field: { value, onChange } }) => (
-                    <Select value={value} onValueChange={(x) => onChange(x)}>
-                      <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
+              {recipients.length > 0 && (
+                <div className="mt-4 flex flex-row items-center">
+                  <FormField
+                    control={form.control}
+                    name="sendDocument"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex flex-row items-center">
+                          <Checkbox
+                            id="sendDocument"
+                            className="h-5 w-5"
+                            checkClassName="dark:text-white text-primary"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />

-                      <SelectContent className="" align="end">
-                        <SelectItem value={RecipientRole.SIGNER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                            Signer
-                          </div>
-                        </SelectItem>
+                          <label
+                            className="text-muted-foreground ml-2 flex items-center text-sm"
+                            htmlFor="sendDocument"
+                          >
+                            Send document
+                            <Tooltip>
+                              <TooltipTrigger type="button">
+                                <InfoIcon className="mx-1 h-4 w-4" />
+                              </TooltipTrigger>

-                        <SelectItem value={RecipientRole.CC}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                            Receives copy
-                          </div>
-                        </SelectItem>
+                              <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                <p>
+                                  The document will be immediately sent to recipients if this is
+                                  checked.
+                                </p>

-                        <SelectItem value={RecipientRole.APPROVER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                            Approver
-                          </div>
-                        </SelectItem>
+                                <p>Otherwise, the document will be created as a draft.</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </label>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              )}

-                        <SelectItem value={RecipientRole.VIEWER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                            Viewer
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-              </div>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Close
+                  </Button>
+                </DialogClose>

-              <div className="w-full">
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.email} />
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.name} />
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <DialogFooter className="justify-end">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-
-          <Button
-            type="button"
-            loading={isCreatingDocumentFromTemplate}
-            disabled={isCreatingDocumentFromTemplate}
-            onClick={onCreateDocumentFromTemplate}
-          >
-            Create Document
-          </Button>
-        </DialogFooter>
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  {form.getValues('sendDocument') ? 'Create and send' : 'Create as draft'}
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
      </DialogContent>
    </Dialog>
  );
--- a/apps/web/src/app/(signing)/sign/[token]/document-action-auth-2fa.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/document-action-auth-2fa.tsx
@ -18,7 +18,7 @@ import {
  FormLabel,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';

 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';

@ -138,7 +138,15 @@ export const DocumentActionAuth2FA = ({
                  <FormLabel required>2FA token</FormLabel>

                  <FormControl>
-                    <Input {...field} placeholder="Token" />
+                    <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                      {Array(6)
+                        .fill(null)
+                        .map((_, i) => (
+                          <PinInputGroup key={i}>
+                            <PinInputSlot index={i} />
+                          </PinInputGroup>
+                        ))}
+                    </PinInput>
                  </FormControl>

                  <FormMessage />
--- a/apps/web/src/app/(teams)/t/[teamUrl]/settings/tokens/page.tsx
+++ b/apps/web/src/app/(teams)/t/[teamUrl]/settings/tokens/page.tsx
@ -1,7 +1,10 @@
 import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';

 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import type { GetTeamTokensResponse } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { Button } from '@documenso/ui/primitives/button';
@ -23,7 +26,24 @@ export default async function ApiTokensPage({ params }: ApiTokensPageProps) {

  const team = await getTeamByUrl({ userId: user.id, teamUrl });

-  const tokens = await getTeamTokens({ userId: user.id, teamId: team.id });
+  let tokens: GetTeamTokensResponse | null = null;
+
+  try {
+    tokens = await getTeamTokens({ userId: user.id, teamId: team.id });
+  } catch (err) {
+    const error = AppError.parseError(err);
+
+    return (
+      <div>
+        <h3 className="text-2xl font-semibold">API Tokens</h3>
+        <p className="text-muted-foreground mt-2 text-sm">
+          {match(error.code)
+            .with(AppErrorCode.UNAUTHORIZED, () => error.message)
+            .otherwise(() => 'Something went wrong.')}
+        </p>
+      </div>
+    );
+  }

  return (
    <div>
--- a/apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/articles/signature-disclosure/page.tsx
@ -5,7 +5,7 @@ import { Button } from '@documenso/ui/primitives/button';
 export default function SignatureDisclosure() {
  return (
    <div>
-      <article className="prose">
+      <article className="prose dark:prose-invert">
        <h1>Electronic Signature Disclosure</h1>

        <h2>Welcome</h2>
--- a/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx
@ -28,7 +28,7 @@ import {
  FormItem,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 export const ZDisable2FAForm = z.object({
@ -107,7 +107,15 @@ export const DisableAuthenticatorAppDialog = () => {
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
-                      <Input {...field} placeholder="Token" />
+                      <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                        {Array(6)
+                          .fill(null)
+                          .map((_, i) => (
+                            <PinInputGroup key={i}>
+                              <PinInputSlot index={i} />
+                            </PinInputGroup>
+                          ))}
+                      </PinInput>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
--- a/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx
@ -30,7 +30,7 @@ import {
  FormLabel,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import { RecoveryCodeList } from './recovery-code-list';
@ -212,7 +212,15 @@ export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorA
                        <FormItem>
                          <FormLabel className="text-muted-foreground">Token</FormLabel>
                          <FormControl>
-                            <Input {...field} type="text" value={field.value ?? ''} />
+                            <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                              {Array(6)
+                                .fill(null)
+                                .map((_, i) => (
+                                  <PinInputGroup key={i}>
+                                    <PinInputSlot index={i} />
+                                  </PinInputGroup>
+                                ))}
+                            </PinInput>
                          </FormControl>
                          <FormMessage />
                        </FormItem>
--- a/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
+++ b/apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx
@ -30,7 +30,7 @@ import {
  FormItem,
  FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';

 import { RecoveryCodeList } from './recovery-code-list';

@ -115,7 +115,15 @@ export const ViewRecoveryCodesDialog = () => {
                  render={({ field }) => (
                    <FormItem>
                      <FormControl>
-                        <Input {...field} placeholder="Token" />
+                        <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                          {Array(6)
+                            .fill(null)
+                            .map((_, i) => (
+                              <PinInputGroup key={i}>
+                                <PinInputSlot index={i} />
+                              </PinInputGroup>
+                            ))}
+                        </PinInput>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@ -38,6 +38,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
@ -372,9 +373,17 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
                  name="totpCode"
                  render={({ field }) => (
                    <FormItem>
-                      <FormLabel>Authentication Token</FormLabel>
+                      <FormLabel>Token</FormLabel>
                      <FormControl>
-                        <Input type="text" {...field} />
+                        <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                          {Array(6)
+                            .fill(null)
+                            .map((_, i) => (
+                              <PinInputGroup key={i}>
+                                <PinInputSlot index={i} />
+                              </PinInputGroup>
+                            ))}
+                        </PinInput>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
--- a/apps/web/src/pages/api/auth/[...nextauth].ts
+++ b/apps/web/src/pages/api/auth/[...nextauth].ts
@ -2,6 +2,8 @@ import type { NextApiRequest, NextApiResponse } from 'next';

 import NextAuth from 'next-auth';

+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { prisma } from '@documenso/prisma';
@ -18,15 +20,29 @@ export default async function auth(req: NextApiRequest, res: NextApiResponse) {
      error: '/signin',
    },
    events: {
-      signIn: async ({ user }) => {
-        await prisma.userSecurityAuditLog.create({
-          data: {
-            userId: user.id,
-            ipAddress,
-            userAgent,
-            type: UserSecurityAuditLogType.SIGN_IN,
-          },
-        });
+      signIn: async ({ user: { id: userId } }) => {
+        const [user] = await Promise.all([
+          await prisma.user.findFirstOrThrow({
+            where: {
+              id: userId,
+            },
+          }),
+          await prisma.userSecurityAuditLog.create({
+            data: {
+              userId,
+              ipAddress,
+              userAgent,
+              type: UserSecurityAuditLogType.SIGN_IN,
+            },
+          }),
+        ]);
+
+        // Create the Stripe customer and attach it to the user if it doesn't exist.
+        if (user.customerId === null && IS_BILLING_ENABLED()) {
+          await getStripeCustomerByUser(user).catch((err) => {
+            console.error(err);
+          });
+        }
      },
      signOut: async ({ token }) => {
        const userId = typeof token.id === 'string' ? parseInt(token.id) : token.id;