fix: send captcha to backend to make it effective

collective · Apr 8, 2022 · a9f422b · a9f422b
1 parent a11c5cf
commit a9f422b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -13,7 +13,7 @@ export const SUBMIT_FORM_ACTION = 'SUBMIT_FORM_ACTION';
  * @param {Object} data
  * @returns {Object} attachments
  */
-export function submitForm(path = '', block_id, data, attachments) {
+export function submitForm(path = '', block_id, data, attachments, captcha) {
   return {
     type: SUBMIT_FORM_ACTION,
     request: {
@@ -23,6 +23,7 @@ export function submitForm(path = '', block_id, data, attachments) {
         block_id,
         data,
         attachments,
+        captcha,
       },
     },
   };

diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import {
   Segment,
@@ -46,21 +46,21 @@ const FormView = ({
   data,
   onSubmit,
   resetFormState,
+  captcha,
 }) => {
   const intl = useIntl();
 
-  const captcha = !!process.env.RAZZLE_HCAPTCHA_KEY
+  const captcha_provider = !!process.env.RAZZLE_HCAPTCHA_KEY
     ? 'HCaptcha'
     : !!process.env.RAZZLE_RECAPTCHA_KEY
     ? 'GoogleReCaptcha'
     : null;
 
-  let validToken = useRef('');
   const onVerifyCaptcha = useCallback(
     (token) => {
-      validToken.current = token;
+      captcha.current = { captcha_provider, token };
     },
-    [validToken],
+    [captcha],
   );
 
   const isValidField = (field) => {
@@ -165,11 +165,11 @@ const FormView = ({
                   );
                 })}
 
-                {captcha === 'GoogleReCaptcha' && (
+                {captcha_provider === 'GoogleReCaptcha' && (
                   <GoogleReCaptchaWidget onVerify={onVerifyCaptcha} />
                 )}
 
-                {captcha === 'HCaptcha' && (
+                {captcha_provider === 'HCaptcha' && (
                   <HCaptchaWidget
                     sitekey={process.env.RAZZLE_HCAPTCHA_KEY}
                     onVerify={onVerifyCaptcha}
@@ -192,7 +192,7 @@ const FormView = ({
                       primary
                       type="submit"
                       disabled={
-                        (captcha && !validToken?.current) || formState.loading
+                        (captcha_provider && !captcha?.current?.token) || formState.loading
                       }
                     >
                       {data.submit_label ||

diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useReducer } from 'react';
+import React, { useState, useEffect, useReducer, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useIntl, defineMessages } from 'react-intl';
@@ -77,6 +77,7 @@ const View = ({ data, id, path }) => {
   const [formState, setFormState] = useReducer(formStateReducer, initialState);
   const [formErrors, setFormErrors] = useState([]);
   const submitResults = useSelector((state) => state.submitForm);
+  const captcha = useRef();
 
   const onChangeFormData = (field_id, field, value, extras) => {
     setFormData({ field, value: { field_id, value, ...extras } });
@@ -151,6 +152,7 @@ const View = ({ data, id, path }) => {
             ...formData[name]
           })),
           attachments,
+          captcha.current,
         ),
       );
       setFormState({ type: FORM_STATES.loading });
@@ -189,6 +191,7 @@ const View = ({ data, id, path }) => {
       formState={formState}
       formErrors={formErrors}
       formData={formData}
+      captcha={captcha}
       onChangeFormData={onChangeFormData}
       data={data}
       onSubmit={submit}