alex
/
PNSPS-frontend-MaterialUI
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

master
Anna Ho 2 年前
父节点
46b38dbd95 577c6f782e
当前提交
31cda431f8
共有 3 个文件被更改，包括 182 次插入 和 141 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  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 查看文件

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


+ 7
- 0
src/pages/authentication/Register.js 查看文件

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

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

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


+ 175
- 139
src/pages/authentication/auth-forms/CustomFormWizard.js 查看文件

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

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

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

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

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

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"];
// 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(() => {
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 _onSubmit = (data) => {
data.idDocType = selectedIdDocType
data.address4 = selectedAddress4
data.address5 = selectedAddress5
console.log(data)
const userAddress = {
"addressLine1":data.address1,
"addressLine2":data.address2,
"addressLine3":data.address3,
"addressLine3":data.address4,
"country":data.address5
}
const userFaxNo = {
@@ -107,7 +117,7 @@ const CustomFormWizard = (props) => {
console.log(userAddress)
console.log(userFaxNo)
console.log(userMobileNumber)
if (data.username !==""){
if (checkDataField(data)){
axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
username: data.username,
password: data.password,
@@ -136,6 +146,8 @@ const CustomFormWizard = (props) => {
return (
<Formik
enableReinitialize={true}
innerRef={(f) => (formRef.current = f)}
initialValues={{
username:'',
enName: '',
@@ -144,13 +156,10 @@ const CustomFormWizard = (props) => {
address1: '',
address2: '',
address3: '',
address4: '',
address5: '',
password: '',
confirmPassword: '',
phone:'',
idNo:'',
idDocType :'',
checkDigit:'',
submit: null
}}
@@ -169,9 +178,12 @@ const CustomFormWizard = (props) => {
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)} >
{/* Input Form */}
<FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
<Grid container spacing={3}>
<Grid item xs={12}>
@@ -207,7 +219,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -254,11 +266,12 @@ const CustomFormWizard = (props) => {
</InputAdornment>
}
placeholder="密碼"
onBlur={handleBlur}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -300,7 +313,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
endAdornment={
@@ -353,78 +366,111 @@ const CustomFormWizard = (props) => {

<Grid container>
<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
disablePortal
id="idDocType-combo"
value={selectedIdDocType === null ? null : selectedIdDocType}
options={idDocTypeComboList}
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>
</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>
@@ -447,7 +493,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -475,7 +521,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -504,7 +550,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -521,7 +567,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -538,48 +584,38 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
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 && (
<FormHelperText error id="helper-text-address1-signup">
{errors.address1}
@@ -623,7 +659,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -653,7 +689,7 @@ const CustomFormWizard = (props) => {
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
}
},
}}
/>
@@ -788,7 +824,7 @@ const CustomFormWizard = (props) => {
<Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
</Stack>
<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>
</Grid>
@@ -813,6 +849,7 @@ const CustomFormWizard = (props) => {
</Grid>
</Grid>
</FormGroup>
{/* Preview Form */}
<FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
<Grid container spacing={2}>
<Grid item xs={12}>
@@ -974,7 +1011,6 @@ const CustomFormWizard = (props) => {
</FormGroup>
</form>
// </Paper>
)}
</Formik>
);


撰写 预览
正在加载...
取消
保存