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

with bug

master
Alex Cheung 2 years ago
parent
1bb95b6855
commit
577c6f782e
3 changed files with 182 additions and 141 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -2
      src/layout/MainLayout/Header/index.js
  2. +7
    -0
      src/pages/authentication/Register.js
  3. +175
    -139
      src/pages/authentication/auth-forms/CustomFormWizard.js

+ 0
- 2
src/layout/MainLayout/Header/index.js View File

@@ -96,7 +96,6 @@ function Header(props) {
PNSPS PNSPS
</Typography> </Typography>
<Divider /> <Divider />
<loginContent></loginContent>
<ul id="sidebartop"> <ul id="sidebartop">
{loginContent} {loginContent}
</ul> </ul>
@@ -113,7 +112,6 @@ function Header(props) {
PNSPS PNSPS
</Typography> </Typography>
<Divider /> <Divider />
<loginContent></loginContent>
<ul id="sidebartop"> <ul id="sidebartop">
{logoutContent} {logoutContent}
</ul> </ul>


+ 7
- 0
src/pages/authentication/Register.js View File

@@ -48,6 +48,12 @@ const steps = ['個人資料', '預覽', '完成提交'];
const Register = () => { const Register = () => {
const [activeStep, setActiveStep] = useState(0); const [activeStep, setActiveStep] = useState(0);
const [completed, setCompleted] = useState([false]); const [completed, setCompleted] = useState([false]);
// const [isValid, setisValid] = useState(false);

// const handleIsValidChange = (value) => {
// setisValid(value);
// console.log(value)
// };


const totalSteps = () => { const totalSteps = () => {
return steps.length; return steps.length;
@@ -133,6 +139,7 @@ const Register = () => {
) : ( ) : (
<React.Fragment> <React.Fragment>
<AuthWrapper> <AuthWrapper>
{/* <CustomFormWizard onIsValidChange={handleIsValidChange} step={activeStep} /> */}
<CustomFormWizard step={activeStep} /> <CustomFormWizard step={activeStep} />
</AuthWrapper> </AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}> <Stack direction="row" sx={{ pt: 2 }}>


+ 175
- 139
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useEffect, useState, useRef } from 'react';
// import { Link as RouterLink } from 'react-router-dom'; // import { Link as RouterLink } from 'react-router-dom';


// material-ui // material-ui
@@ -12,7 +12,6 @@ import {
InputLabel, OutlinedInput, InputLabel, OutlinedInput,
Stack, Stack,
Typography, Typography,
Select,
FormGroup, FormGroup,
TextField, TextField,
// Paper // Paper
@@ -39,11 +38,13 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';


// ============================|| FIREBASE - REGISTER ||============================ // // ============================|| FIREBASE - REGISTER ||============================ //


const CustomFormWizard = (props) => {
const CustomFormWizard = (props, ) => {
const [level, setLevel] = useState(); const [level, setLevel] = useState();
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setshowConfirmPassword] = useState(false); const [showConfirmPassword, setshowConfirmPassword] = useState(false);
// const [values, setValues] = useState({});

const handleClickShowPassword = () => { const handleClickShowPassword = () => {
setShowPassword(!showPassword); setShowPassword(!showPassword);
}; };
@@ -61,39 +62,48 @@ const CustomFormWizard = (props) => {
}; };


const [selectedIdDocType, setSelectedIdDocType] = useState(null); const [selectedIdDocType, setSelectedIdDocType] = useState(null);
// const [idDocTypeComboList, setIdDocTypeComboList] = useState([]);
const [selectedAddress4, setSelectedAddress4] = useState(null);
const [selectedAddress5, setSelectedAddress5] = useState(null);


const idDocTypeComboList = ["passport","HKID","CNID","BR","otherCert"]; const idDocTypeComboList = ["passport","HKID","CNID","BR","otherCert"];
// function updateUserList (){
// const idList = getIdList(groupUserData);
// if(!idList.includes(selectedUser.id)){
// const userList = [...groupUserData, selectedUser];
// setGroupUserData(userList);
// console.log(userList);
// }
// }

// const checkFormData = (data) =>{
// const dataStatus = false;
// if (data.username)
// return
// }
const address4ComboList =
["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
"坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
const address5ComboList = ["香港","內地","澳門"];


useEffect(() => { useEffect(() => {
changePassword(''); changePassword('');
}, []); }, []);
const formRef = useRef(null);
useEffect(() => {
console.log("formRef changed", formRef.current);
// onIsValidChange(true);
}, [formRef.current]);


// useEffect(() => {
// tryAPI();
// }, []);
const checkDataField = (data)=>{
if (data.username !=="",
data.password !=="",
data.enName !=="",
data.email !=="",
data.password !=="",
data.password !==""
)
{
return true
}
};


const {handleSubmit,register} = useForm({}) const {handleSubmit,register} = useForm({})
const _onSubmit = (data) => { const _onSubmit = (data) => {
data.idDocType = selectedIdDocType
data.address4 = selectedAddress4
data.address5 = selectedAddress5
console.log(data) console.log(data)
const userAddress = { const userAddress = {
"addressLine1":data.address1, "addressLine1":data.address1,
"addressLine2":data.address2, "addressLine2":data.address2,
"addressLine3":data.address3,
"addressLine3":data.address4,
"country":data.address5 "country":data.address5
} }
const userFaxNo = { const userFaxNo = {
@@ -107,7 +117,7 @@ const CustomFormWizard = (props) => {
console.log(userAddress) console.log(userAddress)
console.log(userFaxNo) console.log(userFaxNo)
console.log(userMobileNumber) console.log(userMobileNumber)
if (data.username !==""){
if (checkDataField(data)){
axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, { axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
username: data.username, username: data.username,
password: data.password, password: data.password,
@@ -136,6 +146,8 @@ const CustomFormWizard = (props) => {
return ( return (
<Formik <Formik
enableReinitialize={true}
innerRef={(f) => (formRef.current = f)}
initialValues={{ initialValues={{
username:'', username:'',
enName: '', enName: '',
@@ -144,13 +156,10 @@ const CustomFormWizard = (props) => {
address1: '', address1: '',
address2: '', address2: '',
address3: '', address3: '',
address4: '',
address5: '',
password: '', password: '',
confirmPassword: '', confirmPassword: '',
phone:'', phone:'',
idNo:'', idNo:'',
idDocType :'',
checkDigit:'', checkDigit:'',
submit: null submit: null
}} }}
@@ -169,9 +178,12 @@ const CustomFormWizard = (props) => {
idType: Yup.string().max(255).required('請輸入第三行地址'), idType: Yup.string().max(255).required('請輸入第三行地址'),
})} })}
> >
{({ errors, handleBlur, handleChange, touched, values }) => (
// <Paper>
{({ errors, handleBlur, handleChange, touched, values, isValid }) =>
// console.log(Boolean(touched.password && errors.password))
// addFieldError(Boolean(touched.password && errors.password))
(
<form onSubmit={handleSubmit(_onSubmit)} > <form onSubmit={handleSubmit(_onSubmit)} >
{/* Input Form */}
<FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}> <FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
<Grid container spacing={3}> <Grid container spacing={3}>
<Grid item xs={12}> <Grid item xs={12}>
@@ -207,7 +219,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -254,11 +266,12 @@ const CustomFormWizard = (props) => {
</InputAdornment> </InputAdornment>
} }
placeholder="密碼" placeholder="密碼"
onBlur={handleBlur}
inputProps={{ inputProps={{
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -300,7 +313,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
endAdornment={ endAdornment={
@@ -353,78 +366,111 @@ const CustomFormWizard = (props) => {


<Grid container> <Grid container>
<Grid item xs={12} md={6} > <Grid item xs={12} md={6} >
<Stack spacing={1} sx={{mr:{md:1},mb:{xs:1}}}>
<Stack spacing={1} sx={{mr:{md:1},mb:{xs:0.5}}}>
<Autocomplete <Autocomplete
disablePortal disablePortal
id="idDocType-combo" id="idDocType-combo"
value={selectedIdDocType === null ? null : selectedIdDocType} value={selectedIdDocType === null ? null : selectedIdDocType}
options={idDocTypeComboList} options={idDocTypeComboList}
onChange={(event, newValue) => { onChange={(event, newValue) => {
setSelectedIdDocType(newValue);
if (newValue !== null){
setSelectedIdDocType(newValue);
}
}} }}
sx={{"& .MuiInputBase-root": { height: "41px" }}}
renderInput={(params) => <TextField {...params} placeholder="證件類別" sx={{ height: "41px" }}/>}
sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="證件類別"/>}
/> />
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={5}>
<Stack spacing={1}>
<OutlinedInput
id="idNo-login"
type="text"
value={values.idNo}
name="idNo"
{...register("idNo")}
onChange={handleChange}
placeholder="證件號碼"
fullWidth
sx={{mr:1}}
error={Boolean(touched.idNo && errors.idNo)}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
{selectedIdDocType =="HKID"?
<>
<Grid item xs={10} md={5}>
<Stack spacing={1}>
<OutlinedInput
id="idNo-login"
type="text"
value={values.idNo}
name="idNo"
{...register("idNo")}
onChange={handleChange}
placeholder="證件號碼"
fullWidth
sx={{mr:1}}
error={Boolean(touched.idNo && errors.idNo)}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
/>
{touched.idNo && errors.idNo && (
<FormHelperText error id="helper-text-enName-signup">
{errors.idNo}
</FormHelperText>
)}
</Stack>
</Grid>
<Grid item xs={2} md={1}>
<Stack spacing={1}>
<OutlinedInput
id="checkDigit-login"
type="text"
value={values.checkDigit}
name="checkDigit"
{...register("checkDigit")}
onChange={handleChange}
placeholder="( )"
// sx={{height:"53px"}}
inputProps={{
maxLength: 1,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
fullWidth
error={Boolean(touched.checkDigit && errors.checkDigit)}
/>
{touched.checkDigit && errors.checkDigit && (
<FormHelperText error id="helper-text-enName-signup">
{errors.checkDigit}
</FormHelperText>
)}
</Stack>
</Grid>
</>:
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<OutlinedInput
id="idNo-login"
type="text"
value={values.idNo}
name="idNo"
{...register("idNo")}
onChange={handleChange}
placeholder="證件號碼"
fullWidth
sx={{mr:1}}
error={Boolean(touched.idNo && errors.idNo)}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
} }
},
}}
/>
{touched.idNo && errors.idNo && (
<FormHelperText error id="helper-text-enName-signup">
{errors.idNo}
</FormHelperText>
)}
</Stack>
</Grid>
<Grid item xs={12} md={1}>
<Stack spacing={1}>
<OutlinedInput
id="checkDigit-login"
type="text"
value={values.checkDigit}
name="checkDigit"
{...register("checkDigit")}
onChange={handleChange}
placeholder="( )"
// sx={{height:"53px"}}
inputProps={{
maxLength: 1,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
fullWidth
error={Boolean(touched.checkDigit && errors.checkDigit)}
/>
{touched.checkDigit && errors.checkDigit && (
<FormHelperText error id="helper-text-enName-signup">
{errors.checkDigit}
</FormHelperText>
)}
</Stack>
</Grid>
},
}}
/>
{touched.idNo && errors.idNo && (
<FormHelperText error id="helper-text-enName-signup">
{errors.idNo}
</FormHelperText>
)}
</Stack>
</Grid>
}
</Grid> </Grid>
</Grid> </Grid>
@@ -447,7 +493,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -475,7 +521,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -504,7 +550,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -521,7 +567,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -538,48 +584,38 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
<Select
name ="address4"
multiple
displayEmpty
value={""}
onChange={handleChange}
input={<OutlinedInput />}
{...register("address4")}
renderValue={(selected) => {
if (selected.length === 0) {
return "區域 (只適用於香港)";
}

return selected.join(', ');
}}
// MenuProps={MenuProps}
inputProps={{ 'aria-label': 'Without label' }}
>
</Select>
<Select
name = "address5"
multiple
displayEmpty
value={""}
onChange={handleChange}
input={<OutlinedInput />}
{...register("address5")}
renderValue={(selected) => {
if (selected.length === 0) {
return "國家/地區";
}

return selected.join(', ');
}}
// MenuProps={MenuProps}
inputProps={{ 'aria-label': 'Without label' }}
>
</Select>
<Autocomplete
disablePortal
id="address4-combo"
value={selectedAddress4 === null ? null : selectedAddress4}
options={address4ComboList}
onChange={(event, newValue) => {
if (newValue !== null){
setSelectedAddress4(newValue);
}
}}
sx={{"& .MuiInputBase-root": { height: "41px" },"#address4-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)"/>}
/>
<Autocomplete
disablePortal
id="address5-combo"
value={selectedAddress5 === null ? null : selectedAddress5}
options={address5ComboList}
onChange={(event, newValue) => {
if (newValue !== null){
setSelectedAddress5(newValue);
}
}}
sx={{"& .MuiInputBase-root": { height: "41px" },"#address5-combo":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}}
renderInput={(params) => <TextField {...params} placeholder="國家/地區"/>}
/>
{touched.address1 && errors.address1 && ( {touched.address1 && errors.address1 && (
<FormHelperText error id="helper-text-address1-signup"> <FormHelperText error id="helper-text-address1-signup">
{errors.address1} {errors.address1}
@@ -623,7 +659,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -653,7 +689,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => { onKeyDown: (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
}
}
}, },
}} }}
/> />
@@ -788,7 +824,7 @@ const CustomFormWizard = (props) => {
<Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
</Stack> </Stack>
<Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
<Button disabled={!isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
</Stack> </Stack>
</Stack> </Stack>
</Grid> </Grid>
@@ -813,6 +849,7 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
</Grid> </Grid>
</FormGroup> </FormGroup>
{/* Preview Form */}
<FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}> <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12}> <Grid item xs={12}>
@@ -974,7 +1011,6 @@ const CustomFormWizard = (props) => {
</FormGroup> </FormGroup>
</form> </form>
// </Paper>
)} )}
</Formik> </Formik>
); );


Write Preview
Loading…
Cancel
Save