diff --git a/src/main/Browser/Pages/Login/Login.module.css b/src/main/Browser/Pages/Login/Login.module.css
index 46fc1593..21188ea8 100644
--- a/src/main/Browser/Pages/Login/Login.module.css
+++ b/src/main/Browser/Pages/Login/Login.module.css
@@ -39,6 +39,7 @@
.content :global(.accordion-header){
/*background-color: #242633fa;*/
background-color: var(--cardHeaderAlpha);
+ padding-top: 3vh;
/*color: #ecececc7;*/
}
/*.content :global(.accordion-body){
@@ -64,10 +65,22 @@
border-color: var(--cardHeader);
color: var(--textColor);
}
-.loginInput.captcha :global(.lead){
+
+
+.loginInput.passwordInput :global(.before){
width: 50%;
+}
+.loginInput.passwordInput :global(input){
+ width: 40%;
+}
+.loginInput.passwordInput :global(.after){
+ width: 10%;
+}
+.loginInput.captcha :global(.lead){
+ width: 50%;
}
+
.loginInput.captcha :global(.lead) span{
width: 100%;
height: 100%;
@@ -143,6 +156,21 @@
direction: ltr !important;
}
+
+.disable:disabled,.button[disabled] {
+ border: 0.3vh solid var(--cardHeader);
+ background: var(--cardHeader);
+ color: var(--textColor);
+ cursor: not-allowed;
+}
+
+.thisButton:disabled,.button[disabled] {
+ border: 0.3vh solid var(--cardHeader);
+ background: var(--cardHeader);
+ color: var(--textColor);
+ cursor: not-allowed;
+}
+
.twinkle{
-webkit-animation: twinkle 4s linear infinite;
-moz-animation: twinkle 4s linear infinite;
diff --git a/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js b/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js
new file mode 100644
index 00000000..8e6c2b16
--- /dev/null
+++ b/src/main/Browser/Pages/Login/components/EmailVerification/EmailVerification.js
@@ -0,0 +1,218 @@
+import React, {useEffect, useState} from 'react';
+import classes from "../../Login.module.css";
+import Button from "../../../../../../components/Button/Button";
+import {useTranslation} from "react-i18next";
+import {getCaptchaImage, getPanelToken, requestForVerifyEmail} from "js-api-client";
+import ReactTooltip from "react-tooltip";
+import LoginFormLoading from "../LoginLoading/LoginFormLoading";
+import {validateEmail} from "../../../../../../utils/utils";
+import {images} from "../../../../../../assets/images";
+import TextInput from "../../../../../../components/TextInput/TextInput";
+import Icon from "../../../../../../components/Icon/Icon";
+import Countdown from "react-countdown";
+import {useDispatch, useSelector} from "react-redux";
+import {setVerifyEmailLockInitiate} from "../../../../../../store/actions";
+
+const EmailVerification = ({returnFunc, email, disable, returnFuncDisableFalse, returnFuncDisableTrue}) => {
+
+ const clientSecret = window.env.REACT_APP_CLIENT_SECRET
+ const clientId = window.env.REACT_APP_CLIENT_ID
+
+ const {t} = useTranslation();
+ const dispatch = useDispatch();
+
+ const [loading, setLoading] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
+ const [success, setSuccess] = useState(false);
+
+ const verifyEmailLock = useSelector((state) => state.exchange.verifyEmailLock)
+
+ const [activeEmail, setActiveEmail] = useState({
+ email: {value: "", error: []},
+ captchaAnswer: {value: "", error: []},
+ });
+ const [captcha, setCaptcha] = useState({
+ image: {value: "", error: []},
+ SessionKey: {value: "", error: []},
+ expireTime: {value: "", error: []},
+ });
+
+ const captchaReq = () => {
+ setIsLoading(true)
+ getCaptchaImage()
+ .then((res) => {
+ setCaptcha({
+ image: {
+ value: `data:${res.headers['content-type']};base64,${Buffer.from(res.data).toString('base64')}`,
+ error: []
+ },
+ SessionKey: {value: res.headers['captcha-session-key'], error: []},
+ expireTime: {value: res.headers['captcha-expire-timestamp'], error: []},
+ })
+ }).catch(() => {
+ setActiveEmail({...activeEmail, captchaAnswer: {value: "", error: [t("login.captchaServerError")]}})
+ setCaptcha({...captcha, image: {value: undefined, error: []}})
+ }).finally(() => {
+ setIsLoading(false)
+ });
+ }
+
+ useEffect(() => {
+ captchaReq()
+ if (email.length > 0) return setActiveEmail({...activeEmail, email: {...activeEmail.email, value: email}})
+ }, [])
+
+
+ useEffect(() => {
+ ReactTooltip.rebuild();
+ });
+
+ if (loading) return
+
+ const submit = async (e) => {
+ e.preventDefault();
+ if (activeEmail.email.value === "") {
+ setActiveEmail({...activeEmail, email: {value: "", error: [t('login.emptyEmail')]}})
+ return;
+ }
+ if (!validateEmail(activeEmail.email.value)) {
+ setActiveEmail({...activeEmail, email: {value: "", error: [t('login.forgetPassEmailForgetError')]}})
+ return;
+ }
+ if (activeEmail.captchaAnswer.value === "") {
+ setActiveEmail({...activeEmail, captchaAnswer: {value: "", error: [t('login.emptyCaptcha')]}})
+ return;
+ }
+ if (activeEmail.captchaAnswer.value.length < 5) {
+ setActiveEmail({...activeEmail, captchaAnswer: {value: "", error: [t('login.minCaptcha')]}})
+ return;
+ }
+ setLoading(true);
+
+ const {data: {access_token: panelToken}} = await getPanelToken(clientId, clientSecret);
+ const captchaValue = `${captcha.SessionKey.value}-${activeEmail.captchaAnswer.value}`
+ requestForVerifyEmail(activeEmail.email.value, captchaValue)
+ .then(() => {
+ setSuccess(true)
+ returnFuncDisableTrue()
+ dispatch(setVerifyEmailLockInitiate(new Date().getTime() + 2 * 60 * 1000))
+ })
+ .catch((err) => {
+ if (err?.response?.data?.code === 10001 && err?.response?.data?.message === "Captcha is not valid") {
+ console.log("in captcha erro")
+ return setActiveEmail({...activeEmail, captchaAnswer: {value: "", error: [t("login.InvalidCaptcha")]}})
+ }
+ if (err?.response?.data?.code === 1002 && err?.response?.data?.message === "User already verified") {
+ return setActiveEmail({...activeEmail, captchaAnswer: {value: "", error: [t("login.emailAlreadyVerified")]}})
+ } else {
+ return setActiveEmail({
+ ...activeEmail,
+ captchaAnswer: {value: "", error: [t('login.verifyEmailServerError')]}
+ })
+ }
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+
+ }
+
+ const LeadCaptchaHandler = () => {
+ if (isLoading) return
+
+ if (captcha.image.value === undefined) return
{t('captchaAnswer')}
+
+ return
+ }
+
+ const sendEmailButtonTitle = () => {
+ if (disable) {
+ return
{t('login.sendEmail')} ( {props.minutes}:{props.seconds}
}
+ onComplete={returnFuncDisableFalse}
+ />)
+ }
+ return
{t('login.sendEmail')}
+ }
+
+
+ const FormBody = () => {
+ if (success) return
{t('login.verifyEmailFinished')}
+
+ return <>
+
{t('login.resendVerifyEmail')}
+
+ setActiveEmail({...activeEmail, email: {value: e.target.value, error: []}})
+ }
+ alerts={activeEmail.email.error}
+ />
+ ${t("login.refreshCaptcha")}`}>}
+ type="text"
+ data-name="captchaAnswer"
+ data-type="input"
+ data-min={5}
+ customClass={`${classes.loginInput} ${classes.captcha}`}
+ value={activeEmail.captchaAnswer.value}
+ onchange={(e) =>
+ setActiveEmail({...activeEmail, captchaAnswer: {value: e.target.value, error: []}})
+ }
+ alerts={activeEmail.captchaAnswer.error}
+ maxLength="5"
+ />
+
+ }
+
+
+ const FormFooter = () => {
+ if (success) return
+
+ return <>
+
+
+
+ }
+
+ return (
+
+ );
+};
+
+export default EmailVerification;
diff --git a/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js b/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
index fe18767f..94231f61 100644
--- a/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
+++ b/src/main/Browser/Pages/Login/components/LoginForm/LoginForm.js
@@ -1,5 +1,5 @@
-import {useDispatch, useSelector} from "react-redux";
import React, {useEffect, useState} from "react";
+import {useDispatch, useSelector} from "react-redux";
import classes from "../../Login.module.css";
import TextInput from "../../../../../../components/TextInput/TextInput";
import LoginFormLoading from "../LoginLoading/LoginFormLoading";
@@ -14,12 +14,15 @@ import ForgetPassword from "../ForgetPassword/ForgetPassword";
import {setUserAccountInfoInitiate, setUserInfo, setUserTokensInitiate} from "../../../../../../store/actions";
import {useGetKycStatus} from "../../../../../../queries";
import {login, parseToken} from "js-api-client";
+import Icon from "../../../../../../components/Icon/Icon";
const LoginForm = () => {
const {t} = useTranslation();
const navigate = useNavigate();
const dispatch = useDispatch();
const location = useLocation();
+
+ const [isInputVisible, setIsInputVisible] = useState(false);
const [isLoading, setLoading] = useState(false);
const [loginError, setLoginError] = useState(false);
const [needOTP, setNeedOTP] = useState(undefined);
@@ -106,6 +109,8 @@ const LoginForm = () => {
setCredential({...credential, otp: ""})
}
+
+
return