RenewCMS/features/verify_screen.qa.md

QA: Verify account screen

Automated (Vitest + Vue Test Utils, task test:web)

Mock useApi (POST /v1/auth/verify, POST /v1/auth/login, DELETE /v1/auth/register, POST /v1/auth/logout) and useToast per case; no real backend, no httptest server. Mount VerifyPage inside AuthShell with a test router whose current route starts at the "c" query the case needs; use fake timers for the 800 ms success delay and the 429 countdown.

1. Verifying state — mount at "/register/validate?c=abc123"; assert the full-card spinner title "Verifying your account…" and that POST /v1/auth/verify was called exactly once with { code: 'abc123' } and { onUnauthorized: 'passthrough', onForbidden: 'passthrough' }.
2. Success state — mock POST /v1/auth/verify resolving 200; mock the session store's retry() to resolve; mount and let it settle; assert the ResultPanel (success, shield-check, "Your account is verified", "Taking you to your dashboard…", no actions); assert a toast was already raised with title "Your account is verified", description "Welcome to RenewCMS." while the path is still /register/validate; advance by 800 ms; assert retry() was called and the router's current path is /home, with no second toast.
3. Invalid or expired state — mock POST /v1/auth/verify resolving 403; assert the ResultPanel (error, link-2-off, "This verification link doesn't work", the text and note above) with actions "Cancel registration and start over" (primary) and "Log out" (secondary).
4. Cancel registration and start over — success — from state 3, mock DELETE /v1/auth/register resolving 200; click the action; assert it was called with { onForbidden: 'passthrough' } and that no ConfirmDialog was opened; assert the router's current path is /register and a toast was raised with title "Registration cancelled", description "You can create the owner account again."
5. Cancel registration and start over — failure shows an alert, not a redirect — three sub-cases from state 3: (a) DELETE /v1/auth/register resolves 403 (already verified elsewhere), (b) resolves 500, (c) a rejected fetch. In each, click the action and assert an alert is shown with color "error", icon "i-lucide-circle-x", title "Couldn't cancel registration", description "Something went wrong on the server. Try again in a moment."; assert the ResultPanel and both of its actions ("Cancel registration and start over", "Log out") are still rendered, unchanged; assert the router's current path did not change (in particular, sub-case (a) must NOT navigate to /home — unlike Pending's own already-verified handling, this screen never redirects on this 403).
6. Log out from Invalid or expired — from state 3, mock POST /v1/auth/logout resolving 200; click "Log out"; assert the session store's clear() was called and the router's current path is /login.
7. No session state — mock POST /v1/auth/verify resolving 401; assert the form (title "Log in to finish verifying", description, Username placeholder "Your username", Password with show/hide, submit "Log in and verify") and assert no "Forgot password?" link and no registration footer are rendered.
8. No session — empty fields are caught on submit — from state 7, assert the submit button is enabled; submit with both fields empty; assert "Use at least 3 characters." and "Enter your password." are shown and POST /v1/auth/login was not called.
9. No session — successful login retries — from state 7, fill valid credentials; mock POST /v1/auth/login resolving 200; mock a second POST /v1/auth/verify call; submit; assert the spinner "Verifying your account…" reappears and the second POST /v1/auth/verify call was made with the same code and the same passthrough options.
10. No session — wrong credentials — from state 7, mock POST /v1/auth/login resolving 403; submit "marta" / "wrong-password"; assert the error alert ("That username and password don't match", "Check both and try again. Passwords are case-sensitive."), the Password field cleared and focused, and that POST /v1/auth/verify was not called again.
11. No session — too many attempts — from state 7, mock POST /v1/auth/login resolving 429 with Retry-After: 30; submit; assert the info alert ("Too many attempts", "For your security, wait a moment before trying again."), the submit button reading "Try again in 0:30" and disabled; advance fake timers 30s; assert it re-enables.
12. No session — server/network error — two sub-cases (500, rejected fetch) from state 7; submit valid-looking credentials; assert the error alert ("Couldn't reach RenewCMS", "Check your connection and try again.") and that both fields keep their values and re-enable.
13. Missing code state — mount at "/register/validate" (no "c"); assert no request was made (neither POST /v1/auth/verify nor POST /v1/auth/login); assert the ResultPanel (error, link-2-off, "This link is incomplete", the text above) with a single secondary action "Go to log in"; click it and assert the router's current path is /login.

Visual (manual verification — desktop and mobile, light and dark)

Reference: docs/design/source/RenewCMS Screens Auth.dc.html, group "Verify". Run task visual:check -- verify for each state and compare against the board frame.

• Verifying state: the full-card spinner (the only one in the product) matches the board's layout exactly, with no title header shown.
• Success state: ResultPanel with no actions and the success toast over it, captured before the 800 ms redirect (the visual setup freezes timers with paused: true).
• Invalid or expired state: ResultPanel with note and both actions, button order (primary "Cancel registration and start over" first per components.md's safe/primary-on-top rule for stacked mobile buttons).
• Cancel-failed alert: the error alert renders above the ResultPanel via AuthShell's #notice slot, matching Register's own server-error alert styling exactly.
• No session state: the trimmed-down log-in form (no forgot-password link, no footer) matches the board.
• No session, retrying state: identical spinner to Verifying.
• Missing code state: ResultPanel with a single secondary action.
• Keyboard/focus: focus moves to the ResultPanel title on the Success, Invalid-or-expired, and Missing-code states; on No session, focus order is Username → Password → show/hide → submit; the spinner's role="status" text is announced once, not on every re-render; the cancel-failed alert is role="alert" and does not steal focus from the ResultPanel title.

Manual verification

• Real POST /v1/auth/verify and POST /v1/auth/login against a running server — Vitest only mocks useApi; confirm the real 200/403/401 round-trips (including the actual bcrypt code check and 2-hour expiry) against task dev with a live SQLite file. The endpoint's own contract is already covered by features/account_verification.qa.md and features/login_screen.qa.md; this slice only re-verifies the screen consumes it correctly.
• Real DELETE /v1/auth/register from this screen — confirm the 200/403/500 round-trips against a live server; the endpoint's own contract is already covered by features/cancel_pending_registration.qa.md.