alex
/
PNSPS-frontend-MaterialUI
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

update Organization register

master
Alex Cheung před 2 roky
rodič
46f5c0b49f
revize
c686c3a27a
6 změnil soubory, kde provedl 503 přidání a 456 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  1. +1
    -1
      src/auth/jwtApplicationConfig.js
  2. +1
    -1
      src/auth/jwtConfig.js
  3. +198
    -196
      src/pages/authentication/BusRegister.js
  4. +198
    -196
      src/pages/authentication/Register.js
  5. +89
    -44
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  6. +16
    -18
      src/pages/authentication/auth-forms/CustomFormWizard.js

+ 1
- 1
src/auth/jwtApplicationConfig.js Zobrazit soubor

@@ -3,7 +3,7 @@ import {apiPath} from "./utils"
export default {
loginEndpoint: `${apiPath}/login`,
registerEndpoint: `${apiPath}/register`,
refreshEndpoint: `${apiPath}/refresh/token`,
refreshEndpoint: `${apiPath}/refresh-token`,
logoutEndpoint: `/jwt/logout`,

// ** This will be prefixed in authorization header with token


+ 1
- 1
src/auth/jwtConfig.js Zobrazit soubor

@@ -3,7 +3,7 @@ import {apiPath} from "./utils"
export default {
loginEndpoint: `${apiPath}/login`,
registerEndpoint: `${apiPath}/register`,
refreshEndpoint: `${apiPath}/refresh/token`,
refreshEndpoint: `${apiPath}/refresh-token`,
logoutEndpoint: `/jwt/logout`,

// ** This will be prefixed in authorization header with token


+ 198
- 196
src/pages/authentication/BusRegister.js Zobrazit soubor

@@ -1,205 +1,207 @@
// import { Link } from 'react-router-dom';
import React,{useState} from 'react';

// material-ui
import {
Stepper,
Step,
StepButton,
// Grid,
Stack,
Typography,
Button,

} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';

// project import
import BusCustomFormWizard from './auth-forms/BusCustomFormWizard';
import AuthWrapper from './AuthWrapperCustom';

// ================================|| REGISTER ||================================ //
const stepStyle = {
width:"80%",
boxShadow: 2,
backgroundColor: "rgba(0,0,0,0.1)",
padding: 2,
"& .Mui-active": {
"&.MuiStepIcon-root": {
color: "warning.main",
fontSize: "2rem",
// import { Link } from 'react-router-dom';
import React,{useState} from 'react';

// material-ui
import {
Stepper,
Step,
StepButton,
// Grid,
Stack,
Typography,
Button,

} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';

// project import
import CustomFormWizard from './auth-forms/BusCustomFormWizard';
import AuthWrapper from './AuthWrapperCustom';

// ================================|| REGISTER ||================================ //
const stepStyle = {
width:"80%",
boxShadow: 2,
backgroundColor: "rgba(0,0,0,0.1)",
padding: 2,
"& .Mui-active": {
"&.MuiStepIcon-root": {
color: "warning.main",
fontSize: "2rem",
},
"& .MuiStepConnector-line": {
borderColor: "warning.main"
}
},
"& .MuiStepConnector-line": {
borderColor: "warning.main"
}
},
"& .Mui-completed": {
"&.MuiStepIcon-root": {
color: "secondary.main",
fontSize: "2rem",
},
"& .MuiStepConnector-line": {
borderColor: "secondary.main"
"& .Mui-completed": {
"&.MuiStepIcon-root": {
color: "secondary.main",
fontSize: "2rem",
},
"& .MuiStepConnector-line": {
borderColor: "secondary.main"
}
}
}
}
const steps = ['個人資料', '預覽', '完成提交'];

const BusRegister = () => {
const [activeStep, setActiveStep] = useState(0);
const [completed, setCompleted] = useState([false]);
const [isValid, setisValid] = useState(null);

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

const totalSteps = () => {
return steps.length;
};

const completedSteps = () => {
return Object.keys(completed).length;
};

const isLastStep = () => {
return activeStep === totalSteps() - 1;
};

const allStepsCompleted = () => {
return completedSteps() === totalSteps();
};

const handleNext = () => {
console.log("test 1")
const newActiveStep =
isLastStep() && !allStepsCompleted()
? // It's the last step, but not all steps have been completed,
// find the first step that has been completed
steps.findIndex((step, i) => !(i in completed))
: activeStep + 1;
setActiveStep(newActiveStep);
console.log(newActiveStep)
};

const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};

const handleStep = (step) => () => {
setActiveStep(step);
};

// const handleComplete = () => {
// const newCompleted = completed;
// newCompleted[activeStep] = true;
// setCompleted(newCompleted);
// handleNext();
// };

const handleReset = () => {
setActiveStep(0);
setCompleted({});
};

return(
// <AuthWrapper>
<Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}>
{steps.map((label, index) => (
<Step key={label} completed={completed[index]}>
{
index < 2 ?
(<StepButton onClick={handleStep(index)}>
{label}
</StepButton>) :
(<StepButton
sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
icon={<VisibilityIcon />}
onClick={handleStep(index)}
const steps = ['個人資料', '預覽', '完成提交'];

const BusRegister = () => {
const [activeStep, setActiveStep] = useState(0);
const [completed, setCompleted] = useState([false]);
const [isValid, setisValid] = useState(null);

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

const totalSteps = () => {
return steps.length;
};

const completedSteps = () => {
return Object.keys(completed).length;
};

const isLastStep = () => {
return activeStep === totalSteps() - 1;
};

const allStepsCompleted = () => {
return completedSteps() === totalSteps();
};

const handleNext = () => {
console.log("test 1")
const newActiveStep =
isLastStep() && !allStepsCompleted()
? // It's the last step, but not all steps have been completed,
// find the first step that has been completed
steps.findIndex((step, i) => !(i in completed))
: activeStep + 1;
setActiveStep(newActiveStep);
console.log(newActiveStep)
};

const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};

// const handleStep = (step) => () => {
// setActiveStep(step);
// };

// const handleComplete = () => {
// const newCompleted = completed;
// newCompleted[activeStep] = true;
// setCompleted(newCompleted);
// handleNext();
// };

const handleReset = () => {
setActiveStep(0);
setCompleted({});
};

return(
// <AuthWrapper>
<Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}>
{steps.map((label, index) => (
<Step key={label} completed={completed[index]} readOnly="true">
{
index < 2 ?
(<StepButton
// onClick={handleStep(index)}
>
{label}
</StepButton>) :
(<StepButton
sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
icon={<VisibilityIcon />}
// onClick={handleStep(index)}
>
{label}
</StepButton>)
}

</Step>
))}
</Stepper>
{allStepsCompleted() ? (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
All steps completed - you&apos;re finished
</Typography>
<Stack direction="row" sx={{ pt: 2 }}>
<Stack sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button>
</Stack>
</React.Fragment>
) : (
<React.Fragment>
<AuthWrapper>
<CustomFormWizard updateValid={updateValid} step={activeStep} />
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}>
{ activeStep === totalSteps() - 1 ? (
<Button
color="inherit"
disabled={true}
onClick={handleBack}
sx={{ mr: 1 }}
>
{label}
</StepButton>)
}

</Step>
))}
</Stepper>
{allStepsCompleted() ? (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
All steps completed - you&apos;re finished
</Typography>
<Stack direction="row" sx={{ pt: 2 }}>
<Stack sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button>
</Stack>
</React.Fragment>
) : (
<React.Fragment>
<AuthWrapper>
<BusCustomFormWizard updateValid={updateValid} step={activeStep} />
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}>
{ activeStep === totalSteps() - 1 ? (
<Button
color="inherit"
disabled={true}
onClick={handleBack}
sx={{ mr: 1 }}
>
返回
</Button>
):(
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
返回
</Button>
)
}
<Stack sx={{ flex: '1 1 auto' }} />
{activeStep === totalSteps() - 2 ?
(
<Button onClick={handleNext} sx={{ mr: 1 }}>
完成
返回
</Button>
) : ( activeStep === totalSteps() - 1 ?
):(
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
返回
</Button>
)
}
<Stack sx={{ flex: '1 1 auto' }} />
{activeStep === totalSteps() - 2 ?
(
<Button color="inherit"
disabled={true} sx={{ mr: 1 }}>
<Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
完成
</Button>
):
(
<Button disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
繼續
</Button>
)
) : ( activeStep === totalSteps() - 1 ?
(
<Button variant="outlined" color="inherit"
disabled={true} sx={{ mr: 1 }}>
完成
</Button>
):
(
<Button variant="outlined" disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
繼續
</Button>
)
)}
{/* {activeStep !== steps.length &&
(completed[activeStep] ? (
<Typography variant="caption" sx={{ display: 'inline-block' }}>
Step {activeStep + 1} already completed
</Typography>
) : (
<Button onClick={handleComplete}>
{completedSteps() === totalSteps() - 1
? 'Finish'
: 'Complete Step'}
</Button>
))} */}
</Stack>
</React.Fragment>
)}
</Stack >
// </AuthWrapper>
);
};
export default BusRegister;
{/* {activeStep !== steps.length &&
(completed[activeStep] ? (
<Typography variant="caption" sx={{ display: 'inline-block' }}>
Step {activeStep + 1} already completed
</Typography>
) : (
<Button onClick={handleComplete}>
{completedSteps() === totalSteps() - 1
? 'Finish'
: 'Complete Step'}
</Button>
))} */}
</Stack>
</React.Fragment>
)}
</Stack >
// </AuthWrapper>
);
};
export default BusRegister;

