[vidiyala99]

Description

Bug 61 (Jobs Component - Bot Protection and Rate Limiting on Submit), frontend half. The public job application form now sends the signals the new backend checks use (a hidden honeypot field and how long the form was open), can show a Cloudflare Turnstile widget when maintainers configure one, and shows a clear message when the server rate-limits or rejects the submit.

Fixes # Bug 61 (Jobs Component - Bot Protection and Rate Limiting on Submit)

Original task:

61. (Priority High) Bug/Security [Aakash]: Jobs Component - Bot Protection and Rate Limiting on Job Application Submit (WIP Aakash) 8 hrs FE/BE
    Feature / Page: /job-application and /apply/:slug submit
    Issue: The public application route has no captcha, no rate limit, and no honeypot, so a script can submit unlimited fake applications (each one also sends an email, see Update Dashboard.jsx #62).
    Expected Behavior: A per-IP rate limit on the submit route, a hidden honeypot field, and Cloudflare Turnstile (free) if the API sits behind Cloudflare. Real applicants see no extra steps beyond the Turnstile check.
    Note: Needs an admin to confirm whether the API host is behind Cloudflare and to provide a Turnstile site key. Menu Unresponsive Mobile View #58 (Purav) touches the same submit route; coordinate with its assignee.

Related PRS (if any):

HGNRest#2414 (the backend half: per-IP and per-email limits, honeypot and fill-time check, optional Turnstile check). This PR works before or after it: the backend ignores the extra fields until it is deployed, and a missing fillMs is allowed there.

Main changes explained:

• Update JobApplicationForm.jsx: add a hidden text input website_url (off-screen through a CSS module class, tabIndex={-1}, autoComplete="off", wrapper aria-hidden, no label) that is sent empty; real people cannot reach it by keyboard or screen reader. Send fillMs, the milliseconds the form was open before submit.
• Add turnstile.js and TurnstileWidget.jsx: the Turnstile script loads and the widget renders only when VITE_TURNSTILE_SITE_KEY is set at build time; the token is sent as cf-turnstile-response and the widget resets after a failed submit (tokens are single use). The widget theme follows dark mode. No new npm dependency. Without the key the form is unchanged: no script, no widget, no extra field.
• Show errors: a 429 shows the server's message (fallback "Too many applications from this connection. Please try again later."), and a 400 "Verification failed. Please try again." shows that text. Both use the existing .fieldError style with role="alert" above the submit button and clear on the next submit. Other errors (409 and the rest) behave as before.
• Update JobApplicationForm.module.css: .honeypot class.
• Tests: JobApplicationForm.botProtection.test.jsx (10 tests): honeypot is hidden from keyboard and screen readers and sent empty, fillMs is a number, widget and script absent without the key and present once with it, token sent, widget reset after a 400, 429 message and fallback, message clears on resubmit.

How to test:

1. check into current branch
2. do npm install
3. npx vitest run src/components/Collaboration (110 tests pass)
4. Run the app with the backend from HGNRest#2414. Open a job application form and submit normally: it succeeds. Open DevTools, Network, and check the request body has website_url empty and a numeric fillMs.
5. Submit the same form 11 times from one connection (use different emails): the 11th shows the red message under the form instead of a success toast. Check it in light and dark mode.
6. Optional: set VITE_TURNSTILE_SITE_KEY (Cloudflare provides a public test key) in .env.local; the widget appears above the submit button.

Screenshots or videos of changes:

The real form with a mocked backend reply. Too many applications from one connection (light, desktop):

Too many applications for one email address (dark, phone):

Failed verification (dark, desktop):

Note:

• VITE_TURNSTILE_SITE_KEY is optional and never committed. Maintainers create the Turnstile widget and set the matching TURNSTILE_SECRET_KEY on the backend.
• The honeypot and widget are not visible to applicants, so the only visible change is the new error message.
• Not tested against the real Cloudflare script; the tests mock window.turnstile. Retry-After is not read; the message is the server's text only.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	92c1b94
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6adf7465a6ee224d1116e5c7
😎 Deploy Preview	https://deploy-preview-5675--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[rahulrubugunday]

I have reviewed your PR locally (f2c7a2b, backend on HGNRest #2414 12884f73) and it works as per requirement.

1. The submit request sends an empty website_url and a numeric fillMs (e.g. 140656).
2. The honeypot field is hidden from people (off-screen, aria-hidden, tabindex -1, autocomplete off).
3. When the server rate-limits the submit, the red "Too many applications from this connection. Please try again later." message shows under the form instead of a success toast, readable in both light and dark mode.
4. No Turnstile widget shows when no site key is set.
5. The JobApplicationForm tests pass (13 files, 135 tests).

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud