import React, { useEffect, useState } from "react"; import InputText from "../../../_components/Auth/InputText"; import InputDate from "../../../_components/Auth/InputDate"; import "./index.scss"; import { apiCaller } from "../../../_helpers"; import {history} from '../../../_helpers/history' import dayjs from "dayjs"; import { roleRegister } from "../../../_constants/register"; import { useParams } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { Alert } from "../../../_components/Alert"; import { configConstants, userConstants } from "../../../_constants"; import { alertActions } from "../../../_actions"; import { isEmail } from "../../../_helpers/validateEmail"; const CreateAccount = () => { const params = new URL(document.location).searchParams; const alert = useSelector((state) => state.alert); const dispatch = useDispatch(); const agents_code = params.get("mds"); const [email, setEmail] = useState(""); const [phone, setPhone] = useState(""); const [fullname, setFullname] = useState(''); const [birthday, setBirthday] = useState(); const [gender, setGender] = useState(); const [address, setAddress] = useState('') const [role, setRole] = useState(roleRegister.agents) const [phoneWarning, setPhoneWarning] = useState(""); const [nameWarning, setNameWarning] = useState(""); const [addressWarning, setAddressWarning] = useState(""); const [birthdayWarning, setBirthdayWarning] = useState(""); const [password, setPassword] = useState(""); const [rePassword, setRePassword] = useState(""); const [emailError, setEmailError] = useState(""); const [pwError, setPwError] = useState(""); const [rePwError, setRePwError] = useState(""); const [cacheEmailPass, setCacheEmailPass] = useState([]); const [cacheEmailFail, setCacheEmailFail] = useState([]); const [disabledBtn, setDisabledBtn] = useState(false); const [message, setMessage] = useState(""); async function handleSubmit(e) { e.preventDefault(); const url = '/register' const dataSubmit = { agents_code, password, address, birthday: dayjs(birthday).format('YYYY-MM-DD'), email, fullname, gender, phone, role } try { const res = await apiCaller(url, "POST", dataSubmit, null, true, configConstants.API_URL_SETEST, true, true) if (res.status) { dispatch(alertActions.success({ 'message': res?.msg, 'screen': userConstants.SCREEN_REGISTER })); } else { dispatch(alertActions.error({ 'message': typeof res?.msg === 'string' ? res?.msg : Object.values(res?.msg)?.join('\n'), 'screen': userConstants.SCREEN_REGISTER, isShowPopup: true })); } } catch (err) { dispatch(alertActions.error({ 'message': err, 'screen': userConstants.SCREEN_REGISTER, isShowPopup: true })); } } const checkEmail = () => { if (!isEmail(email)) { setEmailError("Định dạng email không đúng"); } }; const checkPw = () => { if (password.length < 6 || password.trim() === "") { setPwError("Mật khẩu cần tối thiểu 6 kí tự và không gồm toàn dấu cách"); } if(password?.trim()?.length > 50) { setPwError("Mật khẩu không được quá 50 kí tự"); } }; const checkRePw = () => { if (password !== rePassword) { setRePwError("Mật khẩu không khớp"); } }; const changeEmail = (value) => { setDisabledBtn(false); if (emailError) { if (!!value) { setEmailError(""); } } setEmail(value.trim()); }; const changePhone = (value) => { const validatedValue = value.replace(/[^0-9]/g, ""); setPhone(validatedValue); if (phoneWarning) { if (value.length === 10 || value.length === 11) { setPhoneWarning(""); } } }; const changePassword = (value) => { if (pwError) { if (value.length >= 6) { setPwError(""); } } if (value == rePassword && !!rePwError) { setRePwError(""); } setPassword(value); }; const changeRePassword = (value) => { if (rePwError) { if (value === password) { setRePwError(""); } } setRePassword(value); }; const changeBirthday = (birthday) => { const today = new Date(); if (dayjs(birthday).isBefore(dayjs(today))) { setBirthday(birthday); // setBirthdayWarning(""); } else { setBirthday(today); // setBirthdayWarning("Ngày sinh không được ở tương lai"); } }; function changeGender(gender) { setGender(gender); } const onBlurField = (type) => { switch (type) { case "email": { if (email && !emailError) { checkEmail(); } return; } case "password": { if (password && !pwError) { checkPw(); } return; } case "phone": { if (phone && !phoneWarning) { if (phone.length !== 10 && phone.length !== 11) { setPhoneWarning("Số điện thoại hợp lệ có từ 10-11"); } if (phone && phone.length && phone[0] !== "0") { setPhoneWarning("Định dạng số điện thoại không đúng"); } } return; } case 'fullname': { if (!!fullname && fullname?.trim()?.length > 50 && !nameWarning) { setNameWarning("Họ tên không được quá 50 kí tự"); } return; } case 'address': { if (!!address && address?.trim()?.length > 80 && !addressWarning) { setAddressWarning("Địa chỉ không được quá 80 kí tự"); } return; } default: { if (rePassword && !rePwError) { checkRePw(); } return; } } }; const handleChooseRole = (e) => { setRole(e.target.value) } const handleBack = () => { history.push('/login') } function validateParam() { if ( !!email && password.length >= 6 && rePassword === password && password.trim() !== "" && !!fullname.trim() && !!gender && !nameWarning && !addressWarning && !disabledBtn ) { if (emailError) { return false } return true; } return false; } const renderEmailIcon = () => { return ( ); }; const renderPhoneIcon = () => { return ( ); }; const renderPasswordIcon = () => { return ( ); }; const renderNameIcon = () => { return ( ); }; const renderBirthdayIcon = () => { return ( ); }; const renderLocationIcon = () => { return ( ); }; return (
{alert?.message && alert?.screen === userConstants.SCREEN_REGISTER && ( history.push('/login')}/> )}
{ onBlurField("email"); }} autoFocus = {true} > { onBlurField("phone"); }} > { onBlurField("password"); }} > { onBlurField("rePassword"); }} >
{ onBlurField("fullname"); }} autoFocus={true} >
changeGender("male")} >
{gender === "male" ? {"ico_male"} : {"ico_male_2"}}
changeGender("female")} >
{gender === "female" ? {"ico_female_2"} : {"ico_female"} }
{ onBlurField("address"); }} > {/*

Vai trò

 
 
     
*/}

Đã có tài khoản

); }; export default CreateAccount;