Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 08:42:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add name field

Browse Source 
Adds support for a name field which will be prefilled with the recipients name if they haven't signed a form on Documenso before.
This commit is contained in:
Mythie
2023-04-19 22:48:26 +10:00
parent 5c58b32d92
commit b444d5c928
8 changed files with 151 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/web/components/editor/field-type-selector.tsx
View File

@ -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);

95
apps/web/components/editor/name-dialog.tsx Normal file
View File

@ -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>
);
}

33
apps/web/components/editor/pdf-signer.tsx
View File

@ -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;

12
apps/web/components/editor/signable-field.tsx
View File

@ -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>
) : (

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

@ -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;

5
packages/pdf/insertTextInPDF.ts
View File

@ -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 };

2
packages/prisma/migrations/20230419055523_doc_170_add_name_field_type/migration.sql Normal file
View File

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

1
packages/prisma/schema.prisma
View File

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