---
# quotesdb-792p
title: 'quotesdb/ui: report button with modal (reason field + captcha)'
status: completed
type: feature
priority: normal
created_at: 2026-03-10T23:32:06Z
updated_at: 2026-03-10T23:32:13Z
blocked_by:
    - quotesdb-i37j
---

## 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
```sh
cargo fmt && cargo check && cargo clippy
trunk build
```