Merge pull request #138 from OpenSignLabs/staging

v1.0.2

Author: andrew-opensignlabs

.all-contributorsrc

@@ -151,6 +151,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "rishabjasrotia",
+      "name": "Rishab",
+      "avatar_url": "https://avatars.githubusercontent.com/u/33950743?v=4",
+      "profile": "https://github.com/rishabjasrotia",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "maoo",
+      "name": "Maurizio Pillitu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/327285?v=4",
+      "profile": "https://session.it",
+      "contributions": [
+        "bug"
+      ]
     }
   ]
 }

.env.local_dev

@@ -0,0 +1,53 @@
+# Clone the repo and rename this file to .env if you want to run the frontend react app locally for some quick contributions to the project.
+# When used as it is, this env config will connect to our hosted UAT backend
+# Note that any data in staging will get cleared from time to time and you may have to sign up again and again
+
+# Set CI to false while running the app locally
+CI=false
+# Set it to the URL form where the app home page will be accessed
+PUBLIC_URL=http://localhost:3000
+# Set it to true if you want to generate the Sourcemap for debugging
+GENERATE_SOURCEMAP=false
+# Set it to the URL from where APIs will be accessible, for local development it should be localhost:3000/api/app (use your local port number instead)
+REACT_APP_SERVERURL=http://localhost:8080/app
+# A 12 character long random app identifier. The value of this should be same as APP_ID which is a variable used by backend API.
+REACT_APP_APPID=opensignstgn
+
+
+# Backend ExpressJS config ****************************************************************************************************************************************************************************************
+# A 12 character long random app identifier. The value of this should be same as REACT_APP_APPID which is a variable used by Frontend React App.
+APP_ID=opensignstgn
+# Name of the app. It will be visible in the verification emails sent out.
+appName=open_sign_server
+# A 12 character long random secret key that allows access to all the data. It is used in Parse dashboard config to view all the data in the database.
+MASTER_KEY=XnAadwKxxByMr
+# Mongodb URI to connect to
+MONGODB_URI=mongodb://host.docker.internal:27017/OpenSignDB
+# Path on which APIs should be mounted. Do not change this. This variable shall be removed & value hardcoded in the source code in coming versions.
+PARSE_MOUNT=/app
+# Set it to the URL from where APIs will be accessible to the NodeJS functions, for local development it should be localhost:3000/api/app (use your local port number instead)
+SERVER_URL=http://127.0.0.1:8080/app
+
+# Storage config ************************************************************************************************************************************************************************************************
+# Digital ocean space name or AWS S3 bucket name for uploading documents
+DO_SPACE=DOSPACENAME
+# Digital ocean spaces endpoint or AWS S3 endpoint for uploading documents
+DO_ENDPOINT=ams3.digitaloceanspaces.com
+# Digital ocean baseurl or AWS S3 base URL
+DO_BASEURL=https://DOSPACENAME.ams3.digitaloceanspaces.com
+# Digital ocean spaces access key ID or AWS s3 Access key ID for uploading the docs
+DO_ACCESS_KEY_ID=
+# Digital ocean spaces secret access key or AWS s3 secret access key for uploading the docs
+DO_SECRET_ACCESS_KEY=
+# Digital ocean spaces region or AWS s3 region
+DO_REGION=us-west
+# local storage
+USE_LOCAL=TRUE
+
+# Email mailgun config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
+MAILGUN_API_KEY=XXXXX
+MAILGUN_DOMAIN=mail.yourdomain.com
+[email protected]
+
+# Base64 encoded PFX or p12 document signing certificate file *********************************************************************************************************************
+PFX_BASE64=

INSTALLATION.md

@@ -7,6 +7,7 @@ or follow below instructions to install it on your own infrastructure.
 
 - Localhost(Frontend only)
 - Digital Ocean
+- Localhost(Docker)
 
 ## Localhost(Frontend only)
 
