alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge remote-tracking branch 'remotes/origin/uat/time-box-1'

master
Anna Ho 1 year ago
parent
c5cc39931d b8af498932
commit
e8d0721a07
4 changed files with 128 additions and 72 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/auth/index.js
  2. +3
    -3
      src/pages/authentication/auth-forms/AuthLoginCustom.js
  3. +50
    -30
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  4. +74
    -38
      src/pages/authentication/auth-forms/CustomFormWizard.js

+ 1
- 1
src/auth/index.js View File

@@ -58,7 +58,7 @@ export const handleLogoutFunction = () => {
} }
) )


console.log("logout");
// console.log("logout");
// ** Remove user, accessToken & refreshToken from localStorage // ** Remove user, accessToken & refreshToken from localStorage
localStorage.removeItem('userData') localStorage.removeItem('userData')
localStorage.removeItem('accessToken') localStorage.removeItem('accessToken')


+ 3
- 3
src/pages/authentication/auth-forms/AuthLoginCustom.js View File

@@ -41,7 +41,7 @@ import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
import {useDispatch} from "react-redux"; import {useDispatch} from "react-redux";
import {handleLogin} from "auth/index"; import {handleLogin} from "auth/index";
import useJwt from "../../../auth/jwt/useJwt"; import useJwt from "../../../auth/jwt/useJwt";
import { handleLogoutFunction } from 'auth/index';
// ============================|| FIREBASE - LOGIN ||============================ // // ============================|| FIREBASE - LOGIN ||============================ //


