Merge pull request #254 from daita-technologies/feat/invisible-captcha

feat: integrate invisible captcha

Author: Lộc Phạm

src/components/ReCaptchaInput/index.tsx

@@ -1,9 +1,11 @@
+import { useEffect } from "react";
 import { Controller } from "react-hook-form";
 import { Box, FormHelperText } from "@mui/material";
 import ReCAPTCHA from "react-google-recaptcha";
 import { RECAPTCHA_SITE_KEY } from "constants/defaultValues";
 import { ReCaptchaInputProps } from "./type";
-import { useEffect } from "react";
+
+const REQUIRE_RECAPTCHA_ERROR_MESSAGE = "You need to verify the captcha.";
 
 const ReCaptchaInput = function ({
   recaptchaRef,
@@ -14,15 +16,16 @@ const ReCaptchaInput = function ({
     register("captcha", {
       required: {
         value: true,
-        message: "You need to verify the captcha.",
+        message: REQUIRE_RECAPTCHA_ERROR_MESSAGE,
       },
     });
   }, []);
+
   return (
     <Controller
       control={control}
       name="captcha"
-      render={({ field, fieldState: { error } }) => (
+      render={({ fieldState: { error } }) => (
         <Box
           display="flex"
           flexDirection="column"
@@ -33,10 +36,12 @@ const ReCaptchaInput = function ({
           <ReCAPTCHA
             ref={recaptchaRef}
             sitekey={RECAPTCHA_SITE_KEY}
-            onChange={(token: any) => field.onChange(token)}
+            size="invisible"
           />
-
-          {error && <FormHelperText error>{error.message}</FormHelperText>}
+          {/* NOTE: We use invisible recaptcha is auto generate when submitted, therefore no need show required message */}
+          {error && error.message !== REQUIRE_RECAPTCHA_ERROR_MESSAGE && (
+            <FormHelperText error>{error.message}</FormHelperText>
+          )}
         </Box>
       )}
     />

src/routes/ForgotPasswordPage/index.tsx

@@ -19,7 +19,7 @@ import { MyButton, ReCaptchaInput } from "components";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
 import { Helmet } from "react-helmet";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { RootState } from "reduxes";
@@ -60,6 +60,7 @@ const ForgotPasswordPage = function () {
     handleSubmit,
     formState: { errors },
     setValue,
+    getValues,
     trigger,
   } = useForm<ForgotPasswordRequestFields>({ mode: "onChange" });
   const recaptchaRef = useRef<ReCAPTCHA>(null);
@@ -88,6 +89,22 @@ const ForgotPasswordPage = function () {
     }
   };
 
+  const generateReCatpchaToken = async () => {
+    if (recaptchaRef && recaptchaRef.current) {
+      const token = await recaptchaRef.current.executeAsync();
+      setValue("captcha", token || "");
+      onSubmit(getValues());
+    }
+  };
+
+  const onInvalidSubmit: SubmitErrorHandler<ForgotPasswordRequestFields> = (
+    error
+  ) => {
+    if (error.captcha && error.captcha.type === "required") {
+      generateReCatpchaToken();
+    }
+  };
+
   const password = useRef({});
   password.current = watch("password", "");
 
@@ -170,7 +187,7 @@ const ForgotPasswordPage = function () {
               sent to your email to verify.
             </Typography>
             <Box sx={{ mt: 3, py: 0, px: "14px" }}>
-              <form onSubmit={handleSubmit(onSubmit)}>
+              <form onSubmit={handleSubmit(onSubmit, onInvalidSubmit)}>
                 <TextField
                   variant="outlined"
                   required

src/routes/LoginPage/LoginForm.tsx

@@ -25,7 +25,7 @@ import {
 } from "constants/defaultValues";
 import { useEffect, useRef, useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 import { RootState } from "reduxes";
@@ -68,10 +68,25 @@ const LoginForm = function () {
   const isLoginAccountVerified = useSelector(
     (state: RootState) => state.authReducer.isLoginAccountVerified
   );
+
   const onSubmit: SubmitHandler<LoginFormFields> = (data) => {
     dispatch(loginAction(data));
   };
 
+  const generateReCatpchaToken = async () => {
+    if (recaptchaRef && recaptchaRef.current) {
+      const token = await recaptchaRef.current.executeAsync();
+      setValue("captcha", token || "");
+      onSubmit(getValues());
+    }
+  };
+
+  const onInvalidSubmit: SubmitErrorHandler<LoginFormFields> = (error) => {
+    if (error.captcha && error.captcha.type === "required") {
+      generateReCatpchaToken();
+    }
+  };
+
   const handleClickShowPassword = () => {
     setIsShowPassword(!isShowPassword);
   };
@@ -152,7 +167,7 @@ const LoginForm = function () {
           👋 Sign In
         </Typography>
         <Box mt={3}>
-          <form onSubmit={handleSubmit(onSubmit)}>
+          <form onSubmit={handleSubmit(onSubmit, onInvalidSubmit)}>
             <TextField
               variant="outlined"
               required

src/routes/RegisterPage/UserInfoForm.tsx

@@ -23,7 +23,7 @@ import {
 import moment from "moment";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { SubmitErrorHandler, SubmitHandler, useForm } from "react-hook-form";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "reduxes";
 import { registerAction } from "reduxes/auth/actions";
@@ -81,6 +81,7 @@ const UserInfoForm = function ({
     register,
     control,
     setValue,
+    getValues,
     watch,
     handleSubmit,
     trigger,
@@ -121,6 +122,20 @@ const UserInfoForm = function ({
     }
   };
 
+  const generateReCatpchaToken = async () => {
+    if (recaptchaRef && recaptchaRef.current) {
+      const token = await recaptchaRef.current.executeAsync();
+      setValue("captcha", token || "");
+      onSubmit(getValues());
+    }
+  };
+
+  const onInvalidSubmit: SubmitErrorHandler<RegisterFormFields> = (error) => {
+    if (error.captcha && error.captcha.type === "required") {
+      generateReCatpchaToken();
+    }
+  };
+
   const [isShowPassword, setIsShowPassword] = useState(false);
 
   const handleClickShowPassword = () => {
@@ -158,7 +173,10 @@ const UserInfoForm = function ({
 
   return (
     <Box>
-      <form onSubmit={handleSubmit(onSubmit)} autoComplete={autoCompleteString}>
+      <form
+        onSubmit={handleSubmit(onSubmit, onInvalidSubmit)}
+        autoComplete={autoCompleteString}
+      >
         <TextField
           variant="outlined"
           required