web2468/src/widgets/LoginForm/index.jsx

// components
import PasswordInput from '@components/UInput/PasswordInput';
import BasicCheckbox from '@ui/BasicCheckbox';
import ResetPasswordPopup from '@components/ResetPasswordPopup';

// hooks
import {useForm, Controller} from 'react-hook-form';
import {useNavigate} from 'react-router-dom';
import React, {useState} from 'react';
import styles from './styles.module.scss';
import logo_dark from '@assets/logo/logo.png';
import logo_light from '@assets/logo/logo_w.png';

// utils
import classNames from 'classnames';
import {useThemeProvider} from "@contexts/themeContext";
import Spring from "@components/Spring";
import PhoneInput from "@components/UInput/PhoneInput";
import {animated,useSpring} from "@react-spring/web";
import {toast} from 'react-toastify';
import {useDispatch, useSelector} from "react-redux";
import {
    getAccountLogin,
    getChangePassStatus, getLoginOpen,
    getLoginStatus, getRegisterOpen,
    getRegStatus,
    getSendCodeStatus,
    getSendCodeTS,
    getSMSLoginStatus
} from "@features/mainSlice";
import {useLocation} from "react-router";
import {useEffect} from 'react';
import SmallLoading from "@components/SmallLoading";
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, validateEmail} from "@utils/helpers";
import {CircularProgress} from "@mui/material";
import area from "@db/area";
import SvgIcon from "@components/SvgIcon";

const i18n=global.i18n;
const TYPE_LOGIN="login";
const TYPE_REGISTER="register";
const TYPE_FORGET_PASS="forgetPassword";

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_SMS=1;
const REG_TYPE_ID=2;
const REG_TYPE_MAIL=3;
const REG_TYPE_GUEST=4;
const objInfo={
    cdTimer:null,
    inSubmit:false
}

