Merge pull request #2073 from usdoj/revert-2069-WS-503-recaptchv3

Revert "WS-503: Reworking the way Google ReCaptcha is called"

Author: brockfanning

js/components/foia_request_form.jsx

@@ -18,10 +18,17 @@ import { scrollOffset } from '../util/dom';
 import dispatcher from '../util/dispatcher';
 
 function FoiaRequestForm({
-  formData, upload, onSubmit, requestForm, submissionResult, refreshReCaptcha, setRefreshReCaptcha, token, setTokenFunc,
+  formData, upload, onSubmit, requestForm, submissionResult,
 }) {
+  const [settingsdata, setSettingsdata] = useState(null);
+  const [token, setToken] = useState('');
+  const [refreshReCaptcha, setRefreshReCaptcha] = useState(false);
   const { executeRecaptcha } = useGoogleReCaptcha();
 
+  const setTokenFunc = (getToken) => {
+    setToken(getToken);
+  };
+
   const handleReCaptchaVerify = useCallback(async () => {
     if (!executeRecaptcha) {
       console.log('Execute recaptcha not yet available');
@@ -32,11 +39,15 @@ function FoiaRequestForm({
     setTokenFunc(newtoken);
     console.log('newtoken:');
     console.log(newtoken);
-  }, []);
+  }, [executeRecaptcha]);
 
   useEffect(() => {
+    fetch('/files/settings.json')
+      .then((response) => response.json())
+      .then((result) => setSettingsdata(result))
+      .catch((error) => console.error('Error fetching recaptcha site key:', error));
     handleReCaptchaVerify();
-  }, []);
+  }, [handleReCaptchaVerify]);
 
   // Helper function to jump to the first form error.
   function focusOnFirstError() {
@@ -83,6 +94,7 @@ function FoiaRequestForm({
 
   function onFormSubmit({ formData: data }) {
     // Now you can use the recaptcha token for your form submission
+    handleReCaptchaVerify();
     data.expedited_processing.captcha = token;
 
     // Merge the sections into a single payload
@@ -126,26 +138,13 @@ function FoiaRequestForm({
   };
 
   // Map these to react-jsonschema-form Ids
-  const steps = ((requestForm && requestForm.sections) || []).map((section) => `root_${section.id}`);
+  const steps = (requestForm.sections || []).map((section) => `root_${section.id}`);
 
-  // eslint-disable-next-line no-nested-ternary
-  const errors = (submissionResult !== undefined ? ((submissionResult.errors instanceof Map)
+  const errors = (submissionResult.errors instanceof Map)
     ? submissionResult.errors.toJS()
-    : submissionResult.errors) : null);
-
+    : submissionResult.errors;
   const formContext = { steps, errors };
-
-  let jsonSchema;
-  let uiSchema;
-  if (requestForm) {
-    ({ jsonSchema, uiSchema } = requestForm);
-  } else {
-    return (
-      <Form
-        validator={validator}
-      />
-    );
-  }
+  const { jsonSchema, uiSchema } = requestForm;
 
   const templates = {
     FieldTemplate: CustomFieldTemplate,
@@ -155,14 +154,14 @@ function FoiaRequestForm({
   return (
     <Form
       className="foia-request-form sidebar_content-inner"
-      disabled={(upload !== undefined ? upload.get('inProgress') : false)}
+      disabled={upload.get('inProgress')}
       templates={templates}
       formContext={formContext}
-      formData={(formData !== undefined ? formData.toJS() : [])}
+      formData={formData.toJS()}
       onChange={onChange}
       onSubmit={onFormSubmit}
-      schema={(jsonSchema !== undefined ? jsonSchema : [])}
-      uiSchema={(uiSchema !== undefined ? uiSchema : [])}
+      schema={jsonSchema}
+      uiSchema={uiSchema}
       widgets={widgets}
       customValidate={validate}
       validator={validator}
@@ -184,20 +183,28 @@ function FoiaRequestForm({
           </p>
         </div>
         { /* eslint-disable-next-line no-nested-ternary */ }
-        {((upload !== undefined) && upload.get('inProgress'))
+        {upload.get('inProgress')
           ? (
             <UploadProgress
               progressTotal={upload.get('progressTotal')}
               progressLoaded={upload.get('progressLoaded')}
             />
-          ) : (
-            <div style={{ marginTop: '2em' }}>
-              <button className="usa-button usa-button-big usa-button-primary-alt" type="submit">
-                Submit request
-              </button>
-            </div>
-          )}
-        {(submissionResult !== undefined && submissionResult.errorMessage)
+          )
+          : 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>)}
+        {submissionResult.errorMessage
           && (
             <p>
               <span className="usa-input-error-message" role="alert">
@@ -211,80 +218,15 @@ function FoiaRequestForm({
 }
 
 FoiaRequestForm.propTypes = {
-  formData: PropTypes.object,
-  upload: PropTypes.instanceOf(Map),
+  formData: PropTypes.object.isRequired,
+  upload: PropTypes.instanceOf(Map).isRequired,
   onSubmit: PropTypes.func,
-  requestForm: PropTypes.object,
-  submissionResult: PropTypes.instanceOf(SubmissionResult),
-  setRefreshReCaptcha: PropTypes.func,
-  refreshReCaptcha: PropTypes.bool,
-  token: PropTypes.string,
-  setTokenFunc: PropTypes.func,
+  requestForm: PropTypes.object.isRequired,
+  submissionResult: PropTypes.instanceOf(SubmissionResult).isRequired,
 };
 
 FoiaRequestForm.defaultProps = {
   onSubmit: () => { },
 };
 
-function SubmitRequestPage({
-  formData, upload, onSubmit, requestForm, submissionResult,
-}) {
-  const [settingsdata, setSettingsdata] = useState(null);
-  const [refreshReCaptcha, setRefreshReCaptcha] = useState(false);
-  const [token, setToken] = useState('');
-
-  const setTokenFunc = (getToken) => {
-    setToken(getToken);
-  };
-
-  useEffect(() => {
-    fetch('/files/settings.json')
-      .then((response) => response.json())
-      .then((result) => {
-        console.log('result = ', result);
-        setSettingsdata(result);
-      })
-      .catch((error) => {
-        settingsdata.RECAPTCHA_SITE_KEY = 'DEFAULT';
-        console.error('Error fetching recaptcha site key:', error);
-      });
-  }, []);
-
-  return (
-    settingsdata && settingsdata.RECAPTCHA_SITE_KEY
-      ? (
-        // eslint-disable-next-line react/jsx-wrap-multilines
-        <GoogleReCaptchaProvider reCaptchaKey={settingsdata.RECAPTCHA_SITE_KEY}>
-          <GoogleReCaptcha
-            className="google-recaptcha-custom-class"
-            onVerify={setTokenFunc}
-            refreshReCaptcha={refreshReCaptcha}
-            scriptProps={{ async: true }}
-          />
-          <FoiaRequestForm
-            setRefreshReCaptcha={setRefreshReCaptcha}
-            refreshReCaptcha={refreshReCaptcha}
-            token={token}
-            setTokenFunc={setTokenFunc}
-            formData={formData}
-            upload={upload}
-            onSubmit={onSubmit}
-            requestForm={requestForm}
-            submissionResult={submissionResult}
-          />
-        </GoogleReCaptchaProvider>)
-      : (
-        <p>Invalid key</p>
-      )
-  );
-}
-
-SubmitRequestPage.propTypes = {
-  formData: PropTypes.object,
-  upload: PropTypes.instanceOf(Map),
-  onSubmit: PropTypes.func,
-  requestForm: PropTypes.object,
-  submissionResult: PropTypes.instanceOf(SubmissionResult),
-};
-
-export default SubmitRequestPage;
+export default FoiaRequestForm;