diff --git a/src/pages/authentication/BusRegister.js b/src/pages/authentication/BusRegister.js index 3fde0d9..fb1747f 100644 --- a/src/pages/authentication/BusRegister.js +++ b/src/pages/authentication/BusRegister.js @@ -21,7 +21,7 @@ import { notifyActionError } from 'utils/CommonFunction'; const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/BusCustomFormWizard'))); const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom'))); import axios from "axios"; -import { GET_USERNAME } from "utils/ApiPathConst"; +import { GET_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst"; // import CustomFormWizard from './auth-forms/BusCustomFormWizard'; // import AuthWrapper from './AuthWrapperCustom'; @@ -57,6 +57,8 @@ const BusRegister = () => { const [completed, setCompleted] = useState([false]); const [updateValid, setUpdateValid] = useState(false); const [username, setUsername] = useState("") + const [base64Url, setBase64Url] = useState("") + const [checkCode, setCheckCode] = useState("") const totalSteps = () => { return steps.length; @@ -83,7 +85,21 @@ const BusRegister = () => { return Number(response.data[0]) === 1 } + const handleCaptcha = async () => { + const response = await axios.post(`${POST_VERIFY_CAPTCHA}`, { + captcha: base64Url, + checkCode: checkCode, + }) + return Boolean(response.data["success"]); + } + const handleNext = async () => { + const captchaTest = await handleCaptcha(); + if (!captchaTest) { + notifyActionError("請輸入有效驗證") + return; + } + const test = await handleCheckUsername() if (test) { notifyActionError("此用戶登入名稱已被注冊，請使用其他用戶登入名稱") @@ -151,7 +167,13 @@ const BusRegister = () => { ) : ( - + {/* */} diff --git a/src/pages/authentication/IAmSmartRegister.js b/src/pages/authentication/IAmSmartRegister.js index 8dd909e..aca87e5 100644 --- a/src/pages/authentication/IAmSmartRegister.js +++ b/src/pages/authentication/IAmSmartRegister.js @@ -15,7 +15,7 @@ import { Button, } from '@mui/material'; import VisibilityIcon from '@mui/icons-material/Visibility'; -import { GET_ID } from "utils/ApiPathConst"; +import { GET_ID, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst"; // project import import Loadable from 'components/Loadable'; @@ -82,11 +82,24 @@ const Register = () => { return Number(response.data[0]) === 1 } + const handleCaptcha = async () => { + const response = await axios.post(`${POST_VERIFY_CAPTCHA}`, { + captcha: base64Url, + checkCode: checkCode, + }) + return Boolean(response.data["success"]); + } + const handleNext = async () => { - if(!idNo){ + if (!idNo) { notifyActionError("資料，請返回注冊頁面。") return; } + const captchaTest = await handleCaptcha(); + if (!captchaTest) { + notifyActionError("請輸入有效驗證") + return; + } const test = await handleCheckID() if (test) { notifyActionError("此用戶已注冊，請返回登入頁面並進行登入流程。") @@ -154,7 +167,13 @@ const Register = () => { ) : ( - + {/* */} diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js index 7422578..150edb2 100644 --- a/src/pages/authentication/Register.js +++ b/src/pages/authentication/Register.js @@ -15,7 +15,7 @@ import { Button, } from '@mui/material'; import VisibilityIcon from '@mui/icons-material/Visibility'; -import { GET_USERNAME } from "utils/ApiPathConst"; +import { GET_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst"; // project import import Loadable from 'components/Loadable'; @@ -56,6 +56,8 @@ const Register = () => { const [completed, setCompleted] = useState([false]); const [updateValid, setUpdateValid] = useState(false); const [username, setUsername] = useState(""); + const [base64Url, setBase64Url] = useState("") + const [checkCode, setCheckCode] = useState("") const totalSteps = () => { return steps.length; @@ -82,7 +84,23 @@ const Register = () => { return Number(response.data[0]) === 1 } + const handleCaptcha = async () => { + const response = await axios.post(`${POST_VERIFY_CAPTCHA}`, { + captcha: base64Url, + checkCode: checkCode, + }) + return Boolean(response.data["success"]); + } + + const handleNext = async () => { + + const captchaTest = await handleCaptcha(); + if (!captchaTest) { + notifyActionError("請輸入有效驗證") + return; + } + const test = await handleCheckUsername() if (test) { notifyActionError("此用戶登入名稱已被注冊，請使用其他用戶登入名稱") @@ -150,7 +168,13 @@ const Register = () => { ) : ( - + {/* */} diff --git a/src/pages/authentication/RegisterCustom.js b/src/pages/authentication/RegisterCustom.js index 2ed113a..5298382 100644 --- a/src/pages/authentication/RegisterCustom.js +++ b/src/pages/authentication/RegisterCustom.js @@ -25,7 +25,7 @@ const RegisterCustom = () => { } const getQRWithIAmSmart = () => { - let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/authcallback"; + let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/registrycallback"; let url = iAmSmartPath + "/api/v1/auth/getQR" + "?clientID=" + clientId + "&responseType=code" diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js index 090a736..6d1a6c5 100644 --- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js +++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js @@ -67,8 +67,7 @@ const BusCustomFormWizard = (props) => { const [updateRows, setUpdateRows] = useState([]); // const [userNameList, setUserNameList] = useState([]); - const [captcha, setCaptcha] = useState([]); - const [captchaImg, setCaptchaImage] = useState([]); + const [captchaImg, setCaptchaImage] = useState(""); const handleClickShowPassword = () => { setShowPassword(!showPassword); @@ -113,26 +112,6 @@ 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{ - // onCaptchaChange(); - // // } - // axios.get(`${GET_USERNAME}`) - // .then((response) => { - // if (response.status === 200) { - // setUserNameList(response.data); - // } - - // }) - // .catch(error => { - // console.log(error); - // return false; - // }); }, []); const handleCheckUsername = async () => { @@ -192,11 +171,10 @@ const BusCustomFormWizard = (props) => { const onCaptchaChange = () => { HttpUtils.post({ url: POST_CAPTCHA, - params: { width: 130, height: 40 }, + params: { width: 130, height: 40, captcha: captchaImg}, onSuccess: (responseData) => { - localStorage.setItem("checkCode", responseData.checkCode); + props.setBase64Url(responseData.base64Url) localStorage.setItem("base64Url", responseData.base64Url); - setCaptcha(localStorage.getItem('checkCode')); setCaptchaImage(localStorage.getItem('base64Url')); } }); @@ -335,6 +313,7 @@ const BusCustomFormWizard = (props) => { useEffect(() => { props.step == 2 ? _onSubmit() : null; + if(captchaImg=="") onCaptchaChange(); checkDataField(values) }, [props.step]) @@ -447,7 +426,7 @@ const BusCustomFormWizard = (props) => { } function handleCaptcha(captchaField) { - return captchaField == captcha; + return captchaField; } function handlePassword(password) { @@ -554,7 +533,7 @@ const BusCustomFormWizard = (props) => { } } }), - captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).oneOf([captcha], displayErrorMsg('請輸入有效驗證')), + captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')) }, ['enCompanyName', 'chCompanyName']), }); @@ -1397,6 +1376,7 @@ const BusCustomFormWizard = (props) => { name="captchaField" onChange={(event) => { const value = event.target.value; + props.setCheckCode(event.target.value); formik.setFieldValue("captchaField", value); }} sx={{ width: '75%' }} diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 4a63af8..1eca827 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -64,9 +64,7 @@ const CustomFormWizard = (props) => { const [checkUpload, setCheckUpload] = useState(false); const [isLoading, setLoding] = useState(true); const [updateRows, setUpdateRows] = useState([]); - - const [captcha, setCaptcha] = useState([]); - const [captchaImg, setCaptchaImage] = useState([]); + const [captchaImg, setCaptchaImage] = useState(""); const handleClickShowPassword = () => { setShowPassword(!showPassword); @@ -115,7 +113,8 @@ const CustomFormWizard = (props) => { useEffect(() => { changePassword(''); - onCaptchaChange(); + if(captchaImg=="") + onCaptchaChange(); }, []); const handleCheckUsername = async () => { @@ -175,11 +174,10 @@ const CustomFormWizard = (props) => { const onCaptchaChange = () => { HttpUtils.post({ url: POST_CAPTCHA, - params: { width: 130, height: 40 }, + params: { width: 130, height: 40, captcha: captchaImg}, onSuccess: (responseData) => { - localStorage.setItem("checkCode", responseData.checkCode); + props.setBase64Url(responseData.base64Url) localStorage.setItem("base64Url", responseData.base64Url); - setCaptcha(localStorage.getItem('checkCode')); setCaptchaImage(localStorage.getItem('base64Url')); } }); @@ -305,7 +303,8 @@ const CustomFormWizard = (props) => { useEffect(() => { props.step == 2 ? _onSubmit() : null; - onCaptchaChange(); + if(captchaImg=="") + onCaptchaChange(); checkDataField(values) }, [props.step]) @@ -422,7 +421,7 @@ const CustomFormWizard = (props) => { } function handleCaptcha(captchaField) { - return captchaField == captcha; + return captchaField; } function handleIdNo(idNo, selectedIdDocType, checkDigit) { @@ -629,7 +628,7 @@ const CustomFormWizard = (props) => { // faxCountryCode: yup.string().min(3,'請輸入3位數字'), phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')), // fax: yup.string().min(8,'請輸入8位數字'), - captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).oneOf([captcha], displayErrorMsg('請輸入有效驗證')), + captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), }), }); @@ -1539,6 +1538,7 @@ const CustomFormWizard = (props) => { name="captchaField" onChange={(event) => { const value = event.target.value; + props.setCheckCode(event.target.value); formik.setFieldValue("captchaField", value); }} sx={{ width: '75%' }} diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index fcba63b..d9077b4 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -50,7 +50,6 @@ const CustomFormWizard = (props) => { const [checkUpload, setCheckUpload] = useState(false); const [isLoading, setLoding] = useState(true); - const [captcha, setCaptcha] = useState([]); const [captchaImg, setCaptchaImage] = useState([]); const [selectedAddress4, setSelectedAddress4] = useState(null); @@ -77,6 +76,7 @@ const CustomFormWizard = (props) => { useEffect(() => { location.state?.responseData ?? {} + if(captchaImg=="") onCaptchaChange(); responseToData(); }, []); @@ -193,16 +193,16 @@ const CustomFormWizard = (props) => { const onCaptchaChange = () => { HttpUtils.post({ url: POST_CAPTCHA, - params: { width: 130, height: 40 }, + params: { width: 130, height: 40, captcha: captchaImg}, onSuccess: (responseData) => { - localStorage.setItem("checkCode", responseData.checkCode); + props.setBase64Url(responseData.base64Url) localStorage.setItem("base64Url", responseData.base64Url); - setCaptcha(localStorage.getItem('checkCode')); setCaptchaImage(localStorage.getItem('base64Url')); } }); } + const checkDataField = (data) => { if (data.address1 !== "" && data.email !== "" && @@ -248,6 +248,7 @@ const CustomFormWizard = (props) => { useEffect(() => { props.step == 2 ? _onSubmit() : null; + if(captchaImg=="") onCaptchaChange(); checkDataField(values) }, [props.step]) @@ -329,7 +330,7 @@ const CustomFormWizard = (props) => { } function handleCaptcha(captchaField) { - return captchaField == captcha; + return captchaField; } function handleEmail(email) { @@ -367,7 +368,7 @@ const CustomFormWizard = (props) => { emailConfirm: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')).oneOf([yup.ref('email'), null], displayErrorMsg('請輸入相同電郵')), phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')), phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')), - captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).oneOf([captcha], displayErrorMsg('請輸入有效驗證')), + captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')), }), }); @@ -851,6 +852,7 @@ const CustomFormWizard = (props) => { name="captchaField" onChange={(event) => { const value = event.target.value; + props.setCheckCode(event.target.value); formik.setFieldValue("captchaField", value); }} sx={{ width: '75%' }} diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index ec29d6f..b92c0a9 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -40,6 +40,7 @@ export const GET_FILE_DELETE = apiPath+'/file/delete'; //Login export const POST_LOGIN = '/login'; export const POST_CAPTCHA = apiPath+'/captcha'; +export const POST_VERIFY_CAPTCHA = apiPath+'/verifyCaptcha'; //register export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register'; @@ -106,5 +107,5 @@ export const POST_EMAIL_SAVE = apiPath+'/email/save'; export const DELETE_EMAIL = apiPath+'/email/delete'; //iAmSmart -export const GET_SMART_PROFILE = apiPath+'smart/getProfile'; //POST -export const GET_SMART_LOGIN = apiPath+'smart/login'; //POST \ No newline at end of file +export const GET_SMART_PROFILE = apiPath+'/smart/getProfile'; //POST +export const GET_SMART_LOGIN = apiPath+'/smart/login'; //POST \ No newline at end of file