fix: fixed captcha issue for response

package-lock.json

@@ -27,6 +27,7 @@
         "raw-loader": "4.0.2",
         "react": "18.3.1",
         "react-dom": "18.3.1",
+        "react-google-recaptcha": "^3.1.0",
         "react-helmet": "6.1.0",
         "react-redux": "7.2.9",
         "react-router": "6.18.0",
@@ -21630,6 +21631,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-bootstrap": {
       "version": "1.6.8",
       "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.8.tgz",
@@ -21887,6 +21900,18 @@
         }
       }
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-helmet": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",

package.json

@@ -47,6 +47,7 @@
     "raw-loader": "4.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-google-recaptcha": "^3.1.0",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "6.18.0",

src/discussions/data/selectors.js

@@ -33,6 +33,8 @@ export const selectIsPostingEnabled = state => state.config.isPostingEnabled;
 
 export const selectIsNotifyAllLearnersEnabled = state => state.config.isNotifyAllLearnersEnabled;
 
+export const selectCaptchaSettings = state => state.config.captchaSettings;
+
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,

src/discussions/data/slices.js

@@ -22,6 +22,10 @@ const configSlice = createSlice({
       dividedInlineDiscussions: [],
       dividedCourseWideDiscussions: [],
     },
+    captchaSettings: {
+      enabled: false,
+      siteKey: '',
+    },
     editReasons: [],
     postCloseReasons: [],
     enableInContext: false,

src/discussions/post-comments/PostCommentsView.test.jsx

@@ -1,3 +1,5 @@
+import React, { useRef } from 'react';
+
 import {
   act, fireEvent, render, screen, waitFor, within,
 } from '@testing-library/react';
@@ -23,6 +25,12 @@ import fetchCourseConfig from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThread, fetchThreads } from '../posts/data/thunks';
+import MockReCAPTCHA, {
+  mockOnChange,
+  mockOnError,
+  mockOnExpired,
+  mockReset,
+} from '../posts/post-editor/mocksData/react-google-recaptcha';
 import fetchCourseTopics from '../topics/data/thunks';
 import { getDiscussionTourUrl } from '../tours/data/api';
 import selectTours from '../tours/data/selectors';
@@ -51,6 +59,8 @@ let testLocation;
 let container;
 let unmount;
 
+jest.mock('react-google-recaptcha', () => MockReCAPTCHA);
+
 async function mockAxiosReturnPagedComments(threadId, threadType = ThreadType.DISCUSSION, page = 1, count = 2) {
   axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult', { can_delete: true }, {
     threadId,
@@ -215,7 +225,13 @@ describe('ThreadView', () => {
         endorsed: false,
       })];
     });
-    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { isPostingEnabled: true });
+    axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
+      isPostingEnabled: true,
+      captchaSettings: {
+        enabled: true,
+        siteKey: 'test-key',
+      },
+    });
     window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
     await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
@@ -292,6 +308,29 @@ describe('ThreadView', () => {
       expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
     });
 
+    it('should allow posting a comment with CAPTCHA', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+
+      const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+      const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+      await act(async () => { fireEvent.click(within(hoverCard).getByRole('button', { name: /Add comment/i })); });
+      await act(async () => { fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'New comment with CAPTCHA' } }); });
+      await act(async () => { fireEvent.click(screen.getByText('Solve CAPTCHA')); });
+      await act(async () => { fireEvent.click(screen.getByText(/submit/i)); });
+
+      await waitFor(() => {
+        expect(axiosMock.history.post).toHaveLength(1);
+        expect(JSON.parse(axiosMock.history.post[0].data)).toMatchObject({
+          captcha_token: 'm',
+          enable_in_context_sidebar: false,
+          parent_id: 'comment-1',
+          raw_body: 'New comment with CAPTCHA',
+          thread_id: 'thread-1',
+        });
+        expect(mockOnChange).toHaveBeenCalled();
+      });
+    });
+
     it('should allow posting a comment', async () => {
       await waitFor(() => renderComponent(discussionPostId));
 
@@ -302,7 +341,6 @@ describe('ThreadView', () => {
       await act(async () => { fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } }); });
       await act(async () => { fireEvent.click(screen.getByText(/submit/i)); });
 
-      expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
       await waitFor(async () => expect(await screen.findByTestId('comment-1')).toBeInTheDocument());
     });
 
@@ -323,7 +361,6 @@ describe('ThreadView', () => {
       await act(async () => { fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } }); });
       await act(async () => { fireEvent.click(screen.getByText(/submit/i)); });
 
-      expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
       await waitFor(async () => expect(await screen.findByTestId('reply-comment-2')).toBeInTheDocument());
     });
 
