Added Captcha to data attribute forms #22049
Conversation
ref BAE-370
ref BAE-370 Used to power the data-attributes hCaptcha implementation
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/portal/src/data-attributes.jsOops! Something went wrong! :( ESLint: 8.44.0 ESLint couldn't find the plugin "eslint-plugin-i18next". (The package "eslint-plugin-i18next" was not found when loaded as a Node module from the directory "/apps/portal".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-i18next" was referenced from the config file in "apps/portal/package.json". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThis pull request introduces CAPTCHA (hCaptcha) integration across multiple components of the application. The changes span frontend files in the portal and Ghost core, adding functionality to load and handle CAPTCHA verification during form submissions. The implementation includes script loading, form handling modifications, and corresponding test cases to ensure the new CAPTCHA feature works as expected across different parts of the application. Changes
Sequence DiagramsequenceDiagram
participant User
participant Form
participant hCaptcha
participant Server
User->>Form: Initiate form submission
Form->>hCaptcha: Execute CAPTCHA verification
hCaptcha-->>Form: Return CAPTCHA token
Form->>Server: Submit form with CAPTCHA token
Server->>Server: Validate CAPTCHA token
Server-->>Form: Submit response
Possibly related PRs
Suggested reviewers
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/portal/src/data-attributes.js (1)
195-204: Add error handling for CAPTCHA initialization.While the CAPTCHA integration looks good, consider adding error handling for CAPTCHA initialization failures. This will help provide better feedback to users when CAPTCHA fails to load.
let captchaId; if (hasCaptchaEnabled({site})) { const captchaSitekey = getCaptchaSitekey({site}); const captchaEl = document.createElement('div'); form.appendChild(captchaEl); + try { captchaId = window.hcaptcha.render(captchaEl, { size: 'invisible', sitekey: captchaSitekey }); + } catch (err) { + console.error('Failed to initialize CAPTCHA:', err); + // Optionally, show user-friendly error message + const errorEl = form.querySelector('[data-members-error]'); + if (errorEl) { + errorEl.innerText = 'Failed to initialize security check. Please try again later.'; + } + } }Also applies to: 208-208
ghost/core/core/frontend/helpers/ghost_head.js (1)
168-170: Consider script loading order for CAPTCHA.The CAPTCHA script is loaded with both
deferandasyncattributes. While this optimizes page load, it may cause race conditions if the form initialization code runs before the CAPTCHA script loads. Consider:
- Using only
deferto maintain script execution order- Adding a script load error handler
function getHCaptchaScript() { - return `<script defer async src="https://js.hcaptcha.com/1/api.js"></script>`; + return `<script defer src="https://js.hcaptcha.com/1/api.js" onerror="console.error('Failed to load CAPTCHA script')"></script>`; }Also applies to: 360-362
apps/portal/src/tests/data-attributes.test.js (1)
183-206: Add more test cases for CAPTCHA handling.Consider adding the following test cases to improve coverage:
- Test CAPTCHA execution failure
- Test missing CAPTCHA response
- Test invalid CAPTCHA response format
Example test case:
test('handles CAPTCHA execution failure', async () => { window.hcaptcha.execute.mockImplementationOnce(() => { throw new Error('CAPTCHA execution failed'); }); const {event, form, errorEl, siteUrl, submitHandler} = getMockData(); await formSubmitHandler({event, form, errorEl, siteUrl, submitHandler, captchaId: '123123'}); expect(form.classList.contains('error')).toBe(true); expect(errorEl.innerText).toContain('security check'); });ghost/core/test/unit/frontend/helpers/ghost_head.test.js (1)
1385-1421: Add test cases for CAPTCHA configuration errors.The test suite covers basic enable/disable scenarios. Consider adding test cases for:
- Missing CAPTCHA configuration
- Invalid CAPTCHA configuration
- Partial CAPTCHA configuration
Example test case:
it('handles missing CAPTCHA configuration', async function () { sinon.stub(labs, 'isSet').withArgs('captcha').returns(true); configUtils.set({captcha: {}}); // Missing enabled flag const rendered = await testGhostHead(testUtils.createHbsResponse({ locals: { relativeUrl: '/', context: ['home', 'index'], safeVersion: '4.3' } })); rendered.should.not.match(/hcaptcha/); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snapis excluded by!**/*.snap
📒 Files selected for processing (4)
apps/portal/src/data-attributes.js(3 hunks)apps/portal/src/tests/data-attributes.test.js(2 hunks)ghost/core/core/frontend/helpers/ghost_head.js(2 hunks)ghost/core/test/unit/frontend/helpers/ghost_head.test.js(1 hunks)
🔇 Additional comments (3)
apps/portal/src/data-attributes.js (2)
2-2: LGTM!The new imports are correctly added for the CAPTCHA functionality.
6-9: LGTM!The function has been properly updated to:
- Accept the CAPTCHA ID parameter
- Execute CAPTCHA verification when ID is provided
- Include the CAPTCHA response token in the request body
Also applies to: 69-72
apps/portal/src/tests/data-attributes.test.js (1)
139-147: LGTM!The hCaptcha mock is properly implemented to simulate CAPTCHA execution in tests.
ref BAE-370
Enables Captcha (when labs flag and config entry set) in data-attribute forms within Portal.
@coderabbitai