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 {getLoginStatus, getRegStatus} from "@features/mainSlice";
import {useLocation} from "react-router";
import {useEffect} from 'react';
import SmallLoading from "@components/SmallLoading";
import {REQ_STATUS} from "@api/config";
import {reqLogin, reqRegister} from "@features/api";
import {ROUTE_PATH} from "@constants/routes";
import {APP_THEME} from "@constants/app";
import {validateCountryPhone} from "@utils/helpers";

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


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 dispatch = useDispatch();
    const navigate=useNavigate();
    const {register, handleSubmit, formState: {errors}, control} = useForm({
        defaultValues: {
            // country:'55',
            account: '',
            password: '',
            email:"",
            repassword:"",
            lang:""
        }
    });
    const {pathname,hash} = useLocation();
    useEffect(()=>{
       return ()=>{
           global.authLockPath=null;
       }
    },[])
    useEffect(() => {
        if (hash===ROUTE_PATH.SIGN_IN){
            setShowType(TYPE_LOGIN);
        }
        else if (hash===ROUTE_PATH.SIGN_UP){
            setShowType(TYPE_REGISTER);
        }
    }, [pathname,hash]);
    const navigatRoute=(route)=>{
        navigate(route,{replace:true});
    }
    const onCallback=(code)=>{
        // global.authLockPath=null;
        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)=>{
        data.country=country;
        data.callback=onCallback;
        dispatch(reqLogin(data));
    }
    const onSubmitReg=(data)=>{
        data.country=country;
        data.callback=onCallback;
        dispatch(reqRegister(data));
    }
    const validatePhone=(value)=>{
        return validateCountryPhone(country,value);
    }
    const renderLoading=()=>{
        return (<SmallLoading fill={"#fff"}/>)
    }
    const renderLogo=()=>{
        return (
            <div className={styles.l_logo}>
                <img className={styles.logo_img} src={logourl}/>
            </div>
        )
    }
    const renderLoginForm=()=>{
        return (
            <Spring type="slideUp" >
                <div className={styles.l_title}>{i18n.t("login.login_title")}</div>
                <form autoComplete="off" className={styles.l_form} onSubmit={handleSubmit((data) => {
                    onSubmitLogin(data);
                })}>
                    <Controller control={control}
                                name="account"
                                rules={{required: true}}
                                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}/>
                                )}
                    />
                    {/*<div className={styles.l_forgot}>*/}
                    {/*    <button className={styles.forgot_btn}>*/}
                    {/*        {i18n.t("login.forgot")}*/}
                    {/*    </button>*/}
                    {/*</div>*/}
                    <button className={"button-green"}>
                        {
                            loginStatus===REQ_STATUS.LOADING?renderLoading():i18n.t("login.sign_in_btn")
                        }
                    </button>
                    <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>
                </form>
            </Spring>
        )
    }
    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")}
                        </div>
                    </div>
                </form>
            </Spring>
        )
    }
    const renderForm=()=>{
        let form=(<></>);
        if (showType===TYPE_LOGIN){
            form=renderLoginForm();
        }
        else if (showType===TYPE_REGISTER){
            form=renderRegisterForm();
        }
        return (
            <div className={styles.l_form_container}>
                {form}
            </div>
        )
    }
    return (
        <div className={styles.container}>
            {renderLogo()}
            {renderForm()}
        </div>
    )
}

export default LoginForm;