const LoginForm = ({close}) => {
    const {theme,isMobile} = useThemeProvider();
    const [showType,setShowType]=useState(TYPE_LOGIN);
    const [open, setOpen] = useState(false);
    const [country, setCountry] = useState("55");
    const logourl=(theme===APP_THEME.DARK?logo_dark:logo_light);
    const loginStatus=useSelector(getLoginStatus);
    const regStatus=useSelector(getRegStatus);
    const forgetStatus=useSelector(getChangePassStatus);
    const dispatch = useDispatch();
    const navigate=useNavigate();
    const [loginType,setLoginType]=useState(LOGIN_TYPE_PHONE);
    const {register, handleSubmit, formState: {errors}, control} = useForm({
        defaultValues: {
            // country:'55',
            account: '',
            password: '',
            email:"",
            repassword:"",
            lang:"",
            code:"",
            phone:"",
            newpassword:"",
            renewpassword:""
        }
    });
    const {pathname,hash} = useLocation();
    const otpTimeStamp=useSelector(getSendCodeTS);
    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 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;
        let phone=control._formValues.phone;
        if (phone==null||phone==="")return;
        let validate=validatePhone(phone);
        if (!validate){
            control.setError("phone",true)
            return;
        }
        let params={phone:phone};
        dispatch(reqSendCode(params));
    }
    const getLeftCD=()=>{
        let now=Date.now();
        let delta=now-otpTimeStamp;
        delta=Math.floor(delta/1000);
        delta=60-delta;
        if (delta<0)return -1;
        else return delta;
    }
    const clearTimer=()=>{
        if (objInfo.cdTimer!=null){
            clearInterval(objInfo.cdTimer);
            objInfo.cdTimer=null;
        }
    }
    const onSubmitOTPLogin=(data)=>{
        if (smsLoginStatus===REQ_STATUS.LOADING)return;
        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;
           clearTimer();
           objInfo.inSubmit=false;
       }
    },[])
    useEffect(() => {
        objInfo.inSubmit=false;
        if (hash===ROUTE_PATH.SIGN_IN){
            setShowType(TYPE_LOGIN);
        }
        else if (hash===ROUTE_PATH.SIGN_UP){
            setShowType(TYPE_REGISTER);
        }
    }, [pathname,hash]);
    useEffect(()=>{
        let left=getLeftCD();
        setOtpCD(left);
        clearTimer();
        if (left>0){
            objInfo.cdTimer=setInterval(()=>{
                left=getLeftCD();
                setOtpCD(left);
                if (left<0){
                    clearTimer();
                }
            },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});
    }
    const onCallback=(code)=>{
        // global.authLockPath=null;
        objInfo.inSubmit=false;
        if (code==200){
            if (global.authLockPath!=null){
                let path=global.authLockPath;
                global.authLockPath=null;
                navigate(path,{replace:true});
            }
            else{
                if (close)close();
            }
        }
    }
    const onSubmitLogin=(data)=>{
        if (loginStatus===REQ_STATUS.LOADING)return;
        if (objInfo.inSubmit)return;
        data.country=country;
        data.callback=onCallback;
        dispatch(reqLogin(data));
        objInfo.inSubmit=true;
    }
    const onSubmitReg=(data)=>{
        if (regStatus===REQ_STATUS.LOADING)return;
        if (objInfo.inSubmit)return;
        data.country=country;
        data.callback=onCallback;
        dispatch(reqRegister(data));
        objInfo.inSubmit=true;
    }
    const onSubmitForget=(data)=>{
        if (forgetStatus===REQ_STATUS.LOADING)return;
        if (objInfo.inSubmit)return;
        data.country=country;
        data.callback=onCallback;
        dispatch(reqForgetPass(data));
        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;
        for (let i = 0; i < area.length; i++) {
            let  aitem=area[i];
            if (aitem.id===areaID){
                item=aitem;
                break;
            }
        }
        return item;
    }
    const renderLoading=()=>{
        return (<SmallLoading fill={"#fff"}/>)
    }
    const renderLogo=()=>{
        return (
            <div className={styles.l_logo}>
                <img className={styles.logo_img} src={logourl}/>
            </div>
        )
    }
    const renderAreaSelect=()=>{
        let item=getAreaItem();
        if (item==null)return (<></>);
        return (
            <button type={"button"} className={styles.area_btn} onClick={() => {
                global.showAreaSelect();
            }}>
                <img className={styles.flag} src={item.icon}/>
                <span>{i18n.t(item.name)}</span>
                <SvgIcon className={styles.icon} herf={"icon_Arrow"}></SvgIcon>
            </button>
        )
    }
    const renderLoginToReg = () =>{
        return (
            <div className={"d-flex flex-row align-items-center justify-content-between"}>
                <div className={styles.l_reg_new}>
                    <div>{i18n.t("login.reg_new_des")}</div>
                    <div className={styles.reg_btn} onClick={() => {
                        // setShowType(TYPE_REGISTER);
                        if (isMobile()) navigatRoute(ROUTE_PATH.SIGN_UP)
                        else setShowType(TYPE_REGISTER);
                    }}>
                        {i18n.t("sign_up")}
                    </div>
                </div>
                {renderAreaSelect()}
            </div>
        )
    }
    // 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="phone"
                            rules={{required: true}}
                            render={({field: {ref, onChange, value}, fieldState: {error}}) => {
                                let message = error ? getPhoneError() : "";
                                return (<PhoneInput
                                    key={"account"}
                                    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}/>
                            )}
                />
                <div className={styles.l_forgot}>
                    <button type={"button"} className={styles.forgot_btn} onClick={()=>{
                        setShowType(TYPE_FORGET_PASS);
                    }}>
                        {i18n.t("login.forgot")}
                    </button>
                </div>
                <button className={"button-green"}>
                    {
                        loginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_in_btn")
                    }
                </button>
                {/*{renderGuestLogin()}*/}
                {renderLoginToReg()}
            </form>
        )
    }
    const renderOTPLogin=()=>{
        return (
            <form key={"otp"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                onSubmitOTPLogin(data);
            })}>
                <Controller control={control}
                            name="phone"
                            rules={{required: true}}
                            render={({field: {ref, onChange, value}, fieldState: {error}}) => {
                                let message = error ? getPhoneError() : "";
                                return (<PhoneInput
                                    key={"phone"}
                                    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"}>
                    {
                        smsLoginStatus === REQ_STATUS.LOADING ? renderLoading() : i18n.t("login.sign_in_btn")
                    }
                </button>
                {/*{renderGuestLogin()}*/}
                {renderLoginToReg()}
            </form>
        )
    }
    const renderAccountLogin=()=>{
        return (
            <form key={"account"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                // onSubmitAccountLogin(data);
                data.type=APP_LOGIN_TYPE.ID;
                onSubmitLogin(data);
            })}>
                <Controller control={control}
                            name="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'}
                                                value={value}
                                                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="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 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 = () => {
        control._names.mount.clear();
        if (loginType === LOGIN_TYPE_PHONE) {
            return renderPassLogin();
        } else if (loginType === LOGIN_TYPE_SMS){
            return renderOTPLogin();
        } 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 (<></>);
    }
    const renderLoginForm = () => {
        return (
            <Spring type="slideUp">
                <div className={styles.l_title}>{i18n.t("login.login_title")}</div>
                {renderTypeTabs(TYPE_LOGIN)}
                {
                    // loginType===LOGIN_TYPE_PASS?renderPassLogin():renderOTPLogin()
                    renderLoginType()
                }
            </Spring>
        )
    }
    //login__________

    //register_______________
    const renderRegToLogin=()=>{
        return (
            <div className={"d-flex flex-row align-items-center justify-content-between"}>
                <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>
                {renderAreaSelect()}
            </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="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="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 renderRegAccount=()=>{
        return (
            <form key={"reg_account"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                // onSubmitReg(data);
                // onSubmitAccountReg(data);
                data.type=APP_LOGIN_TYPE.ID;
                onSubmitReg(data);
            })}>
                <Controller control={control}
                            name="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'}
                                                value={value}
                                                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="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 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="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}/>
                            )}
                />
                <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.GUEST;
                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_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>
                {renderTypeTabs(TYPE_REGISTER)}
                {renderRegType()}
            </Spring>
        )
    }
    //register_______________

    const renderForgetForm = () => {
        return (
            <Spring type="slideUp">
                <div className={styles.l_title}>{i18n.t("login.forget_title")}</div>
                <form key={"forget"} autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                    onSubmitForget(data);
                })}>
                    <Controller control={control}
                                name="phone"
                                rules={{required: true}}
                                render={({field: {ref, onChange, value}, fieldState: {error}}) => {
                                    let message = error ? getPhoneError() : "";
                                    return (<PhoneInput
                                        key={"phone"}
                                        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="newpassword"
                                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('user.password.newpassword')}
                                        innerRef={ref}/>
                                )}
                    />
                    <Controller control={control}
                                name="renewpassword"
                                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('user.password.renewpassword')}
                                        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"}>
                        {
                            forgetStatus === REQ_STATUS.LOADING ? (
                                <SmallLoading fill={"#fff"}/>) : i18n.t("login.forget_title")
                        }
                    </button>
                    <div className={styles.l_reg_new}>
                        <div>{i18n.t("login.back_to_login")}</div>
                        <div className={styles.reg_btn} onClick={() => {
                            setShowType(TYPE_LOGIN);
                        }}>
                            {i18n.t("login.sign_in_btn")}
                        </div>
                    </div>
                </form>
            </Spring>
        )
    }
    const renderForm = () => {
        let form = (<></>);
        if (showType === TYPE_LOGIN) {
            form = renderLoginForm();
        } else if (showType === TYPE_REGISTER) {
            form = renderRegisterForm();
        } else if (showType === TYPE_FORGET_PASS) {
            form = renderForgetForm();
        }
        return (
            <div className={styles.l_form_container}>
                {form}
            </div>
        )
    }
    return (
        <div className={styles.container}>
            {renderLogo()}
            {renderForm()}
        </div>
    )
}

export default LoginForm;