Merge pull request #163 from OpenSignLabs/staging

v1.0.4

.env.local_dev

@@ -42,7 +42,7 @@ DO_SECRET_ACCESS_KEY=
 # Digital ocean spaces region or AWS s3 region
 DO_REGION=us-west
 # local storage
-USE_LOCAL=TRUE
+USE_LOCAL=FALSE
 
 # Email mailgun config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
 MAILGUN_API_KEY=XXXXX
@@ -50,7 +50,61 @@ MAILGUN_DOMAIN=mail.yourdomain.com
 MAILGUN_SENDER=postmaster@mail.yourdomain.com
 
 # Base64 encoded PFX or p12 document signing certificate file *********************************************************************************************************************
-PFX_BASE64=
+PFX_BASE64='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
+c6yryFgECIld0S5kDk7JAgIIAA=='
 
 # Provide Pass pharse of above PFX or p12 document
-PASS_PHRASE= 
+PASS_PHRASE= 

.gitignore

@@ -22,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+apps/OpenSign/public/mfbuild/*
+microfrontends/SignDocuments/build/*
+apps/OpenSignServer/files/files/*

INSTALLATION.md

@@ -88,5 +88,63 @@ You can install all 3 components on digital ocean using the button below -
 
 ## Localhost(Docker)
 
-Below are the steps to follow -
-- Execute `make build`
+For local Setup we need to need following prerequisite:
+
+Environment Varaibles:
+
+| Environment Varibale  | Value | Description |
+| ------------- | ------------- | ------------- |
+| CI  | false  | Set CI to false while running the app locally |
+| PUBLIC_URL  | http://localhost:3000  | Set it to the URL form where the app home page will be accessed |
+| GENERATE_SOURCEMAP  | false | Set it to true if you want to generate the Sourcemap for debugging |
+| REACT_APP_SERVERURL  | http://localhost:8080/app  | 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_APPID  | http://localhost:3000  | Set it to the URL form where the app home page will be accessed |
+| PUBLIC_URL  | opensignstgn  | 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. |
+| APP_ID  | opensignstgn  | 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. |
+| appName  | open_sign_server  | Name of the app. It will be visible in the verification emails sent out. |
+| MASTER_KEY  | XnAadwKxxByMr  | 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. |
+| MONGODB_URI  | mongodb://host.docker.internal:27017/OpenSignDB  | Mongodb URI to connect to |
+| PARSE_MOUNT  |/app  | 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. |
+| SERVER_URL  | http://127.0.0.1:8080/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) |
+| DO_SPACE  | DOSPACENAME  | Digital ocean space name or AWS S3 bucket name for uploading documents |
+| DO_ENDPOINT  | ams3.digitaloceanspaces.com  | Digital ocean spaces endpoint or AWS S3 endpoint for uploading documents |
+| DO_BASEURL  |https://DOSPACENAME.ams3.digitaloceanspaces.com  | Digital ocean baseurl or AWS S3 base URL |
+| DO_ACCESS_KEY_ID  | YOUR_S3_ACCESS_ID  | Digital ocean spaces access key ID or AWS s3 Access key ID for uploading the docs |
+| DO_SECRET_ACCESS_KEY  | YOUR_S3_ACCESS_KEY  | Digital ocean spaces secret access key or AWS s3 secret access key for uploading the docs |
+| DO_REGION  | YOUR_S3_REGION  | Digital ocean spaces region or AWS s3 region |
+| USE_LOCAL  | FALSE  | To use local file storage to save file |
+| MAILGUN_API_KEY  | YOUR_MAILGUNAPI_KEY  | Mailgun API Key |
+| MAILGUN_DOMAIN  | YOUR_MAILGUNAPI_DOMAIN | Mailgun API Domain |
+| MAILGUN_SENDER  | - | Mailgun Sender Mail ID |
+| PFX_BASE64  | - | Base64 encoded PFX or p12 document signing certificate file. You can generate base64 encoded self sign certificate using the passphrase `emudhra` |
+
+# Steps to Generate Self Sign Certificate
+```
+# execute below command and use passphrase emudhra
+openssl genrsa -des3 -out ./cert/local_dev.key 2048
+openssl req -key ./cert/local_dev.key -new -x509 -days 365 -out ./cert/local_dev.crt
+openssl pkcs12 -inkey ./cert/local_dev.key -in ./cert/local_dev.crt -export -out ./cert/local_dev.pfx
+openssl base64 -in ./cert/local_dev.pfx -out ./cert/base64_pfx
+```
+
+# CORS Configuration
+
+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 -d
+
+run:
 	cp .env.local_dev .env
 	docker compose up -d

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/OpenSign/src/components/LoginGoogle.js

@@ -141,6 +141,32 @@ const GoogleSignInBtn = ({
       alert("Please fill required details!");
     }
   };
+  const handleCloseModal = () => {
+    setIsModal(false);
+    Parse.User.logOut();
+
+    let appdata = localStorage.getItem("userSettings");
+    let applogo = localStorage.getItem("appLogo");
+    let appName = localStorage.getItem("appName");
+    let defaultmenuid = localStorage.getItem("defaultmenuid");
+    let PageLanding = localStorage.getItem("PageLanding");
+    let domain = localStorage.getItem("domain");
+    let _appName = localStorage.getItem("_appName");
+    let baseUrl = localStorage.getItem("BaseUrl12");
+    let appid = localStorage.getItem("AppID12");
+
+    localStorage.clear();
+
+    localStorage.setItem("appLogo", applogo);
+    localStorage.setItem("appName", appName);
+    localStorage.setItem("_appName", _appName);
+    localStorage.setItem("defaultmenuid", defaultmenuid);
+    localStorage.setItem("PageLanding", PageLanding);
+    localStorage.setItem("domain", domain);
+    localStorage.setItem("userSettings", appdata);
+    localStorage.setItem("BaseUrl12", baseUrl);
+    localStorage.setItem("AppID12", appid);
+  };
   return (
     <div style={{ position: "relative" }}>
       {thirdpartyLoader && (
@@ -259,16 +285,16 @@ const GoogleSignInBtn = ({
                   <div>
                     <button
                       type="button"
-                      className="btn btn-secondary"
-                      onClick={() => setIsModal(false)}
+                      className="bg-[#6c757d] p-2 text-white rounded"
+                      onClick={handleCloseModal}
                       style={{ marginRight: 10, width: 90 }}
                     >
                       Cancel
                     </button>
                     <button
                       type="button"
+                      className="bg-[#17a2b8] p-2 text-white rounded"
                       onClick={() => handleSubmitbtn()}
-                      className="btn btn-info"
                     >
                       Sign up
                     </button>

apps/OpenSign/src/components/ReportMicroapp.js

@@ -1,6 +1,6 @@
 import useFederatedComponent from "mf-cra";
 import React, { Suspense, useEffect } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 const MicroappModal = () => {
   const { remoteApp } = useParams();
@@ -28,60 +28,36 @@ const MicroappModal = () => {
   }
   // console.log("app ", remoteApp);
   const { Component: RemoteComponent } = useFederatedComponent(obj);
-  const navigate = useNavigate();
   // console.log("RemoteComponent ", RemoteComponent);
   return (
     <div className="w-full h-full flex items-center justify-center ">
-      {/* <!-- Modal Container --> */}
-      <div className="bg-white rounded-lg shadow-lg w-full">
-        {/* <!-- Modal Header --> */}
-        <div className="flex w-full items-center border-b-2 mb-2 p-2">
-          <button
-            className="focus:outline-none bg-blue-500 text-white text-sm shadow px-2.5 py-1 rounded"
-            id="closeModal"
-            onClick={(e) => {
-              e.preventDefault();
-              //   setIsModal(false);
-              navigate(-1);
+      <div className="w-full">
+        <Suspense
+          fallback={
+            <div style={{ height: "300px" }}>
+              <div
+                style={{
+                  marginLeft: "45%",
+                  marginTop: "150px",
+                  fontSize: "45px",
+                  color: "#3dd3e0"
+                }}
+                className="loader-37"
+              ></div>
+            </div>
+          }
+        >
+          <div
+            style={{
+              backgroundColor: "#ffffff",
+              width: "100%",
+              overflow: "hidden",
+              minHeight: "50vh"
             }}
           >
-            Back
-          </button>
-          {localStorage.getItem("domain") && (
-            <p className="flex-1 w-full text-sm md:text-base text-black text-center">
-              {localStorage.getItem("domain") === "contracts" ? "Document" : ""}
-            </p>
-          )}
-        </div>
-        {/* <!-- Modal Body --> */}
-        <div className="w-full">
-          <Suspense
-            fallback={
-              <div style={{ height: "300px" }}>
-                <div
-                  style={{
-                    marginLeft: "45%",
-                    marginTop: "150px",
-                    fontSize: "45px",
-                    color: "#3dd3e0"
-                  }}
-                  className="loader-37"
-                ></div>
-              </div>
-            }
-          >
-            <div
-              style={{
-                backgroundColor: "#ffffff",
-                width: "100%",
-                overflow: "hidden",
-                minHeight: "50vh"
-              }}
-            >
-              {RemoteComponent && <RemoteComponent />}
-            </div>
-          </Suspense>
-        </div>
+            {RemoteComponent && <RemoteComponent />}
+          </div>
+        </Suspense>
       </div>
     </div>
   );

apps/OpenSign/src/routes/Login.js

@@ -21,17 +21,18 @@ function Login(props) {
     passwordVisible: false,
     mobile: "",
     phone: "",
-    OTP: "",
     hideNav: "",
     scanResult: "",
     baseUrl: localStorage.getItem("baseUrl"),
     parseAppId: localStorage.getItem("parseAppId"),
     loading: false,
-    thirdpartyLoader: false,
-    orgModal: false,
-    ReqOtp: ""
+    thirdpartyLoader: false
   });
