1 changed files with 66 additions and 34 deletions
Split View
Diff Options
+ 66
- 34
src/pages/authentication/auth-forms/BusCustomFormWizard.js
View File
| @@ -48,6 +48,7 @@ import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; | |||
| import { Link } from 'react-router-dom'; | |||
| import * as HttpUtils from "../../../utils/HttpUtils" | |||
| import LoopIcon from '@mui/icons-material/Loop'; | |||
| //import { Invaild } from 'utils/IconUtils'; | |||
| // ============================|| FIREBASE - REGISTER ||============================ // | |||
| @@ -111,21 +112,25 @@ const BusCustomFormWizard = (props) => { | |||
| // localStorage.setItem("checkCode",null); | |||
| // localStorage.setItem("base64Url",null); | |||
| // }else{ | |||
| HttpUtils.post({ | |||
| url: POST_CAPTCHA, | |||
| params:{width: 100, height: 40}, | |||
| onSuccess:(responseData)=>{ | |||
| localStorage.setItem("checkCode",responseData.checkCode); | |||
| localStorage.setItem("base64Url",responseData.base64Url); | |||
| setCaptcha(localStorage.getItem('checkCode')); | |||
| setCaptchaImage(localStorage.getItem('base64Url')); | |||
| } | |||
| }); | |||
| onCaptchaChange(); | |||
| // } | |||
| }, []); | |||
| const onCaptchaChange = ()=>{ | |||
| HttpUtils.post({ | |||
| url: POST_CAPTCHA, | |||
| params:{width: 130, height: 40}, | |||
| onSuccess:(responseData)=>{ | |||
| localStorage.setItem("checkCode",responseData.checkCode); | |||
| localStorage.setItem("base64Url",responseData.base64Url); | |||
| setCaptcha(localStorage.getItem('checkCode')); | |||
| setCaptchaImage(localStorage.getItem('base64Url')); | |||
| } | |||
| }); | |||
| } | |||
| const checkDataField = (data)=> { | |||
| // console.log(data.brExpiryDate) | |||
| if (data.username !==""&& | |||
| @@ -141,10 +146,12 @@ const BusCustomFormWizard = (props) => { | |||
| data.phoneCountryCode !==""&& | |||
| termsAndConAccept == true&& | |||
| fileList.length!==0&& | |||
| data.captchaField&& | |||
| handlePassword(data.password)&& | |||
| handleEmail(data.email)&& | |||
| handlePhone(data.phone)&& | |||
| handleUserName(data.username) | |||
| handleUserName(data.username)&& | |||
| handleCaptcha(data.captchaField) | |||
| ) | |||
| { | |||
| setisValid(true) | |||
| @@ -342,6 +349,10 @@ const BusCustomFormWizard = (props) => { | |||
| } | |||
| } | |||
| function handleCaptcha(captchaField) { | |||
| return captchaField == captcha; | |||
| } | |||
| function handlePassword(password) { | |||
| let new_pass = password; | |||
| // regular expressions to validate password | |||
| @@ -416,7 +427,7 @@ const BusCustomFormWizard = (props) => { | |||
| fax: yup.string().min(8,'請輸入最少8位數字'), | |||
| brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'), | |||
| brNo: yup.string().min(8,'請輸入商業登記證號碼'), | |||
| captchaField: yup.string().test("match", "Invalid", function(val){return val == captcha;}) | |||
| captchaField: yup.string().required('請輸入驗證').oneOf([captcha], '請輸入有效驗證'), | |||
| }) | |||
| }); | |||
| @@ -1055,28 +1066,8 @@ const BusCustomFormWizard = (props) => { | |||
| </Stack> | |||
| </Stack> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item xs={12} md={12} mt={1} mb={1}> | |||
| <Grid container> | |||
| <Grid item xs={12} md={12}> | |||
| <img src={captchaImg} width={200} height={45} alt=""/> | |||
| </Grid> | |||
| <Grid item xs={12} md={6}> | |||
| <OutlinedInput | |||
| id="captchaField" | |||
| type="text" | |||
| value={formik.values.captchaField} | |||
| name="captchaField" | |||
| onChange={(event) => { | |||
| const value = event.target.value; | |||
| formik.setFieldValue("captchaField",value); | |||
| }} | |||
| sx={{width:'75%'}} | |||
| /> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item xs={12} md={12} mt={1} mb={1}> | |||
| @@ -1164,6 +1155,47 @@ const BusCustomFormWizard = (props) => { | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| <Grid item xs={12} lg={12}> | |||
| <Grid container> | |||
| <Stack direction="column"> | |||
| <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}> | |||
| 驗證 | |||
| <span style={{color: '#f10000'}}>*</span> | |||
| </Typography> | |||
| <Stack spacing={1} direction="row"> | |||
| <Grid item xs={5} lg={5} style={{"border":"1px solid black;"}}> | |||
| <img src={captchaImg} alt=""/> | |||
| </Grid> | |||
| <Grid item xs={1} lg={1} style={{"border":"1px solid black;"}}> | |||
| <IconButton aria-label="refrashCaptcha" size="large" onClick={()=>{onCaptchaChange()}}> | |||
| <LoopIcon fontSize="inherit" /> | |||
| </IconButton> | |||
| </Grid> | |||
| <Grid item xs={6} lg={6}> | |||
| <OutlinedInput | |||
| fullWidth | |||
| id="captchaField" | |||
| type="text" | |||
| value={formik.values.captchaField} | |||
| onBlur={formik.handleBlur} | |||
| error={Boolean(formik.touched.captchaField && formik.errors.captchaField)} | |||
| name="captchaField" | |||
| onChange={(event) => { | |||
| const value = event.target.value; | |||
| formik.setFieldValue("captchaField",value); | |||
| }} | |||
| sx={{width:'75%'}} | |||
| /> | |||
| </Grid> | |||
| </Stack> | |||
| {formik.touched.captchaField && formik.errors.captchaField && ( | |||
| <FormHelperText error id="helper-text-captcha-signup"> | |||
| {formik.errors.captchaField} | |||
| </FormHelperText> | |||
| )} | |||
| </Stack> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </Grid> | |||
| </FormGroup> | |||