@@ -83,3 +84,9 @@ You can install all 3 components on digital ocean using the button below -
 
  Visit below link if you face any issues while following the above instructions -
   - https://repost.aws/knowledge-center/create-access-key
+
+
+## Localhost(Docker)
+
+Below are the steps to follow -
+- Execute `make build`

Makefile

@@ -0,0 +1,3 @@
+build:
+	cp .env.local_dev .env
+	docker compose up -d

README.md

@@ -2,7 +2,7 @@
                     
 <div align="center">
 
-The free open source alternative to DocuSign | PandaDoc | SignNow | Adobe Sign | Smartwaiver | SignRequest | HelloSign | Zoho sign.
+The free and open source alternative to DocuSign
 
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/opensignlabs/opensign.svg)](http://isitmaintained.com/project/opensignlabs/opensign "Average time to resolve an issue")
 [![All Contributors](https://img.shields.io/github/all-contributors/opensignlabs/opensign?color=ee8449&style=flat-square)](#contributors)
@@ -23,7 +23,7 @@ The free open source alternative to DocuSign | PandaDoc | SignNow | Adobe Sign |
   <a href="https://www.linkedin.com/company/opensign%E2%84%A2/about/">LinkedIn</a>
 
 
-## An Open-Source Alternative to DocuSign, PandaDoc, SignNow, Adobe Sign, Smartwaiver, SignRequest, and HelloSign
+## An open-source document e-signing solution
 
 ---
 </div>
@@ -122,6 +122,8 @@ We would like to thank all our contributors and users for their support and feed
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/VishakhaSainani"><img src="https://avatars.githubusercontent.com/u/113436770?v=4?s=100" width="100px;" alt="VishakhaSainani"/><br /><sub><b>VishakhaSainani</b></sub></a><br /><a href="#code-VishakhaSainani" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/andrew-opensignlabs"><img src="https://avatars.githubusercontent.com/u/148278535?v=4?s=100" width="100px;" alt="Andrew"/><br /><sub><b>Andrew</b></sub></a><br /><a href="#code-andrew-opensignlabs" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rishabjasrotia"><img src="https://avatars.githubusercontent.com/u/33950743?v=4?s=100" width="100px;" alt="Rishab"/><br /><sub><b>Rishab</b></sub></a><br /><a href="#code-rishabjasrotia" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://session.it"><img src="https://avatars.githubusercontent.com/u/327285?v=4?s=100" width="100px;" alt="Maurizio Pillitu"/><br /><sub><b>Maurizio Pillitu</b></sub></a><br /><a href="#bug-maoo" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

apps/OpenSign/Dockerfile

@@ -5,14 +5,14 @@ FROM node:16
 WORKDIR /usr/src/app
 
 # Copy package.json and package-lock.json first to leverage Docker cache
-COPY apps/OpenSign/package*.json ./
+COPY ./package*.json ./
 
 # Install application dependencies
 RUN npm install
 
 # Copy the current directory contents into the container
-COPY apps/OpenSign/ .
-COPY apps/OpenSign/.husky .
+COPY ./ .
+COPY ./.husky .
 
 # Make port 3000 available to the world outside this container
 EXPOSE 3000

apps/OpenSign/package.json

@@ -41,7 +41,8 @@
   },
   "scripts": {
     "start": "mf-cra start",
-    "build": "npm run micro && CI=false && mf-cra build",
+    "start-prod": "serve -s build",
+    "build": "rm -rf public/mfbuild && npm run micro && CI=false && mf-cra build",
     "micro": "cd ../../microfrontends/SignDocuments && npm install && npm run build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -84,4 +85,4 @@
     "pretty-quick": "^3.1.3",
     "tailwindcss": "^3.3.3"
   }
-}
+}

apps/OpenSign/public/mfbuild/.gitkeep

