Refactor captcha widget.

Author: robgietema

frontend/packages/volto-form-block/src/components/ViewSchemaForm.jsx

@@ -56,14 +56,7 @@ const messages = defineMessages({
   },
 });
 
-const FormBlockView = ({
-  data,
-  id,
-  properties,
-  metadata,
-  path,
-  moment: momentlib,
-}) => {
+const FormBlockView = ({ data, id, path, moment: momentlib }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   const location = useLocation();
@@ -106,19 +99,14 @@ const FormBlockView = ({
 
   const onCancel = () => {};
 
-  const onSubmit = (formData) => {
+  const onSubmit = async (formData) => {
     let submitData = { ...formData };
     let captcha = {
       provider: data.captcha,
-      token: submitData.captchaToken,
     };
-    if (data.captcha === 'honeypot') {
-      captcha.value = submitData['captchaWidget']?.value ?? '';
-      delete submitData.captchaWidget;
-    }
 
     if (data.captcha === 'recaptcha') {
-      captcha.token = submitData.captchaWidget;
+      captcha.token = await submitData.captchaWidget();
       delete submitData.captchaWidget;
     }
 
@@ -213,8 +201,6 @@ const FormBlockView = ({
           );
         }
 
-        const errEvent = new Event('formBlockSubmitError');
-        document.dispatchEvent(errEvent);
         setSubmitPressed(false);
       });
   };

frontend/packages/volto-form-block/src/components/Widgets/GoogleReCaptchaWidget.jsx

@@ -1,67 +1,22 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { useIntl } from 'react-intl';
 
 const ReCaptchaComponent = (props) => {
   const { GoogleReCaptcha: recaptchalib, id, onChange } = props;
-  const { useGoogleReCaptcha } = recaptchalib || {};
+  const { useGoogleReCaptcha } = recaptchalib;
+  const { executeRecaptcha } = useGoogleReCaptcha();
 
-  const executeRecaptchaRef = useRef(null);
-  const onChangeRef = useRef(onChange);
-  const idRef = useRef(id);
-  // Keep track if the initial verification has been attempted/done
-  const initialVerificationDoneRef = useRef(false);
-
-  const { executeRecaptcha } = useGoogleReCaptcha ? useGoogleReCaptcha() : {};
-
-  // Memoize the verification function
   const handleReCaptchaVerify = useCallback(async () => {
-    const currentExecuteRecaptcha = executeRecaptchaRef.current;
-    if (!currentExecuteRecaptcha) {
-      console.warn(
-        'Attempted to verify reCAPTCHA, but executeRecaptcha is not available.',
-      );
+    if (!executeRecaptcha) {
       return;
     }
-    try {
-      const token = await currentExecuteRecaptcha();
-      if (token && onChangeRef.current && idRef.current) {
-        onChangeRef.current(idRef.current, token);
-      } else if (!token) {
-        console.warn('executeRecaptcha ran but returned no token.');
-      }
-    } catch (error) {
-      console.error('Error executing reCAPTCHA:', error);
-    }
-  }, []);
-
-  // Update refs for props
-  useEffect(() => {
-    onChangeRef.current = onChange;
-    idRef.current = id;
-  }, [onChange, id]);
-
-  useEffect(() => {
-    executeRecaptchaRef.current = executeRecaptcha;
-
-    if (executeRecaptcha && !initialVerificationDoneRef.current) {
-      initialVerificationDoneRef.current = true;
-      handleReCaptchaVerify();
-    }
-  }, [executeRecaptcha, handleReCaptchaVerify]);
+    return await executeRecaptcha();
+  }, [executeRecaptcha]);
 
   useEffect(() => {
-    const handleError = (event) => {
-      console.log(
-        'formBlockSubmitError event received, triggering reCAPTCHA verification.',
-      );
-      handleReCaptchaVerify();
-    };
-
-    document.addEventListener('formBlockSubmitError', handleError);
-    return () => {
-      document.removeEventListener('formBlockSubmitError', handleError);
-    };
+    handleReCaptchaVerify();
+    onChange(id, handleReCaptchaVerify);
   }, [handleReCaptchaVerify]);
 
   return null;