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}
>
+