update idNo check

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -25,7 +25,7 @@ import * as yup from 'yup';
 import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
 // import {apiPath} from "auth/utils";
 import axios from "axios";
-import { POST_USERNAME, POST_USER_EMAIL, POST_CAPTCHA, POST_PUBLIC_USER_REGISTER  } from "utils/ApiPathConst";
+import { POST_USERNAME, POST_USER_EMAIL, POST_CAPTCHA, POST_PUBLIC_USER_REGISTER, POST_IDNO   } from "utils/ApiPathConst";
 // import * as HttpUtils from 'utils/HttpUtils';
 import * as ComboData from "utils/ComboData";
 
@@ -96,7 +96,7 @@ const CustomFormWizard = (props) => {
     };
 
     const [selectedIdDocType, setSelectedIdDocType] = useState({});
-    const [selectedIdDocInputType, setSelectedIdDocInputType] = useState("");
+    const [selectedIdDocInputType, setSelectedIdDocInputType] = useState();
     const [selectedAddress4, setSelectedAddress4] = useState(null);
     const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
     const [termsAndConAccept, setTermsAndConAccept] = useState(false);
@@ -106,6 +106,13 @@ const CustomFormWizard = (props) => {
     const username = document.getElementById("username-login")
     const [checkUsername, setCheckUsername] = useState(false);
     const [checkUsernameBlur, setCheckUsernameBlur] = useState(false)
+    const idDocNumber = document.getElementById("idNo-login")
+    const [checkIdDocNumber, setCheckIdDocNumber] = useState(false)
+    const [checkIdDocNumberBlur, setCheckIdDocNumberBlur] = useState(false)
+    const [idDocHKIDNumber, setIdDocHKIDNumber] = useState(document.getElementById("idNo-hkid-login"))
+    const [checkIdDocHKIDNumberBlur, setCheckIdDocHKIDNumberBlur] = useState(false)
+    const [checkDigit, setCheckDigit] = useState(document.getElementById("checkDigit-login"))
+    const [checkCheckDigitBlur, setCheckCheckDigitBlur] = useState(false)
     const email = document.getElementById("email-login")
     const [checkEmail, setCheckEmail] = useState(false)
     const [checkEmailBlur, setCheckEmailBlur] = useState(false)
@@ -120,24 +127,50 @@ const CustomFormWizard = (props) => {
             onCaptchaChange();
         }
     }, []);
+    
+    useEffect(() => {
+        if (selectedIdDocType.type === "HKID"){
+            setIdDocHKIDNumber(document.getElementById("idNo-hkid-login"))
+            setCheckDigit(document.getElementById("checkDigit-login"))
+            // setTimeout(() => {
+            // }, 1000);
+        }
+    }, [selectedIdDocType]);
 
     const handleCheckUsername = async () => {
         if (values?.username) {
-            const response = await axios.post(`${POST_USERNAME}`, {
-                u1: values.username,
-            })
-            setCheckUsername((Number(response.data[0]) === 1))
-            return Number(response.data[0]) === 1
+            if (handleUsername(values.username)){
+                const response = await axios.post(`${POST_USERNAME}`, {
+                    u1: values.username,
+                })
+                setCheckUsername((Number(response.data[0]) === 1))
+                return Number(response.data[0]) === 1
+            }
+        }
+    }
+
+    const handleCheckIdDocNumber = async () => {
+        if (values?.idNo) {
+            if (handleIdNo(values.idNo, selectedIdDocType.type, values.checkDigit)){
+                const response = await axios.post(`${POST_IDNO}`, {
+                    i1: values.idNo,
+                })
+                console.log(response.data.Vaild)
+                setCheckIdDocNumber(response.data.Vaild === false)
+                return response.data.Vaild === false
+            }
         }
     }
 
     const handleCheckEmail = async () => {
         if (values?.email) {
-            const response = await axios.post(`${POST_USER_EMAIL}`, {              
-                e1: values.email,
-            })
-            setCheckEmail((Number(response.data[0]) === 1))
-            return Number(response.data[0]) === 1
+            if(handleEmail(values.email)){
+                const response = await axios.post(`${POST_USER_EMAIL}`, {              
+                    e1: values.email,
+                })
+                setCheckEmail((Number(response.data[0]) === 1))
+                return Number(response.data[0]) === 1
+            }
         }
     }
 
@@ -156,6 +189,51 @@ const CustomFormWizard = (props) => {
         }
     }, [checkUsernameBlur])
 
