add captcha

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

@@ -30,7 +30,7 @@ import * as yup from 'yup';
 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 {POST_PUBLIC_USER_REGISTER, POST_CAPTCHA} from "utils/ApiPathConst";
 // import * as HttpUtils from 'utils/HttpUtils';
 
 import Loadable from 'components/Loadable';
@@ -47,6 +47,8 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 
 import { Link } from 'react-router-dom';
+import * as HttpUtils from "../../../utils/HttpUtils"
+//import { Invaild } from 'utils/IconUtils';
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const BusCustomFormWizard = (props) => {
@@ -60,6 +62,9 @@ const BusCustomFormWizard = (props) => {
     const [isLoading, setLoding] = useState(true);
     const [updateRows, setUpdateRows] = useState([]);
 
+    const [captcha, setCaptcha] = useState([]);
+    const [captchaImg, setCaptchaImage] = useState([]);
+
     const handleClickShowPassword = () => {
         setShowPassword(!showPassword);
     };
@@ -99,6 +104,26 @@ const BusCustomFormWizard = (props) => {
 
     useEffect(() => {
         changePassword('');
+
+        // if (localStorage.getItem('checkCode') != null){
+        //     setCaptcha(localStorage.getItem('checkCode'));
+        //     setCaptchaImage(localStorage.getItem('base64Url'));
+        //     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'));
+                }
+            });
+        // }
+        
+        
     }, []);
 
     const checkDataField = (data)=> {
@@ -391,6 +416,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;})
         })
     
     });
@@ -1030,6 +1056,26 @@ const BusCustomFormWizard = (props) => {
                                                     </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>

src/utils/ApiPathConst.js

@@ -35,6 +35,7 @@ export const GET_FILE_DELETE = apiPath+'/file/delete';
 // POST request
 //Login
 export const POST_LOGIN = '/login';
+export const POST_CAPTCHA = apiPath+'/captcha';
 
 //register
 export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';