alex
/
PNSPS-frontend-MaterialUI
1
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

fix username with bug

master
Alex Cheung 1 рік тому
джерело
1a361a5948
коміт
b8af498932
2 змінених файлів з 124 додано та 68 видалено
Розділений перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  1. +50
    -30
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  2. +74
    -38
      src/pages/authentication/auth-forms/CustomFormWizard.js

+ 50
- 30
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) => {
<OutlinedInput
id="username-login"
type="text"
value={formik.values.username}
value={formik.values.username.trim()}
name="username"
onChange={formik.handleChange}
placeholder="用戶登入名稱"
@@ -509,7 +529,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) => {
<OutlinedInput
id="confirmPassword-login"
type={showConfirmPassword ? 'text' : 'password'}
value={formik.values.confirmPassword}
value={formik.values.confirmPassword.trim()}
name="confirmPassword"
onBlur={formik.handleBlur}
onChange={(e) => {
@@ -633,7 +653,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput
id="enCompanyName-login"
type="enCompanyName"
value={formik.values.enCompanyName}
value={formik.values.enCompanyName.trim()}
name="enCompanyName"
onChange={formik.handleChange}
placeholder="與與商業登記證相同如有"
@@ -663,7 +683,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) => {
<Autocomplete
disablePortal
id="address4-combo"
value={selectedAddress4 === null ? null : selectedAddress4}
value={selectedAddress4}
options={address4ComboList}
disabled={checkCountry}
onChange={(event, newValue) => {
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) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
/>
@@ -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) => {
<OutlinedInput
id="enName-login"
type="enName"
value={formik.values.enName}
value={formik.values.enName.trim()}
name="enName"
onChange={formik.handleChange}
placeholder=""
@@ -890,7 +910,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) => {
<OutlinedInput
id="phoneCountryCode-login"
type="phoneCountryCode"
value={formik.values.phoneCountryCode}
value={formik.values.phoneCountryCode.trim()}
name="phoneCountryCode"
// onBlur={formik.handleBlur}
// onChange={formik.handleChange}
@@ -983,7 +1003,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput
id="phone-login"
type="phone"
value={formik.values.phone}
value={formik.values.phone.trim()}
name="phone"
onBlur={formik.handleBlur}
// onChange={formik.handleChange}
@@ -1026,7 +1046,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) => {
<OutlinedInput
id="fax-login"
type="fax"
value={formik.values.fax}
value={formik.values.fax.trim()}
name="fax"
// onBlur={formik.handleBlur}
// onChange={formik.handleChange}
@@ -1186,7 +1206,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"


+ 74
- 38
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) => {
<OutlinedInput
id="username-login"
type="text"
value={formik.values.username}
value={formik.values.username.trim()}
name="username"
onChange={formik.handleChange}
placeholder="用戶登入名稱"
@@ -525,7 +560,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) => {
<OutlinedInput
id="confirmPassword-login"
type={showConfirmPassword ? 'text' : 'password'}
value={formik.values.confirmPassword}
value={formik.values.confirmPassword.trim()}
name="confirmPassword"
onBlur={formik.handleBlur}
onChange={(e) => {
@@ -695,7 +730,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput
id="idNo-login"
type="text"
value={formik.values.idNo}
value={formik.values.idNo.trim()}
name="idNo"
onChange={formik.handleChange}
placeholder="證件號碼"
@@ -729,7 +764,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput
id="checkDigit-login"
type="text"
value={formik.values.checkDigit}
value={formik.values.checkDigit.trim()}
name="checkDigit"
onChange={formik.handleChange}
placeholder="( )"
@@ -754,7 +789,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput
id="idNo-login"
type="text"
value={formik.values.idNo}
value={formik.values.idNo.trim()}
name="idNo"
onChange={formik.handleChange}
placeholder="證件號碼"
@@ -789,7 +824,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput
id="enName-login"
type="enName"
value={formik.values.enName}
value={formik.values.enName.trim()}
name="enName"
onChange={formik.handleChange}
placeholder="與你的身份證明文件相同"
@@ -819,7 +854,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) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
/>
@@ -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) => {
<OutlinedInput
id="phoneCountryCode-login"
type="phoneCountryCode"
value={formik.values.phoneCountryCode}
value={formik.values.phoneCountryCode.trim()}
name="phoneCountryCode"
// onBlur={formik.handleBlur}
// onChange={formik.handleChange}
@@ -1054,7 +1090,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput
id="phone-login"
type="phone"
value={formik.values.phone}
value={formik.values.phone.trim()}
name="phone"
// onBlur={formik.handleBlur}
// onChange={formik.handleChange}
@@ -1098,7 +1134,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) => {
<OutlinedInput
id="fax-login"
type="fax"
value={formik.values.fax}
value={formik.values.fax.trim()}
name="fax"
onBlur={formik.handleBlur}
// onChange={formik.handleChange}
@@ -1256,7 +1292,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) => {
證件號碼:
</Typography>
<Typography id="idNo-login">
{formik.values.idNo} {selectedAddress5=="香港"?'('+formik.values.checkDigit+')':null}
{formik.values.idNo} {selectedIdDocType.type=="HKID"?'('+formik.values.checkDigit+')':null}
</Typography>
</Stack>
</Grid>


Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти