ind captcha

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

@@ -29,7 +29,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 * as ComboData from "../../../utils/ComboData";
 
@@ -47,7 +47,8 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 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 LoopIcon from '@mui/icons-material/Loop';
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -62,6 +63,10 @@ const CustomFormWizard = (props) => {
     const [isLoading, setLoding] = useState(true);
     const [updateRows, setUpdateRows] = useState([]);
 
+    const [captcha, setCaptcha] = useState([]);
+    const [captchaImg, setCaptchaImage] = useState([]);
+
+
     const handleClickShowPassword = () => {
         setShowPassword(!showPassword);
     };
@@ -103,8 +108,23 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         changePassword('');
+        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)=> {
         if (data.username !==""&&
             data.password !==""&&
@@ -120,11 +140,13 @@ const CustomFormWizard = (props) => {
             data.phoneCountryCode !==""&&
             termsAndConAccept == true&&
             fileList.length!==0&&
+            data.captchaField&&
             handlePassword(data.password)&&
             handleEmail(data.email)&&
             handleIdNo(data.idNo,selectedIdDocType.type)&&
             handlePhone(data.phone)&&
-            handleUsername(data.username)
+            handleUsername(data.username)&&
+            handleCaptcha(data.captchaField)
         )
         {
             setisValid(true)
@@ -328,6 +350,10 @@ const CustomFormWizard = (props) => {
         }
     }
 
+    function handleCaptcha(captchaField) {
+        return captchaField == captcha;
+    }
+
     function handleIdNo(idNo,selectedIdDocType) {
         var upperCase = /[A-Z]/g;
         if (!idNo.match(upperCase)&&selectedIdDocType=="HKID") {
@@ -418,6 +444,7 @@ const CustomFormWizard = (props) => {
             // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
             phone: yup.string().min(8,'請輸入最少8位數字').required('請輸入聯絡電話'),
             // fax: yup.string().min(8,'請輸入8位數字'),
+            captchaField: yup.string().required('請輸入驗證').oneOf([captcha], '請輸入有效驗證'),
         }),
     });
 
@@ -1198,6 +1225,47 @@ const CustomFormWizard = (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>