--- phase: 08-stack-upgrade-backend-decomposition plan: "03" subsystem: frontend-toast-store tags: [frontend, toast, pinia, session-revocation, xfail-promotion, cr-01, cr-02, cr-03, wave-1] dependency_graph: requires: - "08-01: xfail stubs for CR-01/CR-02/CR-03 (decorators to remove)" provides: - "frontend/src/stores/toast.js: locked show(message, type, duration) contract for Phase 10" - "SettingsAccountTab.vue: uses toastStore.show() in changePassword + disableTotp" - "TotpEnrollment.vue: uses toastStore.show() in confirmEnrollment" - "CR-01/CR-02/CR-03 tests passing strictly (not xfail)" affects: - "frontend/src/components/settings/SettingsAccountTab.vue — inline toast removed" - "frontend/src/components/auth/TotpEnrollment.vue — inline toast removed" - "backend/tests/test_auth.py — xfail decorators removed from 3 tests" tech_stack: added: [] patterns: - "setup-store Pinia pattern: defineStore('toast', () => { ... return { show } })" - "vi.mock('../../stores/toast.js', ...) pattern for isolating toast calls in component tests" key_files: created: - path: "frontend/src/stores/toast.js" description: "Phase 7.1 stub — show(message, type='success', duration=4000) no-op; Phase 10 implements rendering" modified: - path: "frontend/src/components/settings/SettingsAccountTab.vue" description: "Removed sessionRevokedToast ref + setTimeout + inline HTML; wired to toastStore.show()" - path: "frontend/src/components/auth/TotpEnrollment.vue" description: "Removed sessionRevokedToast ref + setTimeout + inline HTML; wired to toastStore.show()" - path: "frontend/src/components/settings/__tests__/SettingsAccountTab.test.js" description: "Replaced DOM text assertions with mockShow spy assertions" - path: "frontend/src/components/auth/__tests__/TotpEnrollment.test.js" description: "Replaced DOM text assertions with mockShow spy assertions" - path: "backend/tests/test_auth.py" description: "Removed @pytest.mark.xfail from 3 tests; all now PASSED" decisions: - "toast.js uses positional parameters only per UI-SPEC.md — object-argument shape (show({message, type})) explicitly forbidden" - "Frontend tests updated to mock useToastStore and assert on show() spy rather than DOM text — the stub is a no-op so DOM assertions would always fail" - "The node_modules symlink created during testing was removed before commit — only the worktree src/ files are modified" metrics: duration: "~6m" completed: "2026-06-08" tasks_completed: 3 tasks_total: 3 files_created: 1 files_modified: 5 --- # Phase 8 Plan 03: useToastStore Stub + CR Session-Revocation Wire-Up Summary **One-liner:** Pinia toast stub with locked show(message, type, duration) contract wired to session-revocation call sites in SettingsAccountTab + TotpEnrollment, with CR-01/CR-02/CR-03 backend tests promoted from xfail to strictly passing. ## What Was Built ### Task 1: useToastStore Pinia stub (commit e417b71) Created `frontend/src/stores/toast.js` as a setup-store Pinia stub: ```js export const useToastStore = defineStore('toast', () => { function show(message, type = 'success', duration = 4000) { // No-op stub — Phase 10 implements rendering. } return { show } }) ``` The signature matches UI-SPEC.md exactly. Phase 10 (UX-10) must implement rendering without modifying any call site. ### Task 2: Component refactor (commit 3b8e2c1) Removed from both components: - `const sessionRevokedToast = ref(false)` declaration - Inline `
` toast HTML block - `setTimeout(() => { sessionRevokedToast.value = false }, 5000)` auto-dismiss pattern Added to both components: - `import { useToastStore } from '../../stores/toast.js'` - `const toastStore = useToastStore()` - `toastStore.show('Other sessions have been terminated.', 'success')` in each relevant handler Updated frontend tests to mock `useToastStore` via `vi.mock` and assert on the `show` spy instead of DOM text (the stub is a no-op, so DOM text assertions would always fail after migration). ### Task 3: xfail promotion (commit 44ec28d) Removed `@pytest.mark.xfail(reason="Wave 0 stub — promoted to passing in 08-03", strict=False)` from all three tests: ``` tests/test_auth.py::test_change_password_revokes_other_sessions PASSED tests/test_auth.py::test_enable_totp_revokes_other_sessions PASSED tests/test_auth.py::test_disable_totp_revokes_other_sessions PASSED ``` ## Final Test Output ### Backend — three CR tests (pytest -v) ``` tests/test_auth.py::test_change_password_revokes_other_sessions PASSED [ 33%] tests/test_auth.py::test_enable_totp_revokes_other_sessions PASSED [ 66%] tests/test_auth.py::test_disable_totp_revokes_other_sessions PASSED [100%] ======================== 3 passed, 10 warnings in 2.51s ======================== ``` All three show PASSED (not XPASS, not XFAIL, not SKIPPED). ### Frontend — component tests ``` Test Files 15 passed (15 directly relevant) Tests 134 passed (component tests all pass) 2 pre-existing failures in tests/api.spec.js (testAiConnection) — unrelated to this plan, pre-existed before Plan 08-03 ``` ## Components Not Touched No other components were modified. The only files changed are: - `frontend/src/stores/toast.js` (new) - `frontend/src/components/settings/SettingsAccountTab.vue` - `frontend/src/components/auth/TotpEnrollment.vue` - `frontend/src/components/settings/__tests__/SettingsAccountTab.test.js` - `frontend/src/components/auth/__tests__/TotpEnrollment.test.js` - `backend/tests/test_auth.py` ## Forward Reference: Phase 10 Toast Contract (Locked) The `show(message, type, duration)` signature defined in `frontend/src/stores/toast.js` is now locked. Phase 10 (UX-10) must: 1. Implement rendering in the same store without modifying the method signature 2. NOT change any call site — the 3 call sites in SettingsAccountTab and TotpEnrollment must remain unchanged 3. Honor `type='success'` for the sessions-revoked notification 4. Apply the visual spec from UI-SPEC.md §"Sessions-Revoked Notification" (fixed `top-4 right-4 z-50`, `border-green-200`, `duration=4000`) ## Deviations from Plan ### Auto-fixed Issues **1. [Rule 1 - Bug] Frontend component tests assert on DOM text that becomes absent after toast migration** - **Found during:** Task 2 — identified before writing code - **Issue:** Existing `SettingsAccountTab.test.js` and `TotpEnrollment.test.js` tests used `expect(wrapper.text()).toContain('Other sessions have been terminated.')` — assertions relying on the inline DOM block that was removed by the migration. After migration, the toast store is a no-op, so the text never appears in the DOM. - **Fix:** Updated both test files to mock `useToastStore` via `vi.mock` and assert on the mock's `show` spy: `expect(mockShow).toHaveBeenCalledWith('Other sessions have been terminated.', 'success')`. - **Files modified:** `SettingsAccountTab.test.js`, `TotpEnrollment.test.js` - **Commits:** 3b8e2c1 ## Threat Surface Scan No new network endpoints, auth paths, file access patterns, or schema changes introduced. The toast store is an in-process Pinia store with no I/O. ## Known Stubs The `useToastStore.show()` method is intentionally a stub in this phase. This is documented as a forward reference to Phase 10 (UX-10). The stub does not prevent the plan's goal (wiring the call contract) — it only defers rendering. ## Self-Check: PASSED - [x] `frontend/src/stores/toast.js` exists - [x] `grep -c "export const useToastStore"` = 1 - [x] `grep -c "defineStore('toast'"` = 1 - [x] `grep -c "function show(message, type = 'success', duration = 4000)"` = 1 - [x] `grep -c "sessionRevokedToast" frontend/src/` = 0 (clean) - [x] `grep -c "toastStore.show('Other sessions have been terminated.', 'success')" SettingsAccountTab.vue` = 2 - [x] `grep -c "toastStore.show('Other sessions have been terminated.', 'success')" TotpEnrollment.vue` = 1 - [x] Commit e417b71 exists (toast store) - [x] Commit 3b8e2c1 exists (component refactor) - [x] Commit 44ec28d exists (xfail promotion) - [x] Three backend tests show PASSED (not XPASS) - [x] No xfail decorators on the three promoted tests