RenewCMS/features/reset_confirm_screen.qa.md

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.