vibed/quotesdb/.beans/quotesdb-qqdf--implement-auth-code-modalprompt-component-dialog-r.md

title	status	type	priority	created_at	updated_at	blocked_by
Implement auth code modal/prompt component — dialog requesting X-Auth-Code before edit or delete	completed	task	normal	2026-03-10T23:32:11Z	2026-03-10T23:32:20Z	quotesdb-kaat quotesdb-5dda quotesdb-wlpv

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`, `on_cancel: Callback<()>`, and `initial_value: Option` props 3. Renders an `` for the auth code, pre-populated from `initial_value` if provided (supplied by the parent from session storage — see ticket 5379eb) 4. Renders Submit and Cancel buttons 5. Calls `on_submit` with the entered code when submitted - Storage strategy resolved in TRIAGE 0bc655: **session storage per quote ID** (ticket 5379eb). The `AuthModal` itself does NOT read or write storage — it receives `initial_value` from the parent component, which handles storage via `storage::get_auth_code`. - The modal must be accessible: label the `` with ``, support Escape key to cancel, and focus the input when the modal opens. - Do NOT persist the auth code in `localStorage` — session storage only (cleared on tab close). From the `quotesdb/` directory:

trunk build

`feat(quotesdb): implement AuthModal component for auth code prompt`