+ 198
- 196
src/pages/authentication/Register.js Zobrazit soubor

@@ -1,205 +1,207 @@
// import { Link } from 'react-router-dom';
import React,{useState} from 'react';

// material-ui
import {
Stepper,
Step,
StepButton,
// Grid,
Stack,
Typography,
Button,

} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';

// project import
import CustomFormWizard from './auth-forms/CustomFormWizard';
import AuthWrapper from './AuthWrapperCustom';

// ================================|| REGISTER ||================================ //
const stepStyle = {
width:"80%",
boxShadow: 2,
backgroundColor: "rgba(0,0,0,0.1)",
padding: 2,
"& .Mui-active": {
"&.MuiStepIcon-root": {
color: "warning.main",
fontSize: "2rem",
// import { Link } from 'react-router-dom';
import React,{useState} from 'react';

// material-ui
import {
Stepper,
Step,
StepButton,
// Grid,
Stack,
Typography,
Button,

} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';

// project import
import CustomFormWizard from './auth-forms/CustomFormWizard';
import AuthWrapper from './AuthWrapperCustom';

// ================================|| REGISTER ||================================ //
const stepStyle = {
width:"80%",
boxShadow: 2,
backgroundColor: "rgba(0,0,0,0.1)",
padding: 2,
"& .Mui-active": {
"&.MuiStepIcon-root": {
color: "warning.main",
fontSize: "2rem",
},
"& .MuiStepConnector-line": {
borderColor: "warning.main"
}
},
"& .MuiStepConnector-line": {
borderColor: "warning.main"
}
},
"& .Mui-completed": {
"&.MuiStepIcon-root": {
color: "secondary.main",
fontSize: "2rem",
},
"& .MuiStepConnector-line": {
borderColor: "secondary.main"
"& .Mui-completed": {
"&.MuiStepIcon-root": {
color: "secondary.main",
fontSize: "2rem",
},
"& .MuiStepConnector-line": {
borderColor: "secondary.main"
}
}
}
}
const steps = ['個人資料', '預覽', '完成提交'];

const Register = () => {
const [activeStep, setActiveStep] = useState(0);
const [completed, setCompleted] = useState([false]);
const [isValid, setisValid] = useState(null);

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

const totalSteps = () => {
return steps.length;
};

const completedSteps = () => {
return Object.keys(completed).length;
};

const isLastStep = () => {
return activeStep === totalSteps() - 1;
};

const allStepsCompleted = () => {
return completedSteps() === totalSteps();
};

const handleNext = () => {
console.log("test 1")
const newActiveStep =
isLastStep() && !allStepsCompleted()
? // It's the last step, but not all steps have been completed,
// find the first step that has been completed
steps.findIndex((step, i) => !(i in completed))
: activeStep + 1;
setActiveStep(newActiveStep);
console.log(newActiveStep)
};

const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};

const handleStep = (step) => () => {
setActiveStep(step);
};

// const handleComplete = () => {
// const newCompleted = completed;
// newCompleted[activeStep] = true;
// setCompleted(newCompleted);
// handleNext();
// };

const handleReset = () => {
setActiveStep(0);
setCompleted({});
};

return(
// <AuthWrapper>
<Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}>
{steps.map((label, index) => (
<Step key={label} completed={completed[index]}>
{
index < 2 ?
(<StepButton onClick={handleStep(index)}>
{label}
</StepButton>) :
(<StepButton
sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
icon={<VisibilityIcon />}
onClick={handleStep(index)}
const steps = ['個人資料', '預覽', '完成提交'];

const Register = () => {
const [activeStep, setActiveStep] = useState(0);
const [completed, setCompleted] = useState([false]);
const [isValid, setisValid] = useState(null);

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

const totalSteps = () => {
return steps.length;
};

const completedSteps = () => {
return Object.keys(completed).length;
};

const isLastStep = () => {
return activeStep === totalSteps() - 1;
};

const allStepsCompleted = () => {
return completedSteps() === totalSteps();
};

const handleNext = () => {
console.log("test 1")
const newActiveStep =
isLastStep() && !allStepsCompleted()
? // It's the last step, but not all steps have been completed,
// find the first step that has been completed
steps.findIndex((step, i) => !(i in completed))
: activeStep + 1;
setActiveStep(newActiveStep);
console.log(newActiveStep)
};

const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};

// const handleStep = (step) => () => {
// setActiveStep(step);
// };

// const handleComplete = () => {
// const newCompleted = completed;
// newCompleted[activeStep] = true;
// setCompleted(newCompleted);
// handleNext();
// };

const handleReset = () => {
setActiveStep(0);
setCompleted({});
};

return(
// <AuthWrapper>
<Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}>
{steps.map((label, index) => (
<Step key={label} completed={completed[index]} readOnly="true">
{
index < 2 ?
(<StepButton
// onClick={handleStep(index)}
>
{label}
</StepButton>) :
(<StepButton
sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
icon={<VisibilityIcon />}
// onClick={handleStep(index)}
>
{label}
</StepButton>)
}

</Step>
))}
</Stepper>
{allStepsCompleted() ? (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
All steps completed - you&apos;re finished
</Typography>
<Stack direction="row" sx={{ pt: 2 }}>
<Stack sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button>
</Stack>
</React.Fragment>
) : (
<React.Fragment>
<AuthWrapper>
<CustomFormWizard updateValid={updateValid} step={activeStep} />
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}>
{ activeStep === totalSteps() - 1 ? (
<Button
color="inherit"
disabled={true}
onClick={handleBack}
sx={{ mr: 1 }}
>
{label}
</StepButton>)
}

</Step>
))}
</Stepper>
{allStepsCompleted() ? (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
All steps completed - you&apos;re finished
</Typography>
<Stack direction="row" sx={{ pt: 2 }}>
<Stack sx={{ flex: '1 1 auto' }} />
<Button onClick={handleReset}>Reset</Button>
</Stack>
</React.Fragment>
) : (
<React.Fragment>
<AuthWrapper>
<CustomFormWizard updateValid={updateValid} step={activeStep} />
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>
<Stack direction="row" sx={{ pt: 2 }}>
{ activeStep === totalSteps() - 1 ? (
<Button
color="inherit"
disabled={true}
onClick={handleBack}
sx={{ mr: 1 }}
>
返回
</Button>
):(
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
返回
</Button>
)
}
<Stack sx={{ flex: '1 1 auto' }} />
{activeStep === totalSteps() - 2 ?
(
<Button onClick={handleNext} sx={{ mr: 1 }}>
完成
返回
</Button>
) : ( activeStep === totalSteps() - 1 ?
):(
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
返回
</Button>
)
}
<Stack sx={{ flex: '1 1 auto' }} />
{activeStep === totalSteps() - 2 ?
(
<Button color="inherit"
disabled={true} sx={{ mr: 1 }}>
<Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
完成
</Button>
):
(
<Button disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
繼續
</Button>
)
) : ( activeStep === totalSteps() - 1 ?
(
<Button variant="outlined" color="inherit"
disabled={true} sx={{ mr: 1 }}>
完成
</Button>
):
(
<Button variant="outlined" disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
繼續
</Button>
)
)}
{/* {activeStep !== steps.length &&
(completed[activeStep] ? (
<Typography variant="caption" sx={{ display: 'inline-block' }}>
Step {activeStep + 1} already completed
</Typography>
) : (
<Button onClick={handleComplete}>
{completedSteps() === totalSteps() - 1
? 'Finish'
: 'Complete Step'}
</Button>
))} */}
</Stack>
</React.Fragment>
)}
</Stack >
// </AuthWrapper>
);
};
export default Register;
{/* {activeStep !== steps.length &&
(completed[activeStep] ? (
<Typography variant="caption" sx={{ display: 'inline-block' }}>
Step {activeStep + 1} already completed
</Typography>
) : (
<Button onClick={handleComplete}>
{completedSteps() === totalSteps() - 1
? 'Finish'
: 'Complete Step'}
</Button>
))} */}
</Stack>
</React.Fragment>
)}
</Stack >
// </AuthWrapper>
);
};
export default Register;

