You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1.4 KiB

+++ title = "quotesdb/ui: report button with modal (reason field + captcha)" priority = 5 status = "done" ticket_type = "feature" dependencies = ["77237f"] +++

Summary

Add a Report button to quote detail pages that opens a modal with an optional reason field and a CAPTCHA to prevent abuse.

Details

  • Report button appears on /quotes/:id page
  • Clicking opens a modal with:
    • Optional reason textarea (max 256 characters, show character counter)
    • CAPTCHA widget (Cloudflare Turnstile — see infra, or hCaptcha as fallback)
    • Submit button (disabled until CAPTCHA is completed)
    • Cancel button
  • On submit:
    • POST /api/quotes/:id/report with { reason?, captcha_token }
    • API verifies CAPTCHA server-side before creating report
    • Show success message on 201
    • Show error message on failure

CAPTCHA

Use Cloudflare Turnstile (free, privacy-friendly). Site key stored as an environment variable in Trunk.toml or index.html. The API worker verifies the token via the Turnstile verify endpoint.

Acceptance Criteria

  • Report button visible on /quotes/:id
  • Modal opens with reason textarea and CAPTCHA
  • Character counter on reason field
  • Submit disabled until CAPTCHA solved
  • Correct POST request on submit
  • Success and error feedback shown
  • Modal closes on cancel

Depends on

  • 77237f (reports API endpoint)

Validation

cargo fmt && cargo check && cargo clippy
trunk build