fix(recaptcha): validate on form submit, not button click

[dkoo]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

• Integrates fix(recaptcha): validate on form submit, not button click #3662 to perform reCAPTCHA v2 widget check on form submit instead of submit button click (so upon "enter" keypress in addition to clicking the submit button)
  • Because of this, some events and attributes needed to be moved off the submit buttons and onto the form elements.
• Ensures that widgets are refreshed upon form submit so that if the form responds with an error, it can be submitted again without a timeout-or-duplicate error from reCAPTCHA
• Updates the newspack_recaptcha_verify_captcha filter to add a third param that lets us specify the context of the request (could come in handy in the future)
• Adds server-side reCAPTCHA v2 verification to auth modal, Registration block, and Newsletter Subscription Form block submissions

Requires Automattic/newspack-blocks#2021 and Automattic/newspack-newsletters#1737.

How to test the changes in this Pull Request:

Test the following flows with both v2 and v3:

1. Auth modal: both login and registration—the v2 widget should appear only on registration
2. Registration block—the v2 widget should appear on every form submission
3. Newsletter Subscription Form block—the v2 widget should appear on every form submission
4. Modal checkout as an anonymous reader: the v2 widget should not appear when clicking "Continue" from the first screen, but should appear when submitting payment details on the second screen
5. Modal checkout as a logged-in reader: modal checkout should skip the first screen and show the v2 widget when submitting payment details
6. Regular checkout as an anonymous reader: v2 widget should appear whenever submitting the form
7. Regular checkout as a logged-in reader: v2 widget should appear whenever submitting the form
8. Adding payment method in My Account: v2 widget should appear whenever submitting the form

In each flow, make sure to test the following:

• Submitting the form with both a button click and an "enter" keypress: the v2 widget should appear either way
• Submitting the form with errors (e.g. missing required fields or with malformed data such as an invalid email address), then submitting the form again: the v2 widget should appear on each submission attempt then show error messages upon completing the challenge
• Submitting the form successfully: the v2 widget should appear on the submission attempt, then proceed automatically to the form's success state after completing the challenge

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[chickenn00dle]

Tested all of the flows with v2 and v3 and works for the most part. Just two issues:

1. When submitting with keypress in modal checkout, the v2 captcha modal is instantly dismissed:

Screen.Recording.2025-01-14.at.14.45.28.mov

2. Modal checkout is stuck in the loading state for anonymous readers:
   

This one appears to be an issue on release already, but not on trunk so there is probably a fix we can cherry pick for this.

That said, since it's unrelated to this PR I think we can tackle this outside of this hotfix.

[dkoo]

When submitting with keypress in modal checkout, the v2 captcha modal is instantly dismissed:

Fixed by Automattic/newspack-blocks@930878e!