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..8e62b9ce7 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +apps/OpenSign/public/mfbuild/* +microfrontends/SignDocuments/build/* \ No newline at end of file diff --git a/INSTALLATION.md b/INSTALLATION.md index e10a73caa..6cebe94b8 100644 --- a/INSTALLATION.md +++ b/INSTALLATION.md @@ -88,5 +88,60 @@ You can install all 3 components on digital ocean using the button below - ## Localhost(Docker) +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 + Below are the steps to follow - -- Execute `make build` \ No newline at end of file +- Execute `make build` 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/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/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 8c8416a43..abebeb5db 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -74,8 +74,10 @@ function RenderPdf({ return width; } }; - //function for render placeholder block over pdf document + //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 @@ -268,7 +270,7 @@ function RenderPdf({ <div style={{ border: "0.1px solid #ebe8e8", - marginTop:"30px" + marginTop: isGuestSigner && "30px" }} ref={drop} id="container" 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 8d35da7fc..d34dcf963 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -74,7 +74,8 @@ function EmbedPdfImage() { return object.pageNumber === pageNumber; }); const divRef = useRef(null); - + //check isGuestSigner is present in local if yes than handle login flow header in mobile view + const isGuestSigner = localStorage.getItem("isGuestSigner"); useEffect(() => { const clientWidth = window.innerWidth; const pdfWidth = clientWidth - 160 - 220 - 30; @@ -1010,8 +1011,8 @@ function EmbedPdfImage() { {/* pdf render view */} <div style={{ - marginLeft: pdfOriginalWidth > 500 && "20px", - marginRight: pdfOriginalWidth > 500 && "20px" + marginLeft: !isGuestSigner && pdfOriginalWidth > 500 && "20px", + marginRight: !isGuestSigner && pdfOriginalWidth > 500 && "20px" }} > {/* this modal is used show this document is already sign */} @@ -1126,9 +1127,9 @@ function EmbedPdfImage() { )} </div> )} - {/* ndD5gdaxqw */} + </DndProvider> ); } -export default EmbedPdfImage; +export default EmbedPdfImage; \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 078253191..866fcad6c 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -1,778 +1,779 @@ - .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; - +.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; } - @media screen and (max-width:766px) { - .showPages { - display: none; +.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; + } + + .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; +} + .stickySignerHead{ + position: fixed; } - - .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; - } + 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; - } + /* 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; + .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; - } + .headerBtn { + display: none; + } - .headerBtn2 { - display: flex; - flex-direction: column; - justify-content: space-between; + .headerBtn2 { + display: flex; + flex-direction: column; + justify-content: space-between; - margin-top: 5px; - } + margin-top: 5px; + } - .mobileHead { - display: flex; - } - } + .mobileHead { + display: flex; + } +} - @media screen and (max-width:487px) and (min-width:351px) { - .signatureCanvas { +@media screen and (max-width:487px) and (min-width:351px) { + .signatureCanvas { - width: 300px; - height: 120px; - } + width: 300px; + height: 120px; + } - .penContainer { - width: 300px; - } + .penContainer { + width: 300px; + } - .uploadImgLogo { - font-size: 30px; - } + .uploadImgLogo { + font-size: 30px; + } - .hidePdf { - display: none; - } + .hidePdf { + display: none; + } - .mobileHead { - display: flex; - } + .mobileHead { + display: flex; + } - } +} - @media screen and (max-width:350px) and (min-width:311px) { - .signatureCanvas { +@media screen and (max-width:350px) and (min-width:311px) { + .signatureCanvas { - width: 280px; - height: 112px; - } + width: 280px; + height: 112px; + } - .penContainer { - width: 280px; - } + .penContainer { + width: 280px; + } - .hidePdf { - display: none; - } + .hidePdf { + display: none; + } - .signTab { + .signTab { - font-weight: 500 !important; + font-weight: 500 !important; - font-size: 10px !important; - } + font-size: 10px !important; + } - .uploadImgLogo { - font-size: 25px; - } + .uploadImgLogo { + font-size: 25px; + } - .uploadImg { + .uploadImg { - font-size: 10px !important; - } + font-size: 10px !important; + } - .mobileHead { - display: flex; - } - } + .mobileHead { + display: flex; + } +} - @media screen and (max-width:310px) { - .signatureCanvas { +@media screen and (max-width:310px) { + .signatureCanvas { - width: 230px; - height: 92px; - } + width: 230px; + height: 92px; + } - .penContainer { - width: 230px; - } + .penContainer { + width: 230px; + } - .hidePdf { - display: none; - } + .hidePdf { + display: none; + } - .signTab { + .signTab { - font-weight: 500 !important; + font-weight: 500 !important; - font-size: 10px !important; - } + font-size: 10px !important; + } - .uploadImgLogo { - font-size: 20px; - } + .uploadImgLogo { + font-size: 20px; + } - .uploadImg { + .uploadImg { - font-size: 10px !important; - } + font-size: 10px !important; + } - .mobileHead { - display: flex; - } - } \ No newline at end of file + .mobileHead { + display: flex; + } +} \ No newline at end of file