+ 89
- 44
src/pages/authentication/auth-forms/BusCustomFormWizard.js Zobrazit soubor

@@ -30,11 +30,14 @@ import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import {apiPath} from "auth/utils";
import axios from "axios";
import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
import * as HttpUtils from 'utils/HttpUtils';
import UploadFileTable from './UploadFileTable';

// assets
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { Paper } from '../../../../node_modules/@mui/material/index';

import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import { Link } from 'react-router-dom';
// ============================|| FIREBASE - REGISTER ||============================ //

const BusCustomFormWizard = (props) => {
@@ -42,6 +45,8 @@ const BusCustomFormWizard = (props) => {
const [level, setLevel] = useState();
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setshowConfirmPassword] = useState(false);
const [fileList, setFileList] = useState([]);
const [fileListData, setFileListData] = useState([]);

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
@@ -65,7 +70,7 @@ const BusCustomFormWizard = (props) => {
const [termsAndConAccept, setTermsAndConAccept] = useState(false);
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
const idDocTypeComboList = ["passport","HKID","CNID","BR","otherCert"];
const idDocTypeComboList = ["BR","otherCert"];
const address4ComboList =
["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
"坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
@@ -78,8 +83,8 @@ const BusCustomFormWizard = (props) => {
+"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
+"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"

useEffect(() => {
changePassword('');
useEffect(() => {
changePassword('');
}, []);

const checkDataField = (data)=> {
@@ -105,7 +110,31 @@ const BusCustomFormWizard = (props) => {
setTermsAndConNotAccept(event.target.checked)
setTermsAndConAccept(!event.target.checked)
}
};
};

const handleFileUpload = (event)=>{
const uploadFileList = event.target.files;
const saveFileList = [];
var currentIndex = 0;

if (!fileList.length==null){
currentIndex = fileList.length;
}

for (let i = 0; i < uploadFileList.length; i++){
const file = event.target.files[i]
file.id = currentIndex+i+1
saveFileList.push(file)
}

setFileListData(saveFileList)
setFileList(uploadFileList);
};

useEffect(() => {
console.log(props.step);
_onSubmit();
}, [props.step])

const {handleSubmit} = useForm({})
const _onSubmit = () => {
@@ -134,7 +163,7 @@ const BusCustomFormWizard = (props) => {
if (termsAndConNotAccept){
tncFlag = false
}
console.log(tncFlag)
if (checkDataField(values)){
axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
username: values.username,
@@ -152,13 +181,21 @@ const BusCustomFormWizard = (props) => {
tncFlag:tncFlag
})
.then((response) => {
console.log("Success")
console.log(response)
HttpUtils.fileUpload(
{
refType:"identification",
refId: response.data.id,
file: fileList[0],
onSuccess: (response)=>{
console.log(response);
// setOpen(true);
}
}
);
})
.catch(error => {
console.error(error);
});

});
}
}

@@ -185,8 +222,8 @@ const BusCustomFormWizard = (props) => {
username: Yup.string().max(255).required('請輸入用戶名稱'),
password: Yup.string().max(255).required('請輸入密碼'),
confirmPassword: Yup.string().max(255).required('請確認密碼'),
enName: Yup.string().max(255).required('請輸入英文姓名'),
chName: Yup.string().max(255).required('請輸入中文姓名'),
enName: Yup.string().max(255).required('請輸入英文名稱'),
chName: Yup.string().max(255).required('請輸入中文名稱'),
address1: Yup.string().max(255).required('請輸入第一行地址'),
address2: Yup.string().max(255).required('請輸入第二行地址'),
address3: Yup.string().max(255).required('請輸入第三行地址'),
@@ -198,7 +235,6 @@ const BusCustomFormWizard = (props) => {
});
const { values } = formik
useEffect(() => {
// console.log(values)
}, [values])

return (
@@ -362,7 +398,7 @@ const BusCustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的個人資料</Typography>
<Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>公司/機構資料</Typography>
{/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
Already have an account?
</Typography> */}
@@ -371,7 +407,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12} >
<Grid container sx={{mb:1}}>
<Stack spacing={1}>
<InputLabel htmlFor="idDocType-signup">身份證明文件
<InputLabel htmlFor="idDocType-signup">公司證明文件
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
{/* {formik.touched.enName && formik.errors.enName && (
@@ -415,7 +451,7 @@ const BusCustomFormWizard = (props) => {
sx={{mr:1}}
error={Boolean(formik.touched.idNo && formik.errors.idNo)}
inputProps={{
maxLength: selectedIdDocType =='HKID'?7:18,
maxLength: selectedIdDocType =='BR'?8:18,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
@@ -491,7 +527,7 @@ const BusCustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="enName-signup">英文姓名
<InputLabel htmlFor="enName-signup">英文名稱
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
@@ -500,7 +536,7 @@ const BusCustomFormWizard = (props) => {
value={formik.values.enName}
name="enName"
onChange={formik.handleChange}
placeholder="與你的身份證明文件相同"
placeholder="與公司證明文件相同"
fullWidth
error={Boolean(formik.touched.enName && formik.errors.enName)}
inputProps={{
@@ -520,7 +556,7 @@ const BusCustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="chName-signup">中文姓名</InputLabel>
<InputLabel htmlFor="chName-signup">中文名稱</InputLabel>
<OutlinedInput
fullWidth
error={Boolean(formik.touched.chName && formik.errors.chName)}
@@ -529,7 +565,7 @@ const BusCustomFormWizard = (props) => {
value={formik.values.chName}
name="chName"
onChange={formik.handleChange}
placeholder="與你的身份證明文件相同"
placeholder="與公司證明文件相同"
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
@@ -645,7 +681,7 @@ const BusCustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的聯絡資料</Typography>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>聯絡資料</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
@@ -823,21 +859,29 @@ const BusCustomFormWizard = (props) => {
<Grid container>
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>公司證明文件</Typography>
<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 mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件
<input type="file" accept=".csv" hidden />
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳公司證明文件
<input
accept="image/*"
//className={classes.input}
id="contained-button-file"
multiple
type="file"
onChange={handleFileUpload}
style={{display: 'none'}}
/>
</Button>
{/* <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}} onClick={test123}>test
</Button> */}
<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 mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
{fileList !=null?
<UploadFileTable recordList={fileListData} />:null}
{/* <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={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
</Stack>
<Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
</Stack> */}
</Stack>
</Grid>
</Grid>
@@ -903,7 +947,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的公司/機構用戶</Typography>
</div>
{/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
<Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
@@ -926,7 +970,7 @@ const BusCustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的個人資料</Typography>
<Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>公司/機構資料</Typography>
{/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
Already have an account?
</Typography> */}
@@ -935,7 +979,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={12} >
<Stack spacing={1}>
<Typography>
身份證明文件
公司證明文件
</Typography>
</Stack>
</Grid>
@@ -964,7 +1008,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography>
英文姓名:
英文名稱:
</Typography>
<Typography id="preview-enName-signup">
{formik.values.enName}
@@ -974,7 +1018,7 @@ const BusCustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography>
中文姓名:
中文名稱:
</Typography>
<Typography id="preview-chName-signup">
{formik.values.chName}
@@ -1007,7 +1051,7 @@ const BusCustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的聯絡資料</Typography>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>聯絡資料</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
@@ -1042,11 +1086,11 @@ const BusCustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} mt={1} mb={1}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>公司證明文件</Typography>
<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 mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件
<Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳公司證明文件
<input type="file" accept=".csv" hidden />
</Button>
<Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
@@ -1061,14 +1105,15 @@ const BusCustomFormWizard = (props) => {
<FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
<Grid container spacing={3}>
<Grid item xs={12}>
<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={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">完成申請，請登入帳戶</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
</Grid>
</Grid>
</FormGroup>
</form>
</FormikProvider>
);


+ 16
- 18
src/pages/authentication/auth-forms/CustomFormWizard.js Zobrazit soubor

@@ -36,7 +36,8 @@ import UploadFileTable from './UploadFileTable';
// assets
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { Paper } from '../../../../node_modules/@mui/material/index';

import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import { Link } from 'react-router-dom';
// ============================|| FIREBASE - REGISTER ||============================ //

const CustomFormWizard = (props) => {
@@ -82,8 +83,8 @@ const CustomFormWizard = (props) => {
+"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
+"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"

useEffect(() => {
changePassword('');
useEffect(() => {
changePassword('');
}, []);

const checkDataField = (data)=> {
@@ -115,10 +116,6 @@ const CustomFormWizard = (props) => {
const uploadFileList = event.target.files;
const saveFileList = [];
var currentIndex = 0;
// var index = 0;
console.log(uploadFileList);
console.log(uploadFileList.length);
console.log(fileList);

if (!fileList.length==null){
currentIndex = fileList.length;
@@ -129,13 +126,16 @@ const CustomFormWizard = (props) => {
file.id = currentIndex+i+1
saveFileList.push(file)
}
console.log(saveFileList);
console.log(uploadFileList);

setFileListData(saveFileList)
setFileList(uploadFileList);
};

useEffect(() => {
console.log(props.step);
_onSubmit();
}, [props.step])

const {handleSubmit} = useForm({})
const _onSubmit = () => {
values.idDocType = selectedIdDocType
@@ -163,7 +163,7 @@ const CustomFormWizard = (props) => {
if (termsAndConNotAccept){
tncFlag = false
}
console.log(tncFlag)
if (checkDataField(values)){
axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
username: values.username,
@@ -181,8 +181,6 @@ const CustomFormWizard = (props) => {
tncFlag:tncFlag
})
.then((response) => {
console.log("Success")
console.log(response)
HttpUtils.fileUpload(
{
refType:"identification",
@@ -237,7 +235,6 @@ const CustomFormWizard = (props) => {
});
const { values } = formik
useEffect(() => {
// console.log(values)
}, [values])

return (
@@ -1108,14 +1105,15 @@ const CustomFormWizard = (props) => {
<FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
<Grid container spacing={3}>
<Grid item xs={12}>
<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={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/>
<Typography display="inline" variant="h4">完成申請，請登入帳戶</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button>
</Stack>
</Grid>
</Grid>
</FormGroup>
</form>
</FormikProvider>
);


Zapsat Náhled
Načítá se…
Zrušit
Uložit