diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index f09460d..15578c3 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/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) => { { - 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} )} + {checkIdDocNumber && ( + + + + )} @@ -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} )} + {checkIdDocNumber && ( + + + + )} } diff --git a/src/translations/en.json b/src/translations/en.json index 774cea2..be28722 100644 --- a/src/translations/en.json +++ b/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", diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 57237cb..d234514 100644 --- a/src/utils/ApiPathConst.js +++ b/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';