From e7e76fa4305b717a4a16fc04ce137fd5347c09ec Mon Sep 17 00:00:00 2001
From: Hossein <hossein13785ab@gmail.com>
Date: Sun, 8 Dec 2024 14:34:01 +0330
Subject: [PATCH] #236 feat: add button to resend activation email on login
 page

---
 .../Login/components/LoginForm/LoginForm.js   | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js b/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
index d06a9ac9..5d575f84 100644
--- a/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
+++ b/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
@@ -15,6 +15,7 @@ import {getUserConfigsInitiate, setUserInfo, setUserTokensInitiate} from "../../
 import {useGetKycStatus} from "../../../../../../queries";
 import {login, parseToken} from "js-api-client";
 import Icon from "../../../../../../components/Icon/Icon";
+import EmailVerification from "../EmailVerification/EmailVerification";
 
 const LoginForm = () => {
     const {t} = useTranslation();
@@ -22,6 +23,8 @@ const LoginForm = () => {
     const dispatch = useDispatch();
     const location = useLocation();
 
+    const verifyEmailLock = useSelector((state) => state.exchange.verifyEmailLock)
+
     const isDevelopment = window.env.REACT_APP_ENV === "development";
     const [isInputVisible, setIsInputVisible] = useState(false);
     const [isLoading, setLoading] = useState(false);
@@ -31,6 +34,10 @@ const LoginForm = () => {
     const [credential, setCredential] = useState({username: "", password: "", otp: ""});
     const {refetch: getKycStatus} = useGetKycStatus();
 
+    const [verifyEmail, setVerifyEmail] = useState(false);
+    const [showVerifyEmail, setShowVerifyEmail] = useState(false);
+    const [disable, setDisable] = useState(false);
+
     const from = location.state?.from?.pathname || "/";
 
     const agent = [deviceType, browserName, fullBrowserVersion]
@@ -38,6 +45,10 @@ const LoginForm = () => {
     const clientId = window.env.REACT_APP_CLIENT_ID
 
 
+    useEffect(() => {
+        if (verifyEmailLock && new Date().getTime() < verifyEmailLock) setDisable(true)
+    }, [verifyEmailLock]);
+
     useEffect(() => {
         setNeedOTP(undefined)
     }, [credential.username])
@@ -86,6 +97,7 @@ const LoginForm = () => {
                     return setNeedOTP(true)
                 }
                 if (err?.response?.status === 400 && err?.response?.data?.error_description === "Account is not fully set up") {
+                    setShowVerifyEmail(true)
                     return setLoginError(t("login.accountNotActive"));
                 }
                 setLoginError(t("login.loginError"));
@@ -97,6 +109,9 @@ const LoginForm = () => {
 
     if (isLoading) return <LoginFormLoading/>
 
+    if (verifyEmail) return <EmailVerification returnFunc={() => setVerifyEmail(false)} email={credential.username} disable={disable} returnFuncDisableFalse={() => setDisable(false)} returnFuncDisableTrue={() => setDisable(true)}/>
+
+
     const setOTPInputHandler = (val) => {
         setCredential({...credential, otp: val})
     }
@@ -142,11 +157,21 @@ const LoginForm = () => {
             <div className={`column ${classes.forgetPassword}`}>
                 <span className={`${classes.errorText} fs-0-8`}>{loginError}</span>
 
+
                 {needOTP ?
                     <span className="cursor-pointer flex ai-center fs-0-8"
                           onClick={returnToLogin}>{t('login.back')}</span>
                     :
-                    <div className="flex ai-center mt-2"><span className={`cursor-pointer fs-0-8 hover-text`} onClick={() => setForgetPassword(true)}>{t('login.forgetPassword')}</span></div>
+                    <div className="flex ai-center mt-2">
+
+                        {
+                            showVerifyEmail ?
+                                <span className={`cursor-pointer fs-0-8 hover-text`} onClick={() => setVerifyEmail(true)}>{t('login.verificationEmail')}</span>
+                                :
+                                <span className={`cursor-pointer fs-0-8 hover-text`} onClick={() => setForgetPassword(true)}>{t('login.forgetPassword')}</span>
+                        }
+
+                    </div>
                 }
             </div>
         </div>