| @@ -7,10 +7,10 @@ import useJwt from 'auth/jwt/coreUseJwt'; | |||
| */ | |||
| // eslint-disable-next-line arrow-body-style | |||
| export const hostname = 'localhost'; | |||
| const hostPort = '8080'; | |||
| const hostPort = '8090'; | |||
| export const hostPath = `http://${hostname}:${hostPort}`; | |||
| export const apiPath = `${hostPath}/api`; | |||
| //export const apiPath = `/api`; | |||
| // export const apiPath = `/api`; | |||
| export const isUserLoggedIn = () => { | |||
| return localStorage.getItem('userData') && localStorage.getItem(useJwt.jwtConfig.storageTokenKeyName); | |||
| @@ -163,13 +163,13 @@ | |||
| {activeStep === totalSteps() - 2 ? | |||
| ( | |||
| <Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | |||
| 完成 | |||
| 提交 | |||
| </Button> | |||
| ) : ( activeStep === totalSteps() - 1 ? | |||
| ( | |||
| <Button variant="outlined" color="inherit" | |||
| disabled={true} sx={{ mr: 1 }}> | |||
| 完成 | |||
| 提交 | |||
| </Button> | |||
| ): | |||
| ( | |||
| @@ -69,6 +69,7 @@ | |||
| }; | |||
| const handleNext = () => { | |||
| scrollToTop() | |||
| const newActiveStep = | |||
| isLastStep() && !allStepsCompleted() | |||
| ? // It's the last step, but not all steps have been completed, | |||
| @@ -76,24 +77,17 @@ | |||
| steps.findIndex((step, i) => !(i in completed)) | |||
| : activeStep + 1; | |||
| setActiveStep(newActiveStep); | |||
| console.log(newActiveStep) | |||
| // console.log(newActiveStep) | |||
| }; | |||
| const handleBack = () => { | |||
| scrollToTop() | |||
| setActiveStep((prevActiveStep) => prevActiveStep - 1); | |||
| }; | |||
| // const handleStep = (step) => () => { | |||
| // setActiveStep(step); | |||
| // }; | |||
| // const handleComplete = () => { | |||
| // const newCompleted = completed; | |||
| // newCompleted[activeStep] = true; | |||
| // setCompleted(newCompleted); | |||
| // handleNext(); | |||
| // }; | |||
| const scrollToTop = () => { | |||
| window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); | |||
| }; | |||
| const handleReset = () => { | |||
| setActiveStep(0); | |||
| @@ -166,13 +160,13 @@ | |||
| {activeStep === totalSteps() - 2 ? | |||
| ( | |||
| <Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}> | |||
| 完成 | |||
| 提交 | |||
| </Button> | |||
| ) : ( activeStep === totalSteps() - 1 ? | |||
| ( | |||
| <Button variant="outlined" color="inherit" | |||
| disabled={true} sx={{ mr: 1 }}> | |||
| 完成 | |||
| 提交 | |||
| </Button> | |||
| ): | |||
| ( | |||
| @@ -32,6 +32,7 @@ import axios from "axios"; | |||
| import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst"; | |||
| import * as HttpUtils from 'utils/HttpUtils'; | |||
| import UploadFileTable from './UploadFileTable'; | |||
| import LoadingComponent from "../../extra-pages/LoadingComponent"; | |||
| // assets | |||
| import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; | |||
| @@ -50,6 +51,7 @@ const BusCustomFormWizard = (props) => { | |||
| const [fileList, setFileList] = useState([]); | |||
| const [fileListData, setFileListData] = useState([]); | |||
| const [checkUpload, setCheckUpload] = useState(false); | |||
| const [isLoading, setLoding] = useState(true); | |||
| const handleClickShowPassword = () => { | |||
| setShowPassword(!showPassword); | |||
| @@ -164,6 +166,7 @@ const BusCustomFormWizard = (props) => { | |||
| const {handleSubmit} = useForm({}) | |||
| const _onSubmit = () => { | |||
| setLoding(true); | |||
| values.address4 = selectedAddress4 | |||
| values.address5 = selectedAddress5 | |||
| // console.log(values) | |||
| @@ -222,6 +225,7 @@ const BusCustomFormWizard = (props) => { | |||
| file: fileList[0], | |||
| onSuccess: (response)=>{ | |||
| console.log(response); | |||
| setLoding(false); | |||
| // setOpen(true); | |||
| } | |||
| } | |||
| @@ -229,7 +233,10 @@ const BusCustomFormWizard = (props) => { | |||
| }) | |||
| .catch(error => { | |||
| console.error(error); | |||
| setLoding(false); | |||
| }); | |||
| }else{ | |||
| setLoding(false); | |||
| } | |||
| } | |||
| @@ -261,13 +268,14 @@ const BusCustomFormWizard = (props) => { | |||
| } | |||
| function handleEmail(email) { | |||
| var reg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; | |||
| var result = reg.test(email); | |||
| if (result == false) { | |||
| return false; | |||
| } | |||
| return true; | |||
| var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | |||
| // var result = reg.test(email); | |||
| var result = email.match(validRegex); | |||
| console.log("test1: "+result) | |||
| if (result == false) { | |||
| return false; | |||
| } | |||
| return true; | |||
| } | |||
| const formik = useFormik({ | |||
| @@ -824,7 +832,7 @@ const BusCustomFormWizard = (props) => { | |||
| name="phoneCountryCode" | |||
| // onBlur={formik.handleBlur} | |||
| onChange={formik.handleChange} | |||
| placeholder="eg:852" | |||
| placeholder="國際區號" | |||
| error={Boolean(formik.touched.phone && formik.errors.phone)} | |||
| onBlur={formik.handleBlur} | |||
| inputProps={{ | |||
| @@ -880,7 +888,7 @@ const BusCustomFormWizard = (props) => { | |||
| name="faxCountryCode" | |||
| // onBlur={formik.handleBlur} | |||
| onChange={formik.handleChange} | |||
| placeholder="eg:852" | |||
| placeholder="國際區號" | |||
| inputProps={{ | |||
| maxLength: 3, | |||
| onKeyDown: (e) => { | |||
| @@ -928,7 +936,7 @@ const BusCustomFormWizard = (props) => { | |||
| <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> | |||
| <Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳商業登記證及其他文件 | |||
| <input | |||
| accept="image/*" | |||
| accept="image/png, .jpg, .bmp, .pdf" | |||
| //className={classes.input} | |||
| id="contained-button-file" | |||
| multiple | |||
| @@ -1173,24 +1181,28 @@ const BusCustomFormWizard = (props) => { | |||
| {/* Submit page */} | |||
| <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}> | |||
| <Grid container spacing={3}> | |||
| <Grid item xs={12}> | |||
| {checkUpload? | |||
| // SUCCESS page | |||
| <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}> | |||
| <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> | |||
| : | |||
| // ERROR page | |||
| <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> */} | |||
| <CancelOutlinedIcon color="error" sx={{width:"200px",height:"200px"}}/> | |||
| <Typography display="inline" variant="h4">申請失敗,請稍後嘗試</Typography> | |||
| <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button> | |||
| </Stack> | |||
| } | |||
| </Grid> | |||
| {isLoading ? | |||
| <LoadingComponent/>: | |||
| <Grid item xs={12}> | |||
| {checkUpload? | |||
| // SUCCESS page | |||
| <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}> | |||
| <CheckCircleOutlineIcon color="success" sx={{width:"200px",height:"200px"}}/> | |||
| <Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography> | |||
| <Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址,請要指示完成驗證及登入系統。</Typography> | |||
| <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button> | |||
| </Stack> | |||
| : | |||
| // ERROR page | |||
| <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> */} | |||
| <CancelOutlinedIcon color="error" sx={{width:"200px",height:"200px"}}/> | |||
| <Typography display="inline" variant="h4">申請失敗,請稍後嘗試</Typography> | |||
| <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20,height:'60px'}}>返回登入頁面</Button> | |||
| </Stack> | |||
| } | |||
| </Grid> | |||
| } | |||
| </Grid> | |||
| </FormGroup> | |||
| </form> | |||
| @@ -275,14 +275,14 @@ const CustomFormWizard = (props) => { | |||
| } | |||
| function handleEmail(email) { | |||
| var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | |||
| // var result = reg.test(email); | |||
| var result = email.match(validRegex); | |||
| console.log("test1: "+result) | |||
| if (result == false) { | |||
| return false; | |||
| } | |||
| return true; | |||
| var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; | |||
| // var result = reg.test(email); | |||
| var result = email.match(validRegex); | |||
| console.log("test1: "+result) | |||
| if (result == false) { | |||
| return false; | |||
| } | |||
| return true; | |||
| } | |||
| const formik = useFormik({ | |||
| @@ -503,7 +503,7 @@ const CustomFormWizard = (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: 'primary.primary'}}>你的個人資料</Typography> | |||
| {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary"> | |||
| Already have an account? | |||
| </Typography> */} | |||
| @@ -534,6 +534,9 @@ const CustomFormWizard = (props) => { | |||
| onBlur={formik.handleBlur} | |||
| onChange={(event, newValue) => { | |||
| setSelectedIdDocType(newValue); | |||
| if (newValue!="HKID"){ | |||
| formik.setFieldValue("checkDigit","") | |||
| } | |||
| }} | |||
| sx={{"& .MuiInputBase-root": { height: "41px" },"#idDocType":{padding: "0px 0px 0px 0px"}, "& .MuiAutocomplete-endAdornment": { top: "auto" },}} | |||
| renderInput={(params) => <TextField {...params} placeholder="證件類別"/>} | |||
| @@ -877,7 +880,7 @@ const CustomFormWizard = (props) => { | |||
| name="phoneCountryCode" | |||
| // onBlur={formik.handleBlur} | |||
| onChange={formik.handleChange} | |||
| placeholder="eg:852" | |||
| placeholder="國際區號" | |||
| error={Boolean(formik.touched.phone && formik.errors.phone)} | |||
| onBlur={formik.handleBlur} | |||
| inputProps={{ | |||
| @@ -933,7 +936,7 @@ const CustomFormWizard = (props) => { | |||
| value={formik.values.faxCountryCode} | |||
| name="faxCountryCode" | |||
| onChange={formik.handleChange} | |||
| placeholder="eg:852" | |||
| placeholder="國際區號" | |||
| onBlur={formik.handleBlur} | |||
| inputProps={{ | |||
| maxLength: 3, | |||
| @@ -980,7 +983,7 @@ const CustomFormWizard = (props) => { | |||
| <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}> | |||
| <Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳身份證明文件 | |||
| <input | |||
| accept="image/*" | |||
| accept="image/png, .jpg, .bmp, .pdf" | |||
| //className={classes.input} | |||
| id="contained-button-file" | |||
| multiple | |||
| @@ -1085,7 +1088,7 @@ const CustomFormWizard = (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: 'primary.primary'}}>你的個人資料</Typography> | |||
| {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary"> | |||
| Already have an account? | |||
| </Typography> */} | |||
| @@ -55,12 +55,10 @@ export default function UploadFileTable({recordList}) { | |||
| id: 'size', | |||
| field: 'size', | |||
| headerName: '檔案大小', | |||
| flex: 1, | |||
| }, | |||
| { | |||
| id: 'type', | |||
| field: 'type', | |||
| headerName: '檔案類型', | |||
| valueGetter: (params) => { | |||
| console.log(params) | |||
| return Math.ceil(params.value/1024)+" KB"; | |||
| }, | |||
| flex: 1, | |||
| }, | |||
| ]; | |||
| @@ -73,12 +71,13 @@ export default function UploadFileTable({recordList}) { | |||
| editMode="row" | |||
| sx={{border:1}} | |||
| rowModesModel={rowModesModel} | |||
| initialState={{ | |||
| pagination: { | |||
| paginationModel: {page: 0, pageSize: 5}, | |||
| }, | |||
| }} | |||
| pageSizeOptions={[5, 10]} | |||
| disablePagination | |||
| // initialState={{ | |||
| // pagination: { | |||
| // paginationModel: {page: 0, pageSize: 5}, | |||
| // }, | |||
| // }} | |||
| // pageSizeOptions={[5, 10]} | |||
| autoHeight | |||
| /> | |||
| </Box> | |||
| @@ -3,7 +3,7 @@ import * as yup from 'yup'; | |||
| export const idDocType = ["passport","HKID","CNID","BR","otherCert"]; | |||
| export const district = ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區", | |||
| "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"]; | |||
| export const country = ["香港","內地","澳門"]; | |||
| export const country = ["中國香港","中國","中國澳門"]; | |||
| export const validationSchema = ()=>{ | |||
| return yup.object().shape({ | |||