@@ -581,6 +618,42 @@ describe('ThreadView', () => {
   describe('for discussion thread', () => {
     const findLoadMoreCommentsButton = () => screen.findByTestId('load-more-comments');
 
+    it('renders the mocked ReCAPTCHA.', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add comment'));
+      });
+      expect(screen.getByTestId('mocked-recaptcha')).toBeInTheDocument();
+    });
+
+    it('successfully calls onTokenChange when Solve CAPTCHA button is clicked', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add comment'));
+      });
+      const solveButton = screen.getByText('Solve CAPTCHA');
+      fireEvent.click(solveButton);
+      expect(mockOnChange).toHaveBeenCalled();
+    });
+
+    it('successfully calls onExpired handler when CAPTCHA expires', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add comment'));
+      });
+      fireEvent.click(screen.getByText('Expire CAPTCHA'));
+      expect(mockOnExpired).toHaveBeenCalled();
+    });
+
+    it('successfully calls onError handler when CAPTCHA errors', async () => {
+      await waitFor(() => renderComponent(discussionPostId));
+      await act(async () => {
+        fireEvent.click(screen.queryByText('Add comment'));
+      });
+      fireEvent.click(screen.getByText('Error CAPTCHA'));
+      expect(mockOnError).toHaveBeenCalled();
+    });
+
     it('shown post not found when post id does not belong to course', async () => {
       await waitFor(() => renderComponent('unloaded-id'));
       expect(await screen.findByText('Thread not found', { exact: true }))
@@ -749,7 +822,7 @@ describe('ThreadView', () => {
         fireEvent.click(screen.queryAllByText('Add comment')[0]);
       });
 
-      expect(screen.queryByTestId('tinymce-editor').value).toBe('');
+      expect(screen.queryByTestId('tinymce-editor').value).toBe('Draft comment 123!');
     });
 
     it('successfully added response in the draft.', async () => {
@@ -793,7 +866,7 @@ describe('ThreadView', () => {
         fireEvent.click(screen.queryByText('Add response'));
       });
 
-      expect(screen.queryByTestId('tinymce-editor').value).toBe('');
+      expect(screen.queryByTestId('tinymce-editor').value).toBe('Draft Response!');
     });
 
     it('successfully maintain response for the specific post in the draft.', async () => {
@@ -975,3 +1048,61 @@ describe('ThreadView', () => {
     });
   });
 });
+
+describe('MockReCAPTCHA', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('uses defaultProps when props are not provided', () => {
+    render(<MockReCAPTCHA />);
+
+    expect(screen.getByTestId('mocked-recaptcha')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Solve CAPTCHA'));
+    fireEvent.click(screen.getByText('Expire CAPTCHA'));
+    fireEvent.click(screen.getByText('Error CAPTCHA'));
+
+    expect(mockOnChange).toHaveBeenCalled();
+    expect(mockOnExpired).toHaveBeenCalled();
+    expect(mockOnError).toHaveBeenCalled();
+  });
+
+  it('triggers all callbacks and exposes reset via ref', () => {
+    const onChange = jest.fn();
+    const onExpired = jest.fn();
+    const onError = jest.fn();
+
+    const Wrapper = () => {
+      const recaptchaRef = useRef(null);
+      return (
+        <div>
+          <MockReCAPTCHA
+            ref={recaptchaRef}
+            onChange={onChange}
+            onExpired={onExpired}
+            onError={onError}
+          />
+          <button onClick={() => recaptchaRef.current.reset()} data-testid="reset-btn" type="button">Reset</button>
+        </div>
+      );
+    };
+
+    const { getByText, getByTestId } = render(<Wrapper />);
+
+    fireEvent.click(getByText('Solve CAPTCHA'));
+    fireEvent.click(getByText('Expire CAPTCHA'));
+    fireEvent.click(getByText('Error CAPTCHA'));
+
+    fireEvent.click(getByTestId('reset-btn'));
+
+    expect(mockOnChange).toHaveBeenCalled();
+    expect(mockOnExpired).toHaveBeenCalled();
+    expect(mockOnError).toHaveBeenCalled();
+
+    expect(onChange).toHaveBeenCalledWith('mock-token');
+    expect(onExpired).toHaveBeenCalled();
+    expect(onError).toHaveBeenCalled();
+    expect(mockReset).toHaveBeenCalled();
+  });
+});

src/discussions/post-comments/comments/comment/CommentEditor.jsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 
 import { Button, Form, StatefulButton } from '@openedx/paragon';
 import { Formik } from 'formik';
+import ReCAPTCHA from 'react-google-recaptcha';
 import { useSelector } from 'react-redux';
 import * as Yup from 'yup';
 
