register by phone

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}
             />
+            <RouteRedirectToAdmin
+              path="/:orgLevel/authentication"
+              exact={true}
+              component={AccountAuthentication}
+            />
           <Redirect from="*" to="/" />
         </Switch>
       </Router>

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(
+          if(!!dataCreateAccount.phone) {
-            "Đă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."
+            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);
+            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({
+          if(!!dataCreateAccount.phone) {
-            type: "success",
+            setMessageTeacher(
-            message: res.msg,
+              "Đă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: "",

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 (
     <div className="bg-register rel">
-      <HeaderCloud />
+      {!!registerInfo && 
-      {popupRegisterSuccess &&  <PopUpYesNo message={"Xác thực tài khoản thành công!"} hideButtonNo={true} onClickYes={() => history.replace("/login")} labelYes={"Đồng ý"}/>}
+      (orgLevel === 'namdinh' ? 
+        <HeaderCloud /> 
+        : <HeaderLogoRegister 
+            srcImg={registerInfo?.logo} 
+            name={registerInfo?.name} 
+            color={registerInfo?.color}
+          />
+      )}
+      {popupRegisterSuccess &&  
+        <PopUpYesNo 
+          message={"Xác thực tài khoản thành công!"} 
+          onClickNo={() => history.goBack()} 
+          labelNo='Quay lại' 
+          labelYes={"Đi tới đăng nhập"}
+          onClickYes={() => window.location.replace('https://sundayenglish.com/login')}
+        />
+      }
       <div className="content_1 flex-center-column">
         <div className="flex-center-column container_modal_confirmOTP">
           <ModalConfirmOTP

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) {
+    let isFormValid = true;
-      if (cacheEmailPass.includes(email)) {
+    if(validateParam() ) {
-        nextStep();
+      if (cacheEmailFail.includes(email)) {
-        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!"
         );
+        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)) {
+    if (!!email.length && !isEmail(email)) {
-    //   setEmailError("Định dạng email không đúng");
+      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) {
+        if (email && !emailError) {
-        //   checkEmail();
+          checkEmail();
-        // }
+        }
         return;
       }
-      case "password": {
+      case "phone": {
-        if (password && !pwError) {
+        if (phone && !phoneError) {
-          checkPw();
+          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}
             ></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/RegisterSuccess/index.js

@@ -26,8 +26,8 @@ const RegisterSuccess = ({handleReset}) => {
         </div>
         <div className="success_message">
           <p>Bạn đã đăng ký tài khoản thành công!</p>
-          {/* <p>Email kích hoạt đã được gửi đến địa chỉ email của bạn.</p>
+          <p>Email kích hoạt đã được gửi đến địa chỉ email của bạn.</p>
-          <p>Hãy kiểm tra và kích hoạt tài khoản.</p> */}
+          <p>Hãy kiểm tra và kích hoạt tài khoản.</p>
         </div>
         <div className="back_login">
           {/* <Link to="/login"> */}

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 (fullname.trim() && birthday && gender) {
-      if (((phone.length != 10 && phone.length != 11) || phone[0] != "0"))
-        return false
       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);
+};