Merge pull request #14 from OpenSignLabs/staging

sync fork

.gitignore

@@ -23,4 +23,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 apps/OpenSign/public/mfbuild/*
-microfrontends/SignDocuments/build/*
+microfrontends/SignDocuments/build/*
+apps/OpenSignServer/files/files/*

INSTALLATION.md

@@ -127,7 +127,24 @@ openssl pkcs12 -inkey ./cert/local_dev.key -in ./cert/local_dev.crt -export -out
 openssl base64 -in ./cert/local_dev.pfx -out ./cert/base64_pfx
 ```
 
-#Build Local Environment
+# CORS Configuration
 
-Below are the steps to follow -
+As document storage is delegated to S3-compatible services that reside in a different host than the OpenSign one, document operations (loading, storing, deleting) are subject to [Cross-Origin Resource Sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) restriction policies; as a consequence, OpenSign app may fail with (browser console) errors like the following:
+```
+Access to fetch at 'https://foo.nyc3.digitaloceanspaces.com/exported_file_4627_0000-00-00T00%3A45%3A43.344Z.pdf'
+from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
+is present on the requested resource. If an opaque response serves your needs, set the request's mode to
+'no-cors' to fetch the resource with CORS disabled.
+```
+
+In order to address this, your document storage system must be instructed to accept requests from other hosts; below the relevant documentation links:
+- [How to Configure CORS on DigitalOcean Spaces](https://docs.digitalocean.com/products/spaces/how-to/configure-cors/)
+- [Configuring cross-origin resource sharing on AWS S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html)
+
+# Build Local Environment
+
+Command to build project -
 - Execute `make build`
+
+Command to run project -
+- Execute `make run`

Makefile

@@ -1,3 +1,9 @@
 build:
+	cp .env.local_dev .env
+	rm -rf apps/OpenSign/public/mfbuild
+	cd microfrontends/SignDocuments && npm install && npm run build
+	docker compose up --build --force-recreate
+
+run:
 	cp .env.local_dev .env
 	docker compose up -d

README.md

@@ -48,14 +48,18 @@ Welcome to OpenSign, an open-source document e-signing solution designed to prov
 
 ### Features
 
-- **Secure Signing**: Utilizes state-of-the-art cryptographic algorithms to ensure the security & integrity of your documents.
-- **User-Friendly Interface**: Designed with usability in mind, making it easy for both technical and non-technical users.
-- **Multi-Platform Support**: Compatible with various browsers and devices.
-- **Invite & collaborate users**: Bring multiple people from your team into the signing process, all within your own infrastructure.
-- **Secure**: Allows for the easy, secure and seamless organization of your documents using 'OpenSigDrive'.
-- **Audit Trails**: Keeps a detailed log of all activities related to the document signing process including IP addresses and access timings.
-- **Completion Certificate**: Generate secure completion certificate as soon as a document is signed by all participants.
-- **API Support**: Provides a robust API for integration into other software and services.
+- **Secure PDF E-Signing:** With the help of Robust encryption algorithms, OpenSign™ ensures maximum security, privacy & compatibility.
+- **Annotate Documents:** OpenSign™ allows you to annotate PDF documents with an advanced signing pad that comes with hand drawn signatures support as well as uploaded images & saved signatures for the simplest signing experience.
+- **User-Friendly Interface:** OpenSign™ was built while keeping Intuitive design in mind for ease of use. Features like "Sign yourself", "One click signatures" and "OpenSign Drive" makes it stand out of the crowd and even makes it better than a lot of so-called industry leaders.
+- **Multi-signer Support:** OpenSign's ability to invite multiple signers for signing along with the ability to invite witnesses & being able to enforce signing in a sequence makes it the only open source solution that is fully loaded and allows it to compete head-to-head with established players.
+- **Email Unique Code(OTP) verification support for guest signers:** With OpenSign™, your documents are fully secure even when being signed by guest users. Guest signers can only sign the document after entering a unique code sent to their email address. 
+- **"Expiring Docs" & "Rejection":** You can set documents to expire after certain number of days after which nobody will be able to sign it. Not just this, OpenSign also allows signers to reject signing a document.
+- **Beautiful email templates:** All document signing invitations, completion notifications & reminders are formatted using great looking email templates.
+- **PDF Template Creation(coming soon):** OpenSign™ allows you to create and store PDF document templates for repeated use thereby saving you a lot of time.
+- **OpenSign™ Drive:** It is a centralised secure vault for your signed documents that makes storing, signing, organizing, sharing & achieving your docs a breeze.
+- **Audit Trails & completion certificate:** Being a security focused solution, OpenSign™ makes it a top priority to save detailed logs for tracking document activities along with time-stamps, IP addresses, email IDs & phone numbers. A completion certificate is generated as soon as document is completed which contains all the document related logs for added safety.
+- **API Support(coming soon):** OpenSign™ API allows seamless integration into existing systems and software. APIs will soon be available as a cloud hosted solution.
+- **Integrations:** Seamless integrations with various Cloud storage systems, CRMs & enterprise platforms is coming soon.
 
 <img src=https://github.com/OpenSignLabs/OpenSign/assets/5486116/b37ff443-7099-4273-9aeb-21c46d7154cf height='200'>
 <img src=https://github.com/OpenSignLabs/OpenSign/assets/5486116/86db91b7-6c2f-4885-a33c-58f4fd35ec89 height='200'>

apps/OpenSign/Dockerfile

@@ -21,5 +21,5 @@ EXPOSE 3000
 # ENV NODE_ENV production
 
 # Run the application
-CMD ["npm", "start"]
+ENTRYPOINT npm run start-dev
 

apps/OpenSignServer/cloud/customRoute/uploadFile.js

@@ -4,6 +4,12 @@ import multerS3 from 'multer-s3';
 import aws from 'aws-sdk';
 import dotenv from 'dotenv';
 dotenv.config();
+
+function sanitizeFileName(fileName) {
+  // Remove spaces and invalid characters
+  return fileName.replace(/[^a-zA-Z0-9._-]/g, '');
+}
+
 async function uploadFile(req, res) {
   try {
     //--size extended to 100 mb
@@ -50,16 +56,28 @@ async function uploadFile(req, res) {
       region: process.env.DO_REGION,
     });
 
-    // const s3 = new aws.S3();
-    const upload = multer({
-      fileFilter: function (req, file, cb) {
-        if (accepted_extensions.some(ext => file.originalname.toLowerCase().endsWith('.' + ext))) {
-          return cb(null, true);
+    const parseBaseUrl = process.env.SERVER_URL;
+    const parseAppId = process.env.APP_ID;
+
+    if (process.env.USE_LOCAL == "TRUE") {
+      var fileStorage = multer.diskStorage({
+        destination: function(req, file, cb) {
+          cb(null, "files/files");
+        },
+        metadata: function (req, file, cb) {
+          cb(null, { fieldName: 'OPENSIGN_METADATA' });
+        },
+        filename: function(req, file, cb) {
+          let filename = file.originalname;
+          let newFileName = filename.split('.')[0];
+          let extension = filename.split('.')[1];
+          newFileName = sanitizeFileName(newFileName + '_' + new Date().toISOString() + '.' + extension)
+          console.log(newFileName);
+          cb(null, newFileName);
         }
-        // otherwise, return error
-        return cb('Only ' + accepted_extensions.join(', ') + ' files are allowed!');
-      },
-      storage: multerS3({
+      });
+    } else {
+      var fileStorage = multerS3({
         acl: 'public-read',
         s3,
         bucket: DO_SPACE,
@@ -69,14 +87,25 @@ async function uploadFile(req, res) {
         key: function (req, file, cb) {
           //console.log(file);
           let filename = file.originalname;
-          let filenam = filename.split('.')[0];
+          let newFileName = filename.split('.')[0];
           let extension = filename.split('.')[1];
-          filenam = filenam + '_' + new Date().toISOString() + '.' + extension;
-          console.log(filenam);
-          cb(null, filenam);
-        },
-      }),
+          newFileName = sanitizeFileName(newFileName + '_' + new Date().toISOString() + '.' + extension)
+          console.log(newFileName);
+          cb(null, newFileName);
+        }
+      });
+    }
 
+    // const s3 = new aws.S3();
+    const upload = multer({
+      fileFilter: function (req, file, cb) {
+        if (accepted_extensions.some(ext => file.originalname.toLowerCase().endsWith('.' + ext))) {
+          return cb(null, true);
+        }
+        // otherwise, return error
+        return cb('Only ' + accepted_extensions.join(', ') + ' files are allowed!');
+      },
+      storage: fileStorage,
       limits: { fileSize: size },
     }).single('file');
 
@@ -93,7 +122,14 @@ async function uploadFile(req, res) {
       const status = 'Success';
       //res.header("Access-Control-Allow-Headers", "Content-Type");
       //res.setHeader("Access-Control-Allow-Origin", "*");
-      return res.json({ status, imageUrl: req.file.location });
+      if (process.env.USE_LOCAL == "TRUE") {
+        console.log(req.file);
+        var fileUrl = `${parseBaseUrl}/files/${parseAppId}/${req.file.filename}`;
+      } else {
+        var fileUrl = req.file.location;
+      }
+
+      return res.json({ status, imageUrl: fileUrl });
     });
   } catch (err) {
     console.log('Exeption in query ' + err.stack);

microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js

@@ -99,7 +99,7 @@ function PdfFileComponent({
 
   //function for navigate user to microapp-signature component
   const checkPdfStatus = async (data) => {
-    
+
     const hostUrl = getHostUrl();
     const expireDate = data.ExpiryDate.iso;
     const expireUpdateDate = new Date(expireDate).getTime();
@@ -221,13 +221,19 @@ function PdfFileComponent({
         // console.log("download")
         const pdfName = data && data.Name;
         const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
-        saveAs(pdfUrl, `${pdfName}_signed_by_OpenSign™.pdf`);
+        saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
       } else if (selectType === "Rename") {
         // console.log("rename")
         setRenameValue(data.Name);
         setRename(data.objectId);
       }
     };
+
+    const sanitizeFileName = (pdfName) => {
+      // Replace spaces with underscore
+      return pdfName.replace(/ /g, '_');
+    }
+
     const handleEnterPress = (e, data) => {
       if (e.key === "Enter") {
         handledRenameDoc(data);

microfrontends/SignDocuments/src/Component/component/emailComponent.js

@@ -28,9 +28,9 @@ function EmailComponent({
     setIsLoading(true);
     let sendMail;
     for (let i = 0; i < emailCount.length; i++) {
-       
+
       try {
-       
+
         const imgPng =
           "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
         // "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png";
@@ -41,7 +41,7 @@ function EmailComponent({
           "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
           sessionToken: localStorage.getItem("accesstoken")
         };
-        
+
         const themeBGcolor = themeColor();
         let params = {
           pdfName: pdfName,
@@ -125,12 +125,17 @@ function EmailComponent({
 
   //handle download signed pdf
   const handleDownloadPdf = () => {
-    saveAs(pdfUrl, `${pdfName}_signed_by_OpenSign™.pdf`);
+    saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
   };
 
+  const sanitizeFileName = (pdfName) => {
+    // Replace spaces with underscore
+    return pdfName.replace(/ /g, '_');
+  }
+
   const isAndroid = /Android/i.test(navigator.userAgent);
 
-  
+
   return (
     <div>
       {/* isEmail */}
