From c240eb133d4f298bde71c0dfb9c1099826dcb4f6 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Sun, 5 May 2024 15:53:51 +0530 Subject: [PATCH] fix: add verify email otp verification in signyour-self flow --- .../src/components/pdf/VerifyEmail.js | 84 +++++++++ apps/OpenSign/src/pages/PdfRequestFiles.js | 93 ++-------- apps/OpenSign/src/pages/PlaceHolderSign.js | 164 ++---------------- apps/OpenSign/src/pages/SignyourselfPdf.js | 68 +++++++- 4 files changed, 180 insertions(+), 229 deletions(-) create mode 100644 apps/OpenSign/src/components/pdf/VerifyEmail.js diff --git a/apps/OpenSign/src/components/pdf/VerifyEmail.js b/apps/OpenSign/src/components/pdf/VerifyEmail.js new file mode 100644 index 000000000..1387efb42 --- /dev/null +++ b/apps/OpenSign/src/components/pdf/VerifyEmail.js @@ -0,0 +1,84 @@ +import React from "react"; +import { rejectBtn, submitBtn, themeColor } from "../../constant/const"; + +function VerifyEmail(props) { + return ( +
+
+
+ OTP verification +
+ {props.isVerifyModal ? ( +
{ + props.setIsVerifyModal(false); + props.handleVerifyEmail(e); + }} + > +
+ + props.setOtp(e.target.value)} + /> +
+
+
+ + +
+
+ ) : props.otpLoader ? ( +
+
+
+ ) : ( +
+

Please verify your email !

+
+
+ +
+
+ )} +
+
+ ); +} + +export default VerifyEmail; diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index eae720d62..36c8c477f 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -1,10 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import { - isEnableSubscription, - rejectBtn, - submitBtn, - themeColor -} from "../constant/const"; +import { isEnableSubscription, themeColor } from "../constant/const"; import { PDFDocument } from "pdf-lib"; import "../styles/signature.css"; import Parse from "parse"; @@ -42,6 +37,7 @@ import PdfDeclineModal from "../primitives/PdfDeclineModal"; import Title from "../components/Title"; import DefaultSignature from "../components/pdf/DefaultSignature"; import ModalUi from "../primitives/ModalUi"; +import VerifyEmail from "../components/pdf/VerifyEmail"; function PdfRequestFiles() { const { docId } = useParams(); @@ -1243,81 +1239,16 @@ function PdfRequestFiles() { bodyMssg={`This document expired on ${expiredDate} and is no longer available to sign.`} /> {!isEmailVerified && ( -
-
-
- OTP verification -
- {isVerifyModal ? ( -
{ - setIsVerifyModal(false); - handleVerifyEmail(e); - }} - > -
- - setOtp(e.target.value)} - /> -
-
-
- - -
-
- ) : otpLoader ? ( -
-
-
- ) : ( -
-

Please verify your email !

-
-
- -
-
- )} -
-
+ )} { - setIsVerifyModal(true); - await handleSendOTP(Parse.User.current().getEmail()); - }; - const handleReset = async (e) => { - e.preventDefault(); - setOtpLoader(true); - await handleSendOTP(Parse.User.current().getEmail()); - setOtpLoader(false); - alert("OTP sent on you email"); - }; - const handleVerifyEmail = async (e) => { - e.preventDefault(); - setOtpLoader(true); - try { - const resEmail = await Parse.Cloud.run("verifyemail", { - otp: otp, - email: Parse.User.current().getEmail() - }); - if (resEmail?.message === "Email is verified.") { - setIsEmailVerified(true); - } else if (resEmail?.message === "Email is already verified.") { - setIsEmailVerified(true); - } - setOtp(""); - alert(resEmail.message); - setIsVerifyModal(false); - handleRecipientSign(); - } catch (error) { - alert(error.message); - } finally { - setOtpLoader(false); - } - }; - const handleCloseVerifyModal = async () => { - setIsVerifyModal(false); - }; //function for get document details const getDocumentDetails = async () => { fetchTenantDetails(); - - const jsonSender = JSON.parse( - localStorage.getItem( - `Parse/${localStorage.getItem("parseAppId")}/currentUser` - ) - ); - // const isEmailVerified = Parse.User.current()?.attributes?.emailVerified; - const userQuery = new Parse.Query(Parse.User); - const user = await userQuery.get(jsonSender.objectId, { - sessionToken: localStorage.getItem("accesstoken") - }); - if (user) { - const isEmailVerified = user?.get("emailVerified"); - setIsEmailVerified(isEmailVerified); - } - //getting document details const documentData = await contractDocument(documentId); if (documentData && documentData.length > 0) { @@ -1901,36 +1838,21 @@ function PlaceHolderSign() { marginBottom: "15px" }} > - {isCurrUser && - (isEmailVerified ? ( - - ) : ( - - ))} + {isCurrUser && ( + + )} - - - - )} - - )} ); diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 2b276d776..54ad8373f 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -1,6 +1,7 @@ import React, { useState, useRef, useEffect } from "react"; import { PDFDocument } from "pdf-lib"; import "../styles/signature.css"; +import Parse from "parse"; import { isEnableSubscription, themeColor } from "../constant/const"; import axios from "axios"; import Loader from "../primitives/LoaderWithMsg"; @@ -31,7 +32,8 @@ import { checkIsSubscribed, convertPdfArrayBuffer, fetchImageBase64, - changeImageWH + changeImageWH, + handleSendOTP } from "../constant/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -44,6 +46,7 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn"; import Title from "../components/Title"; import ModalUi from "../primitives/ModalUi"; import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption"; +import VerifyEmail from "../components/pdf/VerifyEmail"; //For signYourself inProgress section signer can add sign and complete doc sign. function SignYourSelf() { @@ -91,6 +94,7 @@ function SignYourSelf() { const [containerWH, setContainerWH] = useState({}); const [isPageCopy, setIsPageCopy] = useState(false); const [selectWidgetId, setSelectWidgetId] = useState(""); + const [otpLoader, setOtpLoader] = useState(false); const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({ status: false }); @@ -107,6 +111,9 @@ function SignYourSelf() { const [isCompleted, setIsCompleted] = useState(false); const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const [activeMailAdapter, setActiveMailAdapter] = useState(""); + const [isEmailVerified, setIsEmailVerified] = useState(true); + const [isVerifyModal, setIsVerifyModal] = useState(false); + const [otp, setOtp] = useState(""); const divRef = useRef(null); const nodeRef = useRef(null); const [, drop] = useDrop({ @@ -226,6 +233,17 @@ function SignYourSelf() { setSignBtnPosition([]); } } + + if (!isCompleted) { + const userQuery = new Parse.Query(Parse.User); + const user = await userQuery.get(jsonSender.objectId, { + sessionToken: localStorage.getItem("accesstoken") + }); + if (user) { + const isEmailVerified = user?.get("emailVerified"); + setIsEmailVerified(isEmailVerified); + } + } } else if ( documentData === "Error: Something went wrong!" || (documentData.result && documentData.result.error) @@ -533,6 +551,42 @@ function SignYourSelf() { setSelectWidgetId(key); setSignKey(key); }; + + const handleReset = async (e) => { + e.preventDefault(); + setOtpLoader(true); + await handleSendOTP(Parse.User.current().getEmail()); + setOtpLoader(false); + alert("OTP sent on you email"); + }; + const handleVerifyEmail = async (e) => { + e.preventDefault(); + setOtpLoader(true); + try { + const resEmail = await Parse.Cloud.run("verifyemail", { + otp: otp, + email: Parse.User.current().getEmail() + }); + if (resEmail?.message === "Email is verified.") { + setIsEmailVerified(true); + } else if (resEmail?.message === "Email is already verified.") { + setIsEmailVerified(true); + } + setOtp(""); + alert(resEmail.message); + setIsVerifyModal(false); + // handleRecipientSign(); + } catch (error) { + alert(error.message); + } finally { + setOtpLoader(false); + } + }; + + const handleVerifyBtn = async () => { + setIsVerifyModal(true); + await handleSendOTP(Parse.User.current().getEmail()); + }; //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url async function embedWidgetsData() { let showAlert = false; @@ -1037,6 +1091,18 @@ function SignYourSelf() { )}
+ {!isEmailVerified && ( + + )} {/* this component used for UI interaction and show their functionality */} {pdfLoadFail && !checkTourStatus && (