Skip to content

Commit

Permalink
Merge pull request #2040 from rgristroph-usdoj/WS-50-add-recaptcha
Browse files Browse the repository at this point in the history
WS-50: Add recaptcha to FOIA request form
  • Loading branch information
brockfanning authored Oct 22, 2024
2 parents b834505 + edcc518 commit 8dbb415
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 7 deletions.
4 changes: 4 additions & 0 deletions js/actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
37 changes: 30 additions & 7 deletions js/components/foia_request_form.jsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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');
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
&& (
Expand Down
112 changes: 112 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down

0 comments on commit 8dbb415

Please sign in to comment.