feat: login page T0

features/login_screen.qa.md

@@ -0,0 +1,95 @@
+# QA: Log in screen
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi` (`GET /v1/auth/registration`, `POST /v1/auth/login`, `GET /v1/auth/me`) per case; no
+real backend, no httptest server. Mount LoginPage inside AuthShell with a test router whose current
+route starts at the path each case needs.
+
+1. **Default state** — mock `GET /v1/auth/registration` resolving `{ open: false }`; mount at
+   /login; assert heading "Log in", description "Welcome back. Log in to manage your articles.",
+   Username placeholder "Your username" with no value, Password with no value, submit button "Log
+   in", and no "Create the owner account" link.
+2. **Fresh install state** — mock `GET /v1/auth/registration` resolving `{ open: true }`; mount at
+   /login; assert the same heading/description/fields as case 1, plus a "Create the owner account"
+   link under "First time here?".
+3. **Validation errors state** — mount at /login; set Username to "ma", leave Password empty,
+   submit; assert the mocked `POST /v1/auth/login` was never called; assert Username shows "Use at
+   least 3 characters." and Password shows "Enter your password."
+4. **Submitting state** — set Username "marta", Password "limewash2026"; mock
+   `POST /v1/auth/login` with an unresolved promise; submit; assert Username and Password are
+   disabled and the submit button reads "Logging in…" with a loading indicator.
+5. **Wrong credentials state** — set Username "marta", Password "wrong-password"; mock
+   `POST /v1/auth/login` resolving 403; submit; assert an error alert with title "That username and
+   password don't match" and description "Check both and try again. Passwords are case-sensitive.";
+   assert Username still reads "marta"; assert Password is empty and has focus; assert the submit
+   button reads "Log in" and is no longer loading.
+6. **Too many attempts state** — set Username "marta", Password "limewash"; mock
+   `POST /v1/auth/login` resolving 429 with a `Retry-After: 42` header; submit; assert an info alert
+   with title "Too many attempts" and description "For your security, wait a moment before trying
+   again."; assert Username still reads "marta" and Password still reads "limewash"; assert the
+   submit button reads "Try again in 0:42" and is disabled; advance fake timers by 42 seconds;
+   assert the button re-enables and reads "Log in".
+7. **Session expired state** — mount at
+   "/login?redirect=/article/12/edit&reason=expired"; assert an info alert with title "Your session
+   expired" and description "Log in again to pick up where you left off. Unsaved changes are kept on
+   this device."; assert the Password field has focus; assert the submit button reads "Log in".
+8. **Password changed state** — mount at "/login?reason=password-changed"; assert a success alert
+   with title "Password changed" and description "Log in with your new password."; assert Username
+   shows placeholder "Your username" with no value.
+9. **Server or network error state** — three sub-cases, one per Examples row: (a) a 500 response
+   with Password "limewash2026"; (b) a rejected fetch (network error) with Password "limewash2026";
+   (c) a 400 response with Password "short1" (6 characters — passes client validation since it's
+   non-empty and 3+ characters, but is under the server's 8-character minimum, which the client does
+   not check, so the request reaches the server and comes back 400). In each sub-case, set Username
+   "marta" and the row's Password, submit, and assert an error alert with title "Couldn't reach
+   RenewCMS" and description "Check your connection and try again."; assert Username still reads
+   "marta" and Password still reads the row's value; assert the submit button reads "Log in" and is
+   no longer loading. Sub-case (c) also asserts the mocked `POST /v1/auth/login` was actually called
+   (proving client validation let it through), unlike scenario 3's validation-errors case.
+10. **Successful log in redirects correctly** — one test per Examples row: mock
+    `POST /v1/auth/login` resolving 200, then `GET /v1/auth/me` resolving 200 with the row's
+    `is_verified`; mount at the row's path; submit valid credentials; assert the router's current
+    path equals the row's destination.
+    | path                                  | verified | destination            |
+    |----------------------------------------|----------|-------------------------|
+    | /login                                | true     | /home                  |
+    | /login                                | false    | /register/pending      |
+    | /login?redirect=/article/12/edit      | true     | /article/12/edit       |
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/source/RenewCMS Screens Auth.dc.html`, group "Log in".
+
+- [ ] Default state, desktop and mobile, light and dark: heading, description, Username, Password
+      with show/hide toggle, "Forgot password?" link, "Log in" button, matches the board exactly.
+- [ ] Fresh install state: "First time here? Create the owner account" footer renders below the
+      form, desktop and mobile, light and dark.
+- [ ] Validation errors state: both field errors render inline under their fields with the error
+      styling from components.md, desktop and mobile, light and dark.
+- [ ] Submitting state: disabled field styling and the loading spinner in the submit button, desktop
+      and mobile, light and dark.
+- [ ] Wrong credentials state: error alert (circle-x icon, `role="alert"`) above the heading,
+      cleared/focused Password field, desktop and mobile, light and dark.
+- [ ] Too many attempts state: info alert (timer icon), disabled button with the live "Try again in
+      m:ss" countdown text, desktop and mobile, light and dark.
+- [ ] Session expired state: info alert (clock icon), focused Password field, desktop and mobile,
+      light and dark.
+- [ ] Password changed state: success alert (circle-check icon, dismissible close button per
+      components.md), desktop and mobile, light and dark.
+- [ ] Server or network error state: error alert (circle-x icon, no close button), fields retain
+      their values, desktop and mobile, light and dark.
+- [ ] Keyboard/focus: Tab order is Username → Password → show/hide toggle → "Forgot password?" →
+      submit; the alert (when present) is announced via `role="status"` (info/success) or
+      `role="alert"` (error) without re-announcing on re-render; Password receives programmatic focus
+      exactly in the Wrong credentials and Session expired states, and nowhere else.
+
+## Manual verification
+
+- **Real GET /v1/auth/registration and POST /v1/auth/login against a running server** — Vitest only
+  mocks `useApi`; confirm the Default/Fresh install split and a real 403/429/200 round-trip against
+  `task dev` with a live SQLite file, since this slice's automated tests never exercise the actual Go
+  handlers, the rate limiter, or the real `jwt` cookie.
+- **429 countdown drift** — confirm `useRetryAfter`'s live countdown does not drift or double-fire
+  the re-enable against a real elapsed 42-second wait, since Vitest fake timers only prove the logic,
+  not real wall-clock behavior.