WS-50: Add recaptcha to FOIA request form

js/actions/index.js

@@ -243,6 +243,10 @@ export const requestActions = {
           submissionResult.errorMessage = 'Sorry, there was a problem with the information you provided, please check the form and correct any errors.';
         }
 
+        if (error.response && error.response.status === 401) {
+          submissionResult.errorMessage = 'Sorry, there was a problem with captcha confirming you are human, please check the captcha and re-submit the form.';
+        }
+
         return Promise.resolve(submissionResult);
       })
       .then(requestActions.completeSubmitRequestForm);

js/components/foia_request_form.jsx

@@ -1,11 +1,12 @@
-import React 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 ReCAPTCHA from 'react-google-recaptcha';
 import { requestActions } from '../actions';
 import { SubmissionResult } from '../models';
 import CustomObjectFieldTemplate from './object_field_template';
@@ -19,6 +20,17 @@ import dispatcher from '../util/dispatcher';
 function FoiaRequestForm({
   formData, upload, onSubmit, requestForm, submissionResult,
 }) {
+  const recaptchaRef = useRef();
+
+  const [settingsdata, setData] = useState(null);
+
+  useEffect(() => {
+    fetch('/files/settings.json')
+      .then((response) => response.json())
+      .then((result) => setData(result))
+      .catch((error) => console.error('Error fetching recaptcha site key:', error));
+  }, []);
+
   // Helper function to jump to the first form error.
   function focusOnFirstError() {
     const fieldErrors = document.getElementsByClassName('usa-input-error');
@@ -62,6 +74,13 @@ function FoiaRequestForm({
   }
 
   function onFormSubmit({ formData: data }) {
+    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
@@ -149,12 +168,16 @@ function FoiaRequestForm({
             />
           )
           : (
-            <button
-              className="usa-button usa-button-big usa-button-primary-alt"
-              type="submit"
-            >
-              Submit request
-            </button>
+            <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
           && (

package.json

@@ -52,6 +52,7 @@
     "prop-types": "15.x",
     "react": "16.x",
     "react-dom": "16.x",
+    "react-google-recaptcha": "^3.1.0",
     "react-modal": "3.x",
     "react-router-dom": "5.x",
     "react-url-query": "1.x",
@@ -69,6 +70,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@cucumber/cucumber": "^9.1.0",
+    "@types/react-google-recaptcha": "^2.1.9",
     "babel-loader": "9.x",
     "btoa": "^1.2.1",
     "buffer": "^6.0.3",