12 KiB
12 KiB
phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves
| phase | plan | type | wave | depends_on | files_modified | autonomous | requirements | must_haves | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 17-ui-optimization-polish | 05 | execute | 2 |
|
|
true |
|
|
D-07: logout is fully plumbed server-side (POST /api/auth/local/logout works, fetchLocalLogout() exists at client.ts:124) but no component calls it. Add a "Sign out" row to SettingsSheet that calls the existing client function then navigates to /login. UI wiring only — no backend work.
D-09: sheets currently use bottom-only positioning (bottom: 0; left: 0; right: 0; maxWidth: 480px; margin: 0 auto) which renders bottom-center on desktop instead of truly centered. Add a phone/desktop style branch to each sheet's outer dialog wrapper. (The admin reset-password sheet's centering lives in AdminPage.tsx and is handled in plan 17-06 to keep that file single-owner.)
Purpose: make logout reachable and make all settings sheets feel properly centered on desktop. Output: a Sign out control + handleSignOut in SettingsSheet, and phone/desktop centering branches on SettingsSheet, ChangePasswordSheet, LinkOidcSheet, and CredentialSheet dialog wrappers.
<execution_context> @$HOME/.claude/gsd-core/workflows/execute-plan.md @$HOME/.claude/gsd-core/templates/summary.md </execution_context>
@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/17-ui-optimization-polish/17-UI-SPEC.md @.planning/phases/17-ui-optimization-polish/17-PATTERNS.md @.planning/phases/17-ui-optimization-polish/17-RESEARCH.md @.planning/phases/17-ui-optimization-polish/17-01-SUMMARY.md Task 1: Add the Sign out control and handleSignOut to SettingsSheet apps/pwa/src/components/SettingsSheet.tsx - apps/pwa/src/components/SettingsSheet.tsx (the existing imports line for lucide icons + the api/client imports; the Account section + its section-divider pattern at lines ~372-376; the end of the sheet content where the logout row appends) - apps/pwa/src/api/client.ts lines 124-134 (fetchLocalLogout — POST /api/auth/local/logout, credentials include, redirect manual; throws on non-ok) - 17-UI-SPEC.md section "Workstream D" -> "D-07 — Logout control" + "Interaction Contract" -> "Logout flow (D-07)" (placement, style, fire-and-best-effort semantics, copy "Sign out") - 17-PATTERNS.md section "apps/pwa/src/components/SettingsSheet.tsx" -> the logout row pattern, handleSignOut try/catch excerpt, section divider analog, accessible button row pattern - 17-RESEARCH.md section "Common Pitfalls" -> Pitfall 4 (fetchLocalLogout error must not prevent navigation) Add the LogOut lucide icon to SettingsSheet's existing lucide-react import, add fetchLocalLogout to the existing api/client import, and add a navigation primitive (react-router useNavigate, matching the project's router usage; if SettingsSheet has no router context use window.location.replace('/login') as the documented fallback per UI-SPEC).Add a "Sign out" row at the BOTTOM of the sheet, after all existing sections, separated by the existing 1px var(--color-border-subtle) divider pattern (margin var(--space-4) top/bottom). The button: type button, onClick handleSignOut, aria-label "Sign out", full width, display flex, alignItems center, gap var(--space-2), minHeight 44px, background none, border none, cursor pointer, padding "var(--space-2) 0", fontSize var(--text-body-size), fontWeight 400, color var(--color-destructive), textAlign left, fontFamily var(--font-family-base). Content: a 16px LogOut icon (aria-hidden) + the text "Sign out". No confirmation dialog.
Implement handleSignOut as an async function that wraps fetchLocalLogout() in try/catch and calls navigate('/login') (or window.location.replace('/login')) in BOTH the success and catch branches — fire-and-best-effort per RESEARCH Pitfall 4 (the server-side cookie is cleared or already expired; navigation must always proceed so the sheet does not stay open on an API failure). Close the sheet as part of the flow if the existing close handler is in scope.
Phone branch (unchanged bottom-sheet): position fixed, bottom 0, left 0, right 0, borderRadius "12px 12px 0 0", plus the existing background/boxShadow/padding/zIndex/fontFamily.
Desktop branch (centered modal): position fixed, top 50%, left 50%, transform "translate(-50%, -50%)", maxWidth 480px, width "calc(100% - var(--space-8, 32px))", maxHeight "calc(100dvh - var(--space-8, 32px))", overflowY auto, borderRadius 12px, boxShadow "0 8px 32px rgba(0,0,0,0.18)", plus the existing background/padding/zIndex/fontFamily. Remove bottom/left/right/margin auto from the desktop branch.
Apply this exact branch to the SettingsSheet wrapper, the ChangePasswordSheet wrapper, and the LinkOidcSheet wrapper (all inside SettingsSheet.tsx), and to the CredentialSheet.tsx dialog wrapper. The backdrop (position fixed, inset 0, var(--color-overlay)) is unchanged. The role=dialog, aria-modal, aria-label, Escape-closes, and focus-return invariants are unchanged — only the position CSS branches. The admin reset-password sheet is NOT in this plan (it lives in AdminPage.tsx; plan 17-06 owns it).
<threat_model>
Trust Boundaries
| Boundary | Description |
|---|---|
| Client UI -> existing logout endpoint | The Sign out control calls the already-implemented, Phase-19-verified POST /api/auth/local/logout via fetchLocalLogout(). No new endpoint, no new auth logic. |
STRIDE Threat Register
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|---|---|---|---|---|
| T-17-05-01 | Elevation of Privilege | logout control (D-07) | mitigate | fetchLocalLogout() clears the local-session cookie server-side via the existing endpoint (BL-02 verified live in Phase 19); the client navigates to /login regardless of success/failure so a stale-cookie-with-logged-out-UI state cannot persist. This is UI wiring to an existing, already-verified endpoint — no new trust boundary. |
| T-17-05-02 | Tampering | sheet centering CSS | accept | Position-only CSS branch; no input, no executable content. No new threat above LOW. |
No new high-severity threats. D-07 reuses an existing verified endpoint; D-09 is position-only CSS. </threat_model>
- grep handleSignOut / fetchLocalLogout / "Sign out" / LogOut in SettingsSheet.tsx - grep translate(-50%, -50%) in SettingsSheet.tsx and CredentialSheet.tsx - pnpm --filter @familysync/pwa build — exits 0 - playwright-cli: Sign out reachable + redirects to /login; sheets centered @desktop, bottom-sheet @phone<success_criteria> A reachable Sign out control clears the session and routes to /login (even on API failure), and all four settings sheets (SettingsSheet, ChangePasswordSheet, LinkOidcSheet, CredentialSheet) render centered on desktop and as bottom-sheets on phone with accessibility invariants intact. </success_criteria>
Create `.planning/phases/17-ui-optimization-polish/17-05-SUMMARY.md` when done.