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

<context>
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.
</context>

<goal>
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<String>`, `on_cancel: Callback<()>`, and
   `initial_value: Option<String>` props
3. Renders an `<input type="text">` 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
</goal>

<constraints>
- 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 `<input>` with `<label>`, 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).
</constraints>

<validation>
From the `quotesdb/` directory:

```sh
trunk build
```
</validation>

<commit>
`feat(quotesdb): implement AuthModal component for auth code prompt`
</commit>