diff --git a/apps/web/package.json b/apps/web/package.json
index 83230463d..e2f379fe7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -39,6 +39,7 @@
"react-tooltip": "^5.7.2",
"sass": "^1.57.1",
"short-uuid": "^4.2.2",
+ "signature_pad": "^4.1.4",
"typescript": "4.8.4"
},
"devDependencies": {
diff --git a/apps/web/pages/documents/[id]/sign.tsx b/apps/web/pages/documents/[id]/sign.tsx
index 1ded3bcdd..5d64e0274 100644
--- a/apps/web/pages/documents/[id]/sign.tsx
+++ b/apps/web/pages/documents/[id]/sign.tsx
@@ -1,19 +1,26 @@
import prisma from "@documenso/prisma";
import Head from "next/head";
-import { ReactElement } from "react";
+import { ReactElement, useEffect } from "react";
import Layout from "../../../components/layout";
import Logo from "../../../components/logo";
import { NextPageWithLayout } from "../../_app";
import { Router } from "next/router";
import { ReadStatus } from "@prisma/client";
+import SignaturePad from "signature_pad";
const SignPage: NextPageWithLayout = () => {
+ useEffect(() => {
+ const canvas: any = document.querySelector("canvas");
+ const signaturePad = new SignaturePad(canvas);
+ });
return (
<>
Sign | Documenso
Hello, please sign at the dotted line.
+
+
);
};
diff --git a/package-lock.json b/package-lock.json
index 594823866..6c36df0eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,7 @@
"react-tooltip": "^5.7.2",
"sass": "^1.57.1",
"short-uuid": "^4.2.2",
+ "signature_pad": "^4.1.4",
"typescript": "4.8.4"
},
"devDependencies": {
@@ -7533,6 +7534,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/signature_pad": {
+ "version": "4.1.4",
+ "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-4.1.4.tgz",
+ "integrity": "sha512-NKLm9uhRfEPl8cdbbyYAiPsoJ3slIo1AyKg3tzwy8OCX2zQc6jrccUlgMBTJPcUsZXNU8o6fy7iX33rtYSoQHQ=="
+ },
"node_modules/slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -8514,9 +8520,10 @@
"react-dom": "18.2.0",
"react-hook-form": "^7.41.5",
"react-pdf": "^6.2.2",
- "react-tooltip": "*",
+ "react-tooltip": "^5.7.2",
"sass": "^1.57.1",
"short-uuid": "^4.2.2",
+ "signature_pad": "*",
"tailwindcss": "^3.2.4",
"typescript": "4.8.4"
},
@@ -13640,6 +13647,11 @@
"object-inspect": "^1.9.0"
}
},
+ "signature_pad": {
+ "version": "4.1.4",
+ "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-4.1.4.tgz",
+ "integrity": "sha512-NKLm9uhRfEPl8cdbbyYAiPsoJ3slIo1AyKg3tzwy8OCX2zQc6jrccUlgMBTJPcUsZXNU8o6fy7iX33rtYSoQHQ=="
+ },
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",