feat: add support for uploading signature

apps/marketing/src/components/(marketing)/widget.tsx

@@ -401,8 +401,13 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
           <SignaturePad
             disabled={isSubmitting}
             className="aspect-video w-full rounded-md border"
-            defaultValue={signatureDataUrl || ''}
-            onChange={setDraftSignatureDataUrl}
+            signature={{
+              value: signatureDataUrl,
+              type: 'DRAW',
+            }}
+            // Disabling the uploading of a signature for marketing website
+            uploadDisable={true}
+            onChange={(value: string | null, _: boolean) => setDraftSignatureDataUrl(value)}
           />
 
           <DialogFooter>

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -34,7 +34,8 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
   const analytics = useAnalytics();
   const { data: session } = useSession();
 
-  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+  const { fullName, signature, setFullName, setSignature, signatureType, setSignatureType } =
+    useRequiredSigningContext();
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
@@ -170,10 +171,14 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
                       <CardContent className="p-0">
                         <SignaturePad
                           className="h-44 w-full"
+                          signature={{
+                            value: signature,
+                            type: signatureType ?? 'DRAW',
+                          }}
                           disabled={isSubmitting}
-                          defaultValue={signature ?? undefined}
-                          onChange={(value) => {
-                            setSignature(value);
+                          onChange={(v: string | null, isUploaded: boolean) => {
+                            setSignature(v);
+                            setSignatureType(isUploaded ? 'UPLOAD' : 'DRAW');
                           }}
                         />
                       </CardContent>

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -107,6 +107,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
       email={recipient.email}
       fullName={user?.email === recipient.email ? user.name : recipient.name}
       signature={user?.email === recipient.email ? user.signature : undefined}
+      signatureType={user?.email === recipient.email ? user.signatureType : undefined}
     >
       <div className="mx-auto w-full max-w-screen-xl">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>

apps/web/src/app/(signing)/sign/[token]/provider.tsx

@@ -2,13 +2,17 @@
 
 import { createContext, useContext, useState } from 'react';
 
+import { SignatureType } from '@documenso/prisma/client';
+
 export type SigningContextValue = {
   fullName: string;
   setFullName: (_value: string) => void;
   email: string;
   setEmail: (_value: string) => void;
   signature: string | null;
   setSignature: (_value: string | null) => void;
+  signatureType: SignatureType | null;
+  setSignatureType: (_value: SignatureType | null) => void;
 };
 
 const SigningContext = createContext<SigningContextValue | null>(null);
@@ -31,18 +35,23 @@ export interface SigningProviderProps {
   fullName?: string | null;
   email?: string | null;
   signature?: string | null;
+  signatureType?: SignatureType | null;
   children: React.ReactNode;
 }
 
 export const SigningProvider = ({
   fullName: initialFullName,
   email: initialEmail,
   signature: initialSignature,
+  signatureType: initialSignatureType,
   children,
 }: SigningProviderProps) => {
   const [fullName, setFullName] = useState(initialFullName || '');
   const [email, setEmail] = useState(initialEmail || '');
   const [signature, setSignature] = useState(initialSignature || null);
+  const [signatureType, setSignatureType] = useState<SignatureType | null>(
+    initialSignatureType || null,
+  );
 
   return (
     <SigningContext.Provider
@@ -53,6 +62,8 @@ export const SigningProvider = ({
         setEmail,
         signature,
         setSignature,
+        signatureType,
+        setSignatureType,
       }}
     >
       {children}

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation';
 import { Loader } from 'lucide-react';
 
 import type { Recipient } from '@documenso/prisma/client';
+import { SignatureType } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
@@ -29,8 +30,11 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
-  const { signature: providedSignature, setSignature: setProvidedSignature } =
-    useRequiredSigningContext();
+  const {
+    signature: providedSignature,
+    setSignature: setProvidedSignature,
+    setSignatureType: setProvidedSignatureType,
+  } = useRequiredSigningContext();
 
   const [isPending, startTransition] = useTransition();
 
@@ -47,7 +51,10 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
   const [showSignatureModal, setShowSignatureModal] = useState(false);
-  const [localSignature, setLocalSignature] = useState<string | null>(null);
+  const [localSignature, setLocalSignature] = useState<{
+    value: string | null;
+    type: SignatureType | null;
+  } | null>();
   const [isLocalSignatureSet, setIsLocalSignatureSet] = useState(false);
 
   const state = useMemo<SignatureFieldState>(() => {
@@ -70,13 +77,16 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
 
   const onSign = async (source: 'local' | 'provider' = 'provider') => {
     try {
-      if (!providedSignature && !localSignature) {
+      if (!providedSignature && !localSignature?.value) {
         setIsLocalSignatureSet(false);
         setShowSignatureModal(true);
         return;
       }
 
-      const value = source === 'local' && localSignature ? localSignature : providedSignature ?? '';
+      const value =
+        source === 'local' && localSignature?.value
+          ? localSignature.value
+          : providedSignature ?? '';
 
       if (!value) {
         return;
@@ -90,7 +100,8 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
       });
 
       if (source === 'local' && !providedSignature) {
-        setProvidedSignature(localSignature);
+        setProvidedSignature(localSignature?.value ?? '');
+        setProvidedSignatureType(localSignature?.type ?? 'DRAW');
       }
 
       setLocalSignature(null);
@@ -167,8 +178,17 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
 
             <SignaturePad
               id="signature"
+              signature={{
+                value: localSignature?.value ?? '',
+                type: localSignature?.type ?? SignatureType.DRAW,
+              }}
               className="border-border mt-2 h-44 w-full rounded-md border"
-              onChange={(value) => setLocalSignature(value)}
+              onChange={(value: string | null, isUploaded: boolean) => {
+                setLocalSignature({
+                  value,
+                  type: isUploaded ? SignatureType.UPLOAD : SignatureType.DRAW,
+                });
+              }}
             />
           </div>
 

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -21,12 +23,12 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZProfileFormSchema = z.object({
   name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-  signature: z.string().min(1, 'Signature Pad cannot be empty'),
+  signature: z.string(),
 });
 
 export type TProfileFormSchema = z.infer<typeof ZProfileFormSchema>;
@@ -40,6 +42,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
+  const [isUploaded, setIsUploaded] = useState(false);
 
   const form = useForm<TProfileFormSchema>({
     values: {
@@ -55,9 +58,17 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
 
   const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
     try {
+      if (signature === '') {
+        form.setError('signature', {
+          type: 'manual',
+          message: 'Signature Pad cannot be empty',
+        });
+        return;
+      }
       await updateProfile({
         name,
         signature,
+        signatureType: isUploaded ? 'UPLOAD' : 'DRAW',
       });
 
       toast({
@@ -85,6 +96,11 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
     }
   };
 
+  const handleSignatureChange = (signature: string | null, isUploaded: boolean) => {
+    setIsUploaded(isUploaded);
+    form.setValue('signature', signature ?? '');
+  };
+
   return (
     <Form {...form}>
       <form
@@ -115,16 +131,21 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
           <FormField
             control={form.control}
             name="signature"
-            render={({ field: { onChange } }) => (
+            render={() => (
               <FormItem>
                 <FormLabel>Signature</FormLabel>
                 <FormControl>
                   <SignaturePad
                     className="h-44 w-full"
                     disabled={isSubmitting}
                     containerClassName={cn('rounded-lg border bg-background')}
-                    defaultValue={user.signature ?? undefined}
-                    onChange={(v) => onChange(v ?? '')}
+                    signature={{
+                      value: user.signature,
+                      type: user.signatureType,
+                    }}
+                    onChange={(v: string | null, isUploaded: boolean) =>
+                      handleSignatureChange(v, isUploaded)
+                    }
                   />
                 </FormControl>
                 <FormMessage />

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,6 +10,7 @@ import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { SignatureType } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
@@ -24,7 +26,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const SIGN_UP_REDIRECT_PATH = '/documents';
@@ -35,6 +37,7 @@ export const ZSignUpFormSchema = z
     email: z.string().email().min(1),
     password: ZPasswordSchema,
     signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
+    signatureType: z.nativeEnum(SignatureType),
   })
   .refine(
     (data) => {
@@ -57,6 +60,7 @@ export type SignUpFormProps = {
 export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
+  const [isUploaded, setIsUploaded] = useState(false);
   const router = useRouter();
 
   const form = useForm<TSignUpFormSchema>({
@@ -65,6 +69,7 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
       email: initialEmail ?? '',
       password: '',
       signature: '',
+      signatureType: 'DRAW',
     },
     resolver: zodResolver(ZSignUpFormSchema),
   });
@@ -75,7 +80,13 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
 
   const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
     try {
-      await signup({ name, email, password, signature });
+      await signup({
+        name,
+        email,
+        password,
+        signature,
+        signatureType: isUploaded ? SignatureType.UPLOAD : SignatureType.DRAW,
+      });
 
       router.push(`/unverified-account`);
 
@@ -121,6 +132,11 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
   };
 
+  const handleSignatureChange = (signature: string | null, isUploaded: boolean) => {
+    setIsUploaded(isUploaded);
+    form.setValue('signature', signature ?? '');
+  };
+
   return (
     <Form {...form}>
       <form
@@ -181,7 +197,13 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
                     className="h-36 w-full"
                     disabled={isSubmitting}
                     containerClassName="mt-2 rounded-lg border bg-background"
-                    onChange={(v) => onChange(v ?? '')}
+                    signature={{
+                      value: form.watch('signature'),
+                      type: isUploaded ? 'UPLOAD' : 'DRAW',
+                    }}
+                    onChange={(v: string | null, isUploaded: boolean) =>
+                      handleSignatureChange(v, isUploaded)
+                    }
                   />
                 </FormControl>
 

packages/lib/server-only/user/create-user.ts

@@ -3,6 +3,7 @@ import { hash } from 'bcrypt';
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { updateSubscriptionItemQuantity } from '@documenso/ee/server-only/stripe/update-subscription-item-quantity';
 import { prisma } from '@documenso/prisma';
+import type { SignatureType } from '@documenso/prisma/client';
 import { IdentityProvider, Prisma, TeamMemberInviteStatus } from '@documenso/prisma/client';
 
 import { IS_BILLING_ENABLED } from '../../constants/app';
@@ -13,9 +14,16 @@ export interface CreateUserOptions {
   email: string;
   password: string;
   signature?: string | null;
+  signatureType: SignatureType;
 }
 
-export const createUser = async ({ name, email, password, signature }: CreateUserOptions) => {
+export const createUser = async ({
+  name,
+  email,
+  password,
+  signature,
+  signatureType,
+}: CreateUserOptions) => {
   const hashedPassword = await hash(password, SALT_ROUNDS);
 
   const userExists = await prisma.user.findFirst({
@@ -34,6 +42,7 @@ export const createUser = async ({ name, email, password, signature }: CreateUse
       email: email.toLowerCase(),
       password: hashedPassword,
       signature,
+      signatureType,
       identityProvider: IdentityProvider.DOCUMENSO,
     },
   });