Merge branch 'main' into feat/support-custom-cert-paths

PRODUCT HUNT LAUNCH TOMORROW

.env.example

@@ -16,6 +16,10 @@ NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
 NEXTAUTH_SECRET='lorem ipsum sit dolor random string for encryption this could literally be anything'
 NEXTAUTH_URL='http://localhost:3000'
 
+# SIGNING
+CERT_FILE_PATH=
+CERT_PASSPHRASE=
+
 # MAIL (NODEMAILER)
 # SENDGRID
 # Get a Sendgrid Api key here: https://signup.sendgrid.com

.vscode/settings.json

@@ -14,6 +14,12 @@
     "source.removeUnusedImports": false
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "spellright.language": ["de"],
-  "spellright.documentTypes": ["markdown", "latex", "plaintext"]
+  "spellright.language": [
+    "de"
+  ],
+  "spellright.documentTypes": [
+    "markdown",
+    "latex",
+    "plaintext"
+  ]
 }

README.md

@@ -1,4 +1,4 @@
-> We are launching on Product Hunt soon! Sign up to support the launch: 
+> <strong>We are launching TOMORROW on Product Hunt soon! Sign up to support the launch: </strong>
 > <center><a href="https://dub.sh/documenso-launch"><img src="https://img.shields.io/badge/Documenso%20on%20Product%20Hunt-Notify%20Me-orange" alt="Product Hunt"></a></center>
 
 <p align="center" style="margin-top: 12px">

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