const AuthLoginCustom = () => { const AuthLoginCustom = () => {
@@ -65,11 +65,12 @@ const AuthLoginCustom = () => {


const tryLogin = () => { const tryLogin = () => {
if(isValid){ if(isValid){
dispatch(handleLogoutFunction());
// setSumitting(true) // setSumitting(true)
useJwt useJwt
.login({username: values.username, password: values.password}) .login({username: values.username, password: values.password})
.then((response) => { .then((response) => {
// console.log("123")
console.log(response)
const userData = { const userData = {
id: response.data.id, id: response.data.id,
fullenName: response.data.name, fullenName: response.data.name,
@@ -92,7 +93,6 @@ const AuthLoginCustom = () => {
console.error(error.response.data.error) console.error(error.response.data.error)
setErrorMassage(error.response.data.error) setErrorMassage(error.response.data.error)
setOpen(true) setOpen(true)
console.log("321")
}); });
}else{ }else{
setOpen(true) setOpen(true)


+ 50
- 30
src/pages/authentication/auth-forms/BusCustomFormWizard.js View File

@@ -32,6 +32,7 @@ import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import axios from "axios"; import axios from "axios";
import {POST_PUBLIC_USER_REGISTER, POST_CAPTCHA} from "utils/ApiPathConst"; import {POST_PUBLIC_USER_REGISTER, POST_CAPTCHA} from "utils/ApiPathConst";
// import * as HttpUtils from 'utils/HttpUtils'; // import * as HttpUtils from 'utils/HttpUtils';
import * as ComboData from "utils/ComboData";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
@@ -83,16 +84,14 @@ const BusCustomFormWizard = (props) => {
}; };


const [selectedAddress4, setSelectedAddress4] = useState(null); const [selectedAddress4, setSelectedAddress4] = useState(null);
const [selectedAddress5, setSelectedAddress5] = useState("香港");
const [selectedAddress5, setSelectedAddress5] = useState(ComboData.country[0]);
const [termsAndConAccept, setTermsAndConAccept] = useState(false); const [termsAndConAccept, setTermsAndConAccept] = useState(false);
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
const [isValid, setisValid] = useState(false); const [isValid, setisValid] = useState(false);
const [checkCountry, setCheckCountry] = useState(false); const [checkCountry, setCheckCountry] = useState(false);
const address4ComboList =
["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
"坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
const address5ComboList = ["香港","內地","澳門"];
const address4ComboList = ComboData.district;
const address5ComboList = ComboData.country;
const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n" const termsAndCon = "此網址由香港特別行政區政府物流服務署製作及管理。本署會盡力確保網址上的資料無誤，\n"
+ "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址" + "但有絕對酌情權隨時刪除、暫停登載或編輯各項資料而無須給予任何理由。\n由於任何與網址"
+ "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評" + "內資料有關的理由或原因，而導致出現申索、損失或損害，本署概不負責。\n使用者須自行評"
@@ -247,6 +246,8 @@ const BusCustomFormWizard = (props) => {


useEffect(() => { useEffect(() => {
props.step ==2?_onSubmit():null; props.step ==2?_onSubmit():null;
onCaptchaChange();
checkDataField(values)
}, [props.step]) }, [props.step])


const {handleSubmit} = useForm({}) const {handleSubmit} = useForm({})
@@ -342,8 +343,14 @@ const BusCustomFormWizard = (props) => {
} }


function handleUserName(username) { function handleUserName(username) {
var symbol = /^(?=.*[!@#%&])/;
var space = /\s/;
if (username.length < 6) { if (username.length < 6) {
return false; return false;
} else if (username.match(symbol)) {
return false;
}else if (username.match(space)) {
return false;
} else { } else {
return true; return true;
} }
@@ -360,6 +367,7 @@ const BusCustomFormWizard = (props) => {
var upperCase = /[A-Z]/g; var upperCase = /[A-Z]/g;
var numbers = /[0-9]/g; var numbers = /[0-9]/g;
var symbol = /^(?=.*[!@#%&])/; var symbol = /^(?=.*[!@#%&])/;
var space = /\s/;
if (!new_pass.match(lowerCase)) { if (!new_pass.match(lowerCase)) {
return false; return false;
} else if (!new_pass.match(upperCase)) { } else if (!new_pass.match(upperCase)) {
@@ -369,8 +377,12 @@ const BusCustomFormWizard = (props) => {
} else if (!new_pass.match(symbol)) { } else if (!new_pass.match(symbol)) {
return false; return false;
} else if (new_pass.length < 8) { } 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; return true;
} }
} }
@@ -404,10 +416,15 @@ const BusCustomFormWizard = (props) => {
faxCountryCode:'852', faxCountryCode:'852',
brExpiryDate:'', brExpiryDate:'',
brNo:'', brNo:'',
emailConfirm:'',
captchaField:''
}), }),
validationSchema:yup.object().shape({ 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('請輸入密碼') password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
.matches(/^\S*$/, '密碼不包含空格')
.matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母')
.matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母')
.matches(/^(?=.*[0-9])/, '請包括最少1個數字') .matches(/^(?=.*[0-9])/, '請包括最少1個數字')
@@ -435,8 +452,11 @@ const BusCustomFormWizard = (props) => {
const handleReset = (resetForm) => { const handleReset = (resetForm) => {
resetForm(); resetForm();
setSelectedAddress4("") setSelectedAddress4("")
setSelectedAddress5(ComboData.country[0])
setCheckCountry(false)
setFileList([]) setFileList([])
setFileListData([]) setFileListData([])
onCaptchaChange()
}; };


const { values } = formik const { values } = formik
@@ -473,7 +493,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="username-login" id="username-login"
type="text" type="text"
value={formik.values.username}
value={formik.values.username.trim()}
name="username" name="username"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="用戶登入名稱" placeholder="用戶登入名稱"
@@ -509,7 +529,7 @@ const BusCustomFormWizard = (props) => {
error={Boolean(formik.touched.password && formik.errors.password)} error={Boolean(formik.touched.password && formik.errors.password)}
id="password-signup" id="password-signup"
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={formik.values.password}
value={formik.values.password.trim()}
name="password" name="password"
onChange={(e) => { onChange={(e) => {
formik.handleChange(e); formik.handleChange(e);
@@ -565,7 +585,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="confirmPassword-login" id="confirmPassword-login"
type={showConfirmPassword ? 'text' : 'password'} type={showConfirmPassword ? 'text' : 'password'}
value={formik.values.confirmPassword}
value={formik.values.confirmPassword.trim()}
name="confirmPassword" name="confirmPassword"
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
onChange={(e) => { onChange={(e) => {
@@ -633,7 +653,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="enCompanyName-login" id="enCompanyName-login"
type="enCompanyName" type="enCompanyName"
value={formik.values.enCompanyName}
value={formik.values.enCompanyName.trim()}
name="enCompanyName" name="enCompanyName"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與與商業登記證相同如有" placeholder="與與商業登記證相同如有"
@@ -663,7 +683,7 @@ const BusCustomFormWizard = (props) => {
error={Boolean(formik.touched.chCompanyName && formik.errors.chCompanyName)} error={Boolean(formik.touched.chCompanyName && formik.errors.chCompanyName)}
id="chCompanyName-signup" id="chCompanyName-signup"
type="text" type="text"
value={formik.values.chCompanyName}
value={formik.values.chCompanyName.trim()}
name="chCompanyName" name="chCompanyName"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與與商業登記證相同如有" placeholder="與與商業登記證相同如有"
@@ -690,7 +710,7 @@ const BusCustomFormWizard = (props) => {
error={Boolean(formik.touched.brNo && formik.errors.brNo)} error={Boolean(formik.touched.brNo && formik.errors.brNo)}
id="brNo-signup" id="brNo-signup"
type="text" type="text"
value={formik.values.brNo}
value={formik.values.brNo.trim()}
name="brNo" name="brNo"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與與商業登記證相同如有" placeholder="與與商業登記證相同如有"
@@ -722,6 +742,7 @@ const BusCustomFormWizard = (props) => {
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與與商業登記證相同如有" placeholder="與與商業登記證相同如有"
inputProps={{ inputProps={{
min: new Date().toISOString().split("T")[0],
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
@@ -745,7 +766,7 @@ const BusCustomFormWizard = (props) => {
fullWidth fullWidth
error={Boolean(formik.touched.address1 && formik.errors.address1)} error={Boolean(formik.touched.address1 && formik.errors.address1)}
id="address1-signup" id="address1-signup"
value={formik.values.address1}
value={formik.values.address1.trim()}
name="address1" name="address1"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="第一行" placeholder="第一行"
@@ -762,7 +783,7 @@ const BusCustomFormWizard = (props) => {
fullWidth fullWidth
error={Boolean(formik.touched.address2 && formik.errors.address2)} error={Boolean(formik.touched.address2 && formik.errors.address2)}
id="address2-signup" id="address2-signup"
value={formik.values.address2}
value={formik.values.address2.trim()}
name="address2" name="address2"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="第二行" placeholder="第二行"
@@ -778,7 +799,7 @@ const BusCustomFormWizard = (props) => {
fullWidth fullWidth
error={Boolean(formik.touched.address3 && formik.errors.address3)} error={Boolean(formik.touched.address3 && formik.errors.address3)}
id="address3-signup" id="address3-signup"
value={formik.values.address3}
value={formik.values.address3.trim()}
name="address3" name="address3"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="第三行" placeholder="第三行"
@@ -793,15 +814,12 @@ const BusCustomFormWizard = (props) => {
<Autocomplete <Autocomplete
disablePortal disablePortal
id="address4-combo" id="address4-combo"
value={selectedAddress4 === null ? null : selectedAddress4}
value={selectedAddress4}
options={address4ComboList} options={address4ComboList}
disabled={checkCountry} disabled={checkCountry}
onChange={(event, newValue) => { 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" },}} sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>} renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
/> />
@@ -816,9 +834,11 @@ const BusCustomFormWizard = (props) => {
if(newValue=='香港'){ if(newValue=='香港'){
setCheckCountry(false) setCheckCountry(false)
}else{ }else{
setSelectedAddress4("");
setCheckCountry(true) setCheckCountry(true)
} }
}else{ }else{
setSelectedAddress4("");
setCheckCountry(true) setCheckCountry(true)
} }
}} }}
@@ -856,7 +876,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="enName-login" id="enName-login"
type="enName" type="enName"
value={formik.values.enName}
value={formik.values.enName.trim()}
name="enName" name="enName"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="" placeholder=""
@@ -890,7 +910,7 @@ const BusCustomFormWizard = (props) => {
error={Boolean(formik.touched.email && formik.errors.email)} error={Boolean(formik.touched.email && formik.errors.email)}
id="email-login" id="email-login"
type="email" type="email"
value={formik.values.email}
value={formik.values.email.trim()}
name="email" name="email"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="電郵" placeholder="電郵"
@@ -920,7 +940,7 @@ const BusCustomFormWizard = (props) => {
error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}
id="emailConfirm-login" id="emailConfirm-login"
type="email" type="email"
value={formik.values.emailConfirm}
value={formik.values.emailConfirm.trim()}
name="emailConfirm" name="emailConfirm"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
@@ -956,7 +976,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="phoneCountryCode-login" id="phoneCountryCode-login"
type="phoneCountryCode" type="phoneCountryCode"
value={formik.values.phoneCountryCode}
value={formik.values.phoneCountryCode.trim()}
name="phoneCountryCode" name="phoneCountryCode"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
// onChange={formik.handleChange} // onChange={formik.handleChange}
@@ -983,7 +1003,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="phone-login" id="phone-login"
type="phone" type="phone"
value={formik.values.phone}
value={formik.values.phone.trim()}
name="phone" name="phone"
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
// onChange={formik.handleChange} // onChange={formik.handleChange}
@@ -1026,7 +1046,7 @@ const BusCustomFormWizard = (props) => {
error={Boolean(formik.touched.fax && formik.errors.fax)} error={Boolean(formik.touched.fax && formik.errors.fax)}
id="faxCountryCode-login" id="faxCountryCode-login"
type="faxCountryCode" type="faxCountryCode"
value={formik.values.faxCountryCode}
value={formik.values.faxCountryCode.trim()}
name="faxCountryCode" name="faxCountryCode"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
// onChange={formik.handleChange} // onChange={formik.handleChange}
@@ -1051,7 +1071,7 @@ const BusCustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="fax-login" id="fax-login"
type="fax" type="fax"
value={formik.values.fax}
value={formik.values.fax.trim()}
name="fax" name="fax"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
// onChange={formik.handleChange} // onChange={formik.handleChange}
@@ -1186,7 +1206,7 @@ const BusCustomFormWizard = (props) => {
fullWidth fullWidth
id="captchaField" id="captchaField"
type="text" type="text"
value={formik.values.captchaField}
value={formik.values.captchaField.trim()}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={Boolean(formik.touched.captchaField && formik.errors.captchaField)} error={Boolean(formik.touched.captchaField && formik.errors.captchaField)}
name="captchaField" name="captchaField"


+ 74
- 38
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -31,7 +31,7 @@ import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import axios from "axios"; import axios from "axios";
import {POST_PUBLIC_USER_REGISTER,POST_CAPTCHA} from "utils/ApiPathConst"; import {POST_PUBLIC_USER_REGISTER,POST_CAPTCHA} from "utils/ApiPathConst";
// import * as HttpUtils from 'utils/HttpUtils'; // import * as HttpUtils from 'utils/HttpUtils';
import * as ComboData from "../../../utils/ComboData";
import * as ComboData from "utils/ComboData";


import Loadable from 'components/Loadable'; import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
@@ -143,7 +143,7 @@ const CustomFormWizard = (props) => {
data.captchaField&& data.captchaField&&
handlePassword(data.password)&& handlePassword(data.password)&&
handleEmail(data.email)&& handleEmail(data.email)&&
handleIdNo(data.idNo,selectedIdDocType.type)&&
handleIdNo(data.idNo,selectedIdDocType.type,data.checkDigit)&&
handlePhone(data.phone)&& handlePhone(data.phone)&&
handleUsername(data.username)&& handleUsername(data.username)&&
handleCaptcha(data.captchaField) handleCaptcha(data.captchaField)
@@ -242,6 +242,8 @@ const CustomFormWizard = (props) => {


useEffect(() => { useEffect(() => {
props.step ==2?_onSubmit():null; props.step ==2?_onSubmit():null;
onCaptchaChange();
checkDataField(values)
}, [props.step]) }, [props.step])


const {handleSubmit} = useForm({}) 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; return false;
} else { } else {
console.log("Phone true")
// console.log("Phone true")
return 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; return false;
} else { } else {
console.log("Username true")
return true; return true;
} }
} }
@@ -354,15 +361,19 @@ const CustomFormWizard = (props) => {
return captchaField == captcha; 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; return false;
} }
else if (idNo.length < 7) {
else if (idNo.match(space)) {
return false;
}else if (idNo.length < 7) {
return false; return false;
} else { } else {
console.log("IdNo true")
// console.log("IdNo true")
return true; return true;
} }
} }
@@ -374,6 +385,7 @@ const CustomFormWizard = (props) => {
var upperCase = /[A-Z]/g; var upperCase = /[A-Z]/g;
var numbers = /[0-9]/g; var numbers = /[0-9]/g;
var symbol = /^(?=.*[!@#%&])/; var symbol = /^(?=.*[!@#%&])/;
var space = /\s/;
if (!new_pass.match(lowerCase)) { if (!new_pass.match(lowerCase)) {
return false; return false;
} else if (!new_pass.match(upperCase)) { } else if (!new_pass.match(upperCase)) {
@@ -384,8 +396,11 @@ const CustomFormWizard = (props) => {
return false; return false;
} else if (new_pass.length < 8) { } else if (new_pass.length < 8) {
return false; return false;
} else {
console.log("password true")
}
else if (new_pass.match(space)) {
return false;
}else {
// console.log("password true")
return true; return true;
} }
} }
@@ -420,11 +435,15 @@ const CustomFormWizard = (props) => {
submit: null, submit: null,
fax:'', fax:'',
faxCountryCode:'852', faxCountryCode:'852',
idDocType:''
idDocType:'',
captchaField:''
}), }),
validationSchema:yup.object().shape({ 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('請輸入密碼') password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
.matches(/^\S*$/, '密碼不包含空格')
.matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母')
.matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母')
.matches(/^(?=.*[0-9])/, '請包括最少1個數字') .matches(/^(?=.*[0-9])/, '請包括最少1個數字')
@@ -437,7 +456,20 @@ const CustomFormWizard = (props) => {
address3: yup.string().max(255).required('請輸入第三行地址'), address3: yup.string().max(255).required('請輸入第三行地址'),
email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'), email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'), 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('請輸入括號內的數字或字母'), checkDigit:yup.string().max(1).required('請輸入括號內的數字或字母'),
idDocType: yup.string().max(255).required('請輸入證件類別'), idDocType: yup.string().max(255).required('請輸入證件類別'),
phoneCountryCode: yup.string().min(2,'請輸入最少2位數字').required('請輸入國際區號'), phoneCountryCode: yup.string().min(2,'請輸入最少2位數字').required('請輸入國際區號'),
@@ -451,10 +483,13 @@ const CustomFormWizard = (props) => {
const handleReset = (resetForm) => { const handleReset = (resetForm) => {
resetForm(); resetForm();
setSelectedAddress4("") setSelectedAddress4("")
setSelectedAddress5(ComboData.country[0])
setCheckCountry(false)
setSelectedIdDocType({}) setSelectedIdDocType({})
setSelectedIdDocInputType(""); setSelectedIdDocInputType("");
setFileList([]) setFileList([])
setFileListData([]) setFileListData([])
onCaptchaChange()
// setSelectedIdDocLabel("") // setSelectedIdDocLabel("")
}; };


@@ -489,7 +524,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="username-login" id="username-login"
type="text" type="text"
value={formik.values.username}
value={formik.values.username.trim()}
name="username" name="username"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="用戶登入名稱" placeholder="用戶登入名稱"
@@ -525,7 +560,7 @@ const CustomFormWizard = (props) => {
error={Boolean(formik.touched.password && formik.errors.password)} error={Boolean(formik.touched.password && formik.errors.password)}
id="password-signup" id="password-signup"
type={showPassword ? 'text' : 'password'} type={showPassword ? 'text' : 'password'}
value={formik.values.password}
value={formik.values.password.trim()}
name="password" name="password"
onChange={(e) => { onChange={(e) => {
formik.handleChange(e); formik.handleChange(e);
@@ -581,7 +616,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="confirmPassword-login" id="confirmPassword-login"
type={showConfirmPassword ? 'text' : 'password'} type={showConfirmPassword ? 'text' : 'password'}
value={formik.values.confirmPassword}
value={formik.values.confirmPassword.trim()}
name="confirmPassword" name="confirmPassword"
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
onChange={(e) => { onChange={(e) => {
@@ -695,7 +730,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="idNo-login" id="idNo-login"
type="text" type="text"
value={formik.values.idNo}
value={formik.values.idNo.trim()}
name="idNo" name="idNo"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="證件號碼" placeholder="證件號碼"
@@ -729,7 +764,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="checkDigit-login" id="checkDigit-login"
type="text" type="text"
value={formik.values.checkDigit}
value={formik.values.checkDigit.trim()}
name="checkDigit" name="checkDigit"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="( )" placeholder="( )"
@@ -754,7 +789,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="idNo-login" id="idNo-login"
type="text" type="text"
value={formik.values.idNo}
value={formik.values.idNo.trim()}
name="idNo" name="idNo"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="證件號碼" placeholder="證件號碼"
@@ -789,7 +824,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="enName-login" id="enName-login"
type="enName" type="enName"
value={formik.values.enName}
value={formik.values.enName.trim()}
name="enName" name="enName"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與你的身份證明文件相同" placeholder="與你的身份證明文件相同"
@@ -819,7 +854,7 @@ const CustomFormWizard = (props) => {
error={Boolean(formik.touched.chName && formik.errors.chName)} error={Boolean(formik.touched.chName && formik.errors.chName)}
id="chName-signup" id="chName-signup"
type="text" type="text"
value={formik.values.chName}
value={formik.values.chName.trim()}
name="chName" name="chName"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="與你的身份證明文件相同" placeholder="與你的身份證明文件相同"
@@ -848,7 +883,7 @@ const CustomFormWizard = (props) => {
fullWidth fullWidth
error={Boolean(formik.touched.address1 && formik.errors.address1)} error={Boolean(formik.touched.address1 && formik.errors.address1)}
id="address1-signup" id="address1-signup"
value={formik.values.address1}
value={formik.values.address1.trim()}
name="address1" name="address1"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="第一行" placeholder="第一行"
@@ -865,7 +900,7 @@ const CustomFormWizard = (props) => {
fullWidth fullWidth
error={Boolean(formik.touched.address2 && formik.errors.address2)} error={Boolean(formik.touched.address2 && formik.errors.address2)}
id="address2-signup" id="address2-signup"
value={formik.values.address2}
value={formik.values.address2.trim()}
name="address2" name="address2"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="第二行" placeholder="第二行"
@@ -881,7 +916,7 @@ const CustomFormWizard = (props) => {
fullWidth fullWidth
error={Boolean(formik.touched.address3 && formik.errors.address3)} error={Boolean(formik.touched.address3 && formik.errors.address3)}
id="address3-signup" id="address3-signup"
value={formik.values.address3}
value={formik.values.address3.trim()}
name="address3" name="address3"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="第三行" placeholder="第三行"
@@ -902,7 +937,6 @@ const CustomFormWizard = (props) => {
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedAddress4(newValue); setSelectedAddress4(newValue);
}} }}
sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>} renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
/> />
@@ -917,9 +951,11 @@ const CustomFormWizard = (props) => {
if(newValue=='香港'){ if(newValue=='香港'){
setCheckCountry(false) setCheckCountry(false)
}else{ }else{
setSelectedAddress4("");
setCheckCountry(true) setCheckCountry(true)
} }
}else{ }else{
setSelectedAddress4("");
setCheckCountry(true) setCheckCountry(true)
} }
}} }}
@@ -961,7 +997,7 @@ const CustomFormWizard = (props) => {
error={Boolean(formik.touched.email && formik.errors.email)} error={Boolean(formik.touched.email && formik.errors.email)}
id="email-login" id="email-login"
type="email" type="email"
value={formik.values.email}
value={formik.values.email.trim()}
name="email" name="email"
onChange={formik.handleChange} onChange={formik.handleChange}
placeholder="電郵" placeholder="電郵"
@@ -991,7 +1027,7 @@ const CustomFormWizard = (props) => {
error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}
id="emailConfirm-login" id="emailConfirm-login"
type="email" type="email"
value={formik.values.emailConfirm}
value={formik.values.emailConfirm.trim()}
name="emailConfirm" name="emailConfirm"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}
@@ -1027,7 +1063,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="phoneCountryCode-login" id="phoneCountryCode-login"
type="phoneCountryCode" type="phoneCountryCode"
value={formik.values.phoneCountryCode}
value={formik.values.phoneCountryCode.trim()}
name="phoneCountryCode" name="phoneCountryCode"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
// onChange={formik.handleChange} // onChange={formik.handleChange}
@@ -1054,7 +1090,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="phone-login" id="phone-login"
type="phone" type="phone"
value={formik.values.phone}
value={formik.values.phone.trim()}
name="phone" name="phone"
// onBlur={formik.handleBlur} // onBlur={formik.handleBlur}
// onChange={formik.handleChange} // onChange={formik.handleChange}
@@ -1098,7 +1134,7 @@ const CustomFormWizard = (props) => {
error={Boolean(formik.touched.fax && formik.errors.fax)} error={Boolean(formik.touched.fax && formik.errors.fax)}
id="faxCountryCode-login" id="faxCountryCode-login"
type="faxCountryCode" type="faxCountryCode"
value={formik.values.faxCountryCode}
value={formik.values.faxCountryCode.trim()}
name="faxCountryCode" name="faxCountryCode"
// onChange={formik.handleChange} // onChange={formik.handleChange}
onChange={(event) => { onChange={(event) => {
@@ -1123,7 +1159,7 @@ const CustomFormWizard = (props) => {
<OutlinedInput <OutlinedInput
id="fax-login" id="fax-login"
type="fax" type="fax"
value={formik.values.fax}
value={formik.values.fax.trim()}
name="fax" name="fax"
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
// onChange={formik.handleChange} // onChange={formik.handleChange}
@@ -1256,7 +1292,7 @@ const CustomFormWizard = (props) => {
fullWidth fullWidth
id="captchaField" id="captchaField"
type="text" type="text"
value={formik.values.captchaField}
value={formik.values.captchaField.trim()}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
error={Boolean(formik.touched.captchaField && formik.errors.captchaField)} error={Boolean(formik.touched.captchaField && formik.errors.captchaField)}
name="captchaField" name="captchaField"
@@ -1338,7 +1374,7 @@ const CustomFormWizard = (props) => {
證件號碼: 證件號碼:
</Typography> </Typography>
<Typography id="idNo-login"> <Typography id="idNo-login">
{formik.values.idNo} {selectedAddress5=="香港"?'('+formik.values.checkDigit+')':null}
{formik.values.idNo} {selectedIdDocType.type=="HKID"?'('+formik.values.checkDigit+')':null}
</Typography> </Typography>
</Stack> </Stack>
</Grid> </Grid>


Write Preview
Loading…
Cancel
Save