-
+  const [userDetails, setUserDetails] = useState({
+    Company: "",
+    Destination: ""
+  });
+  const [isModal, setIsModal] = useState(false);
   const image = props?.appInfo?.applogo || undefined;
 
   useEffect(() => {
@@ -94,7 +95,6 @@ function Login(props) {
               } else {
                 localStorage.setItem("profileImg", "");
               }
-
               // Check extended class user role and tenentId
               try {
                 let userRoles = [];
@@ -114,44 +114,36 @@ function Login(props) {
                   };
                   await axios
                     .post(url, JSON.stringify(body), { headers: headers })
-                    .then((roles) => {
+                    .then((axiosRes) => {
+                      const roles = axiosRes.data.result;
                       if (roles) {
-                        userRoles = roles.data.result;
+                        userRoles = roles;
                         let _currentRole = "";
+                        const valuesToExclude = [
+                          "contracts_Guest",
+                          `${localStorage.getItem("_appName")}_appeditor`
+                        ];
                         if (userRoles.length > 1) {
-                          if (
-                            userRoles[0] ===
-                            `${localStorage.getItem("_appName")}_appeditor`
-                          ) {
-                            _currentRole = userRoles[1];
-                          } else {
-                            const rolesfiltered = userRoles.filter(
-                              (x) => x !== "contracts_Guest"
-                            );
-                            if (rolesfiltered.length > 0) {
-                              _currentRole = rolesfiltered[0];
-                            } else {
-                              setThirdpartyLoader(false);
-                              setState({
-                                ...state,
-                                loading: false,
-                                toastColor: "#d9534f",
-                                toastDescription: `Does not have permissions to access this application.`
-                              });
-                              const x = document.getElementById("snackbar");
-                              x.className = "show";
-                              setTimeout(function () {
-                                x.className = x.className.replace("show", "");
-                              }, 2000);
-                            }
-                            // _currentRole = userRoles[0];
-                          }
+                          const rolesfiltered = userRoles.filter(
+                            (x) => !valuesToExclude.includes(x)
+                          );
+                          if (rolesfiltered.length > 0) {
+                            _currentRole = rolesfiltered[0];
+                          } 
                         } else {
-                          _currentRole = userRoles[0];
+                          const rolesfiltered = userRoles.filter(
+                            (x) => !valuesToExclude.includes(x)
+                          );
+                          if (rolesfiltered.length > 0) {
+                            _currentRole = userRoles[0];
+                          } else {
+                            _currentRole = "";
+                          }
                         }
                         if (
+                          _currentRole &&
                           _currentRole !==
-                          `${localStorage.getItem("_appName")}_appeditor`
+                            `${localStorage.getItem("_appName")}_appeditor`
                         ) {
                           userSettings.forEach(async (element) => {
                             if (element.role === _currentRole) {
@@ -178,7 +170,6 @@ function Login(props) {
                               query.include("TenantId");
                               await query.find().then(
                                 (results) => {
-                                  // console.log("results ", results);
                                   let tenentInfo = [];
                                   if (results) {
                                     let extendedInfo_stringify =
@@ -339,25 +330,27 @@ function Login(props) {
                                   }
                                 },
                                 (error) => {
-                                  /*   alert(
-                                  "You dont have access to this application."
-                                ); */
-                                  setState({
-                                    ...state,
-                                    loading: false,
-                                    toastColor: "#d9534f",
-                                    toastDescription:
-                                      "You dont have access to this application."
-                                  });
-                                  const x = document.getElementById("snackbar");
-                                  x.className = "show";
-                                  setTimeout(function () {
-                                    x.className = x.className.replace(
-                                      "show",
-                                      ""
-                                    );
-                                  }, 2000);
-                                  localStorage.setItem("accesstoken", null);
+                                  const payload = {
+                                    sessionToken: user.getSessionToken()
+                                  };
+                                  handleSubmitbtn(payload);
+                                  // setState({
+                                  //   ...state,
+                                  //   loading: false,
+                                  //   toastColor: "#d9534f",
+                                  //   toastDescription:
+                                  //     "You dont have access to this application."
+                                  // });
+
+                                  // const x = document.getElementById("snackbar");
+                                  // x.className = "show";
+                                  // setTimeout(function () {
+                                  //   x.className = x.className.replace(
+                                  //     "show",
+                                  //     ""
+                                  //   );
+                                  // }, 2000);
+                                  // localStorage.setItem("accesstoken", null);
                                   console.error(
                                     "Error while fetching Follow",
                                     error
@@ -367,45 +360,18 @@ function Login(props) {
                             }
                           });
                         } else {
-                          setState({
-                            ...state,
-                            loading: false,
-                            toastColor: "#d9534f",
-                            toastDescription: "User Role Not Found."
-                          });
-                          const x = document.getElementById("snackbar");
-                          x.className = "show";
-                          setTimeout(function () {
-                            x.className = x.className.replace("show", "");
-                          }, 2000);
+                          setState({ ...state, loading: false });
+                          setIsModal(true);
                         }
                       } else {
-                        setState({
-                          ...state,
-                          loading: false,
-                          toastColor: "#d9534f",
-                          toastDescription: "User Role Not Found."
-                        });
-                        const x = document.getElementById("snackbar");
-                        x.className = "show";
-                        setTimeout(function () {
-                          x.className = x.className.replace("show", "");
-                        }, 2000);
+                        setState({ ...state, loading: false });
+                        setIsModal(true);
                       }
                     })
                     .catch((err) => {
                       console.log("err", err);
-                      setState({
-                        ...state,
-                        loading: false,
-                        toastColor: "#d9534f",
-                        toastDescription: `Does not have permissions to access this application.`
-                      });
-                      const x = document.getElementById("snackbar");
-                      x.className = "show";
-                      setTimeout(function () {
-                        x.className = x.className.replace("show", "");
-                      }, 2000);
+                      setState({ ...state, loading: false });
+                      setIsModal(true);
                     });
                 }
               } catch (error) {
@@ -460,7 +426,6 @@ function Login(props) {
     await Parse.User.become(sessionToken).then(() => {
       window.localStorage.setItem("accesstoken", sessionToken);
     });
-    // console.log("me res ", res);
     if (res.data) {
       let _user = res.data;
       localStorage.setItem("UserInformation", JSON.stringify(_user));
@@ -492,25 +457,36 @@ function Login(props) {
           };
           await axios
             .post(url, JSON.stringify(body), { headers: headers })
-            .then((roles) => {
+            .then((axiosRes) => {
+              const roles = axiosRes.data.result;
               if (roles) {
-                userRoles = roles.data.result;
+                userRoles = roles;
                 let _currentRole = "";
+                const valuesToExclude = [
+                  "contracts_Guest",
+                  `${localStorage.getItem("_appName")}_appeditor`
+                ];
                 if (userRoles.length > 1) {
-                  if (
-                    userRoles[0] ===
-                    `${localStorage.getItem("_appName")}_appeditor`
-                  ) {
-                    _currentRole = userRoles[1];
-                  } else {
-                    _currentRole = userRoles[0];
-                  }
+                  const rolesfiltered = userRoles.filter(
+                    (x) => !valuesToExclude.includes(x)
+                  );
+                  if (rolesfiltered.length > 0) {
+                    _currentRole = rolesfiltered[0];
+                  } 
                 } else {
-                  _currentRole = userRoles[0];
+                  const rolesfiltered = userRoles.filter(
+                    (x) => !valuesToExclude.includes(x)
+                  );
+                  if (rolesfiltered.length > 0) {
+                    _currentRole = userRoles[0];
+                  } else {
+                    _currentRole = "";
+                  }
                 }
                 if (
+                  _currentRole &&
                   _currentRole !==
-                  `${localStorage.getItem("_appName")}_appeditor`
+                    `${localStorage.getItem("_appName")}_appeditor`
                 ) {
                   userSettings.forEach(async (element) => {
                     if (element.role === _currentRole) {
@@ -581,7 +557,7 @@ function Login(props) {
                               );
                               setThirdpartyLoader(false);
                               setState({ ...state, loading: false });
-                              navigate(`/`);
+                              navigate("/");
                             } else {
                               extendedInfo.forEach((x) => {
                                 if (x.TenantId) {
@@ -619,6 +595,7 @@ function Login(props) {
                               );
                               setThirdpartyLoader(false);
                               setState({ ...state, loading: false });
+                              if (process.env.REACT_APP_ENABLE_SUBSCRIPTION) {
                               if (billingDate) {
                                 if (billingDate > new Date()) {
                                   localStorage.removeItem("userDetails");
@@ -632,6 +609,7 @@ function Login(props) {
                                 navigate(`/subscription`);
                               }
                             }
+                          }
                           } else {
                             localStorage.setItem("PageLanding", element.pageId);
                             localStorage.setItem(
@@ -641,6 +619,7 @@ function Login(props) {
                             localStorage.setItem("pageType", element.pageType);
                             setState({ ...state, loading: false });
                             setThirdpartyLoader(false);
+                            if (process.env.REACT_APP_ENABLE_SUBSCRIPTION) {
                             if (billingDate) {
                               if (billingDate > new Date()) {
                                 localStorage.removeItem("userDetails");
@@ -654,27 +633,16 @@ function Login(props) {
                               navigate(`/subscription`);
                             }
                           }
-                        },
+                        }
+                      },
                         (error) => {
-                          /*   alert(
-                          "You dont have access to this application."
-                        ); */
+                          const payload = {
+                            sessionToken: sessionToken
+                          };
                           setThirdpartyLoader(false);
+                          handleSubmitbtn(payload);
 
-                          setState({
-                            ...state,
-                            loading: false,
-                            toastColor: "#d9534f",
-                            toastDescription:
-                              "You dont have access to this application."
-                          });
-
-                          const x = document.getElementById("snackbar");
-                          x.className = "show";
-                          setTimeout(function () {
-                            x.className = x.className.replace("show", "");
-                          }, 2000);
-                          localStorage.setItem("accesstoken", null);
+                          // localStorage.setItem("accesstoken", null);
                           console.error("Error while fetching Follow", error);
                         }
                       );
@@ -682,47 +650,18 @@ function Login(props) {
                   });
                 } else {
                   setThirdpartyLoader(false);
-                  setState({
-                    ...state,
-                    loading: false,
-                    toastColor: "#d9534f",
-                    toastDescription: "User Role Not Found."
-                  });
-
-                  const x = document.getElementById("snackbar");
-                  x.className = "show";
-                  setTimeout(function () {
-                    x.className = x.className.replace("show", "");
-                  }, 2000);
+                  setState({ ...state, loading: false });
                 }
               } else {
                 setThirdpartyLoader(false);
-                setState({
-                  ...state,
-                  loading: false,
-                  toastColor: "#d9534f",
-                  toastDescription: "User Role Not Found."
-                });
-                const x = document.getElementById("snackbar");
-                x.className = "show";
-                setTimeout(function () {
-                  x.className = x.className.replace("show", "");
-                }, 2000);
+                setState({ ...state, loading: false });
+               
               }
             })
-            .catch(() => {
+            .catch((err) => {
+              console.log("err", err);
               setThirdpartyLoader(false);
-              setState({
-                ...state,
-                loading: false,
-                toastColor: "#d9534f",
-                toastDescription: `Does not have permissions to access this application.`
-              });
-              const x = document.getElementById("snackbar");
-              x.className = "show";
-              setTimeout(function () {
-                x.className = x.className.replace("show", "");
-              }, 2000);
+              setState({ ...state, loading: false });
             });
         }
       } catch (error) {
@@ -744,7 +683,7 @@ function Login(props) {
   };
 
   const GetLoginData = async () => {
-    setState({ ...state, loading: true })
+    setState({ ...state, loading: true });
     try {
       Parse.serverURL = localStorage.getItem("baseUrl");
       Parse.initialize(localStorage.getItem("parseAppId"));
@@ -920,6 +859,80 @@ function Login(props) {
     setState({ ...state, passwordVisible: !state.passwordVisible });
   };
 
+  const handleSubmitbtn = async (e) => {
+    e.preventDefault();
+    if (userDetails.Destination && userDetails.Company) {
+      setThirdpartyLoader(true);
+      // console.log("handelSubmit", userDetails);
+      // const payload = await Parse.User.logIn(state.email, state.password);
+      const payload = { sessionToken: localStorage.getItem("accesstoken") };
+      const userInformation = JSON.parse(
+        localStorage.getItem("UserInformation")
+      );
+      // console.log("payload ", payload);
+      if (payload && payload.sessionToken) {
+        const params = {
+          userDetails: {
+            name: userInformation.name,
+            email: userInformation.email,
+            phone: userInformation.phone,
+            role: "contracts_User",
+            company: userDetails.Company,
+            jobTitle: userDetails.Destination
+          }
+        };
+        const userSignUp = await Parse.Cloud.run("usersignup", params);
+        // console.log("userSignUp ", userSignUp);
+        if (userSignUp && userSignUp.sessionToken) {
+          const LocalUserDetails = {
+            name: userInformation.name,
+            email: userInformation.email,
+            phone: userInformation.phone,
+            company: userDetails.Company,
+            jobTitle: userDetails.JobTitle
+          };
+          localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
+          thirdpartyLoginfn(userSignUp.sessionToken);
+        } else {
+          alert(userSignUp.message);
+        }
+      } else if (
+        payload &&
+        payload.message.replace(/ /g, "_") === "Internal_server_err"
+      ) {
+        alert("Internal server error !");
+      }
+    } else {
+      alert("Please fill required details!");
+    }
+  };
+
+  const handleCloseModal = () => {
+    setIsModal(false);
+    Parse.User.logOut();
+
+    let appdata = localStorage.getItem("userSettings");
+    let applogo = localStorage.getItem("appLogo");
+    let appName = localStorage.getItem("appName");
+    let defaultmenuid = localStorage.getItem("defaultmenuid");
+    let PageLanding = localStorage.getItem("PageLanding");
+    let domain = localStorage.getItem("domain");
+    let _appName = localStorage.getItem("_appName");
+    let baseUrl = localStorage.getItem("BaseUrl12");
+    let appid = localStorage.getItem("AppID12");
+
+    localStorage.clear();
+
+    localStorage.setItem("appLogo", applogo);
+    localStorage.setItem("appName", appName);
+    localStorage.setItem("_appName", _appName);
+    localStorage.setItem("defaultmenuid", defaultmenuid);
+    localStorage.setItem("PageLanding", PageLanding);
+    localStorage.setItem("domain", domain);
+    localStorage.setItem("userSettings", appdata);
+    localStorage.setItem("BaseUrl12", baseUrl);
+    localStorage.setItem("AppID12", appid);
+  };
   return (
     <div className="bg-white">
       <Title title={"Login Page"} />
@@ -944,7 +957,7 @@ function Login(props) {
               color: "#3ac9d6",
               top: "50%",
               left: "50%",
-              transform: 'translate(-50%, -50%)'
+              transform: "translate(-50%, -50%)"
             }}
             className="loader-37"
           >
@@ -953,132 +966,145 @@ function Login(props) {
         </div>
       )}
       {props.isloginVisible && props.isloginVisible ? (
-        <div aria-labelledby="loginHeading" role="region">
-          <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
-            <div className="w-[250px] h-[66px] inline-block">
-              {state.hideNav ? (
-                <img src={image} width="100%" alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." />
-              ) : (
-                <img src={image} width="100%" alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." />
-              )}
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-              <div>
+        <>
+          <div aria-labelledby="loginHeading" role="region">
+            <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-4 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
+              <div className="w-[250px] h-[66px] inline-block">
+                <img
+                  src={image}
+                  width="100%"
+                  alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
+                />
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
                 <div>
-                  <form onSubmit={handleSubmit} aria-label="Login Form">
-                    <h1 className="text-[30px] mt-6">Welcome Back!</h1>
-                    <fieldset className="outline outline-1 outline-slate-300/50 my-4">
-                      <legend className="text-xs font-bold px-6 mt-4">Login to your account</legend>
-                      <div className="px-6 py-4">
-                        <label className="block text-xs" htmlFor="email">Username</label>
-                        <input
-                          id="email"
-                          type="text"
-                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
-                          name="email"
-                          value={state.email}
-                          onChange={handleChange}
-                          required
-                        />
-                        <hr className="my-2 border-none" />
-                        <label className="block text-xs" htmlFor="password">Password</label>
-                        <div className="relative">
+                  <div>
+                    <form onSubmit={handleSubmit} aria-label="Login Form">
+                      <h1 className="text-[30px] mt-6">Welcome Back!</h1>
+                      <fieldset>
+                        <legend className="text-[12px] text-[#878787]">
+                          Login to your account
+                        </legend>
+                        <div className="px-6 py-4 outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
+                          <label className="block text-xs" htmlFor="email">
+                            Username
+                          </label>
                           <input
-                            id="password"
-                            type={state.passwordVisible ? "text" : "password"}
+                            id="email"
+                            type="text"
                             className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
-                            name="password"
-                            value={state.password}
+                            name="email"
+                            value={state.email}
                             onChange={handleChange}
                             required
                           />
-                          <span
-                            className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${state.passwordVisible
-                              ? "text-[#007bff]"
-                              : "text-black"
+                          <hr className="my-2 border-none" />
+                          <label className="block text-xs" htmlFor="password">
+                            Password
+                          </label>
+                          <div className="relative">
+                            <input
+                              id="password"
+                              type={state.passwordVisible ? "text" : "password"}
+                              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
+                              name="password"
+                              value={state.password}
+                              onChange={handleChange}
+                              required
+                            />
+                            <span
+                              className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
+                                state.passwordVisible
+                                  ? "text-[#007bff]"
+                                  : "text-black"
                               }`}
-                            onClick={togglePasswordVisibility}
+                              onClick={togglePasswordVisibility}
+                            >
+                              {state.passwordVisible ? (
+                                <i className="fa fa-eye-slash text-xs pb-1" /> // Close eye icon
+                              ) : (
+                                <i className="fa fa-eye text-xs pb-1 " /> // Open eye icon
+                              )}
+                            </span>
+                          </div>
+                        </div>
+                      </fieldset>
+                      <div className="flex flex-row justify-between items-center ml-4 py-2">
+                        <div>
+                          <label
+                            className="form-check-label inline-block cursor-pointer"
+                            htmlFor="rememberpassword"
                           >
-                            {state.passwordVisible ? (
-                              <i className="fa fa-eye-slash text-xs pb-1" /> // Close eye icon
-                            ) : (
-                              <i className="fa fa-eye text-xs pb-1 " /> // Open eye icon
-                            )}
-                          </span>
+                            <input
+                              type="checkbox"
+                              className="form-check-input mr-1"
+                              value=""
+                              id="rememberpassword"
+                            />
+                            <span className="text-[13px]">
+                              Remember Password
+                            </span>
+                          </label>
+                        </div>
+                        <div>
+                          <NavLink
+                            to="/forgetpassword"
+                            className="text-[13px] underline focus:outline-none focus:ring-2 focus:ring-blue-600"
+                          >
+                            Forgot Password ?
+                          </NavLink>
                         </div>
                       </div>
-                    </fieldset>
-                    <div className="flex flex-row justify-between items-center px-4 py-2">
-                      <div>
-                        <label className="form-check-label inline-block cursor-pointer" htmlFor="rememberpassword">
-                          <input
-                            type="checkbox"
-                            className="form-check-input mr-2"
-                            value=""
-                            id="rememberpassword"
-                          />
-                          <span className="text-[13px] pl-1">Remember Password</span>
-                        </label>
-                      </div>
-                      <div>
-                        <NavLink
-                          to="/forgetpassword"
-                          className="text-[13px] underline focus:outline-none focus:ring-2 focus:ring-blue-600"
+                      <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
+                        <button
+                          type="submit"
+                          className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600"
+                          disabled={state.loading}
                         >
-                          Forgot Password?
+                          {state.loading ? "Loading..." : "Login"}
+                        </button>
+                        <NavLink
+                          className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
+                          to="/signup"
+                          style={state.hideNav ? { textAlign: "center" } : {}}
+                        >
+                          Create Account
                         </NavLink>
                       </div>
-                    </div>
-                    <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
-                      <button
-                        type="submit"
-                        className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600"
-                        disabled={state.loading}
+                    </form>
+                    <br />
+                    {(props.appInfo.fbAppId || props.appInfo.googleClietId) && (
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        }}
+                        className="text-sm"
                       >
-                        {state.loading ? "Loading..." : "Login"}
-                      </button>
-                      <NavLink
-                        className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
-                        to="/signup"
-                        style={state.hideNav ? { textAlign: "center" } : {}}
-                      >
-                        Create Account
-                      </NavLink>
-                    </div>
-                  </form>
-                  <br />
-                  {(props.appInfo.fbAppId || props.appInfo.googleClietId) && (
+                        <hr
+                          className={"border-[1px] border-gray-300 w-full"}
+                          style={{ color: "grey" }}
+                        />
+                        <span style={{ color: "grey" }} className="px-2 ">
+                          OR
+                        </span>
+                        <hr
+                          className={"border-[1px] border-gray-300 w-full"}
+                          style={{ color: "grey" }}
+                        />
+                      </div>
+                    )}
+                    <br />
                     <div
                       style={{
+                        textAlign: "center",
                         display: "flex",
                         alignItems: "center",
                         justifyContent: "center"
                       }}
-                      className="text-sm"
                     >
-                      <hr
-                        className={"border-[1px] border-gray-300 w-full"}
-                        style={{ color: "grey" }}
-                      />
-                      <span style={{ color: "grey" }} className="px-2 ">
-                        OR
-                      </span>
-                      <hr
-                        className={"border-[1px] border-gray-300 w-full"}
-                        style={{ color: "grey" }}
-                      />
-                    </div>
-                  )}
-                  <br />
-                  <div
-                    style={{
-                      textAlign: "center",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {/* {props.appInfo.fbAppId && props.appInfo.fbAppId !== "" ? (
+                      {/* {props.appInfo.fbAppId && props.appInfo.fbAppId !== "" ? (
                       <LoginFacebook
                         FBCred={props.appInfo.fbAppId}
                         thirdpartyLoginfn={thirdpartyLoginfn}
@@ -1086,46 +1112,142 @@ function Login(props) {
                         setThirdpartyLoader={setThirdpartyLoader}
                       />
                     ) : null} */}
-                  </div>
-                  <div style={{ margin: "10px 0" }}></div>
-                  <div
-                    style={{
-                      textAlign: "center",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {props.appInfo.googleClietId &&
+                    </div>
+                    <div style={{ margin: "10px 0" }}></div>
+                    <div
+                      style={{
+                        textAlign: "center",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {props.appInfo.googleClietId &&
                       props.appInfo.googleClietId !== "" ? (
-                      <GoogleSignInBtn
-                        GoogleCred={props.appInfo.googleClietId}
-                        thirdpartyLoginfn={thirdpartyLoginfn}
-                        thirdpartyLoader={state.thirdpartyLoader}
-                        setThirdpartyLoader={setThirdpartyLoader}
+                        <GoogleSignInBtn
+                          GoogleCred={props.appInfo.googleClietId}
+                          thirdpartyLoginfn={thirdpartyLoginfn}
+                          thirdpartyLoader={state.thirdpartyLoader}
+                          setThirdpartyLoader={setThirdpartyLoader}
+                        />
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+                {!state.hideNav && (
+                  <div className="self-center">
+                    <div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
+                      <img
+                        src={login_img}
+                        alt="The image illustrates a person from behind, seated at a desk with a four-monitor computer setup, in an environment with a light blue and white color scheme, featuring a potted plant to the right."
+                        width="100%"
                       />
-                    ) : null}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div
+              id="snackbar"
+              role="alert"
+              style={{ backgroundColor: state.toastColor }}
+            >
+              {state.toastDescription}
+            </div>
+          </div>
+          {isModal && (
+            <div
+              className="modal fade show"
+              id="exampleModal"
+              tabIndex="-1"
+              role="dialog"
+              style={{
+                display: "block",
+                zIndex: 1,
+                backgroundColor: "rgba(0,0,0,0.5)"
+              }}
+            >
+              <div className="modal-dialog" role="document">
+                <div className="modal-content">
+                  <div className="modal-header">
+                    <h5 className="modal-title">Login form</h5>
+                    <span>
+                      <span></span>
+                    </span>
+                  </div>
+                  <div className="modal-body">
+                    <form className="text-sm">
+                      <div className="form-group">
+                        <label
+                          htmlFor="Company"
+                          style={{ display: "flex" }}
+                          className="col-form-label"
+                        >
+                          Company{" "}
+                          <span style={{ fontSize: 13, color: "red" }}>*</span>
+                        </label>
+                        <input
+                          type="text"
+                          className="form-control"
+                          id="Company"
+                          value={userDetails.Company}
+                          onChange={(e) =>
+                            setUserDetails({
+                              ...userDetails,
+                              Company: e.target.value
+                            })
+                          }
+                          required
+                        />
+                      </div>
+                      <div className="form-group">
+                        <label
+                          htmlFor="Destination"
+                          style={{ display: "flex" }}
+                          className="col-form-label"
+                        >
+                          Destination{" "}
+                          <span style={{ fontSize: 13, color: "red" }}>*</span>
+                        </label>
+                        <input
+                          type="text"
+                          className="form-control"
+                          id="Destination"
+                          value={userDetails.Destination}
+                          onChange={(e) =>
+                            setUserDetails({
+                              ...userDetails,
+                              Destination: e.target.value
+                            })
+                          }
+                          required
+                        />
+                      </div>
+                      <div className="mt-4">
+                        <button
+                          type="button"
+                          className="bg-[#6c757d] text-sm p-2 text-white rounded uppercase"
+                          onClick={handleCloseModal}
+                          style={{ marginRight: 10, width: 90 }}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          type="button"
+                          className="bg-[#17a2b8] text-sm p-2 text-white rounded uppercase"
+                          onClick={(e) => handleSubmitbtn(e)}
+                        >
+                          Login
+                        </button>
+                      </div>
+                    </form>
                   </div>
                 </div>
               </div>
-              {!state.hideNav && (
-                <div className="self-center">
-                  <div className="mx-auto md:w-[300px] lg:w-[500px]">
-                    <img src={login_img} alt="The image illustrates a person from behind, seated at a desk with a four-monitor computer setup, in an environment with a light blue and white color scheme, featuring a potted plant to the right." width="100%" />
-                  </div>
-                </div>
-              )}
             </div>
-          </div>
-
-          <div
-            id="snackbar"
-            role="alert"
-            style={{ backgroundColor: state.toastColor }}
-          >
-            {state.toastDescription}
-          </div>
-        </div>
+          )}
+        </>
       ) : (
         <div
           style={{
@@ -1140,7 +1262,6 @@ function Login(props) {
       )}
     </div>
   );
-  // }
 }
 
 const mapStateToProps = (state) => {

apps/OpenSign/src/routes/Signup.js

@@ -99,9 +99,38 @@ const Signup = (props) => {
             }
           }
         })
-        .catch((err) => {
-          alert(err.message);
-          setState({ loading: false });
+        .catch(async (err) => {
+          if (err.code === 202) {
+            const userQuery = new Parse.Query("contracts_Users");
+            userQuery.equalTo("Email", email);
+            const res = await userQuery.first();
+            // console.log("Res ", res);
+            if (res) {
+              alert("User already exists with this username!");
+              setState({ loading: false });
+            } else {
+              let baseUrl = localStorage.getItem("BaseUrl12");
+              let parseAppId = localStorage.getItem("AppID12");
+              // console.log("state.email ", email);
+              try {
+                Parse.serverURL = baseUrl;
+                Parse.initialize(parseAppId);
+                await Parse.User.requestPasswordReset(email).then(
+                  async function (res1) {
+                    if (res1.data === undefined) {
+                      alert("Email has been sent to your mail!");
+                    }
+                  }
+                );
+              } catch (err) {
+                console.log(err);
+              }
+              setState({ loading: false });
+            }
+          } else {
+            alert(err.message);
+            setState({ loading: false });
+          }
         });
     } catch (error) {
       console.log("err ", error);
@@ -453,7 +482,7 @@ const Signup = (props) => {
               <div className="">
                 <form onSubmit={handleSubmit}>
                   <h2 className="text-[30px] mt-6">Create Account !</h2>
-                  <div className="shadow-md rounded my-4">
+                  <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4">
                     <div className="px-6 py-4 text-xs">
                       <label className="block ">
                         Name{" "}
@@ -472,6 +501,7 @@ const Signup = (props) => {
                         <span style={{ color: "red", fontSize: 13 }}>*</span>
                       </label>
                       <input
+                        id="email"
                         type="text"
                         className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                         value={email}
@@ -563,7 +593,7 @@ const Signup = (props) => {
               </div>
               {!state.hideNav && (
                 <div className="self-center">
-                  <div className="mx-auto md:w-[300px] lg:w-[500px]">
+                  <div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
                     <img src={login_img} alt="bisec" width="100%" />
                   </div>
                 </div>

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

apps/OpenSignServer/cloud/parsefunction/usersignup.js

@@ -123,6 +123,9 @@ export default async function (request) {
       if (userDetails && userDetails.company) {
         newObj.set("Company", userDetails.company);
       }
+      if (userDetails && userDetails.jobTitle) {
+        newObj.set("JobTitle", userDetails.jobTitle);
+      }
       if (planDetails && planDetails.customer_id) {
         newObj.set("Next_billing_date", new Date(planDetails.nextBillingDate));
         newObj.set("Plan", planDetails.plan);

cert/local-dev_base64_pfx

@@ -0,0 +1,55 @@
+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
+c6yryFgECIld0S5kDk7JAgIIAA==

cert/local_dev.crt

@@ -0,0 +1,21 @@
+-----BEGIN CERTIFICATE-----
+MIIDXTCCAkWgAwIBAgIUdpdDPiNqilWn26oMvcpT9qmMtoswDQYJKoZIhvcNAQEL
+BQAwPjELMAkGA1UEBhMCSU4xCzAJBgNVBAgMAk5JMQowCAYDVQQHDAFOMQowCAYD
+VQQKDAFTMQowCAYDVQQLDAFTMB4XDTIzMTEwNTEzMDg1OFoXDTI0MTEwNDEzMDg1
+OFowPjELMAkGA1UEBhMCSU4xCzAJBgNVBAgMAk5JMQowCAYDVQQHDAFOMQowCAYD
+VQQKDAFTMQowCAYDVQQLDAFTMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC
+AQEAzT30t7Adb6XdXWywzC4RF03r3piTt5MF4MZClvorsl8bySNKrYkl7i5+igpz
+36SfLp090Dal0cUZ7it9QCxaxrWv3m8OFAwfwK5ePuzUryF6/QJcoF560Sq4k3Pb
+640PJ5UlFwvUqsXQN8A/pAA6S96MqpwCrPQE0u5OcRQuVIsZxBL2s17lv5eROjX+
+Ufx/6qtmuZscn9xKDP6GNO8aa6X0YZMoVXlll14iEn4bg0yagiY7QhvVCzK8q7nB
+9yKCLvw/28eSoD08yJnHnUZnIOoNrn+cZKTkl8VcyKW55IeOiUilb5h3a07JD6bj
+Q/VroPQE5UtveajB9CBa3eUCiwIDAQABo1MwUTAdBgNVHQ4EFgQUIQGrIwhvSNkG
+L3ATZra96d4cDE4wHwYDVR0jBBgwFoAUIQGrIwhvSNkGL3ATZra96d4cDE4wDwYD
+VR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEAp2mCfhRf6Jft6lSgL4hi
+I8xHfqcUjG+XnDM1Pi7gKVxxclwVQ67vVtfO0rU1SBPWUO3nIaaLN9Wyzcx+LXPV
+4e3pyHlq2T6Z6ENuozOsMhHeY9+ows6wPBcxq57KLLHnBpx3lJiKHKOp0ueiAbkz
+LaI+Mm+VQo0MbzhCw7KXs8VPFt8YO+S3XircVMWaa007VgGY/NjYF62hlG35fD/v
+CTHccRj5Y3coQ2MjosTUQTd4u3N5VhgxdRbyMdpjpwDxu0u9BE7ISXKMBhnBLV/w
++/mxoF2bqExBuPiZS8vT6yW9rehdi/KR9c26GUreTsKLtjXyveeP6VLoTJ60T3D9
+Jg==
+-----END CERTIFICATE-----

cert/local_dev.key

@@ -0,0 +1,30 @@
+-----BEGIN ENCRYPTED PRIVATE KEY-----
+MIIFHDBOBgkqhkiG9w0BBQ0wQTApBgkqhkiG9w0BBQwwHAQIJvntFBuTIWACAggA
+MAwGCCqGSIb3DQIJBQAwFAYIKoZIhvcNAwcECEE+1CDDu5XvBIIEyEwR/61HhjJ0
+P6oGr1E+uDTKVcUqK++fbsrhqxYq+oEoj+w5C1KOgUxQYQTm2he6PhfGkPh56V9w
+OaArJ+QrGrSFRUdTtLZG+qBbfyWKQyah9VxwYhmG9Ptf6RyQXDJnup4WtgJWI2sw
+fAcJ6QqPQkSFUq/0cn0s/RLNCy6P8qKfUjdVugEv0K9dsc7dFNWZQEQlpyKeZdbY
+rJfKjf85qSmDpFfRnP1B0n//vzlPWK03fNH2be4EnBTFW7l1sDnju6iwasLSP7P+
+EuGq8Bw9YGlf3I/STWGgfxWWLZACCjgVDiRjLakstkodLqC1tZAWawOKcDQGPyKG
+nRrF/yF4H0ChmcMBA9Ur4zxBd4uayWujwqIPehfWU+ODYYaVDluSVrxiTaSHGAP2
+XnT6vrOnR5sg/uzgsbuApHTbHCW+lplof/R0swvwyt15fKaD8HsngNMN6R75e0ar
+6+ltI/BLgcSbu0f7Fe8qMumBNrJiU5j09EdvDKaIEe3+Ko2HWCV/zLgxvL8BwGyB
+K9RSMw1YzivO/CahWE3cQcS4GQSX84+y8VXF43CxpmTRf3Hmdpj4JBGB0fOvGHzA
+hv+st5E+hhSOOv2ZZ00XtEaUi3d2uQFYApxEoXubz2QG481M7ulNXaVd74DZf/Fr
+J+R7BmCa633rEw34sXFKUcfdfVOzUfMnMGvO5danSrov6k/cFfLPH56ORb9Ep30a
+U1fXHP+pcFQohR/kjAk5gjDUr8pjkOJ0/JHv106rptT4SNCznvJa8BvWtP9wDXDv
+UZDA/UCLlnl20mJUjLtb0iM5vtqhi7XOxDoS8AauOimSEh+M0uLEZ7HOQvtGchLl
+tDLd/DVew/WzPBhL4eNTmhwwno9JL21nPBEaFAa58djoiZXgzUdLQbBDbo/7nsRA
+UJ9imt0HmhDU+xrimnMZJD051KcbohHjPvTnTb4qvd0Rt7u/dpL9NT07rQlVIe3u
+qGl4sEe+1vEueRdHt5QCSGbxnwPPHdE9XMsK8et3M/DOYN+ToB9QmDm72lLsJNkm
+0nxdYVpfXHUiPmMorkJgb9YXfY+j0UEWuT0l4bl7a5+mzGm/Zy9FCoLaW7MTWNJd
+fyDSYsVotOhRdCBi0Osho21GldKmfX6XoqHYENVqsh7x9bgvjNwvLNgpCWXYh7/Q
+K6N3iDQ3G3A6x9nOgeKpXYREd8fx8byM6u7FAttVTtcV71QaWU3TSn7Oice1Bklg
+osIhUJydHny856D/WCD6EmnPBuukx9Tht8NKtJVS0XoXqbz69mx4xfq987HGkJJa
+nvCgkZOr/LhcVylmRjg9ZVfiUrwim4Gp42gV3JtsZpOGE1m+1twSXShtr/PQ2FdF
+jD41LOEG1OGdZ5XIDLxAI4085jwVD/WIRo/AZELENog1XKtjeXSqJ/H7njauB30w
+MeNv0VRTIItVA0eXRDwoqjpqyGSdn9YF2SQ/qDR6WU+Y2bVD38m6ZJlsy/zHx9uc
+sH1DK7hbbRRSuZ9Sx/TjD19DWJ4qNPTpUZTd0+dxsG/HGQKpkbpXI5f3aQ6nTWWM
+MjlWF6mUI06iLIRhLyNwBrtEjJHL1k8fIOvO/MUKtj72VBGt/fnoutS0WifZLvfn
+mFXB4iaMX0hGcgzpK4iNcg==
+-----END ENCRYPTED PRIVATE KEY-----

microfrontends/SignDocuments/src/Component/PdfRequestFiles.js

@@ -11,15 +11,13 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { useParams } from "react-router-dom";
 import SignPad from "./component/signPad";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
-import {
-  getBase64FromIMG,
-  getBase64FromUrl
-} from "../utils/Utils";
+import { getBase64FromIMG, getBase64FromUrl } from "../utils/Utils";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
 import Nodata from "./component/Nodata";
 import Header from "./component/header";
 import RenderPdf from "./component/renderPdf";
+import CustomModal from "./component/CustomModal";
 
 function PdfRequestFiles() {
   const { docId } = useParams();
@@ -64,7 +62,8 @@ function PdfRequestFiles() {
   const [isSigned, setIsSigned] = useState(false);
   const [isExpired, setIsExpired] = useState(false);
   const [alreadySign, setAlreadySign] = useState(false);
-
+  const [containerWH, setContainerWH] = useState({});
+  const divRef = useRef(null);
   const rowLevel =
     localStorage.getItem("rowlevel") &&
     JSON.parse(localStorage.getItem("rowlevel"));
@@ -96,6 +95,14 @@ function PdfRequestFiles() {
       getDocumentDetails();
     }
   }, []);
+  useEffect(() => {
+    if (divRef.current) {
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
+    }
+  }, [divRef.current]);
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
@@ -191,7 +198,7 @@ function PdfRequestFiles() {
               //comparison auditTrail user details with signers user details
               for (let i = 0; i < signerRes.length; i++) {
                 const signerId = signerRes[i].objectId;
-               
+
                 let isSigned = false;
                 for (let j = 0; j < checkDocIdExist.length; j++) {
                   const signedExist =
@@ -912,6 +919,7 @@ function PdfRequestFiles() {
 
   //function for set decline true on press decline button
   const declineDoc = async () => {
+    setIsDecline({ isDeclined: false });
     const data = {
       IsDeclined: true
     };
@@ -983,7 +991,39 @@ function PdfRequestFiles() {
             </div>
           )}
 
-          <div className="signatureContainer">
+          <div className="signatureContainer" ref={divRef}>
+            {/* this modal is used to show decline alert */}
+            <CustomModal
+              containerWH={containerWH}
+              show={isDecline.isDeclined}
+              headMsg="Document Declined Alert!"
+              bodyMssg={
+                isDecline.currnt === "Sure" ? (
+                  <p className="pTagBody">
+                    Are you sure want to decline this document ?
+                  </p>
+                ) : isDecline.currnt === "YouDeclined" ? (
+                  <p className="pTagBody">You have declined this document!</p>
+                ) : (
+                  isDecline.currnt === "another" && (
+                    <p className="pTagBody">
+                      You cannot sign this document as it has been declined by
+                      one or more person(s).
+                    </p>
+                  )
+                )
+              }
+              footerMessage={isDecline.currnt === "Sure"}
+              declineDoc={declineDoc}
+              setIsDecline={setIsDecline}
+            />
+            {/* this modal is used for show expired alert */}
+            <CustomModal
+              containerWH={containerWH}
+              show={isExpired}
+              headMsg="Document Expired!"
+              bodyMssg="This Document is no longer available."
+            />
             {/* this component used to render all pdf pages in left side */}
             <RenderAllPdfPage
               signPdfUrl={pdfDetails[0].URL}
@@ -999,66 +1039,6 @@ function PdfRequestFiles() {
                 marginRight: pdfOriginalWidth > 500 && "20px"
               }}
             >
-              <Modal show={isExpired}>
-                <ModalHeader className="bg-danger">
-                  <span className="spanTagHead">Document Expired!</span>
-                </ModalHeader>
-
-                <Modal.Body>
-                  <p className="pTagBody">
-                    This Document is no longer available.
-                  </p>
-                </Modal.Body>
-              </Modal>
-              {/* this modal is used for show decline alert */}
-              <Modal show={isDecline.isDeclined}>
-                <ModalHeader className="bg-danger">
-                  <span className="spanTagHead">Document Declined Alert!</span>
-                </ModalHeader>
-
-                <Modal.Body>
-                  {isDecline.currnt === "Sure" ? (
-                    <p className="pTagBody">
-                      Are you sure want to decline this document ?
-                    </p>
-                  ) : isDecline.currnt === "YouDeclined" ? (
-                    <p className="pTagBody">You have declined this document!</p>
-                  ) : (
-                    isDecline.currnt === "another" && (
-                      <p className="pTagBody">
-                        You cannot sign this document as it has been declined by
-                        one or more person(s).
-                      </p>
-                    )
-                  )}
-                </Modal.Body>
-                <Modal.Footer>
-                  {isDecline.currnt === "Sure" && (
-                    <>
-                      <button
-                        style={{
-                          color: "black"
-                        }}
-                        type="button"
-                        className="finishBtn"
-                        onClick={() => setIsDecline({ isDeclined: false })}
-                      >
-                        Close
-                      </button>
-                      <button
-                        style={{
-                          background: "#de4337"
-                        }}
-                        type="button"
-                        className="finishBtn"
-                        onClick={() => declineDoc()}
-                      >
-                        Yes
-                      </button>
-                    </>
-                  )}
-                </Modal.Footer>
-              </Modal>
               {/* this modal is used show this document is already sign */}
 
               <Modal show={isCompleted.isModal}>

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

@@ -0,0 +1,59 @@
+import React from "react";
+import "../../css/customModal.css";
+import "../../css/signature.css";
+
+function CustomModal({
+  show,
+  headMsg,
+  bodyMssg,
+  footerMessage,
+  declineDoc,
+  setIsDecline,
+  containerWH
+}) {
+  const isMobile = window.innerWidth < 767;
+  return (
+    show && (
+      <div
+        className="parentDiv"
+        style={{
+          width: containerWH && containerWH.width,
+          height: isMobile ? "100%" : containerWH && containerWH.height
+        }}
+      >
+        <div className="childDiv">
+          <div className="modalHeadDiv bg-danger">{headMsg && headMsg}</div>
+          <div className="modalBodyDIv">
+            <p className="pTagBody">{bodyMssg && bodyMssg}</p>
+          </div>
+          {footerMessage && (
+            <div className="modalFooterDiv">
+              <button
+                style={{
+                  color: "black"
+                }}
+                type="button"
+                className="finishBtn"
+                onClick={() => setIsDecline({ isDeclined: false })}
+              >
+                Close
+              </button>
+              <button
+                style={{
+                  background: "#de4337"
+                }}
+                type="button"
+                className="finishBtn"
+                onClick={() => declineDoc()}
+              >
+                Yes
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  );
+}
+
+export default CustomModal;

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

@@ -1,5 +1,5 @@
-import React, { useEffect } from "react";
-import axios from "axios";
+import React from "react";
+ 
 
 function DefaultSignature({
   themeColor,

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

@@ -26,7 +26,7 @@ function EmailComponent({
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
-    let sendMail, recipent;
+    let sendMail;
     for (let i = 0; i < emailCount.length; i++) {
        
       try {

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);
@@ -81,14 +81,16 @@ function Header({
 
   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

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

@@ -23,8 +23,8 @@ import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
 import Nodata from "./component/Nodata";
 import Header from "./component/header";
-import ModalComponent from "./component/modalComponent";
 import RenderPdf from "./component/renderPdf";
+import CustomModal from "./component/CustomModal";
 function EmbedPdfImage() {
   const { id, contactBookId } = useParams();
   const [isSignPad, setIsSignPad] = useState(false);
@@ -67,13 +67,15 @@ function EmbedPdfImage() {
     status: false,
     type: "load"
   });
-
+  const [containerWH, setContainerWH] = useState({});
   const docId = id && id;
   const isMobile = window.innerWidth < 767;
   const index = xyPostion.findIndex((object) => {
     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;
@@ -82,6 +84,14 @@ function EmbedPdfImage() {
     setPdfNewWidth(pdfWidth);
     getDocumentDetails();
   }, []);
+  useEffect(() => {
+    if (divRef.current) {
+      setContainerWH({
+        width: divRef.current.offsetWidth,
+        height: divRef.current.offsetHeight
+      });
+    }
+  }, [divRef.current]);
 
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async () => {
@@ -952,7 +962,37 @@ function EmbedPdfImage() {
       ) : noData ? (
         <Nodata />
       ) : (
-        <div className="signatureContainer">
+        <div className="signatureContainer" ref={divRef}>
+          {/* this modal is used to show decline alert */}
+          <CustomModal
+            containerWH={containerWH}
+            show={isDecline.isDeclined}
+            headMsg="Document Declined Alert!"
+            bodyMssg={
+              isDecline.currnt === "Sure" ? (
+                <p>Are you sure want to decline this document ?</p>
+              ) : isDecline.currnt === "YouDeclined" ? (
+                <p>You have declined this document!</p>
+              ) : (
+                isDecline.currnt === "another" && (
+                  <p>
+                    You cannot sign this document as it has been declined by one
+                    or more person(s).
+                  </p>
+                )
+              )
+            }
+            footerMessage={isDecline.currnt === "Sure"}
+            declineDoc={declineDoc}
+            setIsDecline={setIsDecline}
+          />
+          {/* this modal is used for show expired alert */}
+          <CustomModal
+            containerWH={containerWH}
+            show={isExpired}
+            headMsg="Document Expired!"
+            bodyMssg="This Document is no longer available."
+          />
           {/* this component used for UI interaction and show their functionality */}
           {pdfLoadFail.status &&
             !isExpired &&
@@ -971,61 +1011,10 @@ 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 for show decline alert */}
-            <Modal show={isDecline.isDeclined}>
-              <ModalHeader className="bg-danger" style={{ color: "white" }}>
-                Document Declined Alert!
-              </ModalHeader>
-
-              <Modal.Body>
-                {isDecline.currnt === "Sure" ? (
-                  <p>Are you sure want to decline this document ?</p>
-                ) : isDecline.currnt === "YouDeclined" ? (
-                  <p>You have declined this document!</p>
-                ) : (
-                  isDecline.currnt === "another" && (
-                    <p>
-                      You cannot sign this document as it has been declined by
-                      one or more person(s).
-                    </p>
-                  )
-                )}
-              </Modal.Body>
-              <Modal.Footer>
-                {isDecline.currnt === "Sure" && (
-                  <>
-                    <button
-                      style={{
-                        color: "black"
-                      }}
-                      type="button"
-                      className="finishBtn"
-                      onClick={() => setIsDecline({ isDeclined: false })}
-                    >
-                      Close
-                    </button>
-                    <button
-                      style={{
-                        background: "#de4337"
-                      }}
-                      type="button"
-                      className="finishBtn"
-                      onClick={() => declineDoc()}
-                    >
-                      Yes
-                    </button>
-                  </>
-                )}
-              </Modal.Footer>
-            </Modal>
-
-            {/* this modal component is used for show expired document */}
-            <ModalComponent isShow={isExpired} type={"expire"} />
-
             {/* this modal is used show this document is already sign */}
             <Modal show={isAlreadySign.status}>
               <ModalHeader style={{ background: themeColor() }}>
@@ -1138,9 +1127,9 @@ function EmbedPdfImage() {
           )}
         </div>
       )}
-      {/* ndD5gdaxqw */}
+   
     </DndProvider>
   );
 }
 
-export default EmbedPdfImage;
+export default EmbedPdfImage;

microfrontends/SignDocuments/src/css/customModal.css

@@ -0,0 +1,59 @@
+.parentDiv {
+    background: gray;
+    position: absolute;
+    z-index: 20;
+    background-color: rgba(0, 0, 0, 0.75);
+    display: flex;
+    flex-direction: column;
+     align-items: center;
+}
+
+.childDiv {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    background-color: #fff;
+    margin: 30px 20px;
+    border: 0px 1px 1px 1px solid rgba(0, 0, 0, .2);
+    border-radius: 0.3rem;
+    outline: 0;
+}
+
+.modalHeadDiv {
+    padding: 10px;
+    color: #fff;
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+    font-size: 17px;
+    font-weight: 500;
+}
+
+.modalBodyDIv {
+    padding: 20px;
+}
+
+.spanTagHead {
+    color: white !important;
+    font-size: 17px;
+    font-weight: 500;
+}
+
+.pTagBody {
+
+    font-size: 15px !important;
+}
+
+.modalFooterDiv {
+    margin: 10px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+@media screen and (max-width:500px) {
+    .childDiv {
+        margin: 50px 7px;
+        width: 90%;
+    }
+}

microfrontends/SignDocuments/src/utils/Utils.js

@@ -57,37 +57,41 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
     (data, ind) =>
       data.key === signKey && data.Width && data.Height && data.SignUrl
   );
+   
 
   if (updateFilter.length > 0) {
-    let newWidth, nweHeight;
+    let newWidth, newHeight;
     const aspectRatio = imgWH.width / imgWH.height;
+
     const getXYdata = xyPostion[index].pos;
-   
+
     if (aspectRatio === 1) {
       newWidth = aspectRatio * 100;
-      nweHeight = aspectRatio * 100;
+      newHeight = aspectRatio * 100;
     } else if (aspectRatio < 2) {
       newWidth = aspectRatio * 100;
-      nweHeight = 100;
+      newHeight = 100;
     } else if (aspectRatio > 2 && aspectRatio < 4) {
       newWidth = aspectRatio * 70;
-      nweHeight = 70;
+      newHeight = 70;
     } else if (aspectRatio > 4) {
       newWidth = aspectRatio * 40;
-      nweHeight = 40;
+      newHeight = 40;
     } else if (aspectRatio > 5) {
       newWidth = aspectRatio * 10;
-      nweHeight = 10;
+      newHeight = 10;
     }
-   
-    let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
-    
+
+    let getPosData = xyPostion[index].pos.filter(
+      (data) => data.key === signKey
+    );
+
     const addSign = getXYdata.map((url, ind) => {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : 150,
-          Height: getPosData[0].Height ? getPosData[0].Height : 60,
+          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
+          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
           SignUrl: image.src,
           ImageType: image.imgType
         };
@@ -106,7 +110,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
   } else {
     const getXYdata = xyPostion[index].pos;
 
-    let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey);
+    let getPosData = xyPostion[index].pos.filter(
+      (data) => data.key === signKey
+    );
     const aspectRatio = imgWH.width / imgWH.height;
 
     let newWidth, newHeight;
@@ -131,9 +137,9 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) {
       if (url.key === signKey) {
         return {
           ...url,
-          Width: getPosData[0].Width ? getPosData[0].Width : 150,
-          Height: getPosData[0].Height ? getPosData[0].Height : 60,
-          SignUrl: image.src,
+          Width: getPosData[0].Width ? getPosData[0].Width : newWidth,
+          Height: getPosData[0].Height ? getPosData[0].Height : newHeight,
+         SignUrl: image.src,
           ImageType: image.imgType
         };
       }