register by phone

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) {
+          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) {
+          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: "",

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]);
 
-  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);
-        setEmailError(
-          "Email đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!"
-        );
-        return;
-      } else {
-        await apiCaller("/api_register/check_email", "POST", {
-          email,
-        })
-          .then((res) => {
-            if (res.status) {
+  const verifyEmail = async () => {
+    try {
+      const res = await apiCaller("/api_register/check_email", "POST", { email })
+      if (res?.status) {
         setCacheEmailPass([...cacheEmailPass, email]);
-              nextStep();
-              setEmailError("");
-              setPwError("");
-              setRePwError("");
+        return true;
       }
-          })
-          .catch((e) => {
+      setEmailError(res?.msg);
+      return false;
+    } 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 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) {
+    e.preventDefault();
+    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;
       }
-    // checkEmail();
+      checkPhone()
+      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}
             ></InputText>
+            <InputText
+              value={phone}
+              setValue={changePhone}
+              type="text"
+              name="phone"
+              placeholder="Nhập số điện thoại xác thực tài khoản"
+              required={true}
+              renderLabelIcon={renderPhoneIcon}
+              errorText={phoneError}
+              setErrorText={setPhoneError}
+              onBlur={() => {
+                onBlurField("phone");
+              }}
+              autoFocus = {true}
+            ></InputText>
             <InputText
               value={password}
               setValue={changePassword}

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) => {
                   </div>
                 </div>
               </div>
-              <InputText
+              {/* <InputText
                 className="field_item"
                 value={phone}
                 setValue={changePhone}
@@ -239,7 +230,7 @@ const UpdateInformation = (props) => {
                 setErrorText={setPhoneWarning}
                 onBlur={onBlurPhone}
                 errorAbsolute={true}
-              ></InputText>
+              ></InputText> */}
             </div>
             {/* <div className="right">
               <div className="text-center field_detail_group_create_account">

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