diff --git a/src/App.js b/src/App.js index 6fc9859..4e673e1 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import { import { RegisterPage } from "./_containers/RegisterPage"; import { alertActions } from "./_actions"; import { history } from "./_helpers"; +import { AccountAuthentication } from "./_containers/RegisterPage/components/AccountAuthentication/AccountAuthentication"; import ChooseOrg from "./_containers/RegisterPage/components/ChooseOrg"; function App() { String.prototype.capitalize = function () { @@ -42,6 +43,11 @@ function App() { exact={true} component={RegisterPage} /> + diff --git a/src/_containers/RegisterPage/RegisterPage.js b/src/_containers/RegisterPage/RegisterPage.js index 463f6bc..4c12ebb 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,19 +85,19 @@ 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, }; data.birthday = moment(dataUpdateInfo.birthday).format("YYYY-MM-DD"); setPopupMessageRegisterTeacher(false); - history.push(`/register/authentication`, { data: data }); + history.push(`/${orgLevel}/authentication`, { data: data }); }; const onRegister = async () => { const data = { - email: dataCreateAccount.email, + email: dataCreateAccount?.email ? dataCreateAccount.email : undefined, password: dataCreateAccount.password, re_password: dataCreateAccount.rePassword, role: dataStepRole.role, @@ -109,7 +110,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, @@ -120,11 +121,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]); @@ -143,18 +151,30 @@ function RegisterPage() { const newData = { ...data, class_nickname: dataClassName?.class_nickname, - auto_active: 1 } 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); }); } }; @@ -184,6 +204,7 @@ function RegisterPage() { school: '' }); setDataCreateAccount({ + phone: '', email: "", password: "", rePassword: "", diff --git a/src/_containers/RegisterPage/components/AccountAuthentication/AccountAuthentication.jsx b/src/_containers/RegisterPage/components/AccountAuthentication/AccountAuthentication.jsx index d8b1ca2..02f4873 100644 --- a/src/_containers/RegisterPage/components/AccountAuthentication/AccountAuthentication.jsx +++ b/src/_containers/RegisterPage/components/AccountAuthentication/AccountAuthentication.jsx @@ -1,11 +1,13 @@ -import React from "react"; +import React, { useState } from "react"; import { accountAuthenticationMethods } from "./AccountAuthentication.logic"; -import { HeaderCloud } from "../../../../_components/Header"; +import { HeaderCloud, HeaderTS } from "../../../../_components/Header"; import ModalConfirmOTP from "../../../../_components/Modal/ModalConfirmOTP/ModalConfirmOTP"; import "./AccountAuthentication.scss"; -import { Link } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; import { PopUpYesNo } from "../../../../_components/Popup"; import { history } from "../../../../_helpers"; +import { registerValue } from "../../../../_constants/register"; +import { HeaderLogoRegister } from "../../../../_components/Header/HeaderLogoRegister/HeaderLogoRegister"; // export const SuccessAuthentication = () => { // return ( @@ -55,12 +57,32 @@ const AccountAuthentication = () => { handleGoBack, popupRegisterSuccess, messageReSendCode, + setPopupRegisterSuccess } = accountAuthenticationMethods(); + const params = useParams(); + const orgLevel = params?.orgLevel; + const [registerInfo, setRegisterInfo] = useState(registerValue?.[orgLevel] || undefined); return (
- - {popupRegisterSuccess && history.replace("/login")} labelYes={"Đồng ý"}/>} + {!!registerInfo && + (orgLevel === 'namdinh' ? + + : + )} + {popupRegisterSuccess && + history.goBack()} + labelNo='Quay lại' + labelYes={"Đi tới đăng nhập"} + onClickYes={() => window.location.replace('https://sundayenglish.com/login')} + /> + }
{ 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, @@ -82,15 +119,18 @@ const CreateAccount = (props) => { }; const checkEmail = () => { - // if (!isEmail(email)) { - // setEmailError("Định dạng email không đúng"); - // } + if (!!email.length && !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.length > 30) { + setPwError("Mật khẩu chứa tối đa 30 kí tự"); + } }; const checkRePw = () => { @@ -99,6 +139,19 @@ 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) { @@ -110,8 +163,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,14 +187,14 @@ const CreateAccount = (props) => { const onBlurField = (type) => { switch (type) { case "email": { - // if (email && !emailError) { - // checkEmail(); - // } + if (email && !emailError) { + checkEmail(); + } return; } - case "password": { - if (password && !pwError) { - checkPw(); + case "phone": { + if (phone && !phoneError) { + checkPhone(); } return; } @@ -159,15 +213,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 +287,21 @@ const CreateAccount = (props) => { }} autoFocus = {true} > + { + onBlurField("phone"); + }} + autoFocus = {true} + > {

Bạn đã đăng ký tài khoản thành công!

- {/*

Email kích hoạt đã được gửi đến địa chỉ email của bạn.

-

Hãy kiểm tra và kích hoạt tài khoản.

*/} +

Email kích hoạt đã được gửi đến địa chỉ email của bạn.

+

Hãy kiểm tra và kích hoạt tài khoản.

{/* */} diff --git a/src/_containers/RegisterPage/components/UpdateInformation/index.js b/src/_containers/RegisterPage/components/UpdateInformation/index.js index 889991f..76df50b 100644 --- a/src/_containers/RegisterPage/components/UpdateInformation/index.js +++ b/src/_containers/RegisterPage/components/UpdateInformation/index.js @@ -60,20 +60,11 @@ const UpdateInformation = (props) => { 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