feat: add name field

Adds support for a name field which will be prefilled with the recipients name if they haven't signed a form on Documenso before.

apps/web/components/editor/field-type-selector.tsx

@@ -8,10 +8,17 @@ const stc = require("string-to-color");
 export default function FieldTypeSelector(props: any) {
   const fieldTypes = [
     {
-      name: "Signature",
       id: FieldType.SIGNATURE,
+      name: "Signature",
+    },
+    {
+      id: FieldType.NAME,
+      name: "Name",
+    },
+    {
+      id: FieldType.DATE,
+      name: "Date",
     },
-    { name: "Date", id: FieldType.DATE },
   ];
 
   const [selectedFieldType, setSelectedFieldType] = useState(fieldTypes[0].id);

apps/web/components/editor/name-dialog.tsx

@@ -0,0 +1,95 @@
+import { Fragment, useEffect, useState } from "react";
+import { classNames, localStorage } from "@documenso/lib";
+import { Button } from "@documenso/ui";
+import { Dialog, Transition } from "@headlessui/react";
+
+export default function NameDialog(props: any) {
+  const [name, setName] = useState(props.defaultName);
+
+  useEffect(() => {
+    const nameFromStorage = localStorage.getItem("typedName");
+
+    if (nameFromStorage) {
+      setName(nameFromStorage);
+    }
+  }, []);
+
+  return (
+    <Transition.Root show={props.open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={() => {
+          props.setOpen(false);
+        }}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className="relative min-h-[350px] transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                <div>
+                  <h4 className="text-center text-2xl font-medium">
+                    Enter your name in the input below!
+                  </h4>
+
+                  <div className="my-3 border-b border-gray-300">
+                    <input
+                      value={name}
+                      onChange={(e) => {
+                        setName(e.target.value);
+                      }}
+                      className={classNames(
+                        "focus:border-neon focus:ring-neon mt-14 block h-10 w-full text-center align-bottom font-sans text-2xl leading-none"
+                      )}
+                      placeholder="Kindly type your name"
+                    />
+                  </div>
+
+                  <div className="float-right">
+                    <Button
+                      color="secondary"
+                      onClick={() => {
+                        props.onClose();
+                        props.setOpen(false);
+                      }}>
+                      Cancel
+                    </Button>
+                    <Button
+                      className="ml-3"
+                      disabled={!name}
+                      onClick={() => {
+                        localStorage.setItem("typedName", name);
+                        props.onClose({
+                          type: "type",
+                          typedSignature: name,
+                        });
+                      }}>
+                      Sign
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

apps/web/components/editor/pdf-signer.tsx

@@ -6,6 +6,7 @@ import { createOrUpdateField, deleteField, signDocument } from "@documenso/lib/a
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { Button } from "@documenso/ui";
 import Logo from "../logo";
+import NameDialog from "./name-dialog";
 import SignatureDialog from "./signature-dialog";
 import { CheckBadgeIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
 import { FieldType } from "@prisma/client";
@@ -16,11 +17,12 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
 
 export default function PDFSigner(props: any) {
   const router = useRouter();
-  const [open, setOpen] = useState(false);
+  const [signatureDialogOpen, setSignatureDialogOpen] = useState(false);
+  const [nameDialogOpen, setNameDialogOpen] = useState(false);
   const [signingDone, setSigningDone] = useState(false);
   const [localSignatures, setLocalSignatures] = useState<any[]>([]);
   const [fields, setFields] = useState<any[]>(props.fields);
-  const signatureFields = fields.filter((field) => field.type === FieldType.SIGNATURE);
+  const signatureFields = fields.filter((field) => [FieldType.SIGNATURE].includes(field.type));
   const [dialogField, setDialogField] = useState<any>();
 
   useEffect(() => {
@@ -28,9 +30,14 @@ export default function PDFSigner(props: any) {
   }, [fields]);
 
   function onClick(item: any) {
-    if (item.type === "SIGNATURE") {
+    if (item.type === FieldType.SIGNATURE) {
       setDialogField(item);
-      setOpen(true);
+      setSignatureDialogOpen(true);
+    }
+
+    if (item.type === FieldType.NAME) {
+      setDialogField(item);
+      setNameDialogOpen(true);
     }
   }
 
@@ -61,13 +68,25 @@ export default function PDFSigner(props: any) {
     const signedField = { ...dialogField };
     signedField.signature = signature;
     setFields((prevState) => [...prevState, signedField]);
-    setOpen(false);
+    setSignatureDialogOpen(false);
+    setNameDialogOpen(false);
     setDialogField(null);
   }
 
   return (
     <>
-      <SignatureDialog open={open} setOpen={setOpen} onClose={onDialogClose} />
+      <SignatureDialog
+        open={signatureDialogOpen}
+        setOpen={setSignatureDialogOpen}
+        onClose={onDialogClose}
+      />
+      <NameDialog
+        open={nameDialogOpen}
+        setOpen={setNameDialogOpen}
+        onClose={onDialogClose}
+        defaultName={props.recipient?.name ?? ""}
+      />
+
       <div className="bg-neon p-4">
         <div className="flex">
           <div className="flex-shrink-0">
@@ -153,7 +172,7 @@ export default function PDFSigner(props: any) {
     createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
       setFields((prevState) => [...prevState, res]);
       setDialogField(res);
-      setOpen(true);
+      setSignatureDialogOpen(true);
     });
 
     return freeSignatureField;

apps/web/components/editor/signable-field.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { classNames } from "@documenso/lib";
 import { IconButton } from "@documenso/ui";
 import { XCircleIcon } from "@heroicons/react/20/solid";
+import { FieldType } from "@prisma/client";
 import Draggable from "react-draggable";
 
 const stc = require("string-to-color");
@@ -46,7 +47,9 @@ export default function SignableField(props: FieldPropsType) {
         ref={nodeRef}
         className={classNames(
           "absolute top-0 left-0 m-auto h-16 w-48 select-none flex-row-reverse text-center text-lg font-bold opacity-80",
-          field.type === "SIGNATURE" ? "cursor-pointer hover:brightness-50" : "cursor-not-allowed"
+          [FieldType.SIGNATURE, FieldType.NAME].includes(field.type)
+            ? "cursor-pointer hover:brightness-50"
+            : "cursor-not-allowed"
         )}
         style={{
           background: stc(props.field.Recipient.email),
@@ -54,10 +57,15 @@ export default function SignableField(props: FieldPropsType) {
         <div hidden={field?.signature} className="my-4 font-medium">
           {field.type === "SIGNATURE" ? "SIGN HERE" : ""}
           {field.type === "DATE" ? <small>Date (filled on sign)</small> : ""}
+          {field.type === "NAME" ? "ENTER NAME HERE" : ""}
         </div>
         <div
           hidden={!field?.signature}
-          className="font-qwigley m-auto w-auto flex-row-reverse text-center text-5xl font-medium">
+          className={classNames(
+            "m-auto w-auto flex-row-reverse text-center font-medium",
+            field.type === FieldType.SIGNATURE && "font-qwigley text-5xl",
+            field.type === FieldType.NAME && "font-sans text-3xl"
+          )}>
           {field?.signature?.type === "type" ? (
             <div className="my-4">{field?.signature.typedSignature}</div>
           ) : (

apps/web/pages/api/documents/[id]/sign.ts

@@ -157,7 +157,11 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
         signedField.Signature.typedSignature,
         signedField.positionX,
         signedField.positionY,
-        signedField.page
+        signedField.page,
+        // useHandwritingFont only for typed signatures
+        signedField.type === FieldType.SIGNATURE,
+        // fontSize only for name field
+        signedField.type === FieldType.NAME ? 30 : undefined
       );
     } else {
       documentWithInserts = document.document;

packages/pdf/insertTextInPDF.ts

@@ -8,7 +8,8 @@ export async function insertTextInPDF(
   positionX: number,
   positionY: number,
   page: number = 0,
-  useHandwritingFont = true
+  useHandwritingFont = true,
+  fontSize = 15
 ): Promise<string> {
   const fontBytes = fs.readFileSync("public/fonts/Qwigley-Regular.ttf");
 
@@ -21,7 +22,7 @@ export async function insertTextInPDF(
   const pages = pdfDoc.getPages();
   const pdfPage = pages[page];
 
-  const textSize = useHandwritingFont ? 50 : 15;
+  const textSize = useHandwritingFont ? 50 : fontSize;
   const textWidth = font.widthOfTextAtSize(text, textSize);
   const textHeight = font.heightAtSize(textSize);
   const fieldSize = { width: 192, height: 64 };

packages/prisma/migrations/20230419055523_doc_170_add_name_field_type/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "FieldType" ADD VALUE 'NAME';

packages/prisma/schema.prisma

@@ -101,6 +101,7 @@ model Recipient {
 }
 
 enum FieldType {
+  NAME
   SIGNATURE
   FREE_SIGNATURE
   DATE