|
|
@@ -20,6 +20,7 @@ import {animated,useSpring} from "@react-spring/web";
|
|
|
import {toast} from 'react-toastify';
|
|
|
import {useDispatch, useSelector} from "react-redux";
|
|
|
import {
|
|
|
+ getAccountLogin,
|
|
|
getChangePassStatus,
|
|
|
getLoginStatus,
|
|
|
getRegStatus,
|
|
|
@@ -44,6 +45,10 @@ const TYPE_FORGET_PASS="forgetPassword";
|
|
|
|
|
|
const LOGIN_TYPE_PASS=0;
|
|
|
const LOGIN_TYPE_OTP=1;
|
|
|
+const LOGIN_TYPE_ACOUNT=2;
|
|
|
+
|
|
|
+const REG_TYPE_PHONE=0;
|
|
|
+const REG_TYPE_ACCOUNT=1;
|
|
|
const objInfo={
|
|
|
cdTimer:null,
|
|
|
inSubmit:false
|
|
|
@@ -72,7 +77,10 @@ const LoginForm = ({close}) => {
|
|
|
code:"",
|
|
|
phone:"",
|
|
|
newpassword:"",
|
|
|
- renewpassword:""
|
|
|
+ renewpassword:"",
|
|
|
+ acc_account:"",
|
|
|
+ acc_password:"",
|
|
|
+ acc_repassword:""
|
|
|
}
|
|
|
});
|
|
|
const {pathname,hash} = useLocation();
|
|
|
@@ -80,6 +88,8 @@ const LoginForm = ({close}) => {
|
|
|
const [otpCD,setOtpCD]=useState(-1);
|
|
|
const otpStatus=useSelector(getSendCodeStatus);
|
|
|
const smsLoginStatus=useSelector(getSMSLoginStatus);
|
|
|
+ const isAccountLogin=useSelector(getAccountLogin);
|
|
|
+ const [regType,setRegType]=useState(REG_TYPE_PHONE);
|
|
|
const onSendCode=(e)=>{
|
|
|
if (otpCD>0)return;
|
|
|
if (otpStatus===REQ_STATUS.LOADING)return;
|
|
|
@@ -181,6 +191,9 @@ const LoginForm = ({close}) => {
|
|
|
data.callback=onCallback;
|
|
|
dispatch(reqForgetPass(data));
|
|
|
objInfo.inSubmit=true;
|
|
|
+ }
|
|
|
+ const onSubmitAccountLogin=(data)=>{
|
|
|
+
|
|
|
}
|
|
|
const validatePhone=(value)=>{
|
|
|
return validateCountryPhone(country,value);
|
|
|
@@ -216,6 +229,7 @@ const LoginForm = ({close}) => {
|
|
|
// </button>
|
|
|
// )
|
|
|
}
|
|
|
+ //login__________
|
|
|
const renderPassLogin = () => {
|
|
|
return (
|
|
|
<form key={"pass"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
@@ -336,6 +350,67 @@ const LoginForm = ({close}) => {
|
|
|
</form>
|
|
|
)
|
|
|
}
|
|
|
+ const renderAccountLogin=()=>{
|
|
|
+ return (
|
|
|
+ <form key={"account"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ onSubmitAccountLogin(data);
|
|
|
+ })}>
|
|
|
+ <Controller control={control}
|
|
|
+ name="acc_account"
|
|
|
+ rules={{required: true, minLength: 6}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
+ return (
|
|
|
+ <div className={`d-flex flex-column g-6`}>
|
|
|
+ <div
|
|
|
+ className={`input-control ${classNames({'input-control--error': error})}`}>
|
|
|
+ <input
|
|
|
+ type={'text'}
|
|
|
+ autoComplete="off"
|
|
|
+ ref={ref}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.account_ph')}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ error?(<div className="input-prompt-error">{i18n.t('form_errors.account')}</div>):(<></>)
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="acc_password"
|
|
|
+ rules={{required: true, minLength: 6}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <PasswordInput
|
|
|
+ className={classNames({'input-control--error': error})}
|
|
|
+ value={value}
|
|
|
+ message={error ? i18n.t("form_errors.pass") : ''}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.login_pwd')}
|
|
|
+ innerRef={ref}/>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <button className={"button-green"}>
|
|
|
+ {
|
|
|
+ loginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_in_btn")
|
|
|
+ }
|
|
|
+ </button>
|
|
|
+ {renderGuestLogin()}
|
|
|
+ {renderLoginToReg()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderLoginType = () => {
|
|
|
+ if (loginType === LOGIN_TYPE_PASS) {
|
|
|
+ return renderPassLogin();
|
|
|
+ } else if (loginType === LOGIN_TYPE_OTP){
|
|
|
+ return renderOTPLogin();
|
|
|
+ } else if (loginType === LOGIN_TYPE_ACOUNT){
|
|
|
+ return renderAccountLogin();
|
|
|
+ }
|
|
|
+ return (<></>);
|
|
|
+ }
|
|
|
const renderLoginForm = () => {
|
|
|
return (
|
|
|
<Spring type="slideUp">
|
|
|
@@ -353,83 +428,200 @@ const LoginForm = ({close}) => {
|
|
|
}}>
|
|
|
<span>{i18n.t("login.login_type.otp")}</span>
|
|
|
</button>
|
|
|
+ {
|
|
|
+ isAccountLogin?(
|
|
|
+ <button className={`${styles.l_type_btn} ${loginType === LOGIN_TYPE_ACOUNT ? styles.active : ''}`}
|
|
|
+ onClick={() => {
|
|
|
+ setLoginType(LOGIN_TYPE_ACOUNT)
|
|
|
+ }}>
|
|
|
+ <span>{i18n.t("login.login_type.account")}</span>
|
|
|
+ </button>
|
|
|
+ ):(<></>)
|
|
|
+ }
|
|
|
</div>
|
|
|
{
|
|
|
- loginType===LOGIN_TYPE_PASS?renderPassLogin():renderOTPLogin()
|
|
|
+ // loginType===LOGIN_TYPE_PASS?renderPassLogin():renderOTPLogin()
|
|
|
+ renderLoginType()
|
|
|
}
|
|
|
</Spring>
|
|
|
)
|
|
|
}
|
|
|
+ //login__________
|
|
|
+
|
|
|
+ //register_______________
|
|
|
+ const renderRegToLogin=()=>{
|
|
|
+ return (
|
|
|
+ <div className={styles.l_reg_new}>
|
|
|
+ <div>{i18n.t("login.login_des")}</div>
|
|
|
+ <div className={styles.reg_btn} onClick={() => {
|
|
|
+ // setShowType(TYPE_LOGIN);
|
|
|
+ if (isMobile()) navigatRoute(ROUTE_PATH.SIGN_IN)
|
|
|
+ else setShowType(TYPE_LOGIN);
|
|
|
+ }}>
|
|
|
+ {i18n.t("login.sign_in_btn")}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderRegPhone = () => {
|
|
|
+ return (
|
|
|
+ <form key={"reg_phone"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ onSubmitReg(data);
|
|
|
+ })}>
|
|
|
+ <Controller control={control}
|
|
|
+ name="account"
|
|
|
+ rules={{required: true, validate: validatePhone}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
+ let message = error ? i18n.t("form_errors.phone_" + country) : "";
|
|
|
+ return (<PhoneInput
|
|
|
+ className={classNames({'input-control--error': error})}
|
|
|
+ value={value}
|
|
|
+ message={message}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ onChangeCountry={(country) => {
|
|
|
+ setCountry(country);
|
|
|
+ }}
|
|
|
+ placeholder={i18n.t('login.phone_ph')}
|
|
|
+ innerRef={ref}/>)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="password"
|
|
|
+ rules={{required: true, minLength: 6}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <PasswordInput
|
|
|
+ className={classNames({'input-control--error': error})}
|
|
|
+ value={value}
|
|
|
+ message={error ? i18n.t("form_errors.pass") : ''}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.login_pwd')}
|
|
|
+ innerRef={ref}/>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="repassword"
|
|
|
+ rules={{required: true, minLength: 6}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <PasswordInput
|
|
|
+ className={classNames({'input-control--error': error})}
|
|
|
+ value={value}
|
|
|
+ message={error ? i18n.t("form_errors.pass") : ''}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.re_pwd')}
|
|
|
+ innerRef={ref}/>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <button className={"button-green"}>
|
|
|
+ {
|
|
|
+ regStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_up_btn")
|
|
|
+ }
|
|
|
+ </button>
|
|
|
+ {renderRegToLogin()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderRegAccount=()=>{
|
|
|
+ return (
|
|
|
+ <form key={"reg_account"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ // onSubmitReg(data);
|
|
|
+ })}>
|
|
|
+ <Controller control={control}
|
|
|
+ name="acc_account"
|
|
|
+ rules={{required: true, minLength: 6}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
+ return (
|
|
|
+ <div className={`d-flex flex-column g-6`}>
|
|
|
+ <div
|
|
|
+ className={`input-control ${classNames({'input-control--error': error})}`}>
|
|
|
+ <input
|
|
|
+ type={'text'}
|
|
|
+ autoComplete="off"
|
|
|
+ ref={ref}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.account_ph')}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ error?(<div className="input-prompt-error">{i18n.t('form_errors.account')}</div>):(<></>)
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="acc_password"
|
|
|
+ rules={{required: true, minLength: 6}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <PasswordInput
|
|
|
+ className={classNames({'input-control--error': error})}
|
|
|
+ value={value}
|
|
|
+ message={error ? i18n.t("form_errors.pass") : ''}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.login_pwd')}
|
|
|
+ innerRef={ref}/>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <Controller control={control}
|
|
|
+ name="acc_repassword"
|
|
|
+ rules={{required: true, minLength: 6}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
+ <PasswordInput
|
|
|
+ className={classNames({'input-control--error': error})}
|
|
|
+ value={value}
|
|
|
+ message={error ? i18n.t("form_errors.pass") : ''}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.re_pwd')}
|
|
|
+ innerRef={ref}/>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <button className={"button-green"}>
|
|
|
+ {
|
|
|
+ regStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_up_btn")
|
|
|
+ }
|
|
|
+ </button>
|
|
|
+ {renderRegToLogin()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderRegType=()=>{
|
|
|
+ if (regType===REG_TYPE_PHONE){
|
|
|
+ return renderRegPhone();
|
|
|
+ }
|
|
|
+ else if (regType===REG_TYPE_ACCOUNT){
|
|
|
+ return renderRegAccount();
|
|
|
+ }
|
|
|
+ return (<></>);
|
|
|
+ }
|
|
|
const renderRegisterForm = () => {
|
|
|
return (
|
|
|
<Spring type="slideUp">
|
|
|
<div className={styles.l_title}>{i18n.t("login.reg_title")}</div>
|
|
|
- <form autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
- onSubmitReg(data);
|
|
|
- })}>
|
|
|
- <Controller control={control}
|
|
|
- name="account"
|
|
|
- rules={{required: true, validate: validatePhone}}
|
|
|
- render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
- let message = error ? i18n.t("form_errors.phone_" + country) : "";
|
|
|
- return (<PhoneInput
|
|
|
- className={classNames({'input-control--error': error})}
|
|
|
- value={value}
|
|
|
- message={message}
|
|
|
- onChange={e => onChange(e.target.value)}
|
|
|
- onChangeCountry={(country) => {
|
|
|
- setCountry(country);
|
|
|
- }}
|
|
|
- placeholder={i18n.t('login.phone_ph')}
|
|
|
- innerRef={ref}/>)
|
|
|
- }}
|
|
|
- />
|
|
|
- <Controller control={control}
|
|
|
- name="password"
|
|
|
- rules={{required: true, minLength: 6}}
|
|
|
- render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
- <PasswordInput
|
|
|
- className={classNames({'input-control--error': error})}
|
|
|
- value={value}
|
|
|
- message={error ? i18n.t("form_errors.pass") : ''}
|
|
|
- onChange={e => onChange(e.target.value)}
|
|
|
- placeholder={i18n.t('login.login_pwd')}
|
|
|
- innerRef={ref}/>
|
|
|
- )}
|
|
|
- />
|
|
|
- <Controller control={control}
|
|
|
- name="repassword"
|
|
|
- rules={{required: true,minLength:6}}
|
|
|
- render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
- <PasswordInput
|
|
|
- className={classNames({'input-control--error': error})}
|
|
|
- value={value}
|
|
|
- message={error?i18n.t("form_errors.pass"):''}
|
|
|
- onChange={e => onChange(e.target.value)}
|
|
|
- placeholder={i18n.t('login.re_pwd')}
|
|
|
- innerRef={ref}/>
|
|
|
- )}
|
|
|
- />
|
|
|
- <button className={"button-green"}>
|
|
|
- {
|
|
|
- regStatus===REQ_STATUS.LOADING?renderLoading():i18n.t("login.sign_up_btn")
|
|
|
- }
|
|
|
- </button>
|
|
|
- <div className={styles.l_reg_new}>
|
|
|
- <div>{i18n.t("login.login_des")}</div>
|
|
|
- <div className={styles.reg_btn} onClick={()=>{
|
|
|
- // setShowType(TYPE_LOGIN);
|
|
|
- if(isMobile())navigatRoute(ROUTE_PATH.SIGN_IN)
|
|
|
- else setShowType(TYPE_LOGIN);
|
|
|
- }}>
|
|
|
- {i18n.t("login.sign_in_btn")}
|
|
|
+ {
|
|
|
+ isAccountLogin?(
|
|
|
+ <div className={styles.l_type_tabs}>
|
|
|
+ <button className={`${styles.l_type_btn} ${regType === REG_TYPE_PHONE ? styles.active : ''}`}
|
|
|
+ onClick={() => {
|
|
|
+ setRegType(REG_TYPE_PHONE);
|
|
|
+ }}>
|
|
|
+ <span>{i18n.t("login.reg_type.phone")}</span>
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ className={`${styles.l_type_btn} ${regType === REG_TYPE_ACCOUNT ? styles.active : ''}`}
|
|
|
+ onClick={() => {
|
|
|
+ setRegType(REG_TYPE_ACCOUNT)
|
|
|
+ }}>
|
|
|
+ <span>{i18n.t("login.login_type.account")}</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ ):(<></>)
|
|
|
+ }
|
|
|
+ {renderRegType()}
|
|
|
</Spring>
|
|
|
)
|
|
|
}
|
|
|
- const renderForgetForm=()=>{
|
|
|
+ //register_______________
|
|
|
+
|
|
|
+ const renderForgetForm = () => {
|
|
|
return (
|
|
|
<Spring type="slideUp">
|
|
|
<div className={styles.l_title}>{i18n.t("login.forget_title")}</div>
|
