diff --git a/src/_containers/RegisterPage/RegisterPage.js b/src/_containers/RegisterPage/RegisterPage.js index ff61453..9e345ea 100644 --- a/src/_containers/RegisterPage/RegisterPage.js +++ b/src/_containers/RegisterPage/RegisterPage.js @@ -30,6 +30,7 @@ function RegisterPage() { organization: '', }); const [dataCreateAccount, setDataCreateAccount] = useState({ + phone: "", email: "", password: "", rePassword: "", @@ -71,7 +72,7 @@ function RegisterPage() { const onClickYes = () => { const data = { - email: dataCreateAccount.email, + email: dataCreateAccount?.email ? dataCreateAccount.email : undefined, password: dataCreateAccount.password, re_password: dataCreateAccount.rePassword, role: dataStepRole.role, @@ -84,7 +85,7 @@ function RegisterPage() { gender: dataUpdateInfo.gender, province_alias: dataAddressStudying.province, district_alias: dataAddressStudying.district, - phone: dataUpdateInfo.phone, + phone: dataCreateAccount?.phone ? dataCreateAccount.phone : undefined, year_of_birth: dataUpdateInfo.birthday?.getFullYear(), school_id: dataAddressStudying?.school_id, organization_code: dataAddressStudying?.organization, @@ -97,7 +98,7 @@ function RegisterPage() { const onRegister = async () => { const data = { - email: dataCreateAccount.email, + email: dataCreateAccount?.email ? dataCreateAccount.email : undefined, password: dataCreateAccount.password, re_password: dataCreateAccount.rePassword, role: dataStepRole.role, @@ -110,7 +111,7 @@ function RegisterPage() { gender: dataUpdateInfo.gender, province_alias: dataAddressStudying.province, district_alias: dataAddressStudying.district, - phone: dataUpdateInfo.phone, + phone: dataCreateAccount?.phone ? dataCreateAccount.phone : undefined, year_of_birth: dataUpdateInfo.birthday?.getFullYear(), school_id: dataAddressStudying?.school_id, organization_code: dataAddressStudying?.organization, @@ -122,11 +123,18 @@ function RegisterPage() { let urlApi = `${API.baseURL}${API.register_teacher}`; const result = await APIBase.apiBaseCaller("POST", urlApi, data); if (result.status) { - setMessageTeacher( - "Đăng ký tài khoản thành công. Vui lòng xác thực để có thể đăng nhập và sử dụng tài khoản." - ); - setPopupMessageRegisterTeacher(true); - setStatusSuccessRegisterTeacher(true); + if(!!dataCreateAccount.phone) { + setMessageTeacher( + "Đăng ký tài khoản thành công. Vui lòng xác thực để có thể đăng nhập và sử dụng tài khoản." + ); + setPopupMessageRegisterTeacher(true); + setStatusSuccessRegisterTeacher(true); + } else { + setStatusRegister({ + type: "success", + message: result.msg, + }); + } } else { if (!isEmpty(result?.message?.errors?.phone[0])) { setMessageTeacher(result?.message?.errors?.phone[0]); @@ -148,11 +156,27 @@ function RegisterPage() { } apiCaller("/api_register/register", "POST", newData).then((res) => { if (res.status) { - setStatusRegister({ - type: "success", - message: res.msg, - }); + if(!!dataCreateAccount.phone) { + setMessageTeacher( + "Đăng ký tài khoản thành công. Vui lòng xác thực để có thể đăng nhập và sử dụng tài khoản." + ); + setPopupMessageRegisterTeacher(true); + setStatusSuccessRegisterTeacher(true); + } else { + setStatusRegister({ + type: "success", + message: res.msg, + }); + } + } else { + setMessageTeacher(result?.msg); + setPopupMessageRegisterTeacher(true); + setStatusSuccessRegisterTeacher(false); } + }).catch((error) => { + setMessageTeacher(error); + setPopupMessageRegisterTeacher(true); + setStatusSuccessRegisterTeacher(false); }); } }; @@ -182,6 +206,7 @@ function RegisterPage() { school: '' }); setDataCreateAccount({ + phone: '', email: "", password: "", rePassword: "", diff --git a/src/_containers/RegisterPage/components/CreateAccount/index.js b/src/_containers/RegisterPage/components/CreateAccount/index.js index 017df4f..c1582d1 100644 --- a/src/_containers/RegisterPage/components/CreateAccount/index.js +++ b/src/_containers/RegisterPage/components/CreateAccount/index.js @@ -5,75 +5,112 @@ import "./index.scss"; import { isEmail } from "../../../../_helpers/validateEmail"; import { apiCaller } from "../../../../_helpers"; import { stepAuthConstants } from "../../../../_constants/auth"; +import { isPhone } from "../../../../_helpers/validatePhone"; +import { renderPhoneIcon } from "../AddressStudying/renderIcon"; const CreateAccount = (props) => { const [email, setEmail] = useState(""); + const [phone, setPhone] = useState(""); const [password, setPassword] = useState(""); const [rePassword, setRePassword] = useState(""); const [emailError, setEmailError] = useState(""); + const [phoneError, setPhoneError] = useState(""); const [pwError, setPwError] = useState(""); const [rePwError, setRePwError] = useState(""); const [cacheEmailPass, setCacheEmailPass] = useState([]); const [cacheEmailFail, setCacheEmailFail] = useState([]); + const [cachePhoneFail, setCachePhoneFail] = useState([]); const [disabledBtn, setDisabledBtn] = useState(false); useEffect(() => { + setPhone(props.data.phone); setEmail(props.data.email); setPassword(props.data.password); setRePassword(props.data.rePassword); }, [props.data]); + const verifyEmail = async () => { + try { + const res = await apiCaller("/api_register/check_email", "POST", { email }) + if (res?.status) { + setCacheEmailPass([...cacheEmailPass, email]); + return true; + } + setEmailError(res?.msg); + return false; + } catch (e) { + setCacheEmailFail([...cacheEmailFail, email]); + if (e === "Email đã tồn tại trên hệ thống.") { + setEmailError( + "Email đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!" + ); + } else { + setEmailError(e); + } + return false + } + } + + const verifyPhone = async () => { + try { + const res = await apiCaller("/api_register/check_phone", "POST", { phone }) + if (res?.status) { + // setCachePhonePass([...cachePhonePass, phone]); + return true; + } + setPhoneError(res?.msg); + return false; + } catch (e) { + setCachePhoneFail([...cachePhoneFail, phone]); + if (e === "Số điện thoại đã tồn tại trên hệ thống.") { + setPhoneError( + "Số điện thoại đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!" + ); + } else { + setPhoneError(e); + } + return false + } + } + async function handleSubmit(e) { - // setSubmitted(true); - // if (validateParam()) { - // dispatch(userActions.udpateInformation(inputs)); - // } e.preventDefault(); - if (!!email && password.length >= 6 && password === rePassword) { - if (cacheEmailPass.includes(email)) { - nextStep(); - return; - } else if (cacheEmailFail.includes(email)) { - setDisabledBtn(true); + let isFormValid = true; + if(validateParam() ) { + if (cacheEmailFail.includes(email)) { setEmailError( "Email đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!" ); + isFormValid = false + } + if (cachePhoneFail.includes(phone)) { + setPhoneError( + "Số điện thoại đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!" + ); + isFormValid = false + } + if (!!phone.length && !cachePhoneFail.includes(phone)) { + const isPhoneValid = await verifyPhone(); + if(!isPhoneValid) isFormValid = false; + } + if (!!email.length && !cacheEmailFail.includes(email)) { + const isEmailValid = await verifyEmail(); + if(!isEmailValid) isFormValid = false; + } + if (isFormValid) { + nextStep(); return; - } else { - await apiCaller("/api_register/check_email", "POST", { - email, - }) - .then((res) => { - if (res.status) { - setCacheEmailPass([...cacheEmailPass, email]); - nextStep(); - setEmailError(""); - setPwError(""); - setRePwError(""); - } - }) - .catch((e) => { - setCacheEmailFail([...cacheEmailFail, email]); - if (e === "Email đã tồn tại trên hệ thống.") { - setDisabledBtn(true); - setEmailError( - "Email đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!" - ); - } else { - setEmailError(e); - } - return; - }); } - return; + checkPhone() + checkEmail(); + checkPw(); + checkRePw(); } - // checkEmail(); - checkPw(); - checkRePw(); } const nextStep = () => { props.setData({ + phone, email, password, rePassword, @@ -81,8 +118,17 @@ const CreateAccount = (props) => { props.setStep(stepAuthConstants.STEP_ACCOUNT_TYPE); }; + const checkPhone = () => { + if (phone.length !== 10 && phone.length !== 11) { + setPhoneError("Số điện thoại hợp lệ có từ 10-11"); + } + if (phone && phone.length && phone[0] !== "0") { + setPhoneError("Định dạng số điện thoại không đúng"); + } + } + const checkEmail = () => { - if (!isEmail(email)) { + if (!!email.length && !isEmail(email)) { setEmailError("Định dạng email không đúng"); } }; @@ -91,6 +137,9 @@ const CreateAccount = (props) => { 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.length > 30) { + setPwError("Mật khẩu chứa tối đa 30 kí tự"); + } }; const checkRePw = () => { @@ -99,8 +148,20 @@ const CreateAccount = (props) => { } }; + const changePhone = (value) => { + const regex = /^[0-9\b]+$/; + if(!regex.test(value) && value !== '') { + return; + } + if (phoneError) { + if (isPhone(value)) { + setPhoneError(""); + } + } + setPhone(value.trim()); + }; + const changeEmail = (value) => { - setDisabledBtn(false); if (emailError) { if (!!value) { setEmailError(""); @@ -110,8 +171,9 @@ const CreateAccount = (props) => { }; const changePassword = (value) => { + if(value?.length > 30) return; if (pwError) { - if (value.length >= 6) { + if (value.length >= 6 && value.length <= 30) { setPwError(""); } } @@ -133,9 +195,15 @@ const CreateAccount = (props) => { const onBlurField = (type) => { switch (type) { case "email": { - // if (email && !emailError) { - // checkEmail(); - // } + if (email && !emailError) { + checkEmail(); + } + return; + } + case "phone": { + if (phone && !phoneError) { + checkPhone(); + } return; } case "password": { @@ -159,15 +227,14 @@ const CreateAccount = (props) => { function validateParam() { if ( - !!email && + (isEmail(email) || !!phone.length) && password.length >= 6 && rePassword === password && password.trim() !== "" && + !emailError && + !phoneError && !disabledBtn ) { - if (emailError) { - return false - } return true; } return false; @@ -234,6 +301,21 @@ const CreateAccount = (props) => { }} autoFocus = {true} > + { + onBlurField("phone"); + }} + autoFocus = {true} + > { if (!fullname) { setNameWarning("Vui lòng nhập họ tên"); } - if (!phone) { - setPhoneWarning("Vui lòng nhập số điện thoại"); - } else if (phone.length !== 10 && phone.length !== 11) { - setPhoneWarning("Số điện thoại hợp lệ có từ 10 -11"); - } else if (phone && phone.length && phone[0] !== "0") { - setPhoneWarning("Định dạng số điện thoại không đúng"); - } } } function validateParam() { - if (fullname.trim() && birthday && gender && phone) { - if (((phone.length != 10 && phone.length != 11) || phone[0] != "0")) - return false + if (fullname.trim() && birthday && gender) { return true; } return false; @@ -222,7 +213,7 @@ const UpdateInformation = (props) => { - { setErrorText={setPhoneWarning} onBlur={onBlurPhone} errorAbsolute={true} - > + > */} {/*
diff --git a/src/_helpers/validatePhone.js b/src/_helpers/validatePhone.js new file mode 100644 index 0000000..7c756eb --- /dev/null +++ b/src/_helpers/validatePhone.js @@ -0,0 +1,4 @@ +export const isPhone = (str) => { + var re = /((0)+([0-9]{9,10}))\b/g; + return re.test(str); +}; \ No newline at end of file