feat: add signature configurations (#1710)

Add ability to enable or disable allowed signature types: - Drawn - Typed - Uploaded **Tabbed style signature dialog** ![image](https://github.com/user-attachments/assets/a816fab6-b071-42a5-bb5c-6d4a2572431e) **Document settings** ![image](https://github.com/user-attachments/assets/f0c1bff1-6be1-4c87-b384-1666fa25d7a6) **Team preferences** ![image](https://github.com/user-attachments/assets/8767b05e-1463-4087-8672-f3f43d8b0f2c) - Add multiselect to select allowed signatures in document and templates settings tab - Add multiselect to select allowed signatures in teams preferences - Removed "Enable typed signatures" from document/template edit page - Refactored signature pad to use tabs instead of an all in one signature pad Added E2E tests to check settings are applied correctly for documents and templates
2025-11-12 07:43:16 +10:00 · 2025-03-24 15:25:29 +11:00
parent 231f51bd1f
commit 063fd32f18
85 changed files with 3141 additions and 1316 deletions
--- a/apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx
+++ b/apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx
@ -24,7 +24,6 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
@ -35,7 +34,7 @@ import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/ty
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useStep } from '@documenso/ui/primitives/stepper';

 import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
@ -73,8 +72,7 @@ export const DirectTemplateSigningForm = ({
  template,
  onSubmit,
 }: DirectTemplateSigningFormProps) => {
-  const { fullName, signature, signatureValid, setFullName, setSignature } =
-    useRequiredDocumentSigningContext();
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();

  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
@ -135,8 +133,6 @@ export const DirectTemplateSigningForm = ({
    );
  };

-  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
-
  const uninsertedFields = useMemo(() => {
    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
  }, [localFields]);
@ -149,10 +145,6 @@ export const DirectTemplateSigningForm = ({
  const handleSubmit = async () => {
    setValidateUninsertedFields(true);

-    if (hasSignatureField && !signatureValid) {
-      return;
-    }
-
    const isFieldsValid = validateFieldsInserted(localFields);

    if (!isFieldsValid) {
@ -240,6 +232,8 @@ export const DirectTemplateSigningForm = ({
                  onSignField={onSignField}
                  onUnsignField={onUnsignField}
                  typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                  uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                  drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
                />
              ))
              .with(FieldType.INITIALS, () => (
@ -384,19 +378,15 @@ export const DirectTemplateSigningForm = ({
                <Trans>Signature</Trans>
              </Label>

-              <Card className="mt-2" gradient degrees={-120}>
-                <CardContent className="p-0">
-                  <SignaturePad
-                    className="h-44 w-full"
-                    disabled={isSubmitting}
-                    defaultValue={signature ?? undefined}
-                    onChange={(value) => {
-                      setSignature(value);
-                    }}
-                    allowTypedSignature={template.templateMeta?.typedSignatureEnabled}
-                  />
-                </CardContent>
-              </Card>
+              <SignaturePadDialog
+                className="mt-2"
+                disabled={isSubmitting}
+                value={signature ?? ''}
+                onChange={(value) => setSignature(value)}
+                typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+                uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+                drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+              />
            </div>
          </div>
        </div>
--- a/apps/remix/app/components/general/document-signing/document-signing-form.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-form.tsx
@ -20,11 +20,10 @@ import { trpc } from '@documenso/trpc/react';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';

 import {
@ -71,8 +70,7 @@ export const DocumentSigningForm = ({

  const assistantSignersId = useId();

-  const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
-    useRequiredDocumentSigningContext();
+  const { fullName, signature, setFullName, setSignature } = useRequiredDocumentSigningContext();

  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] = useState(false);
@ -120,10 +118,6 @@ export const DocumentSigningForm = ({

      const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);

-      if (hasSignatureField && !signatureValid) {
-        return;
-      }
-
      if (!isFieldsValid) {
        return;
      }
@ -423,32 +417,15 @@ export const DocumentSigningForm = ({
                          <Trans>Signature</Trans>
                        </Label>

-                        <Card className="mt-2" gradient degrees={-120}>
-                          <CardContent className="p-0">
-                            <SignaturePad
-                              className="h-44 w-full"
-                              disabled={isSubmitting}
-                              defaultValue={signature ?? undefined}
-                              onValidityChange={(isValid) => {
-                                setSignatureValid(isValid);
-                              }}
-                              onChange={(value) => {
-                                if (signatureValid) {
-                                  setSignature(value);
-                                }
-                              }}
-                              allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
-                            />
-                          </CardContent>
-                        </Card>
-
-                        {!signatureValid && (
-                          <div className="text-destructive mt-2 text-sm">
-                            <Trans>
-                              Signature is too small. Please provide a more complete signature.
-                            </Trans>
-                          </div>
-                        )}
+                        <SignaturePadDialog
+                          className="mt-2"
+                          disabled={isSubmitting}
+                          value={signature ?? ''}
+                          onChange={(v) => setSignature(v ?? '')}
+                          typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+                          uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+                          drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
+                        />
                      </div>
                    )}
                  </div>
--- a/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-page-view.tsx
@ -177,6 +177,8 @@ export const DocumentSigningPageView = ({
                    key={field.id}
                    field={field}
                    typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+                    uploadSignatureEnabled={documentMeta?.uploadSignatureEnabled}
+                    drawSignatureEnabled={documentMeta?.drawSignatureEnabled}
                  />
                ))
                .with(FieldType.INITIALS, () => (
--- a/apps/remix/app/components/general/document-signing/document-signing-provider.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-provider.tsx
@ -1,4 +1,6 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useState } from 'react';
+
+import { isBase64Image } from '@documenso/lib/constants/signatures';

 export type DocumentSigningContextValue = {
  fullName: string;
@ -7,8 +9,6 @@ export type DocumentSigningContextValue = {
  setEmail: (_value: string) => void;
  signature: string | null;
  setSignature: (_value: string | null) => void;
-  signatureValid: boolean;
-  setSignatureValid: (_valid: boolean) => void;
 };

 const DocumentSigningContext = createContext<DocumentSigningContextValue | null>(null);
@ -31,6 +31,9 @@ export interface DocumentSigningProviderProps {
  fullName?: string | null;
  email?: string | null;
  signature?: string | null;
+  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
  children: React.ReactNode;
 }

@ -38,18 +41,31 @@ export const DocumentSigningProvider = ({
  fullName: initialFullName,
  email: initialEmail,
  signature: initialSignature,
+  typedSignatureEnabled = true,
+  uploadSignatureEnabled = true,
+  drawSignatureEnabled = true,
  children,
 }: DocumentSigningProviderProps) => {
  const [fullName, setFullName] = useState(initialFullName || '');
  const [email, setEmail] = useState(initialEmail || '');
-  const [signature, setSignature] = useState(initialSignature || null);
-  const [signatureValid, setSignatureValid] = useState(true);

-  useEffect(() => {
-    if (initialSignature) {
-      setSignature(initialSignature);
-    }
-  }, [initialSignature]);
+  // Ensure the user signature doesn't show up if it's not allowed.
+  const [signature, setSignature] = useState(
+    (() => {
+      const sig = initialSignature || '';
+      const isBase64 = isBase64Image(sig);
+
+      if (isBase64 && (uploadSignatureEnabled || drawSignatureEnabled)) {
+        return sig;
+      }
+
+      if (!isBase64 && typedSignatureEnabled) {
+        return sig;
+      }
+
+      return null;
+    })(),
+  );

  return (
    <DocumentSigningContext.Provider
@ -60,8 +76,6 @@ export const DocumentSigningProvider = ({
        setEmail,
        signature,
        setSignature,
-        signatureValid,
-        setSignatureValid,
      }}
    >
      {children}
--- a/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
@ -17,7 +17,6 @@ import type {
 } from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@ -29,11 +28,14 @@ import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';

 type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
+
 export type DocumentSigningSignatureFieldProps = {
  field: FieldWithSignature;
  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
  typedSignatureEnabled?: boolean;
+  uploadSignatureEnabled?: boolean;
+  drawSignatureEnabled?: boolean;
 };

 export const DocumentSigningSignatureField = ({
@ -41,6 +43,8 @@ export const DocumentSigningSignatureField = ({
  onSignField,
  onUnsignField,
  typedSignatureEnabled,
+  uploadSignatureEnabled,
+  drawSignatureEnabled,
 }: DocumentSigningSignatureFieldProps) => {
  const { _ } = useLingui();
  const { toast } = useToast();
@ -52,12 +56,8 @@ export const DocumentSigningSignatureField = ({
  const containerRef = useRef<HTMLDivElement>(null);
  const [fontSize, setFontSize] = useState(2);

-  const {
-    signature: providedSignature,
-    setSignature: setProvidedSignature,
-    signatureValid,
-    setSignatureValid,
-  } = useRequiredDocumentSigningContext();
+  const { signature: providedSignature, setSignature: setProvidedSignature } =
+    useRequiredDocumentSigningContext();

  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();

@ -89,7 +89,7 @@ export const DocumentSigningSignatureField = ({
  }, [field.inserted, signature?.signatureImageAsBase64]);

  const onPreSign = () => {
-    if (!providedSignature || !signatureValid) {
+    if (!providedSignature) {
      setShowSignatureModal(true);
      return false;
    }
@ -102,6 +102,7 @@ export const DocumentSigningSignatureField = ({
  const onDialogSignClick = () => {
    setShowSignatureModal(false);
    setProvidedSignature(localSignature);
+
    if (!localSignature) {
      return;
    }
@ -116,14 +117,14 @@ export const DocumentSigningSignatureField = ({
    try {
      const value = signature || providedSignature;

-      if (!value || (signature && !signatureValid)) {
+      if (!value) {
        setShowSignatureModal(true);
        return;
      }

      const isTypedSignature = !value.startsWith('data:image');

-      if (isTypedSignature && !typedSignatureEnabled) {
+      if (isTypedSignature && typedSignatureEnabled === false) {
        toast({
          title: _(msg`Error`),
          description: _(msg`Typed signatures are not allowed. Please draw your signature.`),
@ -275,29 +276,14 @@ export const DocumentSigningSignatureField = ({
            </Trans>
          </DialogTitle>

-          <div className="">
-            <Label htmlFor="signature">
-              <Trans>Signature</Trans>
-            </Label>
-
-            <div className="border-border mt-2 rounded-md border">
-              <SignaturePad
-                id="signature"
-                className="h-44 w-full"
-                onChange={(value) => setLocalSignature(value)}
-                allowTypedSignature={typedSignatureEnabled}
-                onValidityChange={(isValid) => {
-                  setSignatureValid(isValid);
-                }}
-              />
-            </div>
-
-            {!signatureValid && (
-              <div className="text-destructive mt-2 text-sm">
-                <Trans>Signature is too small. Please provide a more complete signature.</Trans>
-              </div>
-            )}
-          </div>
+          <SignaturePad
+            className="mt-2"
+            value={localSignature ?? ''}
+            onChange={({ value }) => setLocalSignature(value)}
+            typedSignatureEnabled={typedSignatureEnabled}
+            uploadSignatureEnabled={uploadSignatureEnabled}
+            drawSignatureEnabled={drawSignatureEnabled}
+          />

          <DocumentSigningDisclosure />

@ -317,7 +303,7 @@ export const DocumentSigningSignatureField = ({
              <Button
                type="button"
                className="flex-1"
-                disabled={!localSignature || !signatureValid}
+                disabled={!localSignature}
                onClick={() => onDialogSignClick()}
              >
                <Trans>Sign</Trans>
--- a/apps/remix/app/components/general/document/document-edit-form.tsx
+++ b/apps/remix/app/components/general/document/document-edit-form.tsx
@ -5,6 +5,7 @@ import { useLingui } from '@lingui/react';
 import { DocumentDistributionMethod, DocumentStatus } from '@prisma/client';
 import { useNavigate, useSearchParams } from 'react-router';

+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
@ -71,7 +72,7 @@ export const DocumentEditForm = ({

  const { recipients, fields } = document;

-  const { mutateAsync: updateDocumentSettings } = trpc.document.setSettingsForDocument.useMutation({
+  const { mutateAsync: updateDocument } = trpc.document.updateDocument.useMutation({
    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
    onSuccess: (newData) => {
      utils.document.getDocumentWithDetailsById.setData(
@ -174,9 +175,9 @@ export const DocumentEditForm = ({

  const onAddSettingsFormSubmit = async (data: TAddSettingsFormSchema) => {
    try {
-      const { timezone, dateFormat, redirectUrl, language } = data.meta;
+      const { timezone, dateFormat, redirectUrl, language, signatureTypes } = data.meta;

-      await updateDocumentSettings({
+      await updateDocument({
        documentId: document.id,
        data: {
          title: data.title,
@ -190,6 +191,9 @@ export const DocumentEditForm = ({
          dateFormat,
          redirectUrl,
          language: isValidLanguageCode(language) ? language : undefined,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
        },
      });

@ -213,7 +217,7 @@ export const DocumentEditForm = ({
          signingOrder: data.signingOrder,
        }),

-        updateDocumentSettings({
+        updateDocument({
          documentId: document.id,
          meta: {
            allowDictateNextSigner: data.allowDictateNextSigner,
@ -249,14 +253,6 @@ export const DocumentEditForm = ({
        fields: data.fields,
      });

-      await updateDocumentSettings({
-        documentId: document.id,
-
-        meta: {
-          typedSignatureEnabled: data.typedSignatureEnabled,
-        },
-      });
-
      // Clear all field data from localStorage
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
@ -386,7 +382,6 @@ export const DocumentEditForm = ({
              fields={fields}
              onSubmit={onAddFieldsFormSubmit}
              isDocumentPdfLoaded={isDocumentPdfLoaded}
-              typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
              teamId={team?.id}
            />

--- a/apps/remix/app/components/general/template/template-edit-form.tsx
+++ b/apps/remix/app/components/general/template/template-edit-form.tsx
@ -4,6 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { useNavigate } from 'react-router';

+import { DocumentSignatureType } from '@documenso/lib/constants/document';
 import { isValidLanguageCode } from '@documenso/lib/constants/i18n';
 import {
  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
@ -124,6 +125,8 @@ export const TemplateEditForm = ({
  });

  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
+    const { signatureTypes } = data.meta;
+
    try {
      await updateTemplateSettings({
        templateId: template.id,
@ -136,6 +139,9 @@ export const TemplateEditForm = ({
        },
        meta: {
          ...data.meta,
+          typedSignatureEnabled: signatureTypes.includes(DocumentSignatureType.TYPE),
+          uploadSignatureEnabled: signatureTypes.includes(DocumentSignatureType.UPLOAD),
+          drawSignatureEnabled: signatureTypes.includes(DocumentSignatureType.DRAW),
          language: isValidLanguageCode(data.meta.language) ? data.meta.language : undefined,
        },
      });
@ -188,13 +194,6 @@ export const TemplateEditForm = ({
        fields: data.fields,
      });

-      await updateTemplateSettings({
-        templateId: template.id,
-        meta: {
-          typedSignatureEnabled: data.typedSignatureEnabled,
-        },
-      });
-
      // Clear all field data from localStorage
      for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
@ -286,7 +285,6 @@ export const TemplateEditForm = ({
              fields={fields}
              onSubmit={onAddFieldsFormSubmit}
              teamId={team?.id}
-              typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
            />
          </Stepper>
        </DocumentFlowFormContainer>