@@ -248,13 +253,13 @@ function EmailComponent({
                   style={{
                     display: "flex",
                     flexDirection: "row",
-                 
+
                     flexWrap: "wrap"
                   }}
                 >
                   {emailCount.map((data, ind) => {
                     return (
-                      <div className="emailChip" 
+                      <div className="emailChip"
                       style={{display:"flex", flexDirection:"row", alignItems:"center"}}
                       key={ind}>
                         <span

microfrontends/SignDocuments/src/Component/component/header.js

@@ -37,7 +37,7 @@ function Header({
 }) {
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
-
+  const isGuestSigner = localStorage.getItem("isGuestSigner");
   //for go to previous page
   function previousPage() {
     changePage(-1);
@@ -76,19 +76,27 @@ function Header({
   const handleDownloadPdf = () => {
     const pdfName = pdfDetails[0] && pdfDetails[0].Name;
 
-    saveAs(pdfUrl, `${pdfName}_signed_by_OpenSign™.pdf`);
+    saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
   };
 
+  const sanitizeFileName = (pdfName) => {
+    // Replace spaces with underscore
+    return pdfName.replace(/ /g, '_');
+  }
+
+
   return (
     <div
-      style={{ paddingBottom: "5px", paddingTop: "5px" }}
+    style={{ padding: !isGuestSigner && "5px 0px 5px 0px" }}
       className="mobileHead"
     >
       {isMobile && isShowHeader ? (
         <div
           id="navbar"
-          className="stickyHead"
-          style={{ width: window.innerWidth - 30 + "px" }}
+          className={isGuestSigner ? "stickySignerHead" : "stickyHead"}
+          style={{
+            width: isGuestSigner ? window.innerWidth : window.innerWidth - 30 + "px"
+          }}
         >
           <div className="preBtn2">
             <div
@@ -215,7 +223,7 @@ function Header({
               </DropdownMenu.Root>
             ) : (
               <div style={{ display: "flex", justifyContent: "space-around" }}>
-                {/* current signer is checking user send request and check status of pdf sign than if current 
+                {/* current signer is checking user send request and check status of pdf sign than if current
                 user exist than show finish button else no
                 */}
                 {currentSigner && (

microfrontends/SignDocuments/src/Component/component/renderPdf.js

@@ -42,8 +42,42 @@ function RenderPdf({
   const isMobile = window.innerWidth < 767;
   const newWidth = window.innerWidth;
   const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
-  //function for render placeholder block over pdf document
+ 
+  // handle signature block width and height according to screen
+  const posWidth = (pos) => {
+    let width;
+    if (isMobile) {
+      if (!pos.isMobile) {
+        width = pos.Width / scale ? pos.Width / scale : 150 / scale;
+        return width;
+      } else {
+        width = pos.Width ? pos.Width : 150;
+        return width;
+      }
+    } else {
+      width = pos.Width ? pos.Width : 150;
+      return width;
+    }
+  };
+  const posHeight = (pos) => {
+    let width;
+    if (isMobile) {
+      if (!pos.isMobile) {
+        width = pos.Height / scale ? pos.Height / scale : 60 / scale;
+        return width;
+      } else {
+        width = pos.Height ? pos.Height : 60;
+        return width;
+      }
+    } else {
+      width = pos.Height ? pos.Height : 60;
+      return width;
+    }
+  };
+  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
+  const isGuestSigner = localStorage.getItem("isGuestSigner");
 
+  //function for render placeholder block over pdf document
   const checkSignedSignes = (data) => {
     const checkSign = signedSigners.filter(
       (sign) => sign.objectId === data.signerObjId
@@ -56,7 +90,7 @@ function RenderPdf({
       if (isMobile) {
         //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
         if (!pos.isMobile) {
-          return pos.xPosition / scale;
+          return pos.xPosition / scale - 20;
         }
         //pos.isMobile true -- placeholder save from mobile view(small device)  handle position in mobile view(small screen) view divided by scale
         else {
@@ -134,8 +168,8 @@ function RenderPdf({
                         borderWidth: "0.2px"
                       }}
                       size={{
-                        width: pos.Width ? pos.Width : 150,
-                        height: pos.Height ? pos.Height : 60
+                        width: posWidth(pos),
+                        height: posHeight(pos)
                       }}
                       lockAspectRatio={pos.Width && 2.5}
                       default={{
@@ -205,8 +239,8 @@ function RenderPdf({
                       y: yPos(pos)
                     }}
                     size={{
-                      width: pos.Width ? pos.Width : 150,
-                      height: pos.Height ? pos.Height : 60
+                      width: posWidth(pos),
+                      height: posHeight(pos)
                     }}
                     lockAspectRatio={pos.Width ? pos.Width / pos.Height : 2.5}
                   >
@@ -235,7 +269,8 @@ function RenderPdf({
       {isMobile && scale ? (
         <div
           style={{
-            border: "0.1px solid #ebe8e8"
+            border: "0.1px solid #ebe8e8",
+            marginTop: isGuestSigner && "30px"
           }}
           ref={drop}
           id="container"
@@ -294,12 +329,11 @@ function RenderPdf({
                                 borderWidth: "0.2px"
                               }}
                               size={{
-                                width: pos.Width ? pos.Width : 150,
-                                height: pos.Height ? pos.Height : 60
+                                width: posWidth(pos),
+                                height: posHeight(pos)
                               }}
                               lockAspectRatio={pos.Width && 2.5}
                               //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
-
                               //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
                               default={{
                                 x: !pos.isMobile
@@ -361,14 +395,13 @@ function RenderPdf({
                                 borderWidth: "0.2px"
                               }}
                               size={{
-                                width: pos.Width ? pos.Width : 150,
-                                height: pos.Height ? pos.Height : 60
+                                width: posWidth(pos),
+                                height: posHeight(pos)
                               }}
                               disableDragging={true}
                               default={{
                                 //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale
                                 //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale
-
                                 x: !pos.isMobile
                                   ? pos.xPosition / scale
                                   : pos.xPosition * (pos.scale / scale) - 50,
@@ -1281,4 +1314,4 @@ function RenderPdf({
   );
 }
 
-export default RenderPdf;
+export default RenderPdf;

microfrontends/SignDocuments/src/Component/login.js

@@ -38,19 +38,15 @@ function Login() {
 
   const handleChange = (event) => {
     const { value } = event.target;
-
     setOTP(value);
   };
 
   //send email OTP function
-
   const SendOtp = async (e) => {
     const serverUrl =
       localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
-
     const parseId =
       localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
-
     if (serverUrl && localStorage) {
       setLoading(true);
       e.preventDefault();
@@ -84,13 +80,10 @@ function Login() {
     e.preventDefault();
     const serverUrl =
       localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
-
     const parseId =
       localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
-
     if (OTP) {
       setLoading(true);
-
       try {
         let url = `${serverUrl}functions/AuthLoginAsMail/`;
         const headers = {
@@ -102,7 +95,6 @@ function Login() {
           otp: OTP
         };
         let user = await axios.post(url, body, { headers: headers });
-
         if (user.data.result === "Invalid Otp") {
           alert("Invalid Otp");
           setLoading(false);
@@ -114,10 +106,12 @@ function Login() {
           localStorage.setItem("UserInformation", JSON.stringify(_user));
           localStorage.setItem("username", _user.name);
           localStorage.setItem("accesstoken", _user.sessionToken);
+          //save isGuestSigner true in local to handle login flow header in mobile view
+          localStorage.setItem("isGuestSigner", true);
           setLoading(false);
-          //navigate user to on signature page
-          // navigate(`/recipientSignPdf/${id}/${contactBookId}`);
-          navigate(`/loadmf/signmicroapp/recipientSignPdf/${id}/${contactBookId}`);
+          navigate(
+            `/loadmf/signmicroapp/recipientSignPdf/${id}/${contactBookId}`
+          );
         }
       } catch (error) {}
     } else {
@@ -173,9 +167,7 @@ function Login() {
                 <span className="KNLO">
                   Verification code is sent to your email
                 </span>
-                <div className="card card-box"
-                style={{borderRadius:"0px"}}
-                >
+                <div className="card card-box" style={{ borderRadius: "0px" }}>
                   <div className="card-body">
                     <input
                       type="email"
@@ -190,7 +182,6 @@ function Login() {
                 <div className="btnContainer">
                   {loading ? (
                     <button
-                      // className="btn btn-info loadinBtn "
                       type="button"
                       style={{
                         background: themeColor(),
@@ -214,15 +205,7 @@ function Login() {
                         color: "white",
                         marginLeft: "0px !important"
                       }}
-                      // className="btn btn-sm otpButton"
                       onClick={(e) => SendOtp(e)}
-                      // style={{
-                      //   marginBottom: "4px",
-                      //   width: "210px",
-                      //   background: themeColor(),
-                      //   color: "white",
-                      //   fontWeight: "600"
-                      // }}
                     >
                       Send OTP
                     </button>

microfrontends/SignDocuments/src/Component/placeHolderSign.js

@@ -952,7 +952,7 @@ function PlaceHolderSign() {
                   background: themeColor()
                 }}
               >
-                <span style={{ color: "white" }}>Send Mail </span>
+                <span style={{ color: "white" }}>Mails Sent</span>
               </Modal.Header>
 
               {/* signature modal */}

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -74,7 +74,8 @@ function EmbedPdfImage() {
     return object.pageNumber === pageNumber;
   });
   const divRef = useRef(null);
-
+  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
+  const isGuestSigner = localStorage.getItem("isGuestSigner");
   useEffect(() => {
     const clientWidth = window.innerWidth;
     const pdfWidth = clientWidth - 160 - 220 - 30;
@@ -1010,8 +1011,8 @@ function EmbedPdfImage() {
           {/* pdf render view */}
           <div
             style={{
-              marginLeft: pdfOriginalWidth > 500 && "20px",
-              marginRight: pdfOriginalWidth > 500 && "20px"
+              marginLeft: !isGuestSigner && pdfOriginalWidth > 500 && "20px",
+              marginRight: !isGuestSigner && pdfOriginalWidth > 500 && "20px"
             }}
           >
             {/* this modal is used show this document is already sign */}
@@ -1126,9 +1127,9 @@ function EmbedPdfImage() {
           )}
         </div>
       )}
-      {/* ndD5gdaxqw */}
+   
     </DndProvider>
   );
 }
 
-export default EmbedPdfImage;
+export default EmbedPdfImage;