Merge pull request #2076 from rgristroph-usdoj/WS-503-revert-back-to-v2

WS-503: Switching back to v2 for now.

Author: brockfanning

js/components/foia_request_form.jsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Form from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
 import { Map } from 'immutable';
 import CustomFieldTemplate from 'components/request_custom_field_template';
 import USWDSRadioWidget from 'components/uswds_radio_widget';
 import USWDSCheckboxWidget from 'components/uswds_checkbox_widget';
-import { GoogleReCaptchaProvider, GoogleReCaptcha, useGoogleReCaptcha } from 'react-google-recaptcha-v3'; // Import v3 hook
+import ReCAPTCHA from 'react-google-recaptcha';
 import { requestActions } from '../actions';
 import { SubmissionResult } from '../models';
 import CustomObjectFieldTemplate from './object_field_template';
@@ -20,34 +20,16 @@ import dispatcher from '../util/dispatcher';
 function FoiaRequestForm({
   formData, upload, onSubmit, requestForm, submissionResult,
 }) {
-  const [settingsdata, setSettingsdata] = useState(null);
-  const [token, setToken] = useState('');
-  const [refreshReCaptcha, setRefreshReCaptcha] = useState(false);
-  const { executeRecaptcha } = useGoogleReCaptcha();
+  const recaptchaRef = useRef();
 
-  const setTokenFunc = (getToken) => {
-    setToken(getToken);
-  };
-
-  const handleReCaptchaVerify = useCallback(async () => {
-    if (!executeRecaptcha) {
-      console.log('Execute recaptcha not yet available');
-      return;
-    }
-
-    const newtoken = await executeRecaptcha('submit');
-    setTokenFunc(newtoken);
-    console.log('newtoken:');
-    console.log(newtoken);
-  }, [executeRecaptcha]);
+  const [settingsdata, setData] = useState(null);
 
   useEffect(() => {
     fetch('/files/settings.json')
       .then((response) => response.json())
-      .then((result) => setSettingsdata(result))
+      .then((result) => setData(result))
       .catch((error) => console.error('Error fetching recaptcha site key:', error));
-    handleReCaptchaVerify();
-  }, [handleReCaptchaVerify]);
+  }, []);
 
   // Helper function to jump to the first form error.
   function focusOnFirstError() {
@@ -75,7 +57,6 @@ function FoiaRequestForm({
 
   // Listen for jsonSchema validation errors and jump to them.
   function onError() {
-    setRefreshReCaptcha(!refreshReCaptcha);
     focusOnFirstError();
   }
 
@@ -93,23 +74,20 @@ function FoiaRequestForm({
   }
 
   function onFormSubmit({ formData: data }) {
-    // Now you can use the recaptcha token for your form submission
-    handleReCaptchaVerify();
-    data.expedited_processing.captcha = token;
+    const recaptchaValue = recaptchaRef.current.getValue();
+    // Now you can use the recaptchaValue for your form submission
+
+    // TODO - probably not needed -- remove ?
+    // The captcha field is added to the Expedited Processing section.
+    data.expedited_processing.captcha = recaptchaValue;
 
     // Merge the sections into a single payload
     const payload = rf.mergeSectionFormData(data);
     // Transform file fields to attachments
     findFileFields(requestForm)
       .filter((fileFieldName) => fileFieldName in payload)
       .forEach((fileFieldName) => {
-        payload[fileFieldName] = dataUrlToAttachment(payload[fileFieldName])
-          .catch((error) => {
-            console.error('Error:', error);
-          });
-      })
-      .catch((error) => {
-        console.error('Error2:', error);
+        payload[fileFieldName] = dataUrlToAttachment(payload[fileFieldName]);
       });
     // Submit the request
     return requestActions
@@ -182,28 +160,25 @@ function FoiaRequestForm({
             using the contact information provided to you on this site.
           </p>
         </div>
-        { /* eslint-disable-next-line no-nested-ternary */ }
         {upload.get('inProgress')
           ? (
             <UploadProgress
               progressTotal={upload.get('progressTotal')}
               progressLoaded={upload.get('progressLoaded')}
             />
           )
-          : settingsdata && settingsdata.RECAPTCHA_SITE_KEY
-            ? (
-              <GoogleReCaptchaProvider reCaptchaKey={settingsdata.RECAPTCHA_SITE_KEY}>
-                <GoogleReCaptcha
-                  className="google-recaptcha-custom-class"
-                  onVerify={setTokenFunc}
-                  refreshReCaptcha={refreshReCaptcha}
-                />
-                <div style={{ marginTop: '2em' }} />
-                <button className="usa-button usa-button-big usa-button-primary-alt" type="submit">
-                  Submit request
-                </button>
-              </GoogleReCaptchaProvider>
-            ) : (<p>Invalid key</p>)}
+          : (
+            <div style={{ marginTop: '2em' }}>
+              {settingsdata && settingsdata.RECAPTCHA_SITE_KEY
+                ? <ReCAPTCHA ref={recaptchaRef} sitekey={settingsdata.RECAPTCHA_SITE_KEY} /> : <p>Inavlid Site Key</p>}
+              <button
+                className="usa-button usa-button-big usa-button-primary-alt"
+                type="submit"
+              >
+                Submit request
+              </button>
+            </div>
+          )}
         {submissionResult.errorMessage
           && (
             <p>

package-lock.json

@@ -51,7 +51,7 @@
     "prop-types": "15.x",
     "react": "17.x",
     "react-dom": "17.x",
-    "react-google-recaptcha-v3": "^1.10.1",
+    "react-google-recaptcha": "^3.1.0",
     "react-modal": "3.x",
     "react-router-dom": "5.x",
     "swagger-ui": "^3.52.5",