diff --git a/.env.local_dev b/.env.local_dev index 6059c326e..cf19e847c 100644 --- a/.env.local_dev +++ b/.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= \ No newline at end of file diff --git a/.gitignore b/.gitignore index cc964cb27..b6dcebdf3 100644 --- a/.gitignore +++ b/.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/* \ No newline at end of file diff --git a/INSTALLATION.md b/INSTALLATION.md index e10a73caa..86a9fb8e6 100644 --- a/INSTALLATION.md +++ b/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` \ No newline at end of file +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` \ No newline at end of file diff --git a/Makefile b/Makefile index 35fa55901..bf7f219d3 100644 --- a/Makefile +++ b/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 \ No newline at end of file diff --git a/apps/OpenSign/Dockerfile b/apps/OpenSign/Dockerfile index 7d8542bf6..57c815846 100644 --- a/apps/OpenSign/Dockerfile +++ b/apps/OpenSign/Dockerfile @@ -21,5 +21,5 @@ EXPOSE 3000 # ENV NODE_ENV production # Run the application -CMD ["npm", "start"] +ENTRYPOINT npm run start-dev diff --git a/apps/OpenSign/public/mfbuild/.gitkeep b/apps/OpenSign/public/mfbuild/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/OpenSign/src/components/LoginGoogle.js b/apps/OpenSign/src/components/LoginGoogle.js index e1db3abb4..5fbf3309c 100644 --- a/apps/OpenSign/src/components/LoginGoogle.js +++ b/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 (
{thirdpartyLoader && ( @@ -259,16 +285,16 @@ const GoogleSignInBtn = ({
diff --git a/apps/OpenSign/src/components/ReportMicroapp.js b/apps/OpenSign/src/components/ReportMicroapp.js index 37864ca99..f995068ae 100644 --- a/apps/OpenSign/src/components/ReportMicroapp.js +++ b/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 (
- {/* */} -
- {/* */} -
- - {localStorage.getItem("domain") && ( -

- {localStorage.getItem("domain") === "contracts" ? "Document" : ""} -

- )} -
- {/* */} -
- -
-
- } - > -
- {RemoteComponent && } -
- -
+ {RemoteComponent && } +
+
); diff --git a/apps/OpenSign/src/routes/Login.js b/apps/OpenSign/src/routes/Login.js index ba0d74133..9ca1a2eb0 100644 --- a/apps/OpenSign/src/routes/Login.js +++ b/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 (
@@ -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) => { diff --git a/apps/OpenSign/src/routes/Signup.js b/apps/OpenSign/src/routes/Signup.js index 6378e6785..1f52261b6 100644 --- a/apps/OpenSign/src/routes/Signup.js +++ b/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> diff --git a/apps/OpenSignServer/cloud/customRoute/uploadFile.js b/apps/OpenSignServer/cloud/customRoute/uploadFile.js index 34abc14d0..b0152e1bd 100644 --- a/apps/OpenSignServer/cloud/customRoute/uploadFile.js +++ b/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); diff --git a/apps/OpenSignServer/cloud/parsefunction/usersignup.js b/apps/OpenSignServer/cloud/parsefunction/usersignup.js index 56ae80300..a976360fe 100644 --- a/apps/OpenSignServer/cloud/parsefunction/usersignup.js +++ b/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); diff --git a/cert/local-dev_base64_pfx b/cert/local-dev_base64_pfx new file mode 100644 index 000000000..85e11a24d --- /dev/null +++ b/cert/local-dev_base64_pfx @@ -0,0 +1,55 @@ +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 +c6yryFgECIld0S5kDk7JAgIIAA== diff --git a/cert/local_dev.crt b/cert/local_dev.crt new file mode 100644 index 000000000..b04e8924b --- /dev/null +++ b/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----- diff --git a/cert/local_dev.key b/cert/local_dev.key new file mode 100644 index 000000000..9b8949775 --- /dev/null +++ b/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----- diff --git a/cert/local_dev.pfx b/cert/local_dev.pfx new file mode 100644 index 000000000..fecfe5531 Binary files /dev/null and b/cert/local_dev.pfx differ diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 012f4e347..6d2d33061 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/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}> diff --git a/microfrontends/SignDocuments/src/Component/component/CustomModal.js b/microfrontends/SignDocuments/src/Component/component/CustomModal.js new file mode 100644 index 000000000..bdf5fef6e --- /dev/null +++ b/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; diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js index 782133bea..5bc7fedd9 100644 --- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js +++ b/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, diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index b9bb36752..5892c8ef5 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/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 { diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js index 8ab8d6994..94f7fa68f 100644 --- a/microfrontends/SignDocuments/src/Component/component/header.js +++ b/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 diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 1bef2efbf..abebeb5db 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/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; \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/Component/login.js b/microfrontends/SignDocuments/src/Component/login.js index 1636beff7..8050485c3 100644 --- a/microfrontends/SignDocuments/src/Component/login.js +++ b/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> diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 39db3656b..93be3b571 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/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 */} diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index a60627218..d34dcf963 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/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; \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/customModal.css b/microfrontends/SignDocuments/src/css/customModal.css new file mode 100644 index 000000000..5687ed9b0 --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index d3e16258a..866fcad6c 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -1,791 +1,779 @@ - /* html, body {margin: 0; height: 100%; overflow: hidden} */ - /* #04b565 */ - /* div { - margin: 0px; - font-family:system-ui; - } */ - .signatureCanvas { - border: 2px solid #888; - background-color: rgb(255, 255, 255); - width: 460px; - height: 184px; - } - - .penContainer { - width: 460px; - } - - .signatureBtn { - border: 1.5px solid #47a3ad; - margin-bottom: 10px; - border-radius: 3px; - display: flex; - padding: 0px; - justify-content: space-between; - background: white; - transition-duration: 0.4s; - cursor: all-scroll; - width: 150px; - height: 30px; - color: black; - /* transform: translate(); */ - - } - - /* .signatureBtn:hover { - background-color:#47a3ad; - color: white; - } */ - - .disableSign { - border: 1.5px solid #47a3ad; - margin-bottom: 10px; - border-radius: 3px; - display: flex; - padding: 0px; - justify-content: space-between; - background: white; - transition-duration: 0.4s; - cursor: all-scroll; - width: 150px; - height: 30px; - color: black; - border: 1px solid rgb(203, 203, 203); - cursor: text; - - } - - .emailInput { - padding: 10px; - border: 1.5px solid gray; - border-radius: 4px; - width: 100%; - font-size: 15px; - padding-bottom: 20px; - } - - .emailInput:focus { - outline: none; - border: 1.5px solid #47a3ad; - } - - .addEmail { - padding: "0px"; - border: 1.5px solid #47a3ad; - border-radius: 4px; - width: 100%; - font-size: 15px; - - } - - .addEmail, - .emailInput { - - outline: none; - } - - .addEmailInput { - border: none; - outline: none; - } - - .emailChip { - background-color: #47a3ad; - margin: 4px; - border-radius: 10px; - padding: 5px 10px; - } - - .addEmailInput { - padding: 10px; - - border-radius: 4px; - width: 100%; - font-size: 15px; - - - } - - .addEmailInput:focus { - outline: none; - border: none; - } - - .finishBtn { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 30px; - color: white; - font-weight: 500 !important; - font-size: 14px !important; - border: none; - margin-left: 10px; - } - - .sendMail { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 30px; - color: white; - font-weight: 500 !important; - font-size: 14px !important; - border: none; - margin-left: 10px; - /* color: rgb(77, 75, 75); */ - } - - .finishBtn:focus { - border: none; - outline: none; - } - - - .finishBtn:hover { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - color: white; - } - - .saveBtn { - padding: 3px 18px !important; - - } - - .disabledFinish { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 30px; - color: white; - font-weight: 600; - font-size: 14px; - border: none; - - margin-left: 10px; - } - - .sendHover:hover { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - color: white; - } - - .defaultSignBox { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - width: 180px; - height: 111px; - padding: 8px 20px; - color: white; - font-weight: 600; - font-size: 14px; - border: none; - border-radius: 2px; - margin-left: 10px; - } - - - .defaultBtn { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 26px; - - color: black; - font-weight: 500; - font-size: 14px; - border: 1px solid gray; - border-radius: 2px; - margin-left: 10px; - - } - - .backBtn { - background-color: white; - } - - .backBtn:hover { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - } - - .defaultBtn:focus { - border: none; - outline: none; - } - - .downloadBtn { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 15px !important; - background-color: rgb(241 79 79); - border: none !important; - color: white !important; - } - - .downloadBtn:hover { - box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - } - - .printBtn { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 15px !important; - background: #188ae2; - border: none !important; - color: white !important; - } - - .printBtn:hover { - box-shadow: 0 2px 4px rgba(23, 48, 137, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - - } - - .certificateBtn { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 15px !important; - background: #08bc66; - border: none !important; - color: white !important; - text-decoration: none !important; - } - - .certificateBtn:hover { - box-shadow: 0 2px 4px rgba(15, 150, 87, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); - - } - - - .signerList { - overflow-y: scroll; - max-height: 180px; - - } - - .signerList::-webkit-scrollbar { +.signatureCanvas { + border: 2px solid #888; + background-color: rgb(255, 255, 255); + width: 460px; + height: 184px; +} + +.penContainer { + width: 460px; +} + +.signatureBtn { + border: 1.5px solid #47a3ad; + margin-bottom: 10px; + border-radius: 3px; + display: flex; + padding: 0px; + justify-content: space-between; + background: white; + transition-duration: 0.4s; + cursor: all-scroll; + width: 150px; + height: 30px; + color: black; +} + +.disableSign { + border: 1.5px solid #47a3ad; + margin-bottom: 10px; + border-radius: 3px; + display: flex; + padding: 0px; + justify-content: space-between; + background: white; + transition-duration: 0.4s; + cursor: all-scroll; + width: 150px; + height: 30px; + color: black; + border: 1px solid rgb(203, 203, 203); + cursor: text; +} + +.emailInput { + padding: 10px; + border: 1.5px solid gray; + border-radius: 4px; + width: 100%; + font-size: 15px; + padding-bottom: 20px; +} + +.emailInput:focus { + outline: none; + border: 1.5px solid #47a3ad; +} + +.addEmail { + padding: "0px"; + border: 1.5px solid #47a3ad; + border-radius: 4px; + width: 100%; + font-size: 15px; +} + +.addEmail, +.emailInput { + outline: none; +} + +.addEmailInput { + border: none; + outline: none; +} + +.emailChip { + background-color: #47a3ad; + margin: 4px; + border-radius: 10px; + padding: 5px 10px; +} + +.addEmailInput { + padding: 10px; + border-radius: 4px; + width: 100%; + font-size: 15px; +} + +.addEmailInput:focus { + outline: none; + border: none; +} + +.signatureInput { + padding: 10px; + width: 80%; + border-radius: 4px; + font-size: 0.75rem; + border: 1px solid #e2dddd; + color: black; + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-weight: inherit; + overflow: visible; +} + +.signatureInput:focus { + outline: none; +} + +.finishBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 500 !important; + font-size: 14px !important; + border: none; + margin-left: 10px; +} + +.sendMail { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 500 !important; + font-size: 14px !important; + border: none; + margin-left: 10px; +} + +.finishBtn:focus { + border: none; + outline: none; +} + +.finishBtn:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + color: white; +} + +.saveBtn { + padding: 3px 18px !important; +} + +.disabledFinish { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 30px; + color: white; + font-weight: 600; + font-size: 14px; + border: none; + margin-left: 10px; +} + +.sendHover:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + color: white; +} + +.defaultSignBox { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + width: 180px; + height: 111px; + padding: 8px 20px; + color: white; + font-weight: 600; + font-size: 14px; + border: none; + border-radius: 2px; + margin-left: 10px; +} + +.defaultBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 26px; + color: black; + font-weight: 500; + font-size: 14px; + border: 1px solid gray; + border-radius: 2px; + margin-left: 10px; +} + +.backBtn { + background-color: white; +} + +.backBtn:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); +} + +.defaultBtn:focus { + border: none; + outline: none; +} + +.downloadBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 15px !important; + background-color: rgb(241 79 79); + border: none !important; + color: white !important; +} + +.downloadBtn:hover { + box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); +} + +.printBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 15px !important; + background: #188ae2; + border: none !important; + color: white !important; +} + +.printBtn:hover { + box-shadow: 0 2px 4px rgba(23, 48, 137, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); +} + +.certificateBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 15px !important; + background: #08bc66; + border: none !important; + color: white !important; + text-decoration: none !important; +} + +.certificateBtn:hover { + box-shadow: 0 2px 4px rgba(15, 150, 87, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); +} + +.signerList { + overflow-y: scroll; + max-height: 180px; +} + +.signerList::-webkit-scrollbar { + display: none; +} + +.showScroll { + height: 100%; + overflow: scroll; + +} + +.showScroll::-webkit-scrollbar { + display: none; +} + +.hideScroll { + height: 100%; + overflow: scroll; +} + +.signedStyle { + color: white; + padding: 5px; + font-family: sans-serif; + font-size: 15px !important; +} + +.userName { + font-size: 12px !important; + font-weight: bold !important; + color: #424242 !important; + width: 100px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; +} + +.useEmail { + font-size: 10px; + color: #424242; + font-weight: 500; + width: 100px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; +} + +.spanTagHead { + color: white !important; + font-size: 17px; + font-weight: 500; +} + +.pTagBody { + + font-size: 15px !important; +} + +.signTab { + cursor: pointer !important; + font-weight: 400 !important; + margin-left: 10px !important; + font-size: 15px !important; +} + +.draggable-button { + padding: 10px 20px; + background: #3498db; + color: #fff; + border: none; + cursor: grab; + transition: transform 0.2s; +} + +.draggable-button.dragging { + opacity: 0.5; + /* Reduce opacity while dragging */ + transform: scale(1.1); + /* Apply a scaling effect while dragging */ +} + +.signatureContainer { + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: #ebebeb; + position: "relative" +} + +.signatureHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 5px; +} + +.signerComponent { + /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */ + width: 180px; + background-color: white; + height: 100%; +} + +.modalBody { + padding: 1rem !important; + padding-top: 2rem !important; +} + +.signLayoutContainer1 { + padding: 30px; + display: flex; + flex-direction: column; + align-items: center +} + +.signLayoutContainer2 { + display: none; +} + +.preBtn1 { + display: flex; + align-items: center; +} + +.preBtn2 { + display: none; +} + +.headerBtn2 { + display: none; +} + +.uploadImgLogo { + font-size: 50px; +} + + + +.DropdownMenuContent, +.DropdownMenuSubContent { + min-width: 130px; + background-color: #887abf; + border: none; + padding: 5px; + + animation-duration: 400ms; + animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); + will-change: transform, opacity; + z-index: 30 !important; +} + +.DropdownMenuContent[data-side='top'], +.DropdownMenuSubContent[data-side='top'] { + animation-name: slideDownAndFade; +} + +.DropdownMenuContent[data-side='right'], +.DropdownMenuSubContent[data-side='right'] { + animation-name: slideLeftAndFade; +} + +.DropdownMenuContent[data-side='bottom'], +.DropdownMenuSubContent[data-side='bottom'] { + animation-name: slideUpAndFade; +} + +.DropdownMenuContent[data-side='left'], +.DropdownMenuSubContent[data-side='left'] { + animation-name: slideRightAndFade; +} + +.DropdownMenuItem { + font-size: 13px; + line-height: 1; + color: black; + background-color: #887abf; + display: flex; + align-items: center; + height: 25px; + padding: 0 5px; + position: relative; + padding-left: 25px; + user-select: none; + outline: none; + border: none; +} + +.SelectTrigger { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 70px; + font-size: 13px; + line-height: 1; + height: 35px; + gap: 5px; + border: none; + background-color: #887abf; + + width: 100px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; +} + +.selectEmail { + + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 15px; + font-size: 13px; + line-height: 1; + height: 35px; + gap: 5px; + border: none; + background-color: #887abf; + + width: 200px; + white-space: nowrap; + overflow: hidden !important; + text-overflow: ellipsis; +} + +option { + overflow-y: scroll; +} + +.SelectTrigger:hover { + border: none; + outline: none; +} + +.selectEmail:hover { + border: none; + outline: none; +} + + +.SelectTrigger:focus { + /* box-shadow: 0 0 0 2px black; */ + border: none; + outline: none; +} + +.selectEmail:focus { + /* box-shadow: 0 0 0 2px black; */ + border: none; + outline: none; +} + +.SelectTrigger[data-placeholder] { + color: black; +} + +.SelectIcon { + color: Var(--violet-11); +} + +.SelectContent { + overflow: hidden; + background-color: white; + border-radius: 6px; + box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); +} + +.SelectViewport { + padding: 5px; +} + +.SelectItem { + font-size: 13px; + line-height: 1; + color: var(--violet-11); + border-radius: 3px; + display: flex; + align-items: center; + height: 25px; + padding: 0 35px 0 25px; + position: relative; + user-select: none; + z-index: 10 !important; +} + +.SelectItem[data-disabled] { + color: var(--mauve-8); + pointer-events: none; +} + +.SelectItem[data-highlighted] { + outline: none; + background-color: var(--violet-9); + color: var(--violet-1); +} + +.SelectLabel { + padding: 0 25px; + font-size: 12px; + line-height: 25px; + color: var(--mauve-11); +} + +.SelectSeparator { + height: 1px; + background-color: var(--violet-6); + margin: 5px; +} + +.SelectItemIndicator { + position: absolute; + left: 0; + width: 25px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.SelectScrollButton { + display: flex; + align-items: center; + justify-content: center; + height: 25px; + background-color: white; + color: var(--violet-11); + cursor: default; +} +.fontOptionContainer{ + border: 1px solid #d6d3d3; + margin: 10px 5px 5px 5px; + +} + + +@media screen and (max-width:766px) { + + .showPages { display: none; - /* for Chrome, Safari, and Opera */ } - - .showScroll { - height: 100%; - overflow: scroll; - - } - - .showScroll::-webkit-scrollbar { - display: none; - /* for Chrome, Safari, and Opera */ - } - - .hideScroll { - height: 100%; - overflow: scroll; - } - - .signedStyle { - color: white; - padding: 5px; - font-family: sans-serif; - font-size: 15px !important; - } - - .userName { - font-size: 12px !important; - font-weight: bold !important; - color: #424242 !important; - width: 100px; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; - } - - .useEmail { - font-size: 10px; - color: #424242; - font-weight: 500; - width: 100px; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; - } - - .spanTagHead { - color: white !important; - font-size: 17px; - font-weight: 500; - } - - .pTagBody { - - font-size: 15px !important; - } - - .signTab { - cursor: pointer !important; - font-weight: 400 !important; - margin-left: 10px !important; - font-size: 15px !important; - } - - .draggable-button { - padding: 10px 20px; - background: #3498db; - color: #fff; - border: none; - cursor: grab; - transition: transform 0.2s; - } - - .draggable-button.dragging { - opacity: 0.5; - /* Reduce opacity while dragging */ - transform: scale(1.1); - /* Apply a scaling effect while dragging */ - } - - + .signatureContainer { display: flex; - flex-direction: row; + flex-direction: column; + + } + + + .signerComponent { + display: none; + + } + + .preBtn1 { + display: none; + } + + .preBtn2 { + display: flex; + align-items: center; justify-content: space-between; background-color: #ebebeb; - /* max-height: 800px; */ - /* overflow: auto; */ + padding: 5px 10px; } - - .signatureHeader { + + #navbar { + overflow: hidden; + + z-index: 10; + } + + /* Navbar links */ + #navbar a { + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px; + text-decoration: none; + } + + #navbar a.active { + background-color: #4caf50; + color: white; + } + + /* Page content */ + .content { + padding: 16px; + } + + /* The sticky class is added to the navbar + with JS when it reaches its scroll position */ + .stickyHead { + position: fixed; + top: 50px; + left: 0.9rem; +} + .stickySignerHead{ + position: fixed; + } + .stickyfooter { + position: fixed; + bottom: 0px; + right: 0rem; + } + + /* Add some top padding to the page content + to prevent sudden quick movement (as the + navigation bar gets a new position at the top of the + page (position:fixed and top:0) */ + .stickyHead+.content { + padding-top: 60px; + } + + + .signLayoutContainer2 { display: flex; flex-direction: row; - justify-content: space-between; - align-items: center; + justify-content: space-around; margin-top: 5px; + padding: 2px 5px 10px 5px; + position: sticky; + align-items: center; + } - - .signerComponent { - /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */ - width: 180px; - background-color: white; - height: 100%; + + .headerBtn { + display: none; } - - .modalBody { - padding: 1rem !important; - padding-top: 2rem !important; - } - - .signLayoutContainer1 { - padding: 30px; + + .headerBtn2 { display: flex; flex-direction: column; - align-items: center + justify-content: space-between; + + margin-top: 5px; } - - .signLayoutContainer2 { - display: none; - } - - .preBtn1 { + + .mobileHead { display: flex; - align-items: center; } - - .preBtn2 { - display: none; +} + +@media screen and (max-width:487px) and (min-width:351px) { + .signatureCanvas { + + width: 300px; + height: 120px; } - - .headerBtn2 { - display: none; + + .penContainer { + width: 300px; } - + .uploadImgLogo { - font-size: 50px; + font-size: 30px; } - - - - .DropdownMenuContent, - .DropdownMenuSubContent { - min-width: 130px; - background-color: #887abf; - border: none; - padding: 5px; - - animation-duration: 400ms; - animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform, opacity; - z-index: 30 !important; + + .hidePdf { + display: none; } - - .DropdownMenuContent[data-side='top'], - .DropdownMenuSubContent[data-side='top'] { - animation-name: slideDownAndFade; - } - - .DropdownMenuContent[data-side='right'], - .DropdownMenuSubContent[data-side='right'] { - animation-name: slideLeftAndFade; - } - - .DropdownMenuContent[data-side='bottom'], - .DropdownMenuSubContent[data-side='bottom'] { - animation-name: slideUpAndFade; - } - - .DropdownMenuContent[data-side='left'], - .DropdownMenuSubContent[data-side='left'] { - animation-name: slideRightAndFade; - } - - .DropdownMenuItem { - font-size: 13px; - line-height: 1; - color: black; - background-color: #887abf; + + .mobileHead { display: flex; - align-items: center; - height: 25px; - padding: 0 5px; - position: relative; - padding-left: 25px; - user-select: none; - outline: none; - border: none; } - - .SelectTrigger { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - padding: 0 70px; - font-size: 13px; - line-height: 1; - height: 35px; - gap: 5px; - border: none; - background-color: #887abf; - - width: 100px; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; + +} + +@media screen and (max-width:350px) and (min-width:311px) { + .signatureCanvas { + + width: 280px; + height: 112px; } - - .selectEmail { - - align-items: center; - justify-content: center; - border-radius: 4px; - padding: 0 15px; - font-size: 13px; - line-height: 1; - height: 35px; - gap: 5px; - border: none; - background-color: #887abf; - - width: 200px; - white-space: nowrap; - overflow: hidden !important; - text-overflow: ellipsis; + + .penContainer { + width: 280px; } - - option { - overflow-y: scroll; + + .hidePdf { + display: none; } - - .SelectTrigger:hover { - border: none; - outline: none; + + .signTab { + + font-weight: 500 !important; + + font-size: 10px !important; } - .selectEmail:hover{ - border: none; - outline: none; - } - - - .SelectTrigger:focus { - /* box-shadow: 0 0 0 2px black; */ - border: none; - outline: none; + + .uploadImgLogo { + font-size: 25px; } - .selectEmail:focus { - /* box-shadow: 0 0 0 2px black; */ - border: none; - outline: none; - } - - .SelectTrigger[data-placeholder] { - color: black; + + .uploadImg { + + font-size: 10px !important; } - - .SelectIcon { - color: Var(--violet-11); - } - - .SelectContent { - overflow: hidden; - background-color: white; - border-radius: 6px; - box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2); - } - - .SelectViewport { - padding: 5px; - } - - .SelectItem { - font-size: 13px; - line-height: 1; - color: var(--violet-11); - border-radius: 3px; + + .mobileHead { display: flex; - align-items: center; - height: 25px; - padding: 0 35px 0 25px; - position: relative; - user-select: none; - z-index: 10 !important; } - - .SelectItem[data-disabled] { - color: var(--mauve-8); - pointer-events: none; +} + +@media screen and (max-width:310px) { + .signatureCanvas { + + width: 230px; + height: 92px; } - - .SelectItem[data-highlighted] { - outline: none; - background-color: var(--violet-9); - color: var(--violet-1); + + .penContainer { + width: 230px; } - - .SelectLabel { - padding: 0 25px; - font-size: 12px; - line-height: 25px; - color: var(--mauve-11); + + .hidePdf { + display: none; } - - .SelectSeparator { - height: 1px; - background-color: var(--violet-6); - margin: 5px; + + .signTab { + + font-weight: 500 !important; + + font-size: 10px !important; } - - .SelectItemIndicator { - position: absolute; - left: 0; - width: 25px; - display: inline-flex; - align-items: center; - justify-content: center; + + .uploadImgLogo { + font-size: 20px; } - - .SelectScrollButton { + + .uploadImg { + + font-size: 10px !important; + } + + .mobileHead { display: flex; - align-items: center; - justify-content: center; - height: 25px; - background-color: white; - color: var(--violet-11); - cursor: default; } - - - - @media screen and (max-width:766px) { - - .showPages { - display: none; - } - - .signatureContainer { - display: flex; - flex-direction: column; - - } - - - .signerComponent { - display: none; - - } - - .preBtn1 { - display: none; - } - - .preBtn2 { - display: flex; - align-items: center; - justify-content: space-between; - background-color: #ebebeb; - padding: 5px 10px; - } - - #navbar { - overflow: hidden; - - z-index: 10; - } - - /* Navbar links */ - #navbar a { - float: left; - display: block; - color: #f2f2f2; - text-align: center; - padding: 14px; - text-decoration: none; - } - - #navbar a.active { - background-color: #4caf50; - color: white; - } - - /* Page content */ - .content { - padding: 16px; - } - - /* The sticky class is added to the navbar - with JS when it reaches its scroll position */ - .stickyHead { - position: fixed; - top: 50px; - left: 0.9rem; - - } - - .stickyfooter { - position: fixed; - bottom: 0px; - right: 0rem; - } - - /* Add some top padding to the page content - to prevent sudden quick movement (as the - navigation bar gets a new position at the top of the - page (position:fixed and top:0) */ - .stickyHead+.content { - padding-top: 60px; - } - - - .signLayoutContainer2 { - display: flex; - flex-direction: row; - justify-content: space-around; - margin-top: 5px; - padding: 2px 5px 10px 5px; - position: sticky; - align-items: center; - - } - - .headerBtn { - display: none; - } - - .headerBtn2 { - display: flex; - flex-direction: column; - justify-content: space-between; - - margin-top: 5px; - } - - .mobileHead { - display: flex; - } - } - - @media screen and (max-width:487px) and (min-width:351px) { - .signatureCanvas { - - width: 300px; - height: 120px; - } - - .penContainer { - width: 300px; - } - - .uploadImgLogo { - font-size: 30px; - } - - .hidePdf { - display: none; - } - - .mobileHead { - display: flex; - } - - } - - @media screen and (max-width:350px) and (min-width:311px) { - .signatureCanvas { - - width: 280px; - height: 112px; - } - - .penContainer { - width: 280px; - } - - .hidePdf { - display: none; - } - - .signTab { - - font-weight: 500 !important; - - font-size: 10px !important; - } - - .uploadImgLogo { - font-size: 25px; - } - - .uploadImg { - - font-size: 10px !important; - } - - .mobileHead { - display: flex; - } - } - - @media screen and (max-width:310px) { - .signatureCanvas { - - width: 230px; - height: 92px; - } - - .penContainer { - width: 230px; - } - - .hidePdf { - display: none; - } - - .signTab { - - font-weight: 500 !important; - - font-size: 10px !important; - } - - .uploadImgLogo { - font-size: 20px; - } - - .uploadImg { - - font-size: 10px !important; - } - - .mobileHead { - display: flex; - } - } \ No newline at end of file +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 138b22e62..0b915423d 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/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 }; }