+    useEffect(() => {
+        if (idDocNumber) {
+            idDocNumber.addEventListener("blur", function () {
+                setCheckIdDocNumberBlur(true)
+            })
+        }
+    }, [idDocNumber])
+
+    useEffect(() => {
+        if (checkIdDocNumberBlur) {
+            handleCheckIdDocNumber()
+            setCheckIdDocNumberBlur(false)
+        }
+    }, [checkIdDocNumberBlur])
+
+    useEffect(() => {
+        if (idDocHKIDNumber) {
+            idDocHKIDNumber.addEventListener("blur", function () {
+                setCheckIdDocHKIDNumberBlur(true)
+            })
+        }
+    }, [idDocHKIDNumber])
+
+    useEffect(() => {
+        if (checkIdDocHKIDNumberBlur) {
+            handleCheckIdDocNumber()
+            setCheckIdDocHKIDNumberBlur(false)
+        }
+    }, [checkIdDocHKIDNumberBlur])
+
+    useEffect(() => {
+        if (checkDigit) {
+            checkDigit.addEventListener("blur", function () {
+                setCheckCheckDigitBlur(true)
+            })
+        }
+    }, [checkDigit])
+
+    useEffect(() => {
+        if (checkCheckDigitBlur) {
+            handleCheckIdDocNumber()
+            setCheckCheckDigitBlur(false)
+        }
+    }, [checkCheckDigitBlur])
+
     useEffect(() => {
         if (email) {
             email.addEventListener("blur", function () {
@@ -212,7 +290,8 @@ const CustomFormWizard = (props) => {
             handlePhone(data.phone) &&
             handleUsername(data.username) &&
             !checkUsername &&
-            !checkEmail
+            !checkEmail &&
+            !checkIdDocNumber
         ) {
             setisValid(true)
             return isValid
@@ -985,12 +1064,12 @@ const CustomFormWizard = (props) => {
                                                 <Grid item xs={9} md={5}>
                                                     <Stack spacing={1} sx={{ mr: { md: 1 } }}>
                                                         <OutlinedInput
-                                                            id="idNo-login"
+                                                            id="idNo-hkid-login"
                                                             type="text"
                                                             name="idNo"
                                                             value={formik.values.idNo}
                                                             onChange={async (e) => {
-                                                                const ele = document.getElementById('idNo-login')
+                                                                const ele = document.getElementById('idNo-hkid-login')
                                                                 const startPos = ele.selectionStart
                                                                 if (e.type === "change") {
                                                                     if (!(e.target.value.match(/\s/g))) {
@@ -1006,7 +1085,7 @@ const CustomFormWizard = (props) => {
                                                             placeholder={intl.formatMessage({ id: 'idDocNumber' })}
                                                             fullWidth
                                                             sx={{ mr: 1 }}
-                                                            error={Boolean(formik.touched.idNo && formik.errors.idNo)}
+                                                            error={Boolean(formik.touched.idNo && formik.errors.idNo && checkIdDocNumber)}
                                                             onBlur={formik.handleBlur}
                                                             inputProps={{
                                                                 maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18,
@@ -1028,6 +1107,11 @@ const CustomFormWizard = (props) => {
                                                                 {formik.errors.checkDigit}
                                                             </FormHelperText>
                                                         )}
+                                                        {checkIdDocNumber && (
+                                                            <FormHelperText error id="helper-text-idNo-signup">
+                                                                <FormattedMessage id="usernameTaken" />
+                                                            </FormHelperText>
+                                                        )}
                                                     </Stack>
                                                 </Grid>
                                                 <Grid item xs={3} md={1}>
@@ -1086,7 +1170,7 @@ const CustomFormWizard = (props) => {
                                                         placeholder={intl.formatMessage({ id: 'idDocNumber' })}
                                                         fullWidth
                                                         sx={{ mr: 1 }}
-                                                        error={Boolean(formik.touched.idNo && formik.errors.idNo)}
+                                                        error={Boolean(formik.touched.idNo && formik.errors.idNo && checkIdDocNumber)}
                                                         onBlur={formik.handleBlur}
                                                         inputProps={{
                                                             maxLength: 18,
@@ -1102,6 +1186,11 @@ const CustomFormWizard = (props) => {
                                                             {formik.errors.idNo}
                                                         </FormHelperText>
                                                     )}
+                                                    {checkIdDocNumber && (
+                                                        <FormHelperText error id="helper-text-idNo-signup">
+                                                            <FormattedMessage id="usernameTaken" />
+                                                        </FormHelperText>
+                                                    )}
                                                 </Stack>
                                             </Grid>
                                         }

src/translations/en.json

@@ -198,6 +198,7 @@
   "createOrReActivate": "Create account",
   "usernameTaken": "This user login name has been registered, please use another user login name",
   "userRegistered": "This user has already registered. Please return to the login page and log in.",
+  "idNoTaken": "This user login name has been registered, please use another user login name",
 
   "user": "User",
   "personalUser": "Personal User",

src/utils/ApiPathConst.js

@@ -95,6 +95,7 @@ export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';
 export const POST_IAMSMART_USER_REGISTER = apiPath+'/user/smart/register';
 export const POST_USERNAME = apiPath+'/user/checkU1';
 export const POST_USER_EMAIL = apiPath+'/user/checkE1';
+export const POST_IDNO = apiPath+'/user/checkI1';
 export const GET_ID = apiPath+'/user/verifyID';
 export const GET_VERIFY_USER_ACCOUNT = apiPath+'/user/verifyEmail';
 export const GET_FORGOT_PASSWORD_VERIFY_USER_ACCOUNT = apiPath+'/user/verifyForgotPasswordEmail';