@@ -8,17 +8,10 @@ const stc = require("string-to-color");
 export default function FieldTypeSelector(props: any) {
   const fieldTypes = [
     {
-      id: FieldType.SIGNATURE,
       name: "Signature",
+      id: FieldType.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

@@ -1,95 +0,0 @@
-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="flex flex-row-reverse items-center gap-x-4">
-                    <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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { createField } from "@documenso/features/editor";
@@ -6,7 +6,6 @@ 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";
@@ -17,62 +16,21 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
 
 export default function PDFSigner(props: any) {
   const router = useRouter();
-  const [signatureDialogOpen, setSignatureDialogOpen] = useState(false);
-  const [nameDialogOpen, setNameDialogOpen] = useState(false);
+  const [open, setOpen] = useState(false);
   const [signingDone, setSigningDone] = useState(false);
   const [localSignatures, setLocalSignatures] = useState<any[]>([]);
   const [fields, setFields] = useState<any[]>(props.fields);
-  const signatureFields = useMemo(
-    () => fields.filter((field) => [FieldType.SIGNATURE].includes(field.type)),
-    [fields]
-  );
+  const signatureFields = fields.filter((field) => field.type === FieldType.SIGNATURE);
   const [dialogField, setDialogField] = useState<any>();
 
-  function signField(options: {
-    fieldId: string;
-    type: string;
-    typedSignature?: string;
-    signatureImage?: string;
-  }) {
-    const { fieldId, type, typedSignature, signatureImage } = options;
-
-    const signature = {
-      fieldId,
-      type,
-      typedSignature,
-      signatureImage,
-    };
-
-    const field = fields.find((e) => e.id == fieldId);
-
-    if (!field) {
-      return;
-    }
-
-    setLocalSignatures((s) => [...s.filter((e) => e.fieldId !== fieldId), signature]);
-
-    setFields((prevState) => {
-      const newState = [...prevState];
-      const index = newState.findIndex((e) => e.id == fieldId);
-
-      newState[index] = {
-        ...newState[index],
-        signature,
-      };
-
-      return newState;
-    });
-  }
+  useEffect(() => {
+    setSigningDone(checkIfSigningIsDone());
+  }, [fields]);
 
   function onClick(item: any) {
-    if (item.type === FieldType.SIGNATURE) {
+    if (item.type === "SIGNATURE") {
       setDialogField(item);
-      setSignatureDialogOpen(true);
-    }
-
-    if (item.type === FieldType.NAME) {
-      setDialogField(item);
-      setNameDialogOpen(true);
+      setOpen(true);
     }
   }
 
@@ -85,107 +43,31 @@ export default function PDFSigner(props: any) {
 
     if (!dialogResult) return;
 
-    signField({
+    const signature = {
       fieldId: dialogField.id,
       type: dialogResult.type,
       typedSignature: dialogResult.typedSignature,
       signatureImage: dialogResult.signatureImage,
-    });
+    };
 
-    setSignatureDialogOpen(false);
-    setNameDialogOpen(false);
+    setLocalSignatures(localSignatures.concat(signature));
+
+    fields.splice(
+      fields.findIndex(function (i) {
+        return i.id === signature.fieldId;
+      }),
+      1
+    );
+    const signedField = { ...dialogField };
+    signedField.signature = signature;
+    setFields((prevState) => [...prevState, signedField]);
+    setOpen(false);
     setDialogField(null);
   }
 
-  function checkIfSigningIsDone(): boolean {
-    // Check if all fields are signed..
-    if (signatureFields.length > 0) {
-      // If there are no fields to sign at least one signature is enough
-      return fields
-        .filter((field) => field.type === FieldType.SIGNATURE)
-        .every((field) => field.signature);
-    } else {
-      // If we don't have a signature field, we need at least one free signature
-      // to be able to complete signing
-      const freeSignatureFields = fields.filter((field) => field.type === FieldType.FREE_SIGNATURE);
-
-      return freeSignatureFields.length > 0 && freeSignatureFields.every((field) => field.signature);
-    }
-  }
-
-  function addFreeSignature(e: any, page: number, recipient: any): any {
-    const freeSignatureField = createField(e, page, recipient, FieldType.FREE_SIGNATURE);
-
-    createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
-      setFields((prevState) => [...prevState, res]);
-      setDialogField(res);
-      setSignatureDialogOpen(true);
-    });
-
-    return freeSignatureField;
-  }
-
-  function onDeleteHandler(id: any) {
-    const field = fields.find((e) => e.id == id);
-    const fieldIndex = fields.map((item) => item.id).indexOf(id);
-    if (fieldIndex > -1) {
-      const fieldWithoutRemoved = [...fields];
-      const removedField = fieldWithoutRemoved.splice(fieldIndex, 1);
-      setFields(fieldWithoutRemoved);
-
-      const signaturesWithoutRemoved = [...localSignatures];
-      const removedSignature = signaturesWithoutRemoved.splice(
-        signaturesWithoutRemoved.findIndex(function (i) {
-          return i.fieldId === id;
-        }),
-        1
-      );
-
-      setLocalSignatures(signaturesWithoutRemoved);
-      deleteField(field).catch((err) => {
-        setFields(fieldWithoutRemoved.concat(removedField));
-        setLocalSignatures(signaturesWithoutRemoved.concat(removedSignature));
-      });
-    }
-  }
-
-  useEffect(() => {
-    setSigningDone(checkIfSigningIsDone());
-  }, [fields]);
-
-  useEffect(() => {
-    const nameFields = fields.filter((field) => field.type === FieldType.NAME);
-
-    if (nameFields.length > 0) {
-      nameFields.forEach((field) => {
-        if (!field.signature && props.recipient?.name) {
-          signField({
-            fieldId: field.id,
-            type: "type",
-            typedSignature: props.recipient.name,
-          });
-        }
-      });
-    }
-    // We are intentionally not specifying deps here
-    // because we want to run this effect on the initial render
-  }, []);
-
   return (
     <>
-      <SignatureDialog
-        open={signatureDialogOpen}
-        setOpen={setSignatureDialogOpen}
-        onClose={onDialogClose}
-      />
-
-      <NameDialog
-        open={nameDialogOpen}
-        setOpen={setNameDialogOpen}
-        onClose={onDialogClose}
-        defaultName={props.recipient?.name ?? ""}
-      />
-
+      <SignatureDialog open={open} setOpen={setOpen} onClose={onDialogClose} />
       <div className="bg-neon p-4">
         <div className="flex">
           <div className="flex-shrink-0">
@@ -251,4 +133,52 @@ export default function PDFSigner(props: any) {
         onDelete={onDeleteHandler}></PDFViewer>
     </>
   );
+
+  function checkIfSigningIsDone(): boolean {
+    // Check if all fields are signed..
+    if (signatureFields.length > 0) {
+      // If there are no fields to sign at least one signature is enough
+      return fields
+        .filter((field) => field.type === FieldType.SIGNATURE)
+        .every((field) => field.signature);
+    } else {
+      return localSignatures.length > 0;
+    }
+  }
+
+  function addFreeSignature(e: any, page: number, recipient: any): any {
+    const freeSignatureField = createField(e, page, recipient, FieldType.FREE_SIGNATURE);
+
+    createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
+      setFields((prevState) => [...prevState, res]);
+      setDialogField(res);
+      setOpen(true);
+    });
+
+    return freeSignatureField;
+  }
+
+  function onDeleteHandler(id: any) {
+    const field = fields.find((e) => e.id == id);
+    const fieldIndex = fields.map((item) => item.id).indexOf(id);
+    if (fieldIndex > -1) {
+      const fieldWithoutRemoved = [...fields];
+      const removedField = fieldWithoutRemoved.splice(fieldIndex, 1);
+      setFields(fieldWithoutRemoved);
+
+      const signaturesWithoutRemoved = [...localSignatures];
+      const removedSignature = signaturesWithoutRemoved.splice(
+        signaturesWithoutRemoved.findIndex(function (i) {
+          return i.fieldId === id;
+        }),
+        1
+      );
+
+      setLocalSignatures(signaturesWithoutRemoved);
+      deleteField(field).catch((err) => {
+        setFields(fieldWithoutRemoved.concat(removedField));
+        setLocalSignatures(signaturesWithoutRemoved.concat(removedSignature));
+      });
+    }
+  }
 }

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

@@ -2,7 +2,6 @@ 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");
@@ -47,9 +46,7 @@ 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",
-          [FieldType.SIGNATURE, FieldType.NAME].includes(field.type)
-            ? "cursor-pointer hover:brightness-50"
-            : "cursor-not-allowed"
+          field.type === "SIGNATURE" ? "cursor-pointer hover:brightness-50" : "cursor-not-allowed"
         )}
         style={{
           background: stc(props.field.Recipient.email),
@@ -57,15 +54,10 @@ 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={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"
-          )}>
+          className="font-qwigley m-auto w-auto flex-row-reverse text-center text-5xl font-medium">
           {field?.signature?.type === "type" ? (
             <div className="my-4">{field?.signature.typedSignature}</div>
           ) : (

apps/web/next.config.js

@@ -4,10 +4,6 @@ require("dotenv").config({ path: "../../.env" });
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: false,
-  env: {
-    IS_PULL_REQUEST: process.env.IS_PULL_REQUEST,
-    RENDER_EXTERNAL_URL: process.env.RENDER_EXTERNAL_URL,
-  },
 };
 
 const transpileModules = require("next-transpile-modules")([

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

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

apps/web/pages/documents/[id]/sign.tsx

@@ -59,7 +59,7 @@ export async function getServerSideProps(context: any) {
     },
   });
 
-  const recipient = await prisma.recipient.findFirstOrThrow({
+  const recipient = await prisma.recipient.findFirst({
     where: {
       token: recipientToken,
     },
@@ -68,6 +68,15 @@ export async function getServerSideProps(context: any) {
     },
   });
 
+  if (!recipient) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: "/404",
+      },
+    };
+  }
+
   // Document is already signed
   if (recipient.Document.status === DocumentStatus.COMPLETED) {
     return {

packages/pdf/insertTextInPDF.ts

@@ -8,8 +8,7 @@ export async function insertTextInPDF(
   positionX: number,
   positionY: number,
   page: number = 0,
-  useHandwritingFont = true,
-  fontSize = 15
+  useHandwritingFont = true
 ): Promise<string> {
   const fontBytes = fs.readFileSync("public/fonts/Qwigley-Regular.ttf");
 
@@ -22,7 +21,7 @@ export async function insertTextInPDF(
   const pages = pdfDoc.getPages();
   const pdfPage = pages[page];
 
-  const textSize = useHandwritingFont ? 50 : fontSize;
+  const textSize = useHandwritingFont ? 50 : 15;
   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

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

packages/prisma/schema.prisma

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

packages/signing/addDigitalSignature.ts

@@ -1,5 +1,6 @@
 import { PDFDocument, PDFHexString, PDFName, PDFNumber, PDFString } from "pdf-lib";
 
+
 const fs = require("fs");
 // Local copy of Node SignPDF because https://github.com/vbuch/node-signpdf/pull/187 was not published in NPM yet. Can be switched to npm packge.
 const signer = require("./node-signpdf/dist/signpdf");
@@ -8,8 +9,8 @@ export const addDigitalSignature = async (documentAsBase64: string): Promise<str
   // Custom code to add Byterange to PDF
   const PDFArrayCustom = require("./PDFArrayCustom");
   const pdfBuffer = Buffer.from(documentAsBase64, "base64");
-  const p12Buffer = fs.readFileSync("ressources/certificate.p12");
-  const SIGNATURE_LENGTH = 4540;
+  const p12Buffer = fs.readFileSync(process.env.CERT_FILE_PATH || "ressources/cert.p12");
+  const SIGNATURE_LENGTH = 12000;
 
   const pdfDoc = await PDFDocument.load(pdfBuffer);
   const pages = pdfDoc.getPages();
@@ -60,8 +61,8 @@ export const addDigitalSignature = async (documentAsBase64: string): Promise<str
 
   const signObj = new signer.SignPdf();
   const signedPdfBuffer: Buffer = signObj.sign(modifiedPdfBuffer, p12Buffer, {
-    passphrase: "",
+    passphrase: process.env.CERT_PASSPHRASE || "",
   });
 
   return signedPdfBuffer.toString("base64");
-};
+};