|
|
@@ -21,8 +21,8 @@ import {toast} from 'react-toastify';
|
|
|
import {useDispatch, useSelector} from "react-redux";
|
|
|
import {
|
|
|
getAccountLogin,
|
|
|
- getChangePassStatus,
|
|
|
- getLoginStatus,
|
|
|
+ getChangePassStatus, getLoginOpen,
|
|
|
+ getLoginStatus, getRegisterOpen,
|
|
|
getRegStatus,
|
|
|
getSendCodeStatus,
|
|
|
getSendCodeTS,
|
|
|
@@ -35,7 +35,7 @@ import {REQ_STATUS} from "@api/config";
|
|
|
import {reqForgetPass, reqLogin, reqRegister, reqSendCode, reqSMSLogin} from "@features/api";
|
|
|
import {ROUTE_PATH} from "@constants/routes";
|
|
|
import {APP_LOGIN_TYPE, APP_THEME} from "@constants/app";
|
|
|
-import {validateCountryPhone} from "@utils/helpers";
|
|
|
+import {validateCountryPhone, validateEmail} from "@utils/helpers";
|
|
|
import {CircularProgress} from "@mui/material";
|
|
|
import area from "@db/area";
|
|
|
import SvgIcon from "@components/SvgIcon";
|
|
|
@@ -45,12 +45,17 @@ const TYPE_LOGIN="login";
|
|
|
const TYPE_REGISTER="register";
|
|
|
const TYPE_FORGET_PASS="forgetPassword";
|
|
|
|
|
|
-const LOGIN_TYPE_PASS=0;
|
|
|
-const LOGIN_TYPE_OTP=1;
|
|
|
-const LOGIN_TYPE_ACOUNT=2;
|
|
|
+const LOGIN_TYPE_PHONE=0;
|
|
|
+const LOGIN_TYPE_SMS=1;
|
|
|
+const LOGIN_TYPE_ID=2;
|
|
|
+const LOGIN_TYPE_MAIL=3;
|
|
|
+const LOGIN_TYPE_GUEST=4;
|
|
|
|
|
|
const REG_TYPE_PHONE=0;
|
|
|
-const REG_TYPE_ACCOUNT=1;
|
|
|
+const REG_TYPE_SMS=1;
|
|
|
+const REG_TYPE_ID=2;
|
|
|
+const REG_TYPE_MAIL=3;
|
|
|
+const REG_TYPE_GUEST=4;
|
|
|
const objInfo={
|
|
|
cdTimer:null,
|
|
|
inSubmit:false
|
|
|
@@ -67,7 +72,7 @@ const LoginForm = ({close}) => {
|
|
|
const forgetStatus=useSelector(getChangePassStatus);
|
|
|
const dispatch = useDispatch();
|
|
|
const navigate=useNavigate();
|
|
|
- const [loginType,setLoginType]=useState(LOGIN_TYPE_PASS);
|
|
|
+ const [loginType,setLoginType]=useState(LOGIN_TYPE_PHONE);
|
|
|
const {register, handleSubmit, formState: {errors}, control} = useForm({
|
|
|
defaultValues: {
|
|
|
// country:'55',
|
|
|
@@ -79,10 +84,7 @@ const LoginForm = ({close}) => {
|
|
|
code:"",
|
|
|
phone:"",
|
|
|
newpassword:"",
|
|
|
- renewpassword:"",
|
|
|
- acc_account:"",
|
|
|
- acc_password:"",
|
|
|
- acc_repassword:""
|
|
|
+ renewpassword:""
|
|
|
}
|
|
|
});
|
|
|
const {pathname,hash} = useLocation();
|
|
|
@@ -92,6 +94,12 @@ const LoginForm = ({close}) => {
|
|
|
const smsLoginStatus=useSelector(getSMSLoginStatus);
|
|
|
const isAccountLogin=useSelector(getAccountLogin);
|
|
|
const [regType,setRegType]=useState(REG_TYPE_PHONE);
|
|
|
+ const loginOpen=useSelector(getLoginOpen);
|
|
|
+ const registerOpen=useSelector(getRegisterOpen);
|
|
|
+ //登录类型列表
|
|
|
+ const [logTypeList,setLogTypeList]=useState([]);
|
|
|
+ //注册类型列表
|
|
|
+ const [regTypeList,setRegTypeList]=useState([]);
|
|
|
const onSendCode=(e)=>{
|
|
|
if (otpCD>0)return;
|
|
|
if (otpStatus===REQ_STATUS.LOADING)return;
|
|
|
@@ -124,6 +132,30 @@ const LoginForm = ({close}) => {
|
|
|
data.callback=onCallback;
|
|
|
dispatch(reqSMSLogin(data));
|
|
|
}
|
|
|
+ const parseLogTypeList=(openType,stype)=>{
|
|
|
+ let subs=openType.split(",");
|
|
|
+ let list=[];
|
|
|
+ for(let i=0;i<subs.length;i++){
|
|
|
+ let type=subs[i];
|
|
|
+ let obj={};
|
|
|
+ if (type===APP_LOGIN_TYPE.ID)stype===TYPE_LOGIN?obj.type=LOGIN_TYPE_ID:obj.type=REG_TYPE_ID;
|
|
|
+ else if (type===APP_LOGIN_TYPE.SMS)stype===TYPE_LOGIN?obj.type=LOGIN_TYPE_SMS:obj.type=REG_TYPE_SMS;
|
|
|
+ else if (type===APP_LOGIN_TYPE.PHONE)stype===TYPE_LOGIN?obj.type=LOGIN_TYPE_PHONE:obj.type=REG_TYPE_PHONE;
|
|
|
+ else if (type===APP_LOGIN_TYPE.MAIL)stype===TYPE_LOGIN?obj.type=LOGIN_TYPE_MAIL:obj.type=REG_TYPE_MAIL;
|
|
|
+ else if (type===APP_LOGIN_TYPE.GUEST) stype===TYPE_LOGIN?obj.type=LOGIN_TYPE_GUEST:obj.type=REG_TYPE_GUEST;
|
|
|
+ obj.label="login.login_type."+type;
|
|
|
+ list.push(obj);
|
|
|
+ }
|
|
|
+ list.sort((a,b)=>{
|
|
|
+ return a.type-b.type;
|
|
|
+ })
|
|
|
+ return list;
|
|
|
+ }
|
|
|
+ const getPhoneError=()=>{
|
|
|
+ if (country==="55")return i18n.t("form_errors.phone_" + country);
|
|
|
+ else return i18n.t("form_errors.phone");
|
|
|
+ }
|
|
|
+ //effect_______
|
|
|
useEffect(()=>{
|
|
|
return ()=>{
|
|
|
global.authLockPath=null;
|
|
|
@@ -153,6 +185,21 @@ const LoginForm = ({close}) => {
|
|
|
},1000)
|
|
|
}
|
|
|
},[otpTimeStamp])
|
|
|
+ useEffect(()=>{
|
|
|
+ let list=parseLogTypeList(loginOpen,TYPE_LOGIN);
|
|
|
+ if (list&&list.length>0){
|
|
|
+ setLogTypeList(list);
|
|
|
+ setLoginType(list[0].type);
|
|
|
+ }
|
|
|
+ },[loginOpen])
|
|
|
+ useEffect(()=>{
|
|
|
+ let list=parseLogTypeList(registerOpen,TYPE_REGISTER);
|
|
|
+ if (list&&list.length>0){
|
|
|
+ setRegTypeList(list);
|
|
|
+ setRegType(list[0].type);
|
|
|
+ }
|
|
|
+ },[registerOpen])
|
|
|
+ //effect_______
|
|
|
const navigatRoute=(route)=>{
|
|
|
navigate(route,{replace:true});
|
|
|
}
|
|
|
@@ -194,38 +241,12 @@ const LoginForm = ({close}) => {
|
|
|
dispatch(reqForgetPass(data));
|
|
|
objInfo.inSubmit=true;
|
|
|
}
|
|
|
- const onSubmitAccountLogin=(data)=>{
|
|
|
- if (loginStatus===REQ_STATUS.LOADING)return;
|
|
|
- if (objInfo.inSubmit)return;
|
|
|
- // acc_account:"",
|
|
|
- // acc_password:"",
|
|
|
- // acc_repassword:""
|
|
|
- //data.type=APP_LOGIN_TYPE.ID;
|
|
|
- let ndata={
|
|
|
- account:data.acc_account,
|
|
|
- password:data.acc_password,
|
|
|
- type:APP_LOGIN_TYPE.ID
|
|
|
- }
|
|
|
- ndata.callback=onCallback;
|
|
|
- dispatch(reqLogin(ndata));
|
|
|
- objInfo.inSubmit=true;
|
|
|
- }
|
|
|
- const onSubmitAccountReg=(data)=>{
|
|
|
- if (regStatus===REQ_STATUS.LOADING)return;
|
|
|
- if (objInfo.inSubmit)return;
|
|
|
- let ndata={
|
|
|
- account:data.acc_account,
|
|
|
- password:data.acc_password,
|
|
|
- repassword:data.acc_repassword,
|
|
|
- type:APP_LOGIN_TYPE.ID
|
|
|
- }
|
|
|
- ndata.callback=onCallback;
|
|
|
- dispatch(reqRegister(ndata));
|
|
|
- objInfo.inSubmit=true;
|
|
|
- }
|
|
|
const validatePhone=(value)=>{
|
|
|
return validateCountryPhone(country,value);
|
|
|
}
|
|
|
+ const validateMail=(value)=>{
|
|
|
+ return validateEmail(value);
|
|
|
+ }
|
|
|
const getAreaItem=()=>{
|
|
|
let areaID=global.getLocalAreaID();
|
|
|
let item=null;
|
|
|
@@ -277,24 +298,52 @@ const LoginForm = ({close}) => {
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
- const renderGuestLogin = () => {
|
|
|
- // return (
|
|
|
- // <button type={"button"} className={styles.guest_btn}>
|
|
|
- // {i18n.t("login.guest_login")}
|
|
|
- // </button>
|
|
|
- // )
|
|
|
+ // const renderGuestLogin = () => {
|
|
|
+ // let subs=loginOpen.split(",");
|
|
|
+ // let isGuest=subs.indexOf(APP_LOGIN_TYPE.GUEST)!==-1;
|
|
|
+ // if (!isGuest)return (<></>);
|
|
|
+ // return (
|
|
|
+ // <button type={"button"} className={styles.guest_btn}>
|
|
|
+ // {i18n.t("login.guest_login")}
|
|
|
+ // </button>
|
|
|
+ // )
|
|
|
+ // }
|
|
|
+ const renderTypeTabs=(type)=>{
|
|
|
+ let list=type===TYPE_LOGIN?logTypeList:regTypeList;
|
|
|
+ if (list.length<=1)return (<></>);
|
|
|
+ let ltype=type===TYPE_LOGIN?loginType:regType;
|
|
|
+ return (
|
|
|
+ <div className={styles.l_type_tabs}>
|
|
|
+ {
|
|
|
+ list.map((item,index)=>{
|
|
|
+ return (
|
|
|
+ <button
|
|
|
+ key={index}
|
|
|
+ className={`${styles.l_type_btn} ${ltype === item.type ? styles.active : ''}`}
|
|
|
+ onClick={() => {
|
|
|
+ if(type===TYPE_LOGIN)setLoginType(item.type);
|
|
|
+ else if (type===TYPE_REGISTER)setRegType(item.type);
|
|
|
+ }}>
|
|
|
+ <span>{i18n.t(item.label)}</span>
|
|
|
+ </button>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
}
|
|
|
//login__________
|
|
|
const renderPassLogin = () => {
|
|
|
return (
|
|
|
<form key={"pass"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ data.type=APP_LOGIN_TYPE.PHONE;
|
|
|
onSubmitLogin(data);
|
|
|
})}>
|
|
|
<Controller control={control}
|
|
|
- name="account"
|
|
|
+ name="phone"
|
|
|
rules={{required: true}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
- let message = error ? i18n.t("form_errors.phone_" + country) : "";
|
|
|
+ let message = error ? getPhoneError() : "";
|
|
|
return (<PhoneInput
|
|
|
key={"account"}
|
|
|
className={classNames({'input-control--error': error})}
|
|
|
@@ -333,7 +382,7 @@ const LoginForm = ({close}) => {
|
|
|
loginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_in_btn")
|
|
|
}
|
|
|
</button>
|
|
|
- {renderGuestLogin()}
|
|
|
+ {/*{renderGuestLogin()}*/}
|
|
|
{renderLoginToReg()}
|
|
|
</form>
|
|
|
)
|
|
|
@@ -347,7 +396,7 @@ const LoginForm = ({close}) => {
|
|
|
name="phone"
|
|
|
rules={{required: true}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
- let message = error ? i18n.t("form_errors.phone_" + country) : "";
|
|
|
+ let message = error ? getPhoneError() : "";
|
|
|
return (<PhoneInput
|
|
|
key={"phone"}
|
|
|
className={classNames({'input-control--error': error})}
|
|
|
@@ -400,7 +449,7 @@ const LoginForm = ({close}) => {
|
|
|
smsLoginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_in_btn")
|
|
|
}
|
|
|
</button>
|
|
|
- {renderGuestLogin()}
|
|
|
+ {/*{renderGuestLogin()}*/}
|
|
|
{renderLoginToReg()}
|
|
|
</form>
|
|
|
)
|
|
|
@@ -408,10 +457,12 @@ const LoginForm = ({close}) => {
|
|
|
const renderAccountLogin=()=>{
|
|
|
return (
|
|
|
<form key={"account"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
- onSubmitAccountLogin(data);
|
|
|
+ // onSubmitAccountLogin(data);
|
|
|
+ data.type=APP_LOGIN_TYPE.ID;
|
|
|
+ onSubmitLogin(data);
|
|
|
})}>
|
|
|
<Controller control={control}
|
|
|
- name="acc_account"
|
|
|
+ name="account"
|
|
|
rules={{required: true, minLength: 6}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
return (
|
|
|
@@ -420,6 +471,7 @@ const LoginForm = ({close}) => {
|
|
|
className={`input-control ${classNames({'input-control--error': error})}`}>
|
|
|
<input
|
|
|
type={'text'}
|
|
|
+ value={value}
|
|
|
autoComplete="off"
|
|
|
ref={ref}
|
|
|
onChange={e => onChange(e.target.value)}
|
|
|
@@ -434,7 +486,7 @@ const LoginForm = ({close}) => {
|
|
|
}}
|
|
|
/>
|
|
|
<Controller control={control}
|
|
|
- name="acc_password"
|
|
|
+ name="password"
|
|
|
rules={{required: true, minLength: 6}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
<PasswordInput
|
|
|
@@ -451,18 +503,93 @@ const LoginForm = ({close}) => {
|
|
|
loginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_in_btn")
|
|
|
}
|
|
|
</button>
|
|
|
- {renderGuestLogin()}
|
|
|
+ {/*{renderGuestLogin()}*/}
|
|
|
+ {renderLoginToReg()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderMailLogin=()=>{
|
|
|
+ return (
|
|
|
+ <form key={"mail"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ // onSubmitAccountLogin(data);
|
|
|
+ data.type=APP_LOGIN_TYPE.MAIL;
|
|
|
+ onSubmitLogin(data);
|
|
|
+ })}>
|
|
|
+ <Controller control={control}
|
|
|
+ name="email"
|
|
|
+ rules={{required: true, validate: validateMail}}
|
|
|
+ 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'}
|
|
|
+ value={value}
|
|
|
+ autoComplete="off"
|
|
|
+ ref={ref}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.mail_ph')}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ error?(<div className="input-prompt-error">{i18n.t('form_errors.email')}</div>):(<></>)
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <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}/>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ <button className={"button-green"}>
|
|
|
+ {
|
|
|
+ loginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_in_btn")
|
|
|
+ }
|
|
|
+ </button>
|
|
|
+ {/*{renderGuestLogin()}*/}
|
|
|
+ {renderLoginToReg()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderGuestLogin=()=>{
|
|
|
+ return (
|
|
|
+ <form key={"guest"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ // onSubmitAccountLogin(data);
|
|
|
+ data.type=APP_LOGIN_TYPE.GUEST;
|
|
|
+ onSubmitLogin(data);
|
|
|
+ })}>
|
|
|
+ <button className={"button-green"}>
|
|
|
+ {
|
|
|
+ loginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.guest_login")
|
|
|
+ }
|
|
|
+ </button>
|
|
|
{renderLoginToReg()}
|
|
|
</form>
|
|
|
)
|
|
|
}
|
|
|
const renderLoginType = () => {
|
|
|
- if (loginType === LOGIN_TYPE_PASS) {
|
|
|
+ control._names.mount.clear();
|
|
|
+ if (loginType === LOGIN_TYPE_PHONE) {
|
|
|
return renderPassLogin();
|
|
|
- } else if (loginType === LOGIN_TYPE_OTP){
|
|
|
+ } else if (loginType === LOGIN_TYPE_SMS){
|
|
|
return renderOTPLogin();
|
|
|
- } else if (loginType === LOGIN_TYPE_ACOUNT){
|
|
|
+ } else if (loginType === LOGIN_TYPE_ID){
|
|
|
return renderAccountLogin();
|
|
|
+ } else if (loginType ===LOGIN_TYPE_MAIL){
|
|
|
+ return renderMailLogin();
|
|
|
+ } else if (loginType === LOGIN_TYPE_GUEST){
|
|
|
+ return renderGuestLogin();
|
|
|
}
|
|
|
return (<></>);
|
|
|
}
|
|
|
@@ -470,30 +597,7 @@ const LoginForm = ({close}) => {
|
|
|
return (
|
|
|
<Spring type="slideUp">
|
|
|
<div className={styles.l_title}>{i18n.t("login.login_title")}</div>
|
|
|
- <div className={styles.l_type_tabs}>
|
|
|
- <button className={`${styles.l_type_btn} ${loginType === LOGIN_TYPE_PASS ? styles.active : ''}`}
|
|
|
- onClick={() => {
|
|
|
- setLoginType(LOGIN_TYPE_PASS)
|
|
|
- }}>
|
|
|
- <span>{i18n.t("login.login_type.password")}</span>
|
|
|
- </button>
|
|
|
- <button className={`${styles.l_type_btn} ${loginType === LOGIN_TYPE_OTP ? styles.active : ''}`}
|
|
|
- onClick={() => {
|
|
|
- setLoginType(LOGIN_TYPE_OTP)
|
|
|
- }}>
|
|
|
- <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>
|
|
|
+ {renderTypeTabs(TYPE_LOGIN)}
|
|
|
{
|
|
|
// loginType===LOGIN_TYPE_PASS?renderPassLogin():renderOTPLogin()
|
|
|
renderLoginType()
|
|
|
@@ -521,16 +625,27 @@ const LoginForm = ({close}) => {
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
+ // const renderGuestReg = () => {
|
|
|
+ // let subs=registerOpen.split(",");
|
|
|
+ // let isGuest=subs.indexOf(APP_LOGIN_TYPE.GUEST)!==-1;
|
|
|
+ // if (!isGuest)return (<></>);
|
|
|
+ // return (
|
|
|
+ // <button type={"button"} className={styles.guest_btn}>
|
|
|
+ // {i18n.t("login.guest_reg")}
|
|
|
+ // </button>
|
|
|
+ // )
|
|
|
+ // }
|
|
|
const renderRegPhone = () => {
|
|
|
return (
|
|
|
<form key={"reg_phone"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ data.type=APP_LOGIN_TYPE.PHONE;
|
|
|
onSubmitReg(data);
|
|
|
})}>
|
|
|
<Controller control={control}
|
|
|
- name="account"
|
|
|
+ name="phone"
|
|
|
rules={{required: true, validate: validatePhone}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
- let message = error ? i18n.t("form_errors.phone_" + country) : "";
|
|
|
+ let message = error ? getPhoneError() : "";
|
|
|
return (<PhoneInput
|
|
|
className={classNames({'input-control--error': error})}
|
|
|
value={value}
|
|
|
@@ -574,6 +689,7 @@ const LoginForm = ({close}) => {
|
|
|
regStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_up_btn")
|
|
|
}
|
|
|
</button>
|
|
|
+ {/*{renderGuestReg()}*/}
|
|
|
{renderRegToLogin()}
|
|
|
</form>
|
|
|
)
|
|
|
@@ -582,10 +698,12 @@ const LoginForm = ({close}) => {
|
|
|
return (
|
|
|
<form key={"reg_account"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
// onSubmitReg(data);
|
|
|
- onSubmitAccountReg(data);
|
|
|
+ // onSubmitAccountReg(data);
|
|
|
+ data.type=APP_LOGIN_TYPE.ID;
|
|
|
+ onSubmitReg(data);
|
|
|
})}>
|
|
|
<Controller control={control}
|
|
|
- name="acc_account"
|
|
|
+ name="account"
|
|
|
rules={{required: true, minLength: 6}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
return (
|
|
|
@@ -594,6 +712,7 @@ const LoginForm = ({close}) => {
|
|
|
className={`input-control ${classNames({'input-control--error': error})}`}>
|
|
|
<input
|
|
|
type={'text'}
|
|
|
+ value={value}
|
|
|
autoComplete="off"
|
|
|
ref={ref}
|
|
|
onChange={e => onChange(e.target.value)}
|
|
|
@@ -608,7 +727,7 @@ const LoginForm = ({close}) => {
|
|
|
}}
|
|
|
/>
|
|
|
<Controller control={control}
|
|
|
- name="acc_password"
|
|
|
+ name="password"
|
|
|
rules={{required: true, minLength: 6}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
<PasswordInput
|
|
|
@@ -621,7 +740,7 @@ const LoginForm = ({close}) => {
|
|
|
)}
|
|
|
/>
|
|
|
<Controller control={control}
|
|
|
- name="acc_repassword"
|
|
|
+ name="repassword"
|
|
|
rules={{required: true, minLength: 6}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
<PasswordInput
|
|
|
@@ -638,42 +757,185 @@ const LoginForm = ({close}) => {
|
|
|
regStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_up_btn")
|
|
|
}
|
|
|
</button>
|
|
|
+ {/*{renderGuestReg()}*/}
|
|
|
+ {renderRegToLogin()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderRegSms=()=>{
|
|
|
+ return (
|
|
|
+ <form key={"reg_sms"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ data.type=APP_LOGIN_TYPE.SMS;
|
|
|
+ onSubmitReg(data);
|
|
|
+ })}>
|
|
|
+ <Controller control={control}
|
|
|
+ name="phone"
|
|
|
+ rules={{required: true, validate: validatePhone}}
|
|
|
+ render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
+ let message = error ? getPhoneError() : "";
|
|
|
+ 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="code"
|
|
|
+ rules={{required: true}}
|
|
|
+ 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.otp_ph')}
|
|
|
+ />
|
|
|
+ <button type={"button"}
|
|
|
+ className={`${styles.otp_btn} ${otpCD > 0 ? styles.cd_timer : ''}`}
|
|
|
+ onClick={onSendCode}>
|
|
|
+ {
|
|
|
+ otpStatus === REQ_STATUS.LOADING ? (
|
|
|
+ <CircularProgress color="success" size={22} thickness={5}/>) : (
|
|
|
+ <>
|
|
|
+ {
|
|
|
+ otpCD <= 0 ? i18n.t('login.btn_otp') : otpCD + "S"
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <button className={"button-green"}>
|
|
|
+ {
|
|
|
+ regStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_up_btn")
|
|
|
+ }
|
|
|
+ </button>
|
|
|
+ {/*{renderGuestReg()}*/}
|
|
|
+ {renderRegToLogin()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderRegMail=()=>{
|
|
|
+ return (
|
|
|
+ <form key={"reg_mail"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ // onSubmitReg(data);
|
|
|
+ // onSubmitAccountReg(data);
|
|
|
+ data.type=APP_LOGIN_TYPE.MAIL;
|
|
|
+ onSubmitReg(data);
|
|
|
+ })}>
|
|
|
+ <Controller control={control}
|
|
|
+ name="email"
|
|
|
+ rules={{required: true, validate: validateMail}}
|
|
|
+ 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'}
|
|
|
+ value={value}
|
|
|
+ autoComplete="off"
|
|
|
+ ref={ref}
|
|
|
+ onChange={e => onChange(e.target.value)}
|
|
|
+ placeholder={i18n.t('login.mail_ph')}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ error?(<div className="input-prompt-error">{i18n.t('form_errors.email')}</div>):(<></>)
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <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>
|
|
|
+ {/*{renderGuestReg()}*/}
|
|
|
+ {renderRegToLogin()}
|
|
|
+ </form>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderRegGuest=()=>{
|
|
|
+ return (
|
|
|
+ <form key={"reg_guest"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
|
|
|
+ data.type=APP_LOGIN_TYPE.MAIL;
|
|
|
+ onSubmitReg(data);
|
|
|
+ })}>
|
|
|
+ <button className={"button-green"}>
|
|
|
+ {
|
|
|
+ regStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.guest_reg")
|
|
|
+ }
|
|
|
+ </button>
|
|
|
{renderRegToLogin()}
|
|
|
</form>
|
|
|
)
|
|
|
}
|
|
|
const renderRegType=()=>{
|
|
|
+ control._names.mount.clear();
|
|
|
if (regType===REG_TYPE_PHONE){
|
|
|
return renderRegPhone();
|
|
|
}
|
|
|
- else if (regType===REG_TYPE_ACCOUNT){
|
|
|
+ else if (regType===REG_TYPE_ID){
|
|
|
return renderRegAccount();
|
|
|
}
|
|
|
+ else if (regType===REG_TYPE_SMS){
|
|
|
+ return renderRegSms();
|
|
|
+ }
|
|
|
+ else if(regType===REG_TYPE_MAIL){
|
|
|
+ return renderRegMail();
|
|
|
+ }
|
|
|
+ else if (regType===REG_TYPE_GUEST){
|
|
|
+ return renderRegGuest();
|
|
|
+ }
|
|
|
return (<></>);
|
|
|
}
|
|
|
const renderRegisterForm = () => {
|
|
|
return (
|
|
|
<Spring type="slideUp">
|
|
|
<div className={styles.l_title}>{i18n.t("login.reg_title")}</div>
|
|
|
- {
|
|
|
- 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>
|
|
|
- ):(<></>)
|
|
|
- }
|
|
|
+ {renderTypeTabs(TYPE_REGISTER)}
|
|
|
{renderRegType()}
|
|
|
</Spring>
|
|
|
)
|
|
|
@@ -691,7 +953,7 @@ const LoginForm = ({close}) => {
|
|
|
name="phone"
|
|
|
rules={{required: true}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
- let message = error ? i18n.t("form_errors.phone_" + country) : "";
|
|
|
+ let message = error ? getPhoneError() : "";
|
|
|
return (<PhoneInput
|
|
|
key={"phone"}
|
|
|
className={classNames({'input-control--error': error})}
|
