Core 1435 add recaptcha to forms

[RoyEJohnson]

CORE-1435
Uses the custom grecaptcha routines to put the Submit button behind an "I am human" button, which, when clicked, creates the token, which is populated into a hidden field and included in the form data.

[Copilot]

Pull request overview

This PR adds Google reCAPTCHA v3 protection to user-facing forms in the OpenStax application to prevent spam and abuse. The implementation introduces a custom React hook (useRecaptchaToken) that manages token generation and provides a gating mechanism where users must click an "I am a human" button before accessing the form's submit button.

Changes:

• Added reCAPTCHA v3 integration with a custom React hook for token management
• Protected contact form and multi-page forms (adoption/interest) with reCAPTCHA gating
• Added comprehensive test coverage including unit tests and mock helper for testing

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/app/components/recaptcha.tsx	Core implementation of the useRecaptchaToken hook that manages token lifecycle and UI gating
src/app/pages/contact/form.tsx	Integrates reCAPTCHA into the contact form with hidden token field
src/app/components/multi-page-form/buttons.tsx	Wraps submit button in Recaptcha component for multi-page forms
src/index.html	Loads Google reCAPTCHA v3 script with site key
test/src/components/recaptcha.test.tsx	Unit tests for the reCAPTCHA hook functionality
test/src/helpers/mock-recaptcha.tsx	Mock implementation for testing components that use reCAPTCHA
test/src/pages/*.test.tsx	Updates existing tests to import the reCAPTCHA mock
test/src/components/multi-page-form.test.tsx	Updates test assertion to account for reCAPTCHA changes
package.json	Adds @types/grecaptcha type definitions
yarn.lock	Lockfile update for new dependency

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated 8 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

useRecaptchaToken checks the global identifier grecaptcha (not window.grecaptcha). In Jest/jsdom, assigning window.grecaptcha = ... does not necessarily define a global grecaptcha, so fetchToken may treat it as unavailable and never call execute. To make the test environment match browser semantics, assign the mock to globalThis.grecaptcha (or explicitly define a global grecaptcha) in addition to window.grecaptcha.

Suggested change

	// @ts-expect-error not all properties defined
	window.grecaptcha = {
	ready: mockReady,
	execute: mockExecute
	};
	const grecaptchaMock = {
	ready: mockReady,
	execute: mockExecute
	};
	// @ts-expect-error not all properties defined
	// Ensure both window.grecaptcha and the global grecaptcha identifier are set
	// so that useRecaptchaToken can find the mock in the Jest/jsdom environment.
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	(window as any).grecaptcha = grecaptchaMock;
	// @ts-expect-error not all properties defined
	// eslint-disable-next-line @typescript-eslint/no-explicit-any
	(globalThis as any).grecaptcha = grecaptchaMock;

[Copilot]

When error is set, Recaptcha renders only the error message and removes the button, but the only way to clear the error is by calling fetchToken again—which is no longer possible. Consider rendering a retry button (or keeping the existing button) while showing the error so users can re-attempt token generation.

Suggested change

	return <button type="button" disabled={fetching} onClick={fetchToken}>
	<p>{error}</p>
	<button type="button" disabled={fetching} onClick={fetchToken}>
	Try again
	</button>