Integrate h captcha into the sensor manufacturer request form#3628
Conversation
|
Warning Review limit reached
More reviews will be available in 24 minutes. Learn how PR review limits work. Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe PR adds hCaptcha bot protection to the Sensor Manufacturer Request form by integrating a verification widget, gating submission on token acquisition, and managing token state across errors and dialog close. A separate change migrates error reporting in ShippingLabelPrintModal from alert() to in-app banners. ChangeshCaptcha Integration in NetworkRequestDialog
Banner Error Handling in ShippingLabelPrintModal
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds hCaptcha support to the Network Request dialog (schema + UI + submission gating) and replaces alert() calls in the shipping label print flow with scoped banners, with a corresponding changelog entry.
Changes:
- Add optional
captchaTokento the network request Zod schema and include token in POST body when hCaptcha is enabled - Integrate
HCaptchaWidgetintoNetworkRequestDialog, gating submission and resetting token/widget on close + error - Replace print-modal
alert()messages withshowBannererrors and update changelog
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/vertex/components/features/shipping/ShippingLabelPrintModal.tsx | Switches pop-up/invalid-URL feedback from alert() to banner notifications |
| src/vertex/components/features/networks/schema.ts | Extends request schema to optionally accept captchaToken |
| src/vertex/components/features/networks/network-request-dialog.tsx | Adds hCaptcha widget, token state, submit gating, and reset behavior |
| src/vertex/app/changelog.md | Documents hCaptcha integration release notes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const handlePrint = () => { | ||
| // Generate HTML for the new window | ||
| const printWindow = window.open('', '_blank'); |
|
|
||
| const handlePrint = () => { | ||
| // Generate HTML for the new window | ||
| const printWindow = window.open('', '_blank'); |
| const invalidLabels = labels.filter(label => !isValidDataUrl(label.qr_code_image)); | ||
| if (invalidLabels.length > 0) { | ||
| alert('Some QR code images have invalid URLs'); | ||
| showBanner({ severity: 'error', message: 'Some QR code images have invalid URLs', scoped: true }); | ||
| return; | ||
| } |
| const { showBannerWithDelay } = useBannerWithDelay(); | ||
| const [captchaToken, setCaptchaToken] = useState(""); | ||
| const captchaRef = useRef<HCaptchaWidgetHandle>(null); | ||
| const hcaptchaEnabled = useMemo(() => isHCaptchaEnabled(), []); |
| method: "POST", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify(data), | ||
| body: JSON.stringify({ ...data, ...(hcaptchaEnabled && { captchaToken }) }), |
| <details> | ||
| <summary><strong>Files Updated (2)</strong></summary> | ||
|
|
||
| - `src/vertex/components/features/networks/network-request-dialog.tsx` [MODIFIED] | ||
| - `src/vertex/components/features/networks/schema.ts` [MODIFIED] | ||
|
|
||
| </details> |
|
New azure docs changes available for preview here |
|
New azure website changes available for preview here |
|
New azure analytics_platform changes available for preview here |
|
New azure vertex changes available for preview here |
cd9b652 to
6efa4d2
Compare
|
New azure website changes available for preview here |
|
New azure docs changes available for preview here |
|
New azure analytics_platform changes available for preview here |
|
New azure vertex changes available for preview here |
…cturer-Request-Form
| captchaRef.current?.reset(); | ||
| }, [form, onOpenChange]); | ||
|
|
||
| const onSubmit = (values: NetworkRequestValues) => { |
| const [captchaToken, setCaptchaToken] = useState(""); | ||
| const captchaRef = useRef<HCaptchaWidgetHandle>(null); | ||
| const hcaptchaEnabled = useMemo(() => isHCaptchaEnabled(), []); |
| method: "POST", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify(data), | ||
| body: JSON.stringify({ ...data, ...(hcaptchaEnabled && { captchaToken }) }), |
| queryClient.invalidateQueries({ queryKey: ["network-requests"] }); | ||
| showBannerWithDelay({ severity: 'success', message: resp.message || "Your request for a new Sensor Manufacturer has been submitted successfully!", scoped: true }); | ||
| }, |
There was a problem hiding this comment.
@copilot We have two modals here on success the first modal will close and it will leave the second modal open.
| <details> | ||
| <summary><strong>Files Updated (2)</strong></summary> | ||
|
|
||
| - `src/vertex/components/features/networks/network-request-dialog.tsx` [MODIFIED] | ||
| - `src/vertex/components/features/networks/schema.ts` [MODIFIED] | ||
|
|
||
| </details> |
|
New azure docs changes available for preview here |
|
New azure website changes available for preview here |
|
New azure analytics_platform changes available for preview here |
|
New azure vertex changes available for preview here |
|
New azure website changes available for preview here |
|
New azure docs changes available for preview here |
|
New azure analytics_platform changes available for preview here |
|
New azure vertex changes available for preview here |
|
Hi @Codebmk , I have realised that this PR is triggering multiple deploy previews for almost all projects and yet it should be triggerig for just one project. We need to investigate this. |
Summary of Changes (What does this PR do?)
Adds hCaptcha verification to the public-facing Sensor Manufacturer Request
form (
NetworkRequestDialog) to protect the unauthenticated/api/devices/network-creation-requestsendpoint from automated abuse andspam submissions.
The backend CAPTCHA middleware is already wired — it accepts a
captchaTokenfield in the POST body and will enforce it once the backend secret key is
activated. This PR completes the frontend integration.
Changes made:
schema.ts— added optionalcaptchaToken: z.string().optional()tonetworkRequestSchemato keep the Zod schema aligned with the POST body.network-request-dialog.tsx— integratedHCaptchaWidgetfollowing thesame pattern as the login page:
hcaptchaEnabledflag derived fromisHCaptchaEnabled()viauseMemoto conditionally enable all CAPTCHA behaviour at runtime.
<HCaptchaWidget>rendered at the bottom of the form only whenhcaptchaEnabledis true, withonVerifyandonExpirehandlers.captchaTokenonly included in the POST body whenhcaptchaEnabledis true:
{ ...data, ...(hcaptchaEnabled && { captchaToken }) }.disabled: isPending || (hcaptchaEnabled && !captchaToken)so it remains usable when CAPTCHA is disabled.
handleCloseresets the widget and clearscaptchaTokenon dialogdismiss or cancel.
onErroralso resets the widget and clearscaptchaTokenso the usermust re-verify before retrying a failed submission.
Dependencies:
HCaptchaWidgetcomponent (src/vertex/components/ui/hcaptcha-widget.tsx) — already merged.NEXT_PUBLIC_HCAPTCHA_SITE_KEYset in.env.localto render the widget locally.Status of maturity (all need to be checked before merging):
How should this be manually tested?
Add your own hCaptcha site key to
.env.local:NEXT_PUBLIC_HCAPTCHA_SITE_KEY=your-site-key-here
Run the app locally and navigate to the page that renders
NetworkRequestDialog.Open the Request New Sensor Manufacturer dialog.
Confirm the hCaptcha widget renders at the bottom of the form.
Confirm the Submit Request button is disabled before completing the CAPTCHA.
Complete the CAPTCHA — confirm the Submit button becomes enabled.
Submit the form with valid data — confirm the request succeeds and the dialog closes.
Re-open the dialog — confirm the widget is reset and the Submit button is disabled again.
Trigger a submission error — confirm the widget resets and the Submit button re-disables, requiring re-verification before retrying.
Click Cancel without submitting — confirm the widget resets on close.
Remove
NEXT_PUBLIC_HCAPTCHA_SITE_KEYfrom.env.localand reload — confirm the widget does not render and the Submit button is not blocked.What are the relevant tickets?
Adds hCaptcha verification to the public-facing Sensor Manufacturer Request
form (
NetworkRequestDialog) to protect the unauthenticated/api/devices/network-creation-requestsendpoint from automated abuse andspam submissions.
Changes made:
schema.ts— added optionalcaptchaToken: z.string().optional()tonetworkRequestSchemato keep the Zod schema aligned with the POST body.network-request-dialog.tsx— integratedHCaptchaWidgetfollowing thesame pattern as the login page:
hcaptchaEnabledflag derived fromisHCaptchaEnabled()viauseMemoto conditionally enable all CAPTCHA behaviour at runtime.
<HCaptchaWidget>rendered at the bottom of the form only whenhcaptchaEnabledis true, withonVerifyandonExpirehandlers.captchaTokenonly included in the POST body whenhcaptchaEnabledis true:
{ ...data, ...(hcaptchaEnabled && { captchaToken }) }.disabled: isPending || (hcaptchaEnabled && !captchaToken)so it remains usable when CAPTCHA is disabled.
handleCloseresets the widget and clearscaptchaTokenon dialogdismiss or cancel.
onErroralso resets the widget and clearscaptchaTokenso the usermust re-verify before retrying a failed submission.
Status of maturity (all need to be checked before merging):
How should this be manually tested?
Add your own hCaptcha site key to
.env.local:NEXT_PUBLIC_HCAPTCHA_SITE_KEY=your-site-key-here
Run the app locally and navigate to the page that renders
NetworkRequestDialog.Open the Request New Sensor Manufacturer dialog.
Confirm the hCaptcha widget renders at the bottom of the form.
Confirm the Submit Request button is disabled before completing the CAPTCHA.
Complete the CAPTCHA — confirm the Submit button becomes enabled.
Submit the form with valid data — confirm the request succeeds and the dialog closes.
Re-open the dialog — confirm the widget is reset and the Submit button is disabled again.
Trigger a submission error — confirm the widget resets and the Submit button re-disables, requiring re-verification before retrying.
Click Cancel without submitting — confirm the widget resets on close.
Remove
NEXT_PUBLIC_HCAPTCHA_SITE_KEYfrom.env.localand reload — confirm the widget does not render and the Submit button is not blocked.What are the relevant tickets?
Screenshots (optional)
Summary by CodeRabbit
New Features
Improvements
Documentation