TODO captcha

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -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>