@@ -17,6 +18,7 @@ import PostPreviewPanel from '../../../../components/PostPreviewPanel';
 import useDispatchWithState from '../../../../data/hooks';
 import DiscussionContext from '../../../common/context';
 import {
+  selectCaptchaSettings,
   selectModerationSettings,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
@@ -40,6 +42,7 @@ const CommentEditor = ({
   const intl = useIntl();
   const editorRef = useRef(null);
   const formRef = useRef(null);
+  const recaptchaRef = useRef(null);
   const { authenticatedUser } = useContext(AppContext);
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
@@ -49,6 +52,13 @@ const CommentEditor = ({
   const [submitting, dispatch] = useDispatchWithState();
   const [editorContent, setEditorContent] = useState();
   const { addDraftContent, getDraftContent, removeDraftContent } = useDraftContent();
+  const captchaSettings = useSelector(selectCaptchaSettings);
+
+  const shouldRequireCaptcha = !id && captchaSettings.enabled;
+
+  const captchaValidation = {
+    recaptchaToken: Yup.string().required(intl.formatMessage(messages.captchaVerificationLabel)),
+  };
 
   const canDisplayEditReason = (edit
     && (userHasModerationPrivileges || userIsGroupTa || userIsStaff)
@@ -62,16 +72,31 @@ const CommentEditor = ({
   const validationSchema = Yup.object().shape({
     comment: Yup.string()
       .required(),
+    ...(shouldRequireCaptcha ? { recaptchaToken: Yup.string().required() } : { }),
     ...editReasonCodeValidation,
+    ...(shouldRequireCaptcha ? captchaValidation : {}),
   });
 
   const initialValues = {
     comment: editorContent,
     editReasonCode: lastEdit?.reasonCode || (userIsStaff && canDisplayEditReason ? 'violates-guidelines' : undefined),
+    recaptchaToken: '',
   };
 
+  const handleCaptchaChange = useCallback((token, setFieldValue) => {
+    setFieldValue('recaptchaToken', token || '');
+  }, []);
+
+  const handleCaptchaExpired = useCallback((setFieldValue) => {
+    setFieldValue('recaptchaToken', '');
+  }, []);
+
   const handleCloseEditor = useCallback((resetForm) => {
     resetForm({ values: initialValues });
+    // Reset CAPTCHA when hiding editor
+    if (recaptchaRef.current) {
+      recaptchaRef.current.reset();
+    }
     onCloseEditor();
   }, [onCloseEditor, initialValues]);
 
@@ -92,7 +117,7 @@ const CommentEditor = ({
       };
       await dispatch(editComment(id, payload));
     } else {
-      await dispatch(addComment(values.comment, threadId, parentId, enableInContextSidebar));
+      await dispatch(addComment(values.comment, threadId, parentId, enableInContextSidebar, shouldRequireCaptcha ? values.recaptchaToken : ''));
     }
     /* istanbul ignore if: TinyMCE is mocked so this cannot be easily tested */
     if (editorRef.current) {
@@ -100,7 +125,7 @@ const CommentEditor = ({
     }
     handleCloseEditor(resetForm);
     deleteEditorContent();
-  }, [id, threadId, parentId, enableInContextSidebar, handleCloseEditor]);
+  }, [id, threadId, parentId, enableInContextSidebar, handleCloseEditor, shouldRequireCaptcha]);
   // The editorId is used to autosave contents to localstorage. This format means that the autosave is scoped to
   // the current comment id, or the current comment parent or the curren thread.
   const editorId = `comment-editor-${id || parentId || threadId}`;
@@ -147,6 +172,7 @@ const CommentEditor = ({
         handleBlur,
         handleChange,
         resetForm,
+        setFieldValue,
       }) => (
         <Form onSubmit={handleSubmit} className={formClasses} ref={formRef}>
           {canDisplayEditReason && (
@@ -202,6 +228,32 @@ const CommentEditor = ({
               </Form.Control.Feedback>
             )}
           <PostPreviewPanel htmlNode={values.comment} />
+          {/* CAPTCHA Section - Only show for new posts from non-staff users */}
+          { shouldRequireCaptcha && captchaSettings.siteKey && (
+          <div className="mb-3">
+            <Form.Group
+              isInvalid={isFormikFieldInvalid('recaptchaToken', {
+                errors,
+                touched,
+              })}
+            >
+              <Form.Label className="h6">
+                {intl.formatMessage(messages.verifyHumanLabel)}
+              </Form.Label>
+              <div className="d-flex justify-content-start">
+                <ReCAPTCHA
+                  ref={recaptchaRef}
+                  sitekey={captchaSettings.siteKey}
+                  onChange={(token) => handleCaptchaChange(token, setFieldValue)}
+                  onExpired={() => handleCaptchaExpired(setFieldValue)}
+                  onError={() => handleCaptchaExpired(setFieldValue)}
+                />
+              </div>
+              <FormikErrorFeedback name="recaptchaToken" />
+            </Form.Group>
+          </div>
+          ) }
+
           <div className="d-flex py-2 justify-content-end">
             <Button
               variant="outline-primary"

src/discussions/post-comments/data/api.js

@@ -73,10 +73,16 @@ export const getCommentResponses = async (commentId, {
  * @param {boolean} enableInContextSidebar
  * @returns {Promise<{}>}
  */
-export const postComment = async (comment, threadId, parentId = null, enableInContextSidebar = false) => {
+export const postComment = async (
+  comment,
+  threadId,
+  parentId,
+  enableInContextSidebar,
+  recaptchaToken,
+) => {
   const { data } = await getAuthenticatedHttpClient()
     .post(getCommentsApiUrl(), snakeCaseObject({
-      threadId, raw_body: comment, parentId, enableInContextSidebar,
+      threadId, raw_body: comment, parentId, enableInContextSidebar, captchaToken: recaptchaToken,
     }));
   return data;
 };

src/discussions/post-comments/data/api.test.js

@@ -39,7 +39,7 @@ describe('Post comments view api tests', () => {
     axiosMock.reset();
   });
 
-  test('successfully get thread comments', async () => {
+  it('successfully get thread comments', async () => {
     axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
     await executeThunk(fetchThreadComments(threadId, { endorsed: 'discussion' }), store.dispatch, store.getState);
 
@@ -92,22 +92,25 @@ describe('Post comments view api tests', () => {
         thread_id: threadId,
         raw_body: content,
         rendered_body: content,
+        parent_id: 'parent_id',
+        enable_in_context_sidebar: true,
+        captcha_token: 'recaptcha-token',
       }));
-    await executeThunk(addComment(content, threadId, null), store.dispatch, store.getState);
+    await executeThunk(addComment(content, threadId, 'parent_id', true, 'recaptcha-token'), store.dispatch, store.getState);
 
     expect(store.getState().comments.postStatus).toEqual('successful');
   });
 
   it('failed to add comment', async () => {
     axiosMock.onPost(commentsApiUrl).reply(404);
-    await executeThunk(addComment(content, threadId, null), store.dispatch, store.getState);
+    await executeThunk(addComment(content, threadId, 'parent_id', false, 'recaptcha-token'), store.dispatch, store.getState);
 
     expect(store.getState().comments.postStatus).toEqual('failed');
   });
 
   it('denied to add comment', async () => {
     axiosMock.onPost(commentsApiUrl).reply(403, {});
-    await executeThunk(addComment(content, threadId, null), store.dispatch, store.getState);
+    await executeThunk(addComment(content, threadId, 'parent_id', false, 'recaptcha-token'), store.dispatch, store.getState);
 
     expect(store.getState().comments.postStatus).toEqual('denied');
   });
@@ -164,4 +167,76 @@ describe('Post comments view api tests', () => {
 
     expect(store.getState().comments.postStatus).toEqual('denied');
   });
+
+  it('successfully added comment with default parentId', async () => {
+    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
+    await executeThunk(fetchThreadComments(threadId), store.dispatch, store.getState);
+
+    axiosMock.onPost(commentsApiUrl).reply(200, Factory.build('comment', {
+      thread_id: threadId,
+      raw_body: content,
+      rendered_body: content,
+      parent_id: null, // Explicitly expect null in response
+    }));
+    await executeThunk(addComment(content, threadId, null, false, ''), store.dispatch, store.getState);
+
+    expect(store.getState().comments.postStatus).toEqual('successful');
+  });
+
+  it('successfully added comment with explicit enableInContextSidebar false', async () => {
+    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
+    await executeThunk(fetchThreadComments(threadId), store.dispatch, store.getState);
+
+    axiosMock.onPost(commentsApiUrl).reply(200, Factory.build('comment', {
+      thread_id: threadId,
+      raw_body: content,
+      rendered_body: content,
+    }));
+    await executeThunk(addComment(content, threadId, null, false, 'recaptcha-token'), store.dispatch, store.getState);
+
+    expect(store.getState().comments.postStatus).toEqual('successful');
+  });
+
+  it('successfully added comment with empty recaptchaToken', async () => {
+    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
+    await executeThunk(fetchThreadComments(threadId), store.dispatch, store.getState);
+
+    axiosMock.onPost(commentsApiUrl).reply(200, Factory.build('comment', {
+      thread_id: threadId,
+      raw_body: content,
+      rendered_body: content,
+    }));
+    await executeThunk(addComment(content, threadId, null, true, ''), store.dispatch, store.getState);
+
+    expect(store.getState().comments.postStatus).toEqual('successful');
+  });
+
+  it('successfully added comment with undefined parentId', async () => {
+    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
+    await executeThunk(fetchThreadComments(threadId), store.dispatch, store.getState);
+
+    axiosMock.onPost(commentsApiUrl).reply(200, Factory.build('comment', {
+      thread_id: threadId,
+      raw_body: content,
+      rendered_body: content,
+      parent_id: null, // Expect null as the function should handle undefined as null
+    }));
+    await executeThunk(addComment(content, threadId, undefined, false, ''), store.dispatch, store.getState);
+
+    expect(store.getState().comments.postStatus).toEqual('successful');
+  });
+
+  it('successfully added comment with null recaptchaToken', async () => {
+    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
+    await executeThunk(fetchThreadComments(threadId), store.dispatch, store.getState);
+
+    axiosMock.onPost(commentsApiUrl).reply(200, Factory.build('comment', {
+      thread_id: threadId,
+      raw_body: content,
+      rendered_body: content,
+    }));
+    await executeThunk(addComment(content, threadId, null, false, null), store.dispatch, store.getState);
+
+    expect(store.getState().comments.postStatus).toEqual('successful');
+  });
 });

src/discussions/post-comments/data/thunks.js

@@ -141,15 +141,16 @@ export function editComment(commentId, comment) {
   };
 }
 
-export function addComment(comment, threadId, parentId = null, enableInContextSidebar = false) {
+export function addComment(comment, threadId, parentId = null, enableInContextSidebar = false, recaptchaToken = '') {
   return async (dispatch) => {
     try {
       dispatch(postCommentRequest({
         comment,
         threadId,
         parentId,
+        recaptchaToken,
       }));
-      const data = await postComment(comment, threadId, parentId, enableInContextSidebar);
+      const data = await postComment(comment, threadId, parentId, enableInContextSidebar, recaptchaToken);
       dispatch(postCommentSuccess(camelCaseObject(data)));
     } catch (error) {
       if (getHttpErrorStatus(error) === 403) {

src/discussions/post-comments/messages.js

@@ -221,6 +221,16 @@ const messages = defineMessages({
     }`,
     description: 'sort message showing current sorting',
   },
+  verifyHumanLabel: {
+    id: 'discussions.verify.human.label',
+    defaultMessage: 'Verify you are human',
+    description: 'Verify you are human description.',
+  },
+  captchaVerificationLabel: {
+    id: 'discussions.captcha.verification.label',
+    defaultMessage: 'Please complete the CAPTCHA verification',
+    description: 'Please complete the CAPTCHA to continue.',
+  },
 });
 
 export default messages;

src/discussions/posts/data/api.js

@@ -84,6 +84,8 @@ export const getThread = async (threadId, courseId) => {
  * @param {boolean} following Follow the thread after creating
  * @param {boolean} anonymous Should the thread be anonymous to all users
  * @param {boolean} anonymousToPeers Should the thread be anonymous to peers
+ * @param notifyAllLearners
+ * @param recaptchaToken
  * @param {boolean} enableInContextSidebar
  * @returns {Promise<{}>}
  */
@@ -99,6 +101,7 @@ export const postThread = async (
     anonymous,
     anonymousToPeers,
     notifyAllLearners,
+    recaptchaToken,
   } = {},
   enableInContextSidebar = false,
 ) => {
@@ -114,6 +117,7 @@ export const postThread = async (
     groupId: cohort,
     enableInContextSidebar,
     notifyAllLearners,
+    captchaToken: recaptchaToken,
   });
   const { data } = await getAuthenticatedHttpClient()
     .post(getThreadsApiUrl(), postData);

src/discussions/posts/data/thunks.js

@@ -205,6 +205,7 @@ export function createNewThread({
   cohort,
   enableInContextSidebar,
   notifyAllLearners,
+  recaptchaToken,
 }) {
   return async (dispatch) => {
     try {
@@ -219,6 +220,7 @@ export function createNewThread({
         anonymousToPeers,
         cohort,
         notifyAllLearners,
+        recaptchaToken,
       }));
       const data = await postThread(courseId, topicId, type, title, content, {
         cohort,
@@ -226,6 +228,7 @@ export function createNewThread({
         anonymous,
         anonymousToPeers,
         notifyAllLearners,
+        recaptchaToken,
       }, enableInContextSidebar);
       dispatch(postThreadSuccess(camelCaseObject(data)));
     } catch (error) {

src/discussions/posts/post-editor/PostEditor.jsx

@@ -9,6 +9,7 @@ import {
 import { Help, Post } from '@openedx/paragon/icons';
 import { Formik } from 'formik';
 import { isEmpty } from 'lodash';
+import ReCAPTCHA from 'react-google-recaptcha';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import * as Yup from 'yup';
@@ -27,6 +28,7 @@ import DiscussionContext from '../../common/context';
 import { useCurrentDiscussionTopic } from '../../data/hooks';
 import {
   selectAnonymousPostingConfig,
+  selectCaptchaSettings,
   selectDivisionSettings,
   selectEnableInContext,
   selectIsNotifyAllLearnersEnabled,
@@ -61,6 +63,7 @@ const PostEditor = ({
   const location = useLocation();
   const dispatch = useDispatch();
   const editorRef = useRef(null);
+  const recaptchaRef = useRef(null);
   const { courseId, postId } = useParams();
   const { authenticatedUser } = useContext(AppContext);
   const { category, enableInContextSidebar } = useContext(DiscussionContext);
@@ -82,6 +85,7 @@ const PostEditor = ({
   const archivedTopics = useSelector(selectArchivedTopics);
   const postEditorId = `post-editor-${editExisting ? postId : 'new'}`;
   const isNotifyAllLearnersEnabled = useSelector(selectIsNotifyAllLearnersEnabled);
+  const captchaSettings = useSelector(selectCaptchaSettings);
 
   const canDisplayEditReason = (editExisting
     && (userHasModerationPrivileges || userIsGroupTa || userIsStaff)
@@ -92,6 +96,11 @@ const PostEditor = ({
     editReasonCode: Yup.string().required(intl.formatMessage(messages.editReasonCodeError)),
   };
 
+  const shouldRequireCaptcha = !postId && captchaSettings.enabled;
+  const captchaValidation = {
+    recaptchaToken: Yup.string().required(intl.formatMessage(messages.captchaVerificationLabel)),
+  };
+
   const enableNotifyAllLearnersTour = useCallback((enabled) => {
     const data = {
       enabled,
@@ -107,6 +116,14 @@ const PostEditor = ({
     };
   }, []);
 
+  const handleCaptchaChange = useCallback((token, setFieldValue) => {
+    setFieldValue('recaptchaToken', token || '');
+  }, []);
+
+  const handleCaptchaExpired = useCallback((setFieldValue) => {
+    setFieldValue('recaptchaToken', '');
+  }, []);
+
   const canSelectCohort = useCallback((tId) => {
     // If the user isn't privileged, they can't edit the cohort.
     // If the topic is being edited the cohort can't be changed.
@@ -133,10 +150,15 @@ const PostEditor = ({
     editReasonCode: post?.lastEdit?.reasonCode || (
       userIsStaff && canDisplayEditReason ? 'violates-guidelines' : undefined
     ),
+    recaptchaToken: '',
   };
 
   const hideEditor = useCallback((resetForm) => {
     resetForm({ values: initialValues });
+    // Reset CAPTCHA when hiding editor
+    if (recaptchaRef.current) {
+      recaptchaRef.current.reset();
+    }
     if (editExisting) {
       const newLocation = discussionsPath(commentsPagePath, {
         courseId,
@@ -168,7 +190,7 @@ const PostEditor = ({
       }));
     } else {
       const cohort = canSelectCohort(values.topic) ? selectedCohort(values.cohort) : undefined;
-      // if not allowed to set cohort, always undefined, so no value is sent to backend
+      // Include CAPTCHA token in the request for new posts
       await dispatchSubmit(createNewThread({
         courseId,
         topicId: values.topic,
@@ -181,16 +203,17 @@ const PostEditor = ({
         cohort,
         enableInContextSidebar,
         notifyAllLearners: values.notifyAllLearners,
+        ...(shouldRequireCaptcha ? { recaptchaToken: values.recaptchaToken } : {}),
       }));
     }
-    /* istanbul ignore if: TinyMCE is mocked so this cannot be easily tested */
+
     if (editorRef.current) {
       editorRef.current.plugins.autosave.removeDraft();
     }
     hideEditor(resetForm);
   }, [
     allowAnonymous, allowAnonymousToPeers, canSelectCohort, editExisting,
-    enableInContextSidebar, hideEditor, postId, selectedCohort, topicId,
+    enableInContextSidebar, hideEditor, postId, selectedCohort, topicId, shouldRequireCaptcha,
   ]);
 
   useEffect(() => {
@@ -241,7 +264,9 @@ const PostEditor = ({
     cohort: Yup.string()
       .nullable()
       .default(null),
+    ...(shouldRequireCaptcha ? { recaptchaToken: Yup.string().required() } : { }),
     ...editReasonCodeValidation,
+    ...(shouldRequireCaptcha ? captchaValidation : {}),
   });
 
   const handleInContextSelectLabel = (section, subsection) => (
@@ -262,6 +287,7 @@ const PostEditor = ({
       handleBlur,
       handleChange,
       resetForm,
+      setFieldValue,
     }) => (
       <Form className="m-4 card p-4 post-form" onSubmit={handleSubmit}>
         <h4 className="mb-4 font-style" style={{ lineHeight: '16px' }}>
@@ -302,6 +328,7 @@ const PostEditor = ({
               aria-describedby="topicAreaInput"
               floatingLabel={intl.formatMessage(messages.topicArea)}
               disabled={enableInContextSidebar}
+              data-testid="topic-select"
             >
               {nonCoursewareTopics.map(topic => (
                 <option
@@ -389,6 +416,7 @@ const PostEditor = ({
               aria-describedby="titleInput"
               floatingLabel={intl.formatMessage(messages.postTitle)}
               value={values.title}
+              data-testid="post-title-input"
             />
             <FormikErrorFeedback name="title" />
           </Form.Group>
@@ -485,6 +513,31 @@ const PostEditor = ({
           </>
           )}
         </div>
+        {/* CAPTCHA Section - Only show for new posts for non-staff users */}
+        {shouldRequireCaptcha && captchaSettings.siteKey && (
+        <div className="mb-3">
+          <Form.Group
+            isInvalid={isFormikFieldInvalid('recaptchaToken', {
+              errors,
+              touched,
+            })}
+          >
+            <Form.Label className="h6">
+              {intl.formatMessage(messages.verifyHumanLabel)}
+            </Form.Label>
+            <div className="d-flex justify-content-start">
+              <ReCAPTCHA
+                ref={recaptchaRef}
+                sitekey={captchaSettings.siteKey}
+                onChange={(token) => handleCaptchaChange(token, setFieldValue)}
+                onExpired={() => handleCaptchaExpired(setFieldValue)}
+                onError={() => handleCaptchaExpired(setFieldValue)}
+              />
+            </div>
+            <FormikErrorFeedback name="recaptchaToken" />
+          </Form.Group>
+        </div>
+        )}
         <div className="d-flex justify-content-end">
           <Button
             variant="outline-primary"

src/discussions/posts/post-editor/PostEditor.test.jsx

@@ -24,6 +24,9 @@ import fetchCourseConfig from '../../data/thunks';
 import fetchCourseTopics from '../../topics/data/thunks';
 import { getThreadsApiUrl } from '../data/api';
 import { fetchThread } from '../data/thunks';
+import MockReCAPTCHA, {
+  mockOnChange, mockOnError, mockOnExpired,
+} from './mocksData/react-google-recaptcha';
 import PostEditor from './PostEditor';
 
 import '../../cohorts/data/__factories__';
@@ -39,6 +42,8 @@ let store;
 let axiosMock;
 let container;
 
+jest.mock('react-google-recaptcha', () => MockReCAPTCHA);
+
 async function renderComponent(editExisting = false, location = `/${courseId}/posts/`) {
   const paths = editExisting ? ROUTES.POSTS.EDIT_POST : [ROUTES.POSTS.NEW_POST];
   const wrapper = await render(
@@ -61,6 +66,114 @@ async function renderComponent(editExisting = false, location = `/${courseId}/po
   container = wrapper.container;
 }
 
+describe('PostEditor submit Form', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    const cwtopics = Factory.buildList('category', 2);
+    Factory.reset('topic');
+    axiosMock.onGet(topicsApiUrl).reply(200, {
+      courseware_topics: cwtopics,
+      non_courseware_topics: Factory.buildList('topic', 3, {}, { topicPrefix: 'ncw-' }),
+    });
+
+    store = initializeStore({
+      config: {
+        provider: 'legacy',
+        allowAnonymous: true,
+        allowAnonymousToPeers: true,
+        hasModerationPrivileges: true,
+        settings: {
+          dividedInlineDiscussions: ['category-1-topic-2'],
+          dividedCourseWideDiscussions: ['ncw-topic-2'],
+        },
+        captchaSettings: {
+          enabled: true,
+          siteKey: 'test-key',
+        },
+      },
+    });
+    await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
+    axiosMock.onGet(getCohortsApiUrl(courseId)).reply(200, Factory.buildList('cohort', 3));
+  });
+
+  test('successfully submits a new post with CAPTCHA', async () => {
+    const newThread = Factory.build('thread', { id: 'new-thread-1' });
+    axiosMock.onPost(threadsApiUrl).reply(200, newThread);
+
+    await renderComponent();
+
+    await act(async () => {
+      fireEvent.change(screen.getByTestId('topic-select'), {
+        target: { value: 'ncw-topic-1' },
+      });
+      const postTitle = await screen.findByTestId('post-title-input');
+      const tinymceEditor = await screen.findByTestId('tinymce-editor');
+      const solveButton = screen.getByText('Solve CAPTCHA');
+
+      fireEvent.change(postTitle, { target: { value: 'Test Post Title' } });
+      fireEvent.change(tinymceEditor, { target: { value: 'Test Post Content' } });
+      fireEvent.click(solveButton);
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /submit/i }));
+    });
+
+    await waitFor(() => {
+      expect(axiosMock.history.post).toHaveLength(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toMatchObject({
+        course_id: 'course-v1:edX+DemoX+Demo_Course',
+        topic_id: 'ncw-topic-1',
+        type: 'discussion',
+        title: 'Test Post Title',
+        raw_body: 'Test Post Content',
+        following: true,
+        anonymous: false,
+        anonymous_to_peers: false,
+        enable_in_context_sidebar: false,
+        notify_all_learners: false,
+        captcha_token: 'mock-token',
+      });
+    });
+  });
+
+  test('fails to submit a new post with CAPTCHA if token is missing', async () => {
+    const newThread = Factory.build('thread', { id: 'new-thread-1' });
+    axiosMock.onPost(threadsApiUrl).reply(200, newThread);
+
+    await renderComponent();
+
+    await act(async () => {
+      fireEvent.change(screen.getByTestId('topic-select'), {
+        target: { value: 'ncw-topic-1' },
+      });
+      const postTitle = await screen.findByTestId('post-title-input');
+      const tinymceEditor = await screen.findByTestId('tinymce-editor');
+
+      fireEvent.change(postTitle, { target: { value: 'Test Post Title' } });
+      fireEvent.change(tinymceEditor, { target: { value: 'Test Post Content' } });
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /submit/i }));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Please complete the CAPTCHA verification')).toBeInTheDocument();
+    });
+  });
+});
+
 describe('PostEditor', () => {
   beforeEach(async () => {
     initializeMockApp({
@@ -110,6 +223,10 @@ describe('PostEditor', () => {
           allowAnonymous,
           allowAnonymousToPeers,
           moderationSettings: {},
+          captchaSettings: {
+            enabled: false,
+            siteKey: '',
+          },
         },
       });
       await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
@@ -119,7 +236,6 @@ describe('PostEditor', () => {
       allowAnonymousToPeers ? '' : 'not'} allowed`, async () => {
       await renderComponent();
 
-      expect(screen.queryByRole('heading')).toHaveTextContent('Add a post');
       expect(screen.queryAllByRole('radio')).toHaveLength(2);
       // 2 categories with 4 subcategories each
       expect(screen.queryAllByText(/category-\d-topic \d/)).toHaveLength(8);
@@ -162,6 +278,10 @@ describe('PostEditor', () => {
           provider: 'legacy',
           is_notify_all_learners_enabled: isNotifyAllLearnersEnabled,
           moderationSettings: {},
+          captchaSettings: {
+            enabled: false,
+            siteKey: '',
+          },
         },
       });
 
@@ -201,12 +321,64 @@ describe('PostEditor', () => {
             dividedCourseWideDiscussions: dividedncw,
             ...settings,
           },
+          captchaSettings: {
+            enabled: false,
+            siteKey: '',
+          },
           ...config,
         },
       });
       await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
     }
 
+    test('renders the mocked ReCAPTCHA.', async () => {
+      await setupData({
+        captchaSettings: {
+          enabled: true,
+          siteKey: 'test-key',
+        },
+      });
+      await renderComponent();
+      expect(screen.getByTestId('mocked-recaptcha')).toBeInTheDocument();
+    });
+
+    test('successfully calls onTokenChange when Solve CAPTCHA button is clicked', async () => {
+      await setupData({
+        captchaSettings: {
+          enabled: true,
+          siteKey: 'test-key',
+        },
+      });
+      await renderComponent();
+      const solveButton = screen.getByText('Solve CAPTCHA');
+      fireEvent.click(solveButton);
+      expect(mockOnChange).toHaveBeenCalled();
+    });
+
+    test('successfully calls onExpired handler when CAPTCHA expires', async () => {
+      await setupData({
+        captchaSettings: {
+          enabled: true,
+          siteKey: 'test-key',
+        },
+      });
+      await renderComponent();
+      fireEvent.click(screen.getByText('Expire CAPTCHA'));
+      expect(mockOnExpired).toHaveBeenCalled();
+    });
+
+    test('successfully calls onError handler when CAPTCHA errors', async () => {
+      await setupData({
+        captchaSettings: {
+          enabled: true,
+          siteKey: 'test-key',
+        },
+      });
+      await renderComponent();
+      fireEvent.click(screen.getByText('Error CAPTCHA'));
+      expect(mockOnError).toHaveBeenCalled();
+    });
+
     test('test privileged user', async () => {
       await setupData();
       await renderComponent();
@@ -358,6 +530,10 @@ describe('PostEditor', () => {
             dividedInlineDiscussions: dividedcw,
             dividedCourseWideDiscussions: dividedncw,
           },
+          captchaSettings: {
+            enabled: false,
+            siteKey: '',
+          },
         },
       });
       await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);

src/discussions/posts/post-editor/messages.js

@@ -175,6 +175,16 @@ const messages = defineMessages({
     defaultMessage: 'Archived',
     description: 'Heading for displaying topics that are archived.',
   },
+  captchaVerificationLabel: {
+    id: 'discussions.captcha.verification.label',
+    defaultMessage: 'Please complete the CAPTCHA verification',
+    description: 'Please complete the CAPTCHA to continue.',
+  },
+  verifyHumanLabel: {
+    id: 'discussions.verify.human.label',
+    defaultMessage: 'Verify you are human',
+    description: 'Verify you are human description.',
+  },
 });
 
 export default messages;

src/discussions/posts/post-editor/mocksData/react-google-recaptcha.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Define mock functions
+export const mockOnChange = jest.fn();
+export const mockOnExpired = jest.fn();
+export const mockOnError = jest.fn();
+export const mockReset = jest.fn();
+
+const MockReCAPTCHA = React.forwardRef((props, ref) => {
+  const { onChange, onExpired, onError } = props;
+  React.useImperativeHandle(ref, () => ({
+    reset: mockReset,
+  }));
+
+  return (
+    <div data-testid="mocked-recaptcha" ref={ref}>
+      <button type="button" onClick={() => { mockOnChange(); onChange?.('mock-token'); }}>
+        Solve CAPTCHA
+      </button>
+      <button type="button" onClick={() => { mockOnExpired(); onExpired?.(); }}>
+        Expire CAPTCHA
+      </button>
+      <button type="button" onClick={() => { mockOnError(); onError?.(); }}>
+        Error CAPTCHA
+      </button>
+    </div>
+  );
+});
+
+MockReCAPTCHA.propTypes = {
+  onChange: PropTypes.func,
+  onExpired: PropTypes.func,
+  onError: PropTypes.func,
+};
+MockReCAPTCHA.defaultProps = {
+  onChange: () => {},
+  onExpired: () => {},
+  onError: () => {},
+};
+
+export default MockReCAPTCHA;