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

🚧 place signatures and text signatures

Browse Source
This commit is contained in:
Timur Ercan
2023-02-20 14:49:17 +01:00
parent 11eb557dbb
commit 44884ae648
10 changed files with 891 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,7 @@ export default function PDFSigner(props: any) {
const signature = {
fieldId: dialogField.id,
type: dialogResult.type,
name: dialogResult.name,
typedSignature: dialogResult.typedSignature,
signatureImage: dialogResult.signatureImage,
};
@ -72,8 +72,6 @@ export default function PDFSigner(props: any) {
error: "Could not sign :/",
}
);
// goto signing done page
}
return (

4
apps/web/components/editor/readonly-field.tsx
View File

@ -57,7 +57,9 @@ export default function ReadOnlyField(props: FieldPropsType) {
hidden={!field?.signature}
className="font-qwigley text-5xl m-auto w-auto flex-row-reverse font-medium text-center"
>
{field?.signature?.type === "type" ? field?.signature.name : ""}
{field?.signature?.type === "type"
? field?.signature.typedSignature
: ""}
{field?.signature?.type === "draw" ? (
<img className="w-50 h-20" src={field?.signature?.signatureImage} />
) : (

39
apps/web/components/editor/signature-dialog.tsx
View File

@ -6,8 +6,9 @@ import {
PencilIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { Fragment, useState } from "react";
import { Fragment, useEffect, useState } from "react";
import SignatureCanvas from "react-signature-canvas";
import { localStorage } from "@documenso/lib";
const tabs = [
{ name: "Type", icon: LanguageIcon, current: true },
@ -16,10 +17,13 @@ const tabs = [
export default function SignatureDialog(props: any) {
const [currentTab, setCurrentTab] = useState(tabs[0]);
const [typedName, setTypedName] = useState("");
const [typedSignature, setTypedSignature] = useState("");
const [signatureEmpty, setSignatureEmpty] = useState(true);
let signCanvasRef: any | undefined;
let signCanvas: any | undefined;
useEffect(() => {
setTypedSignature(localStorage.getItem("typedSignature") || "");
});
return (
<>
@ -82,13 +86,16 @@ export default function SignatureDialog(props: any) {
</div>
{isCurrentTab("Type") ? (
<div>
<div className="my-8">
<div className="my-8 border-b border-gray-300 mb-3">
<input
value={typedName}
value={typedSignature}
onChange={(e) => {
setTypedName(e.target.value);
setTypedSignature(e.target.value);
}}
className="font-qw leading-none h-10 align-bottom font-qwigley mt-14 text-center block border-b w-full border-gray-300 focus:border-neon focus:ring-neon text-2xl"
className={classNames(
typedSignature ? "font-qwigley text-4xl" : "",
"leading-none h-10 align-bottom mt-14 text-center block w-full focus:border-neon focus:ring-neon text-2xl"
)}
placeholder="Kindly type your name"
/>
</div>
@ -101,11 +108,15 @@ export default function SignatureDialog(props: any) {
</Button>
<Button
className="ml-3"
disabled={!typedName}
disabled={!typedSignature}
onClick={() => {
localStorage.setItem(
"typedSignature",
typedSignature
);
props.onClose({
type: "type",
name: typedName,
typedSignature: typedSignature,
});
}}
>
@ -120,7 +131,7 @@ export default function SignatureDialog(props: any) {
<div className="">
<SignatureCanvas
ref={(ref) => {
signCanvas = ref;
signCanvasRef = ref;
}}
canvasProps={{
className:
@ -128,15 +139,15 @@ export default function SignatureDialog(props: any) {
}}
clearOnResize={true}
onEnd={() => {
setSignatureEmpty(signCanvas?.isEmpty());
setSignatureEmpty(signCanvasRef?.isEmpty());
}}
/>
<IconButton
className="block float-left"
icon={TrashIcon}
onClick={() => {
signCanvas?.clear();
setSignatureEmpty(signCanvas?.isEmpty());
signCanvasRef?.clear();
setSignatureEmpty(signCanvasRef?.isEmpty());
}}
></IconButton>
<div className="mt-10 float-right">
@ -152,7 +163,7 @@ export default function SignatureDialog(props: any) {
props.onClose({
type: "draw",
signatureImage:
signCanvas.toDataURL("image/png"),
signCanvasRef.toDataURL("image/png"),
});
}}
disabled={signatureEmpty}