feat: password reset full design and flow

features/reset_confirm_screen.qa.md

@@ -0,0 +1,83 @@
+# QA: Password reset confirm screen
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi` (`POST /v1/auth/password-reset/confirm`) per case; no real backend, no httptest
+server. Mount ResetConfirmPage inside AuthShell with a test router whose current route starts at
+the query string each case needs.
+
+1. **Default state** — mount at
+   "/register/reset/validate?c=abc123&email=marta%40renew.example"; assert heading "Choose a new
+   password", description, Email "marta@renew.example" read-only with help "From your reset
+   link.", New password empty with checklist "At least 8 characters" unmet, Confirm new password
+   empty with checklist "Passwords match" unmet, submit "Change password".
+2. **Too short state** — from state 1, set New password and Confirm new password both to "lime";
+   submit; assert `POST /v1/auth/password-reset/confirm` was never called; assert "At least 8
+   characters" shows its error state and "Passwords match" shows its met state.
+3. **Mismatch state** — from state 1, set New password to "limewash2026", type "limewash2025"
+   into Confirm new password and blur; assert the error "The passwords don't match." and the
+   "Passwords match" checklist error state; submit; assert the call was never made and the same
+   error is still shown.
+4. **Submitting state** — from state 1, set both password fields to "limewash2026"; mock the call
+   with an unresolved promise; submit; assert both fields are disabled and the submit button
+   reads "Changing password…" with a loading indicator.
+5. **Success state** — from state 1, set both password fields to "limewash2026"; mock the call
+   resolving 200; submit; assert the router's current path is "/login?reason=password-changed"
+   (the rendering of that page is covered by `login_screen.qa.md`, not re-asserted here beyond
+   the path/query).
+6. **Invalid or expired state** — from state 1, set both password fields to "limewash2026"; mock
+   the call resolving 403 with the `apperr.PasswordResetFailedErrorMessage` body; submit; assert
+   the form is no longer rendered; assert a ResultPanel (error, link-2-off, "This reset link has
+   expired", the text above) with actions "Request a new link" (primary) and "Back to log in"
+   (secondary); click each in separate sub-cases and assert the router's current path is
+   /register/reset/request and /login respectively.
+7. **Server or network error state** — two sub-cases (500 response, rejected fetch) from state 1,
+   with both password fields set to "limewash2026"; submit; assert an error alert with icon
+   "i-lucide-circle-x", title "Couldn't reach RenewCMS", description "Check your connection and
+   try again." (the same copy `login_screen.qa.md` and `register_screen.qa.md` already assert
+   for their own server/network cases); assert the form is still rendered (no ResultPanel);
+   assert both password fields still read "limewash2026" and are re-enabled; assert the submit
+   button reads "Change password" and is no longer loading.
+8. **Missing parameters state** — three sub-cases, one per Examples row (missing "c", missing
+   "email", missing both); mount at the row's path; assert no request was made; assert a
+   ResultPanel (error, link-2-off, "This link is incomplete", the text above) with a single
+   primary action "Request a new link"; click it and assert the router's current path is
+   /register/reset/request.
+   | path                                                    |
+   |----------------------------------------------------------|
+   | /register/reset/validate?email=marta%40renew.example    |
+   | /register/reset/validate?c=abc123                        |
+   | /register/reset/validate                                  |
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/source/RenewCMS Screens Auth.dc.html`, group "Reset password". Run
+`task visual:check -- reset-password` for each state.
+
+- [ ] Default state: read-only Email field styling, both checklist items in their unmet/gray
+      state, matches the board exactly.
+- [ ] Too short state: New password's checklist item in its error/red state while Confirm new
+      password's stays met/green, since both fields match.
+- [ ] Mismatch state: inline field error under Confirm new password plus its checklist error
+      state.
+- [ ] Submitting state: disabled field styling and the loading spinner in the submit button.
+- [ ] Invalid or expired state: ResultPanel with both actions, primary first (components.md's
+      safe/primary-on-top rule for stacked mobile buttons).
+- [ ] Server or network error state: error alert (circle-x icon, no close button) above the
+      heading, matching Login's/Register's own server-error alert styling exactly, since this
+      screen has no board state of its own for it; fields retain their values. This state is not
+      covered by `task visual:check`'s per-state board comparison (no board frame exists for it);
+      note that gap in the run's report rather than skipping it silently.
+- [ ] Missing parameters state: ResultPanel with a single primary action.
+- [ ] Keyboard/focus: Tab order is New password → show/hide → Confirm new password → show/hide →
+      submit; the ResultPanel's title receives focus on both the Invalid-or-expired and
+      Missing-parameters states; the mismatch error and the server/network alert are announced
+      without stealing focus from the field or the heading, respectively.
+
+## Manual verification
+
+- **Real POST /v1/auth/password-reset/confirm against a running server** — Vitest only mocks
+  `useApi`; confirm the real 200/403 round-trip (including the actual bcrypt code check, 1-hour
+  expiry, and single-use clearing) against `task dev` with a live SQLite file. The endpoint's own
+  contract is already covered by `features/reset_password.qa.md`; this slice only re-verifies the
+  screen consumes it correctly.