# 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.