From b8af49893258499f7178bd53383266e968b195ce Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Sun, 17 Sep 2023 02:35:38 +0800 Subject: [PATCH] fix username with bug --- .../auth-forms/BusCustomFormWizard.js | 80 ++++++++----- .../auth-forms/CustomFormWizard.js | 112 ++++++++++++------ 2 files changed, 124 insertions(+), 68 deletions(-) diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index e3e3920..06f3220 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -32,6 +32,7 @@ import { strengthColorChi, strengthIndicator } from 'utils/password-strength'; import axios from "axios"; import {POST_PUBLIC_USER_REGISTER, POST_CAPTCHA} from "utils/ApiPathConst"; // import * as HttpUtils from 'utils/HttpUtils'; +import * as ComboData from "utils/ComboData"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; @@ -83,16 +84,14 @@ const BusCustomFormWizard = (props) => { }; const [selectedAddress4, setSelectedAddress4] = useState(null); - const [selectedAddress5, setSelectedAddress5] = useState("香港"); + const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]); const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [isValid, setisValid] = useState(false); const [checkCountry, setCheckCountry] = useState(false); - const address4ComboList = - ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", - "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; - const address5ComboList = ["香港","內地","澳門"]; + const address4ComboList = ComboData.district; + const address5ComboList = ComboData.country; const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評" @@ -247,6 +246,8 @@ const BusCustomFormWizard = (props) => { useEffect(() => { props.step ==2?_onSubmit():null; + onCaptchaChange(); + checkDataField(values) }, [props.step]) const {handleSubmit} = useForm({}) @@ -342,8 +343,14 @@ const BusCustomFormWizard = (props) => { } function handleUserName(username) { + var symbol = /^(?=.*[!@#%&])/; + var space = /\s/; if (username.length < 6) { return false; + } else if (username.match(symbol)) { + return false; + }else if (username.match(space)) { + return false; } else { return true; } @@ -360,6 +367,7 @@ const BusCustomFormWizard = (props) => { var upperCase = /[A-Z]/g; var numbers = /[0-9]/g; var symbol = /^(?=.*[!@#%&])/; + var space = /\s/; if (!new_pass.match(lowerCase)) { return false; } else if (!new_pass.match(upperCase)) { @@ -369,8 +377,12 @@ const BusCustomFormWizard = (props) => { } else if (!new_pass.match(symbol)) { return false; } else if (new_pass.length < 8) { - return false; - } else { + return false; + } + else if (new_pass.match(space)) { + return false; + }else { + // console.log("password true") return true; } } @@ -404,10 +416,15 @@ const BusCustomFormWizard = (props) => { faxCountryCode:'852', brExpiryDate:'', brNo:'', + emailConfirm:'', + captchaField:'' }), validationSchema:yup.object().shape({ - username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), + username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱') + .matches(/^[aA-zZ0-9\s]+$/, "用戶名稱不包含特殊字符") + .matches(/^\S*$/, '用戶名稱不包含空格'), password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼') + .matches(/^\S*$/, '密碼不包含空格') .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') .matches(/^(?=.*[0-9])/, '請包括最少1個數字') @@ -435,8 +452,11 @@ const BusCustomFormWizard = (props) => { const handleReset = (resetForm) => { resetForm(); setSelectedAddress4("") + setSelectedAddress5(ComboData.country[0]) + setCheckCountry(false) setFileList([]) setFileListData([]) + onCaptchaChange() }; const { values } = formik @@ -473,7 +493,7 @@ const BusCustomFormWizard = (props) => { { error={Boolean(formik.touched.password && formik.errors.password)} id="password-signup" type={showPassword ? 'text' : 'password'} - value={formik.values.password} + value={formik.values.password.trim()} name="password" onChange={(e) => { formik.handleChange(e); @@ -565,7 +585,7 @@ const BusCustomFormWizard = (props) => { { @@ -633,7 +653,7 @@ const BusCustomFormWizard = (props) => { { error={Boolean(formik.touched.chCompanyName && formik.errors.chCompanyName)} id="chCompanyName-signup" type="text" - value={formik.values.chCompanyName} + value={formik.values.chCompanyName.trim()} name="chCompanyName" onChange={formik.handleChange} placeholder="與與商業登記證相同如有" @@ -690,7 +710,7 @@ const BusCustomFormWizard = (props) => { error={Boolean(formik.touched.brNo && formik.errors.brNo)} id="brNo-signup" type="text" - value={formik.values.brNo} + value={formik.values.brNo.trim()} name="brNo" onChange={formik.handleChange} placeholder="與與商業登記證相同如有" @@ -722,6 +742,7 @@ const BusCustomFormWizard = (props) => { onChange={formik.handleChange} placeholder="與與商業登記證相同如有" inputProps={{ + min: new Date().toISOString().split("T")[0], onKeyDown: (e) => { if (e.key === 'Enter') { e.preventDefault(); @@ -745,7 +766,7 @@ const BusCustomFormWizard = (props) => { fullWidth error={Boolean(formik.touched.address1 && formik.errors.address1)} id="address1-signup" - value={formik.values.address1} + value={formik.values.address1.trim()} name="address1" onChange={formik.handleChange} placeholder="第一行" @@ -762,7 +783,7 @@ const BusCustomFormWizard = (props) => { fullWidth error={Boolean(formik.touched.address2 && formik.errors.address2)} id="address2-signup" - value={formik.values.address2} + value={formik.values.address2.trim()} name="address2" onChange={formik.handleChange} placeholder="第二行" @@ -778,7 +799,7 @@ const BusCustomFormWizard = (props) => { fullWidth error={Boolean(formik.touched.address3 && formik.errors.address3)} id="address3-signup" - value={formik.values.address3} + value={formik.values.address3.trim()} name="address3" onChange={formik.handleChange} placeholder="第三行" @@ -793,15 +814,12 @@ const BusCustomFormWizard = (props) => { { - if (newValue !== null){ - setSelectedAddress4(newValue); - } + setSelectedAddress4(newValue); }} - sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} renderInput={(params) => } /> @@ -816,9 +834,11 @@ const BusCustomFormWizard = (props) => { if(newValue=='香港'){ setCheckCountry(false) }else{ + setSelectedAddress4(""); setCheckCountry(true) } }else{ + setSelectedAddress4(""); setCheckCountry(true) } }} @@ -856,7 +876,7 @@ const BusCustomFormWizard = (props) => { { error={Boolean(formik.touched.email && formik.errors.email)} id="email-login" type="email" - value={formik.values.email} + value={formik.values.email.trim()} name="email" onChange={formik.handleChange} placeholder="電郵" @@ -920,7 +940,7 @@ const BusCustomFormWizard = (props) => { error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} id="emailConfirm-login" type="email" - value={formik.values.emailConfirm} + value={formik.values.emailConfirm.trim()} name="emailConfirm" // onBlur={formik.handleBlur} onChange={formik.handleChange} @@ -956,7 +976,7 @@ const BusCustomFormWizard = (props) => { { { error={Boolean(formik.touched.fax && formik.errors.fax)} id="faxCountryCode-login" type="faxCountryCode" - value={formik.values.faxCountryCode} + value={formik.values.faxCountryCode.trim()} name="faxCountryCode" // onBlur={formik.handleBlur} // onChange={formik.handleChange} @@ -1051,7 +1071,7 @@ const BusCustomFormWizard = (props) => { { fullWidth id="captchaField" type="text" - value={formik.values.captchaField} + value={formik.values.captchaField.trim()} onBlur={formik.handleBlur} error={Boolean(formik.touched.captchaField && formik.errors.captchaField)} name="captchaField" diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 506a8f3..b4606d1 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -31,7 +31,7 @@ import { strengthColorChi, strengthIndicator } from 'utils/password-strength'; import axios from "axios"; import {POST_PUBLIC_USER_REGISTER,POST_CAPTCHA} from "utils/ApiPathConst"; // import * as HttpUtils from 'utils/HttpUtils'; -import * as ComboData from "../../../utils/ComboData"; +import * as ComboData from "utils/ComboData"; import Loadable from 'components/Loadable'; import { lazy } from 'react'; @@ -143,7 +143,7 @@ const CustomFormWizard = (props) => { data.captchaField&& handlePassword(data.password)&& handleEmail(data.email)&& - handleIdNo(data.idNo,selectedIdDocType.type)&& + handleIdNo(data.idNo,selectedIdDocType.type,data.checkDigit)&& handlePhone(data.phone)&& handleUsername(data.username)&& handleCaptcha(data.captchaField) @@ -242,6 +242,8 @@ const CustomFormWizard = (props) => { useEffect(() => { props.step ==2?_onSubmit():null; + onCaptchaChange(); + checkDataField(values) }, [props.step]) const {handleSubmit} = useForm({}) @@ -332,20 +334,25 @@ const CustomFormWizard = (props) => { } } - function handlePhone(value) { - if (value.length < 8) { + function handlePhone(phone) { + if (phone.length < 8) { return false; } else { - console.log("Phone true") + // console.log("Phone true") return true; } } - function handleUsername(value) { - if (value.length < 6) { + function handleUsername(username) { + var symbol = /^(?=.*[!@#%&])/; + var space = /\s/; + if (username.length < 6) { + return false; + } else if (username.match(symbol)) { + return false; + }else if (username.match(space)) { return false; } else { - console.log("Username true") return true; } } @@ -354,15 +361,19 @@ const CustomFormWizard = (props) => { return captchaField == captcha; } - function handleIdNo(idNo,selectedIdDocType) { - var upperCase = /[A-Z]/g; - if (!idNo.match(upperCase)&&selectedIdDocType=="HKID") { + function handleIdNo(idNo,selectedIdDocType,checkDigit) { + var pattern = /^[A-Z][0-9]*$/; + var space = /\s/; + if (!idNo.match(pattern)&&selectedIdDocType=="HKID" + &&!checkDigit=="") { return false; } - else if (idNo.length < 7) { + else if (idNo.match(space)) { + return false; + }else if (idNo.length < 7) { return false; } else { - console.log("IdNo true") + // console.log("IdNo true") return true; } } @@ -374,6 +385,7 @@ const CustomFormWizard = (props) => { var upperCase = /[A-Z]/g; var numbers = /[0-9]/g; var symbol = /^(?=.*[!@#%&])/; + var space = /\s/; if (!new_pass.match(lowerCase)) { return false; } else if (!new_pass.match(upperCase)) { @@ -384,8 +396,11 @@ const CustomFormWizard = (props) => { return false; } else if (new_pass.length < 8) { return false; - } else { - console.log("password true") + } + else if (new_pass.match(space)) { + return false; + }else { + // console.log("password true") return true; } } @@ -420,11 +435,15 @@ const CustomFormWizard = (props) => { submit: null, fax:'', faxCountryCode:'852', - idDocType:'' + idDocType:'', + captchaField:'' }), validationSchema:yup.object().shape({ - username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), + username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱') + .matches(/^[aA-zZ0-9\s]+$/, "用戶名稱不包含特殊字符") + .matches(/^\S*$/, '用戶名稱不包含空格'), password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼') + .matches(/^\S*$/, '密碼不包含空格') .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') .matches(/^(?=.*[0-9])/, '請包括最少1個數字') @@ -437,7 +456,20 @@ const CustomFormWizard = (props) => { address3: yup.string().max(255).required('請輸入第三行地址'), email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'), emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'), - idNo: yup.string().min(7,"請輸入證件號碼").required('請輸入證件號碼'), + idNo: yup.string().required('請輸入證件號碼') + .matches(/^[aA-zZ0-9\s]+$/, "證件號碼不包含特殊字符") + .matches(/^\S*$/, '證件號碼不包含空格') + .test('checkIDCardFormat', '請輸入香港身份證號碼', function(value) { + const idDocType = selectedIdDocType.type; + var pattern = /^[A-Z][0-9]*$/; + if(value!==undefined){ + if (!value.match(pattern)&&idDocType=="HKID"&&value.length<7) { + return false + } else { + return true + } + } + }), checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'), idDocType: yup.string().max(255).required('請輸入證件類別'), phoneCountryCode: yup.string().min(2,'請輸入最少2位數字').required('請輸入國際區號'), @@ -451,10 +483,13 @@ const CustomFormWizard = (props) => { const handleReset = (resetForm) => { resetForm(); setSelectedAddress4("") + setSelectedAddress5(ComboData.country[0]) + setCheckCountry(false) setSelectedIdDocType({}) setSelectedIdDocInputType(""); setFileList([]) setFileListData([]) + onCaptchaChange() // setSelectedIdDocLabel("") }; @@ -489,7 +524,7 @@ const CustomFormWizard = (props) => { { error={Boolean(formik.touched.password && formik.errors.password)} id="password-signup" type={showPassword ? 'text' : 'password'} - value={formik.values.password} + value={formik.values.password.trim()} name="password" onChange={(e) => { formik.handleChange(e); @@ -581,7 +616,7 @@ const CustomFormWizard = (props) => { { @@ -695,7 +730,7 @@ const CustomFormWizard = (props) => { { { { { error={Boolean(formik.touched.chName && formik.errors.chName)} id="chName-signup" type="text" - value={formik.values.chName} + value={formik.values.chName.trim()} name="chName" onChange={formik.handleChange} placeholder="與你的身份證明文件相同" @@ -848,7 +883,7 @@ const CustomFormWizard = (props) => { fullWidth error={Boolean(formik.touched.address1 && formik.errors.address1)} id="address1-signup" - value={formik.values.address1} + value={formik.values.address1.trim()} name="address1" onChange={formik.handleChange} placeholder="第一行" @@ -865,7 +900,7 @@ const CustomFormWizard = (props) => { fullWidth error={Boolean(formik.touched.address2 && formik.errors.address2)} id="address2-signup" - value={formik.values.address2} + value={formik.values.address2.trim()} name="address2" onChange={formik.handleChange} placeholder="第二行" @@ -881,7 +916,7 @@ const CustomFormWizard = (props) => { fullWidth error={Boolean(formik.touched.address3 && formik.errors.address3)} id="address3-signup" - value={formik.values.address3} + value={formik.values.address3.trim()} name="address3" onChange={formik.handleChange} placeholder="第三行" @@ -902,7 +937,6 @@ const CustomFormWizard = (props) => { onChange={(event, newValue) => { setSelectedAddress4(newValue); }} - sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} renderInput={(params) => } /> @@ -917,9 +951,11 @@ const CustomFormWizard = (props) => { if(newValue=='香港'){ setCheckCountry(false) }else{ + setSelectedAddress4(""); setCheckCountry(true) } }else{ + setSelectedAddress4(""); setCheckCountry(true) } }} @@ -961,7 +997,7 @@ const CustomFormWizard = (props) => { error={Boolean(formik.touched.email && formik.errors.email)} id="email-login" type="email" - value={formik.values.email} + value={formik.values.email.trim()} name="email" onChange={formik.handleChange} placeholder="電郵" @@ -991,7 +1027,7 @@ const CustomFormWizard = (props) => { error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} id="emailConfirm-login" type="email" - value={formik.values.emailConfirm} + value={formik.values.emailConfirm.trim()} name="emailConfirm" // onBlur={formik.handleBlur} onChange={formik.handleChange} @@ -1027,7 +1063,7 @@ const CustomFormWizard = (props) => { { { error={Boolean(formik.touched.fax && formik.errors.fax)} id="faxCountryCode-login" type="faxCountryCode" - value={formik.values.faxCountryCode} + value={formik.values.faxCountryCode.trim()} name="faxCountryCode" // onChange={formik.handleChange} onChange={(event) => { @@ -1123,7 +1159,7 @@ const CustomFormWizard = (props) => { { fullWidth id="captchaField" type="text" - value={formik.values.captchaField} + value={formik.values.captchaField.trim()} onBlur={formik.handleBlur} error={Boolean(formik.touched.captchaField && formik.errors.captchaField)} name="captchaField" @@ -1338,7 +1374,7 @@ const CustomFormWizard = (props) => { 證件號碼: - {formik.values.idNo} {selectedAddress5=="香港"?'('+formik.values.checkDigit+')':null} + {formik.values.idNo} {selectedIdDocType.type=="HKID"?'('+formik.values.checkDigit+')':null}