chore: remove console.log

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredSigningContext } from './provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+export type EmailFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+export const EmailField = ({ field, recipient }: EmailFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { email: providedEmail } = useRequiredSigningContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation();
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const onSign = async () => {
+    try {
+      await signFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+        value: providedEmail ?? '',
+        isBase64: false,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      await removeSignedFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Email</p>
+      )}
+
+      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
+    </SigningFieldContainer>
+  );
+};

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

@@ -3,6 +3,7 @@ import { notFound } from 'next/navigation';
 import { match } from 'ts-pattern';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
@@ -13,6 +14,7 @@ import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DateField } from './date-field';
+import { EmailField } from './email-field';
 import { SigningForm } from './form';
 import { NameField } from './name-field';
 import { SigningProvider } from './provider';
@@ -42,10 +44,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
+  const user = await getServerComponentSession();
+
   const documentUrl = `data:application/pdf;base64,${document.document}`;
 
   return (
-    <SigningProvider email={recipient.email} fullName={recipient.name}>
+    <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
           {document.title}
@@ -84,6 +88,9 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
               .with(FieldType.DATE, () => (
                 <DateField key={field.id} field={field} recipient={recipient} />
               ))
+              .with(FieldType.EMAIL, () => (
+                <EmailField key={field.id} field={field} recipient={recipient} />
+              ))
               .otherwise(() => null),
           )}
         </ElementVisible>

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

@@ -28,9 +28,9 @@ export const useRequiredSigningContext = () => {
 };
 
 export interface SigningProviderProps {
-  fullName?: string;
-  email?: string;
-  signature?: string;
+  fullName?: string | null;
+  email?: string | null;
+  signature?: string | null;
   children: React.ReactNode;
 }
 

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

@@ -118,6 +118,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
             render={({ field: { onChange } }) => (
               <SignaturePad
                 className="h-44 w-full rounded-lg border bg-white backdrop-blur-sm dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
+                defaultValue={user.signature ?? undefined}
                 onChange={(v) => onChange(v ?? '')}
               />
             )}

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

@@ -3,13 +3,14 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader } from 'lucide-react';
 import { signIn } from 'next-auth/react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
@@ -19,6 +20,7 @@ export const ZSignUpFormSchema = z.object({
   name: z.string().min(1),
   email: z.string().email().min(1),
   password: z.string().min(6).max(72),
+  signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
 });
 
 export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
@@ -31,6 +33,7 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
 
   const {
+    control,
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
@@ -39,15 +42,16 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
       name: '',
       email: '',
       password: '',
+      signature: '',
     },
     resolver: zodResolver(ZSignUpFormSchema),
   });
 
   const { mutateAsync: signup } = trpc.auth.signup.useMutation();
 
-  const onFormSubmit = async ({ name, email, password }: TSignUpFormSchema) => {
+  const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
     try {
-      await signup({ name, email, password });
+      await signup({ name, email, password, signature });
 
       await signIn('credentials', {
         email,
@@ -119,8 +123,19 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
         </Label>
 
         <div>
-          <SignaturePad className="mt-2 h-36 w-full rounded-lg border bg-white dark:border-[#e2d7c5] dark:bg-[#fcf8ee]" />
+          <Controller
+            control={control}
+            name="signature"
+            render={({ field: { onChange } }) => (
+              <SignaturePad
+                className="mt-2 h-36 w-full rounded-lg border bg-white dark:border-[#e2d7c5] dark:bg-[#fcf8ee]"
+                onChange={(v) => onChange(v ?? '')}
+              />
+            )}
+          />
         </div>
+
+        <FormErrorMessage className="mt-1.5" error={errors.signature} />
       </div>
 
       <Button size="lg" disabled={isSubmitting} className="dark:bg-documenso dark:hover:opacity-90">

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

@@ -9,9 +9,10 @@ export interface CreateUserOptions {
   name: string;
   email: string;
   password: string;
+  signature?: string | null;
 }
 
-export const createUser = async ({ name, email, password }: CreateUserOptions) => {
+export const createUser = async ({ name, email, password, signature }: CreateUserOptions) => {
   const hashedPassword = await hash(password, SALT_ROUNDS);
 
   const userExists = await prisma.user.findFirst({
@@ -29,6 +30,7 @@ export const createUser = async ({ name, email, password }: CreateUserOptions) =
       name,
       email: email.toLowerCase(),
       password: hashedPassword,
+      signature,
       identityProvider: IdentityProvider.DOCUMENSO,
     },
   });

packages/lib/server-only/user/update-profile.ts

@@ -6,12 +6,7 @@ export type UpdateProfileOptions = {
   signature: string;
 };
 
-export const updateProfile = async ({
-  userId,
-  name,
-  // TODO: Actually use signature
-  signature: _signature,
-}: UpdateProfileOptions) => {
+export const updateProfile = async ({ userId, name, signature }: UpdateProfileOptions) => {
   // Existence check
   await prisma.user.findFirstOrThrow({
     where: {
@@ -25,7 +20,7 @@ export const updateProfile = async ({
     },
     data: {
       name,
-      // signature,
+      signature,
     },
   });
 

packages/prisma/migrations/20230901083000_add_user_signature_column/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "signature" TEXT;

packages/prisma/schema.prisma

@@ -20,6 +20,7 @@ model User {
   emailVerified    DateTime?
   password         String?
   source           String?
+  signature        String?
   identityProvider IdentityProvider @default(DOCUMENSO)
   accounts         Account[]
   sessions         Session[]

packages/trpc/server/auth-router/router.ts

@@ -8,9 +8,9 @@ import { ZSignUpMutationSchema } from './schema';
 export const authRouter = router({
   signup: procedure.input(ZSignUpMutationSchema).mutation(async ({ input }) => {
     try {
-      const { name, email, password } = input;
+      const { name, email, password, signature } = input;
 
-      return await createUser({ name, email, password });
+      return await createUser({ name, email, password, signature });
     } catch (err) {
       console.error(err);
 

packages/trpc/server/auth-router/schema.ts

@@ -4,6 +4,7 @@ export const ZSignUpMutationSchema = z.object({
   name: z.string().min(1),
   email: z.string().email(),
   password: z.string().min(6),
+  signature: z.string().min(1, { message: 'A signature is required.' }),
 });
 
 export type TSignUpMutationSchema = z.infer<typeof ZSignUpMutationSchema>;