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

TODO captcha

master
Anna Ho 2 years ago
parent
4ff1411d92
commit
78249c03fe
1 changed files with 66 additions and 34 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +66
    -34
      src/pages/authentication/auth-forms/BusCustomFormWizard.js

+ 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 { Link } from 'react-router-dom';
import * as HttpUtils from "../../../utils/HttpUtils" import * as HttpUtils from "../../../utils/HttpUtils"
import LoopIcon from '@mui/icons-material/Loop';
//import { Invaild } from 'utils/IconUtils'; //import { Invaild } from 'utils/IconUtils';
// ============================|| FIREBASE - REGISTER ||============================ // // ============================|| FIREBASE - REGISTER ||============================ //


@@ -111,21 +112,25 @@ const BusCustomFormWizard = (props) => {
// localStorage.setItem("checkCode",null); // localStorage.setItem("checkCode",null);
// localStorage.setItem("base64Url",null); // localStorage.setItem("base64Url",null);
// }else{ // }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)=> { const checkDataField = (data)=> {
// console.log(data.brExpiryDate) // console.log(data.brExpiryDate)
if (data.username !==""&& if (data.username !==""&&
@@ -141,10 +146,12 @@ const BusCustomFormWizard = (props) => {
data.phoneCountryCode !==""&& data.phoneCountryCode !==""&&
termsAndConAccept == true&& termsAndConAccept == true&&
fileList.length!==0&& fileList.length!==0&&
data.captchaField&&
handlePassword(data.password)&& handlePassword(data.password)&&
handleEmail(data.email)&& handleEmail(data.email)&&
handlePhone(data.phone)&& handlePhone(data.phone)&&
handleUserName(data.username)
handleUserName(data.username)&&
handleCaptcha(data.captchaField)
) )
{ {
setisValid(true) setisValid(true)
@@ -342,6 +349,10 @@ const BusCustomFormWizard = (props) => {
} }
} }


function handleCaptcha(captchaField) {
return captchaField == captcha;
}

function handlePassword(password) { function handlePassword(password) {
let new_pass = password; let new_pass = password;
// regular expressions to validate password // regular expressions to validate password
@@ -416,7 +427,7 @@ const BusCustomFormWizard = (props) => {
fax: yup.string().min(8,'請輸入最少8位數字'), fax: yup.string().min(8,'請輸入最少8位數字'),
brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'), brExpiryDate: yup.string().min(8,'請輸入商業登記證有效日期'),
brNo: 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>
</Stack> </Stack>
</Grid> </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> </Grid>
<Grid item xs={12} md={12} mt={1} mb={1}> <Grid item xs={12} md={12} mt={1} mb={1}>
@@ -1164,6 +1155,47 @@ const BusCustomFormWizard = (props) => {
</Grid> </Grid>
</Grid> </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>
</Grid> </Grid>
</FormGroup> </FormGroup>


Write Preview
Loading…
Cancel
Save