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.6 KiB

+++ title = "Implement auth code modal/prompt component — dialog requesting X-Auth-Code before edit or delete" priority = 5 status = "todo" ticket_type = "task" dependencies = ["c3503b", "93515e", "0bc655"] +++

The `quotesdb` UI is a Yew (Rust → Wasm) single-page app compiled by Trunk and hosted on Cloudflare Pages. It communicates with the backend API via `fetch` calls. Source lives in `src/bin/ui/`. Run with `trunk serve` for local development.

The auth code modal prompts the user to enter their X-Auth-Code (4-word passphrase) before allowing edit or delete operations on a quote. The auth code is never stored in the backend session — the UI must send it with each authenticated request.

Implement an `AuthModal` Yew component (`src/bin/ui/components/auth_modal.rs`) that: 1. Shows a dialog overlay prompting for the auth code 2. Accepts `on_submit: Callback` and `on_cancel: Callback<()>` props 3. Renders an `` for the auth code and Submit/Cancel buttons 4. Calls `on_submit` with the entered code when submitted - Resolve TRIAGE ticket 0bc655 (auth code storage strategy) before deciding whether to persist the code in `localStorage` or keep it in component-only state. - The modal must be accessible (label the input, support keyboard dismiss). - Do not persist the auth code across sessions unless explicitly decided in ticket 0bc655. From the `quotesdb/` directory:
trunk build
`feat(quotesdb): implement AuthModal component for auth code prompt`