@@ -15,7 +15,9 @@ const MicroappModal = () => {
     // console.log("value ", key + ":" + value);
 
     if (key === "remoteUrl") {
-      obj = { ...obj, [key]: atob(value) };
+      const url = window.location.origin + "/mfbuild/remoteEntry.js";
+      // console.log("atob(value) ", atob(value))
+      obj = { ...obj, [key]: url };
     } else {
       if (key === "moduleToLoad") {
         obj = { ...obj, [key]: "./" + value };
@@ -45,9 +47,9 @@ const MicroappModal = () => {
           >
             Back
           </button>
-          {localStorage.getItem('domain') && (
+          {localStorage.getItem("domain") && (
             <p className="flex-1 w-full text-sm md:text-base text-black text-center">
-              {localStorage.getItem('domain') === "contracts" ? "Document":""}
+              {localStorage.getItem("domain") === "contracts" ? "Document" : ""}
             </p>
           )}
         </div>

apps/OpenSign/src/components/ReportMicroapp.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { SaveFileSize } from "../../constant/saveFileSize";
-// import Parse from "parse";
-// import sanitizeFileName from "../../primitives/sanitizeFileName";
-import axios from "axios";
+import Parse from "parse";
+import sanitizeFileName from "../../primitives/sanitizeFileName";
 
 const FileUpload = (props) => {
   const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
@@ -69,53 +68,44 @@ const FileUpload = (props) => {
   };
 
   const handleFileUpload = async (file) => {
+    Parse.serverURL = parseBaseUrl;
+    Parse.initialize(parseAppId);
     setfileload(true);
-    const file_url = parseBaseUrl.slice(0, -4);
-    const url = `${file_url}file_upload`;
-    const formData = new FormData();
-    formData.append("file", file);
-    const config = {
-      headers: {
-        "content-type": "multipart/form-data",
-        "X-Parse-Application-Id": parseAppId
-      },
-      onUploadProgress: function (progressEvent) {
-        var percentCompleted = Math.round(
-          (progressEvent.loaded * 100) / progressEvent.total
-        );
-        setpercentage(percentCompleted);
-      }
-    };
+    const size = file.size;
+    const fileName = file.name;
+    const name = sanitizeFileName(fileName);
+    const pdfFile = file;
+    const parseFile = new Parse.File(name, pdfFile);
 
     try {
-      await axios
-        .post(url, formData, config)
-        .then((res) => {
-          if (res.data.status === "Error") {
-            alert(res.data.message);
+      const response = await parseFile.save({
+        progress: (progressValue, loaded, total, { type }) => {
+          if (type === "upload" && progressValue !== null) {
+            const percentCompleted = Math.round((loaded * 100) / total);
+            console.log("percentCompleted ", percentCompleted);
+            setpercentage(percentCompleted);
           }
-          setFileUpload(res.data.imageUrl);
-          props.onChange(res.data.imageUrl);
-          setfileload(false);
-          setpercentage(0);
+        }
+      });
 
-          if (res.data.imageUrl) {
-            SaveFileSize(file.size, res.data.imageUrl);
-            return res.data.imageUrl;
-          }
-        })
-        .catch((err) => {
-          alert(`${err.message}`);
-          setfileload(false);
-          setpercentage(0);
-        });
+      setFileUpload(response.url());
+      props.onChange(response.url());
+      setfileload(false);
+      // The response object will contain information about the uploaded file
+      // console.log("File uploaded:", response);
+
+      // You can access the URL of the uploaded file using response.url()
+      // console.log("File URL:", response.url());
+      if (response.url()) {
+        SaveFileSize(size, response.url());
+        return response.url();
+      }
     } catch (error) {
-      alert(error.message);
       setfileload(false);
       setpercentage(0);
+      console.error("Error uploading file:", error);
     }
   };
-
   let fileView =
     props.formData &&
     props.schema.uploadtype === "s3viajw" ? null : props.formData &&
@@ -124,7 +114,7 @@ const FileUpload = (props) => {
         <a
           href={props.formData}
           title={props.formData}
-          style={{ paddingBottom: "10px", color: "blue"}}
+          style={{ paddingBottom: "10px", color: "blue" }}
         >
           Download
         </a>