Phase 20: Admin Member Editor & Form Declutter #25
@@ -122,4 +122,4 @@ This document evolves at phase transitions and milestone boundaries.
|
||||
|
||||
---
|
||||
|
||||
_Last updated: 2026-06-14 — Phase 11 (Per-Event Reminders) complete; CAL-13/14 + NOTIF-04/05/06 validated (live round-trip deferred, 999.19)_
|
||||
_Last updated: 2026-06-18 — Phase 20 (Admin Member Editor & Form Declutter) complete; single member-editor sheet (D-01..D-07) over new PATCH /api/admin/members/:id with last-admin guard; "Rotate"/"Reset password" copy retired._
|
||||
|
||||
@@ -453,6 +453,7 @@ Plans:
|
||||
| 17. UI Optimization & Polish | v1.1 | 6/6 | Complete | 2026-06-18 |
|
||||
| 18. Auto Timezone Detection | v1.1 | 4/4 | Complete | 2026-06-14 |
|
||||
| 19. Local Auth (No-OIDC Mode) | v1.1 | 5/5 | Complete | 2026-06-17 |
|
||||
| 20. Admin Member Editor & Declutter | v1.1 | 3/3 | Complete | 2026-06-18 |
|
||||
|
||||
## Backlog
|
||||
|
||||
@@ -752,3 +753,20 @@ Plans:
|
||||
|
||||
- [x] 19-04-PLAN.md — PWA: LoginPage + BrandSlot + App.tsx gate + client.ts + AdminPage + SettingsSheet (AUTH-LOCAL-12/13/14/15)
|
||||
- [x] 19-05-PLAN.md — Dev-bypass Option C + break-glass CLI + harness/CI rework + login.spec.ts (AUTH-LOCAL-11/16)
|
||||
|
||||
### Phase 20: Admin Member Editor & Form Declutter
|
||||
|
||||
**Goal:** Replace the per-member-row action buttons (Rotate/Add credential + Reset password) in the admin Members panel with a single edit affordance — clicking a member's name or an edit button opens a member-detail editor where an admin modifies all of that member's details in one place: display name, local-login password, and the Fastmail/CalDAV app password (calendar credential) — using clear, non-jargon labels that retire the confusing "Rotate" term. Also collapse the "Add member" section so its input fields are hidden behind a single "Add member" trigger by default, decluttering the panel. Client-side AdminPage + CredentialSheet rework over the existing `/api/admin` endpoints; no new auth/authorization boundary (seeded by the gripe that "Rotate" for the app password is not intuitive).
|
||||
**Requirements**: TBD (refine in /gsd-discuss-phase 20 — open scope: which fields count as "all" (color swatch? admin toggle? OIDC link?), whether to keep any standalone reset-password flow, and the exact edit affordance — clickable name vs. row edit button)
|
||||
**Depends on:** Phase 19
|
||||
**Plans:** 3/3 plans complete
|
||||
|
||||
Plans:
|
||||
**Wave 1**
|
||||
|
||||
- [x] 20-01-PLAN.md — Server: PATCH /api/admin/members/:id (displayName + is_admin) with last-admin demotion guard (TDD) + isAdmin in GET /members
|
||||
- [x] 20-02-PLAN.md — PWA API client: AdminMember.isAdmin field + updateMemberProfile fetcher (last-admin sentinel)
|
||||
|
||||
**Wave 2** *(blocked on Wave 1 completion)*
|
||||
|
||||
- [x] 20-03-PLAN.md — PWA: unified MemberEditorSheet (edit/create, per-section saves) + decluttered tappable Members panel; retire Rotate/Reset-password buttons
|
||||
|
||||
+20
-17
@@ -2,18 +2,18 @@
|
||||
gsd_state_version: 1.0
|
||||
milestone: v1.1
|
||||
milestone_name: Operability & Polish
|
||||
current_phase: 18
|
||||
current_phase_name: Auto timezone detection and ability to change timezone
|
||||
status: "Phase 17 shipped — PR #24"
|
||||
stopped_at: Phase 17 UI-SPEC approved
|
||||
last_updated: "2026-06-18T19:19:22.951Z"
|
||||
current_phase: 999.1
|
||||
current_phase_name: BACKLOG
|
||||
status: "Phase 20 shipped — PR #25"
|
||||
stopped_at: Phase 20 UI-SPEC approved
|
||||
last_updated: "2026-06-19T00:26:05.257Z"
|
||||
last_activity: 2026-06-18
|
||||
progress:
|
||||
total_phases: 26
|
||||
completed_phases: 12
|
||||
total_plans: 55
|
||||
completed_plans: 54
|
||||
percent: 46
|
||||
total_phases: 27
|
||||
completed_phases: 13
|
||||
total_plans: 58
|
||||
completed_plans: 57
|
||||
percent: 48
|
||||
---
|
||||
|
||||
# Project State
|
||||
@@ -23,13 +23,13 @@ progress:
|
||||
See: .planning/PROJECT.md (updated 2026-06-16)
|
||||
|
||||
**Core value:** One color-coded family calendar (shared + personal) and shared lists from a single low-friction PWA — cross-ecosystem, no app store
|
||||
**Current focus:** Phase 17 — ui-optimization-polish
|
||||
**Current focus:** Phase 20 — admin-member-editor-form-declutter
|
||||
|
||||
## Current Position
|
||||
|
||||
Phase: 18 — Auto timezone detection and ability to change timezone
|
||||
Phase: 999.1 — Treat Fastmail as one calendar provider; framework supports adding more providers (BACKLOG)
|
||||
Plan: Not started
|
||||
Status: Phase 17 shipped — PR #24
|
||||
Status: Phase 20 shipped — PR #25
|
||||
Last activity: 2026-06-18
|
||||
|
||||
### ✅ Resolved Checkpoint — Phase 15 Plan 15-03 Task 2 (human-action)
|
||||
@@ -40,7 +40,7 @@ Done 2026-06-12. Gitea branch protection on `main` now requires EXACTLY `CI / fa
|
||||
|
||||
**Velocity:**
|
||||
|
||||
- Total plans completed: 66
|
||||
- Total plans completed: 69
|
||||
- Average duration: -
|
||||
- Total execution time: 0 hours
|
||||
|
||||
@@ -61,6 +61,7 @@ Done 2026-06-12. Gitea branch protection on `main` now requires EXACTLY `CI / fa
|
||||
| 12 | 7 | - | - |
|
||||
| 19 | 5 | - | - |
|
||||
| 17 | 6 | - | - |
|
||||
| 20 | 3 | - | - |
|
||||
|
||||
**Recent Trend:**
|
||||
|
||||
@@ -120,6 +121,7 @@ _Updated after each plan completion_
|
||||
| Phase 12 P02 | 15 | 3 tasks | 6 files |
|
||||
| Phase 12 P03 | 8 | 1 tasks | 2 files |
|
||||
| Phase 12 P06 | 8 | 2 tasks tasks | 3 files files |
|
||||
| Phase 20 P03 | 10 | 3 tasks | 3 files |
|
||||
|
||||
## Accumulated Context
|
||||
|
||||
@@ -215,6 +217,7 @@ Recent decisions affecting current work:
|
||||
- **Phase 16 added (2026-06-12, /gsd-phase):** CI Dependency Audit, Security Checks & Image Hygiene — extend the Phase 8 Gitea CI workflow with outdated-dependency reporting (`pnpm outdated`), a vulnerability audit (`pnpm audit` at a chosen severity), and a baseline of additional security checks (secret scan / image scan). User requested a 16 integer phase (not a decimal insert) — they've been running independent/CI phases ahead of the admin chain. **Depends on Phase 8; independent of the admin chain (10–12).** Scope still needs definition — run /gsd-discuss-phase 16. Milestone window now Phases 7–16.
|
||||
- **Backlog 999.17 folded into Phase 16 + removed (2026-06-12, /gsd-phase):** the dev/prod image-boundary item (confine `DEV_AUTH_BYPASS` to dev via build/boot-time enforcement; ensure no `.env`/secrets/encryption keys/`DEV_USER` seed/family data ship in published images; CI assertion in the publish job) was pulled into Phase 16 — shared CI surface and overlapping secret/image scanning made a separate phase redundant. The 999.17 backlog entry + its phase dir were **deleted** (not retained-for-history) since the scope now lives in an active phase; this also clears the recycled-number collision with Phase 15's historical "promoted from 999.17" provenance (the markdown-lint item that became Phase 15 had reused 999.17 first).
|
||||
- **Phase 18 added (2026-06-13, /gsd-phase):** Auto timezone detection and ability to change timezone — let the app auto-detect the household timezone and allow changing it. User invoked `/gsd-phase --insert 18` but Phase 18 didn't exist (17 was the last integer phase), so after confirmation it was added as an integer phase at the end of the milestone, not a decimal insert. Motivated by the Phase 11 all-day-reminder dependency on a correct server `TZ` (all-day reminders fire at 9 AM local, computed from `process.env.TZ`). Scope still needs definition — run /gsd-discuss-phase 18. Milestone window now Phases 7–18.
|
||||
- **Phase 20 added (2026-06-18, /gsd-phase):** Admin Member Editor & Form Declutter — replace the per-member-row action buttons (Rotate/Add credential + Reset password) with a single edit affordance (click member name or an edit button) opening a member-detail editor for all of a member's details (display name, local-login password, Fastmail/CalDAV app password) with clear non-jargon labels that retire "Rotate"; and collapse the "Add member" form behind a single trigger by default. Seeded by a UX gripe during Phase 17 verification that "Rotate" for the app password is unintuitive. Client-side AdminPage + CredentialSheet rework over existing `/api/admin` endpoints; no new authorization boundary. Scope still needs definition — run /gsd-discuss-phase 20. Milestone window now Phases 7–20.
|
||||
|
||||
### Pending Todos
|
||||
|
||||
@@ -272,9 +275,9 @@ Recent decisions affecting current work:
|
||||
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-06-18T15:00:30.986Z
|
||||
Stopped at: Phase 17 UI-SPEC approved
|
||||
Resume file: .planning/phases/17-ui-optimization-polish/17-UI-SPEC.md
|
||||
Last session: 2026-06-18T21:40:44.704Z
|
||||
Stopped at: Phase 20 UI-SPEC approved
|
||||
Resume file: .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md
|
||||
|
||||
## Operator Next Steps
|
||||
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
plan: 01
|
||||
type: tdd
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- apps/api/src/routes/admin.ts
|
||||
- apps/api/tests/routes/admin.test.ts
|
||||
autonomous: true
|
||||
requirements: []
|
||||
must_haves:
|
||||
truths:
|
||||
- "An admin can update a member's display name and admin flag through one route behind requireAdmin"
|
||||
- "Demoting the only remaining admin is rejected with a 409 and the member stays admin"
|
||||
- "Self-demotion succeeds while another admin exists"
|
||||
- "GET /members returns each member's isAdmin so the editor toggle has correct initial state"
|
||||
artifacts:
|
||||
- path: "apps/api/src/routes/admin.ts"
|
||||
provides: "PATCH /api/admin/members/:id member-profile update route + isAdmin in GET /members select"
|
||||
contains: "members/:id"
|
||||
- path: "apps/api/tests/routes/admin.test.ts"
|
||||
provides: "RED tests for last-admin guard + happy-path profile update + isAdmin in GET /members"
|
||||
contains: "last-admin"
|
||||
key_links:
|
||||
- from: "apps/api/src/routes/admin.ts PATCH /members/:id"
|
||||
to: "apps/api/src/db/schema.ts users.isAdmin"
|
||||
via: "last-admin count query + partial update set()"
|
||||
pattern: "users\\.isAdmin"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Add the one new server route this phase needs: `PATCH /api/admin/members/:id`, accepting `displayName` and/or `isAdmin`, behind the existing `requireAdmin` boundary (D-02), and enforce the D-03 last-admin demotion guard (reject 409 when demoting the only admin). Also surface `isAdmin` from `GET /api/admin/members` so the PWA editor's admin toggle has a correct initial state.
|
||||
|
||||
Purpose: This is the only genuinely new backend logic in Phase 20. The last-admin guard is a lockout-safety invariant with a defined request/response contract — written test-first (RED -> GREEN -> REFACTOR).
|
||||
Output: A tested `PATCH /members/:id` route + `isAdmin` field on `GET /members`, both reachable only by admins.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/gsd-core/workflows/execute-plan.md
|
||||
@$HOME/.claude/gsd-core/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md
|
||||
@.planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md
|
||||
</context>
|
||||
|
||||
<artifacts_produced>
|
||||
## Artifacts this phase produces (Plan 20-01)
|
||||
- `PATCH /api/admin/members/:id` route handler in `apps/api/src/routes/admin.ts` (member-profile update: displayName and/or isAdmin)
|
||||
- `updateMemberSchema` Zod schema in `apps/api/src/routes/admin.ts`
|
||||
- `isAdmin` field added to the `GET /api/admin/members` select + mapped member object in `apps/api/src/routes/admin.ts`
|
||||
- New `describe` block for `PATCH /members/:id` in `apps/api/tests/routes/admin.test.ts` (last-admin guard, happy path, auth boundary, validation, 404)
|
||||
</artifacts_produced>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="tdd" tdd="true">
|
||||
<name>Task 1: RED — failing tests for the member-profile route + isAdmin read</name>
|
||||
<files>apps/api/tests/routes/admin.test.ts</files>
|
||||
<read_first>
|
||||
- apps/api/tests/routes/admin.test.ts (full — copy the jsonRequest helper, admin/non-admin session setup, member-create flow at lines ~920-990, and the existing password-reset test at line ~956 as the structural analog)
|
||||
- apps/api/src/routes/admin.ts (lines 95-130 GET /members handler; lines 225-269 POST /members/:id/password as the route analog; lines 75-92 noEchoHook + parsePositiveIntParam)
|
||||
- apps/api/src/auth/user.ts (lines 140-156 — the admin-count query to adapt for the guard)
|
||||
- apps/api/src/db/schema.ts (line ~56 users.isAdmin column)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-02, D-03)
|
||||
</read_first>
|
||||
<behavior>
|
||||
- Test A (happy path displayName): PATCH /api/admin/members/:id with { displayName: 'New Name' } as an admin -> 200; GET /members reflects the new displayName.
|
||||
- Test B (happy path isAdmin promote): a non-admin member PATCH'd with { isAdmin: true } -> 200; GET /members shows isAdmin true for that member.
|
||||
- Test C (last-admin guard): with exactly ONE admin in the DB, PATCH that admin with { isAdmin: false } -> 409, body has an `error` string; GET /members still shows that member isAdmin true (unchanged).
|
||||
- Test D (self-demotion allowed when another admin exists): seed two admins, PATCH one with { isAdmin: false } -> 200; GET /members shows one admin remaining.
|
||||
- Test E (auth boundary): PATCH /api/admin/members/:id as a non-admin session -> 403 (inherits requireAdmin; no second guard).
|
||||
- Test F (validation): PATCH with { isAdmin: 'yes' } (wrong type) -> 400 { error: 'Invalid request' } via noEchoHook; malformed :id (e.g. '1abc') -> 400.
|
||||
- Test G (not found): PATCH a non-existent member id -> 404.
|
||||
- Test H (GET isAdmin field): GET /api/admin/members as admin -> each member object includes a boolean `isAdmin` field.
|
||||
</behavior>
|
||||
<action>
|
||||
Add a new `describe` block to apps/api/tests/routes/admin.test.ts for `PATCH /api/admin/members/:id` plus one assertion in the existing GET /members test for the `isAdmin` field. Reuse the file's existing `jsonRequest('PATCH', path, body)` helper, admin/non-admin session injection, and the member-create helper used by the password-reset test (~line 956). Seed admins by inserting `users` rows with `isAdmin: true`. Assert response status codes and that `GET /members` reflects (or does NOT reflect, for the guard case) the change. Use the real-DB integration pattern already in this file (DB_HOST=127.0.0.1). Run the suite and confirm these new tests FAIL because neither the route nor the `isAdmin` field exists yet. Do NOT implement the route in this task. Commit: `test(20-01): add failing tests for member-profile update + last-admin guard + isAdmin read`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd apps/api && DB_HOST=127.0.0.1 pnpm vitest run tests/routes/admin.test.ts 2>&1 | grep -Ei 'fail|members/:id' | head</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- New tests for PATCH /members/:id exist in apps/api/tests/routes/admin.test.ts and reference both `displayName` and `isAdmin`.
|
||||
- Running the suite shows the new tests FAILING (route 404 / no isAdmin field) — RED confirmed.
|
||||
- A test asserts a 409 for last-admin demotion and a separate test asserts 200 self-demotion with a second admin present.
|
||||
- Commit message starts with `test(20-01):`.
|
||||
</acceptance_criteria>
|
||||
<done>The new tests are committed and fail for the right reason (route + field not implemented).</done>
|
||||
</task>
|
||||
|
||||
<task type="tdd" tdd="true">
|
||||
<name>Task 2: GREEN — implement PATCH /members/:id with last-admin guard + isAdmin in GET /members</name>
|
||||
<files>apps/api/src/routes/admin.ts</files>
|
||||
<read_first>
|
||||
- apps/api/src/routes/admin.ts (lines 95-130 GET /members; lines 225-269 POST /members/:id/password analog; line 47 requireAdmin mount; lines 75-92 noEchoHook + parsePositiveIntParam; line 28 eq/sql imports)
|
||||
- apps/api/src/auth/user.ts (lines 140-156 admin-count query)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md ("NEW PATCH /members/:id" section — route handler shape + last-admin guard excerpt)
|
||||
</read_first>
|
||||
<action>
|
||||
In apps/api/src/routes/admin.ts:
|
||||
(1) Add `isAdmin: users.isAdmin` to the `GET /members` select and `isAdmin: row.isAdmin` to the mapped member object (no join change — `users.isAdmin` is a base-table column).
|
||||
(2) Add a Zod schema `updateMemberSchema` = object with `displayName` (string min 1 max 256, optional) and `isAdmin` (boolean, optional).
|
||||
(3) Register `adminRouter.patch('/members/:id', zValidator('json', updateMemberSchema, noEchoHook), handler)`. The router-wide `requireAdmin` (line 47) already protects it — add NO second guard (D-02).
|
||||
(4) Handler: parse the id with the existing `parsePositiveIntParam` (400 on null). Verify the target `users` row exists (404 if not). For the last-admin guard (D-03): when `isAdmin === false` is requested AND the target is currently an admin, run the admin-count query (`COUNT(*)` over `users` WHERE `users.isAdmin` is true, adapted from auth/user.ts:151-156) and return 409 `{ error: 'Cannot remove the last admin' }` when count is at most 1. Otherwise build a partial `set({ ... })` from whichever of `displayName`/`isAdmin` is present and `db.update(users)...where(eq(users.id, targetId))`. Mirror the password route's try/catch -> 503 fallback. Return 200 `{ ok: true }`. Apply `noEchoHook` for consistency. Do NOT log the request body.
|
||||
Run the suite; all Task 1 tests must pass. Commit: `feat(20-01): add PATCH /members/:id member-profile update with last-admin guard`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd apps/api && DB_HOST=127.0.0.1 pnpm vitest run tests/routes/admin.test.ts 2>&1 | tail -20</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- `grep -n "patch('/members/:id'" apps/api/src/routes/admin.ts` returns the new route registration.
|
||||
- `grep -nE "isAdmin: *users\.isAdmin" apps/api/src/routes/admin.ts` confirms isAdmin added to GET /members select.
|
||||
- All new Task 1 tests pass (GREEN); the last-admin demotion test returns 409 and the member stays admin.
|
||||
- No second `requireAdmin` call added in the PATCH handler (boundary inherited per D-02).
|
||||
- Commit message starts with `feat(20-01):`.
|
||||
</acceptance_criteria>
|
||||
<done>PATCH /members/:id and the isAdmin read field both implemented; full admin.test.ts suite green.</done>
|
||||
</task>
|
||||
|
||||
<task type="tdd" tdd="true">
|
||||
<name>Task 3: REFACTOR — tidy + pass CI gates</name>
|
||||
<files>apps/api/src/routes/admin.ts</files>
|
||||
<read_first>
|
||||
- apps/api/src/routes/admin.ts (the new route + GET /members edits from Task 2)
|
||||
- /home/luc/.claude/projects/-home-luc-projects-familysync/memory/MEMORY.md ("CI checks conformance" entry)
|
||||
</read_first>
|
||||
<action>
|
||||
Review the new route for duplication with the password route (the shared id-parse / existence-check shape is fine to keep inline — do not over-extract). Ensure the route's doc-header banner comment matches the style of the sibling routes' headers (the file documents each route in a banner comment). Run the API CI gates locally: typecheck, eslint, prettier. Fix any violations. Commit (only if changes): `refactor(20-01): tidy member-profile route + pass api gates`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/luc/projects/familysync && pnpm --filter @familysync/api exec tsc --noEmit && pnpm --filter @familysync/api exec eslint src/routes/admin.ts && pnpm exec prettier --check apps/api/src/routes/admin.ts apps/api/tests/routes/admin.test.ts</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- typecheck passes (tsc --noEmit exit 0).
|
||||
- eslint passes on apps/api/src/routes/admin.ts (exit 0).
|
||||
- prettier --check passes on both modified files.
|
||||
- Full admin.test.ts suite still green.
|
||||
</acceptance_criteria>
|
||||
<done>All API CI gates pass locally for the modified files; suite green.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| client -> /api/admin | Untrusted admin-session input crosses here; already guarded by router-wide `requireAdmin` (line 47). No NEW boundary added (D-02). |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-20-01 | Elevation of Privilege | PATCH /members/:id isAdmin toggle | mitigate | Route inherits router-wide `requireAdmin`; no second/weaker guard added. Test E asserts 403 for non-admin. |
|
||||
| T-20-02 | Denial of Service (self-lockout) | last-admin demotion | mitigate | D-03 guard: count admins, reject 409 when demoting the only admin (Test C). Break-glass CLI (19-D-13) remains true recovery path. |
|
||||
| T-20-03 | Tampering | malformed :id / wrong-type body | mitigate | `parsePositiveIntParam` rejects non-positive-int ids (400); `updateMemberSchema` + `noEchoHook` reject wrong types as 400 `{ error: 'Invalid request' }` (Test F). |
|
||||
| T-20-04 | Information Disclosure | error echo on invalid input | mitigate | `noEchoHook` returns only `{ error: 'Invalid request' }`; request body never logged (preserves T-10-15/16 posture). |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
- `cd apps/api && DB_HOST=127.0.0.1 pnpm vitest run tests/routes/admin.test.ts` — full admin suite green including new PATCH tests.
|
||||
- `grep -n "patch('/members/:id'" apps/api/src/routes/admin.ts` — route registered.
|
||||
- Last-admin demotion returns 409; member remains admin in a follow-up GET.
|
||||
- API typecheck + eslint + prettier gates pass.
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- PATCH /api/admin/members/:id updates displayName and/or isAdmin behind requireAdmin.
|
||||
- Demoting the only admin returns 409 and leaves the admin flag set.
|
||||
- Self-demotion with a second admin present returns 200.
|
||||
- GET /api/admin/members returns a boolean `isAdmin` per member.
|
||||
- All API CI gates pass for the modified files.
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
Create `.planning/phases/20-admin-member-editor-form-declutter/20-01-SUMMARY.md` when done.
|
||||
</output>
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
plan: "01"
|
||||
subsystem: api/admin
|
||||
status: complete
|
||||
tags: [tdd, backend, admin, member-profile, last-admin-guard]
|
||||
dependency_graph:
|
||||
requires: []
|
||||
provides:
|
||||
- "PATCH /api/admin/members/:id (member-profile update: displayName and/or isAdmin)"
|
||||
- "isAdmin field on GET /api/admin/members response"
|
||||
affects:
|
||||
- apps/api/src/routes/admin.ts
|
||||
- apps/api/tests/routes/admin.test.ts
|
||||
tech_stack:
|
||||
added: []
|
||||
patterns:
|
||||
- "Last-admin guard via COUNT(*) query before demoting the only admin (D-03)"
|
||||
- "Partial update via whichever fields are present in updateMemberSchema"
|
||||
- "noEchoHook + parsePositiveIntParam reuse for new PATCH route"
|
||||
key_files:
|
||||
created: []
|
||||
modified:
|
||||
- apps/api/src/routes/admin.ts
|
||||
- apps/api/tests/routes/admin.test.ts
|
||||
decisions:
|
||||
- "Use PATCH verb for the member-profile update route (idiomatic REST for partial update)"
|
||||
- "D-03 guard uses COUNT(*) on users.isAdmin — adapted from auth/user.ts:151-156 pattern"
|
||||
- "noEchoHook applied to PATCH route for consistency even though body has no sensitive data"
|
||||
- "Test D: switch currentDevUserId to adminId2 for GET verification after self-demotion (adminId1 is no longer admin post-PATCH)"
|
||||
metrics:
|
||||
duration: "4m"
|
||||
completed: "2026-06-18"
|
||||
tasks_completed: 3
|
||||
files_changed: 2
|
||||
---
|
||||
|
||||
# Phase 20 Plan 01: Member-profile update route + isAdmin read Summary
|
||||
|
||||
PATCH /api/admin/members/:id with displayName/isAdmin partial update, D-03 last-admin guard (409), and isAdmin added to GET /members — implemented test-first.
|
||||
|
||||
## Tasks Completed
|
||||
|
||||
| Task | Name | Commit | Files |
|
||||
|------|------|--------|-------|
|
||||
| 1 | RED — failing tests for member-profile route + isAdmin read | a0a82ac | apps/api/tests/routes/admin.test.ts |
|
||||
| 2 | GREEN — implement PATCH /members/:id + isAdmin in GET /members | bc48632 | apps/api/src/routes/admin.ts, apps/api/tests/routes/admin.test.ts |
|
||||
| 3 | REFACTOR — tidy + pass CI gates | (no changes needed) | — |
|
||||
|
||||
## What Was Built
|
||||
|
||||
- **`PATCH /api/admin/members/:id`** route in `apps/api/src/routes/admin.ts`:
|
||||
- Accepts `{ displayName?: string; isAdmin?: boolean }` via `updateMemberSchema`
|
||||
- Protected by router-wide `requireAdmin` (no second guard — D-02)
|
||||
- `parsePositiveIntParam` rejects malformed ids → 400
|
||||
- Existence check → 404 for unknown member ids
|
||||
- D-03 last-admin guard: when demoting the only admin → 409 `{ error: 'Cannot remove the last admin' }`
|
||||
- Self-demotion with a second admin present → 200
|
||||
- Partial `set()` from whichever fields are present; try/catch 503 fallback
|
||||
- `noEchoHook` applied per T-20-04 consistency posture
|
||||
- **`isAdmin` field** added to `GET /api/admin/members` select and mapped response object
|
||||
|
||||
## Test Coverage (8 scenarios, all passing)
|
||||
|
||||
| Test | Scenario | Status |
|
||||
|------|----------|--------|
|
||||
| A | displayName update → 200; GET reflects change | GREEN |
|
||||
| B | isAdmin promote → 200; GET shows isAdmin true | GREEN |
|
||||
| C | Last-admin demotion → 409; member stays admin | GREEN |
|
||||
| D | Self-demotion with second admin → 200; one admin remains | GREEN |
|
||||
| E | Non-admin PATCH → 403 (requireAdmin boundary) | GREEN |
|
||||
| F | Wrong-type body → 400 Invalid request; malformed :id → 400 | GREEN |
|
||||
| G | Non-existent member id → 404 | GREEN |
|
||||
| H | GET /members includes boolean isAdmin per member | GREEN |
|
||||
|
||||
Full suite: **44 tests passed, 0 failed**.
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
### Auto-fixed Issues
|
||||
|
||||
**1. [Rule 1 - Bug] Test D GET called with demoted user**
|
||||
- **Found during:** Task 2 (GREEN run)
|
||||
- **Issue:** Test D called `GET /members` while `currentDevUserId` was still `adminId1`, who had just been demoted — resulting in 403 instead of 200 for the verification GET
|
||||
- **Fix:** Switched `currentDevUserId = adminId2` before the GET call so the verification uses the remaining admin's session
|
||||
- **Files modified:** apps/api/tests/routes/admin.test.ts
|
||||
- **Commit:** bc48632
|
||||
|
||||
## CI Gates
|
||||
|
||||
All gates pass for modified files:
|
||||
- `tsc --noEmit`: pass
|
||||
- `eslint src/routes/admin.ts`: pass
|
||||
- `prettier --check`: pass (both files)
|
||||
|
||||
## TDD Gate Compliance
|
||||
|
||||
- RED gate commit: `a0a82ac` (`test(20-01): ...`) — 7 tests failing for right reasons
|
||||
- GREEN gate commit: `bc48632` (`feat(20-01): ...`) — all 44 tests passing
|
||||
- REFACTOR: no code changes needed — code was already clean from GREEN
|
||||
|
||||
## Known Stubs
|
||||
|
||||
None.
|
||||
|
||||
## Threat Flags
|
||||
|
||||
None — no new network surfaces beyond the planned PATCH route. All T-20-xx mitigations applied as specified.
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
| Check | Result |
|
||||
|-------|--------|
|
||||
| apps/api/src/routes/admin.ts | FOUND |
|
||||
| apps/api/tests/routes/admin.test.ts | FOUND |
|
||||
| 20-01-SUMMARY.md | FOUND |
|
||||
| Commit a0a82ac (RED) | FOUND |
|
||||
| Commit bc48632 (GREEN) | FOUND |
|
||||
| PATCH route registered | FOUND (line 230) |
|
||||
| isAdmin in GET /members select | FOUND (line 109) |
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
plan: 02
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- apps/pwa/src/api/client.ts
|
||||
autonomous: true
|
||||
requirements: []
|
||||
must_haves:
|
||||
truths:
|
||||
- "The PWA can call the member-profile update route and receive a typed result"
|
||||
- "AdminMember carries isAdmin so the editor toggle can show the correct initial state"
|
||||
- "A last-admin demotion 409/422 from the server is surfaced as a distinguishable sentinel error"
|
||||
artifacts:
|
||||
- path: "apps/pwa/src/api/client.ts"
|
||||
provides: "updateMemberProfile fetcher + isAdmin on AdminMember"
|
||||
contains: "updateMemberProfile"
|
||||
key_links:
|
||||
- from: "apps/pwa/src/api/client.ts updateMemberProfile"
|
||||
to: "apps/api/src/routes/admin.ts PATCH /members/:id"
|
||||
via: "fetch PATCH /api/admin/members/:id"
|
||||
pattern: "api/admin/members/"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Extend the PWA API client (`apps/pwa/src/api/client.ts`) with: the `isAdmin: boolean` field on the `AdminMember` type, and a new `updateMemberProfile(memberId, { displayName?, isAdmin? })` fetcher that calls `PATCH /api/admin/members/:id` (the route created in Plan 20-01) and maps the D-03 last-admin 409/422 to a distinguishable sentinel error.
|
||||
|
||||
Purpose: Decouples the PWA editor (Plan 20-03) from the wire shape. This is a thin, single-file, glue-code change with no business logic of its own — standard (non-TDD) execution.
|
||||
Output: A typed `updateMemberProfile` fetcher + `AdminMember.isAdmin` field consumed by Plan 20-03.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/gsd-core/workflows/execute-plan.md
|
||||
@$HOME/.claude/gsd-core/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md
|
||||
@.planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md
|
||||
</context>
|
||||
|
||||
<artifacts_produced>
|
||||
## Artifacts this phase produces (Plan 20-02)
|
||||
- `isAdmin: boolean` field added to the `AdminMember` interface in `apps/pwa/src/api/client.ts`
|
||||
- `updateMemberProfile(memberId, body)` fetcher in `apps/pwa/src/api/client.ts` calling `PATCH /api/admin/members/:id`
|
||||
- A `'last-admin'` sentinel `Error` thrown on 409/422 (mirrors the existing `'conflict'` sentinel pattern)
|
||||
</artifacts_produced>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto" tdd="true">
|
||||
<name>Task 1: Add AdminMember.isAdmin + updateMemberProfile fetcher</name>
|
||||
<files>apps/pwa/src/api/client.ts</files>
|
||||
<read_first>
|
||||
- apps/pwa/src/api/client.ts (lines ~560-575 AdminMember interface; lines ~184-234 fetchCreateMember + fetchAdminResetPassword as the fetcher analog; the SessionExpiredError + handleAuthResponse conventions used by every fetcher; the existing 'conflict' sentinel at line ~206)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md ("apps/pwa/src/api/client.ts" section — type + fetcher excerpts)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-02, D-03)
|
||||
</read_first>
|
||||
<behavior>
|
||||
- `AdminMember` now has a required `isAdmin: boolean` field.
|
||||
- `updateMemberProfile(7, { displayName: 'X' })` issues `PATCH /api/admin/members/7` with a JSON body, `credentials: 'include'`, `redirect: 'manual'`.
|
||||
- A 401 or `opaqueredirect` response throws `SessionExpiredError` (existing convention).
|
||||
- A 409 or 422 response throws `new Error('last-admin')` (sentinel the editor branches on).
|
||||
- Any other non-ok response throws a generic error.
|
||||
- A 200 resolves void.
|
||||
</behavior>
|
||||
<action>
|
||||
In apps/pwa/src/api/client.ts:
|
||||
(1) Add `isAdmin: boolean;` to the `AdminMember` interface (after `color`, before `hasCredential`).
|
||||
(2) Add an exported async function `updateMemberProfile(memberId: number, body: { displayName?: string; isAdmin?: boolean }): Promise<void>`. Use the same `fetch` shape as `fetchAdminResetPassword`: method `'PATCH'` to `/api/admin/members/${memberId}`, `Content-Type: application/json`, `credentials: 'include'`, `redirect: 'manual'`, JSON-stringified body. Reuse the file's existing session-expiry handling (`res.type === 'opaqueredirect' || res.status === 401` -> `SessionExpiredError`). Map `res.status === 409 || res.status === 422` to `throw new Error('last-admin')`. Throw a generic error on any other non-ok status. The verb MUST be `PATCH` to match the Plan 20-01 route.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/luc/projects/familysync && grep -n "updateMemberProfile" apps/pwa/src/api/client.ts && grep -nE "isAdmin: *boolean" apps/pwa/src/api/client.ts && pnpm --filter @familysync/pwa exec tsc --noEmit</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- `grep -n "updateMemberProfile" apps/pwa/src/api/client.ts` returns the exported fetcher.
|
||||
- `grep -n "PATCH" apps/pwa/src/api/client.ts` shows the new fetcher uses the PATCH verb on `/api/admin/members/`.
|
||||
- `AdminMember` interface includes `isAdmin: boolean`.
|
||||
- The 409/422 branch throws an Error whose message is the literal `last-admin` sentinel.
|
||||
- `pnpm --filter @familysync/pwa exec tsc --noEmit` exits 0.
|
||||
</acceptance_criteria>
|
||||
<done>AdminMember.isAdmin + updateMemberProfile exist, typed, and the PWA typechecks.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Pass PWA CI gates</name>
|
||||
<files>apps/pwa/src/api/client.ts</files>
|
||||
<read_first>
|
||||
- apps/pwa/src/api/client.ts (the edits from Task 1)
|
||||
- /home/luc/.claude/projects/-home-luc-projects-familysync/memory/MEMORY.md ("CI checks conformance" entry)
|
||||
</read_first>
|
||||
<action>
|
||||
Run the PWA eslint + prettier gates on the modified file and fix any violations. Commit: `feat(20-02): add updateMemberProfile fetcher + AdminMember.isAdmin`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/luc/projects/familysync && pnpm --filter @familysync/pwa exec eslint src/api/client.ts && pnpm exec prettier --check apps/pwa/src/api/client.ts</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- eslint passes on apps/pwa/src/api/client.ts (exit 0).
|
||||
- prettier --check passes on apps/pwa/src/api/client.ts.
|
||||
- Change committed with a `feat(20-02):` message.
|
||||
</acceptance_criteria>
|
||||
<done>PWA lint + format gates pass for client.ts; change committed.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| PWA -> /api/admin | Client fetch crosses into the admin surface; server-side `requireAdmin` is the real boundary (unchanged). The client merely calls it. |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-20-05 | Spoofing (stale session) | updateMemberProfile fetch | mitigate | Reuses the file's `SessionExpiredError` on 401/opaqueredirect, triggering the existing re-auth flow — no silent failure. |
|
||||
| T-20-06 | Elevation of Privilege (client trust) | last-admin sentinel | accept | The 409/422 guard is enforced server-side (Plan 20-01); the client only surfaces it. Client-side toggle state is non-authoritative by design (existing pattern: "isAdmin drives nav visibility; real boundary is server-side"). |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
- `grep -n "updateMemberProfile" apps/pwa/src/api/client.ts` — fetcher present.
|
||||
- `AdminMember` has `isAdmin: boolean`.
|
||||
- PWA typecheck + eslint + prettier pass on client.ts.
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- `updateMemberProfile` calls `PATCH /api/admin/members/:id` and maps 409/422 to a `last-admin` sentinel.
|
||||
- `AdminMember.isAdmin` exists and is typed boolean.
|
||||
- PWA CI gates pass for the modified file.
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
Create `.planning/phases/20-admin-member-editor-form-declutter/20-02-SUMMARY.md` when done.
|
||||
</output>
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
plan: "02"
|
||||
subsystem: pwa-api-client
|
||||
tags: [api-client, types, fetcher, admin, tdd]
|
||||
status: complete
|
||||
|
||||
dependency_graph:
|
||||
requires:
|
||||
- "20-01: PATCH /api/admin/members/:id route (Plan 20-01, parallel worktree)"
|
||||
provides:
|
||||
- "updateMemberProfile fetcher consumed by Plan 20-03 MemberEditorSheet"
|
||||
- "AdminMember.isAdmin field for editor toggle initial state"
|
||||
affects:
|
||||
- "apps/pwa/src/api/client.ts"
|
||||
- "apps/pwa/src/api/client.test.ts"
|
||||
|
||||
tech_stack:
|
||||
added: []
|
||||
patterns:
|
||||
- "SessionExpiredError sentinel (existing convention) extended to new fetcher"
|
||||
- "last-admin sentinel error (new: mirrors existing 'conflict' pattern at line 206)"
|
||||
- "TDD RED→GREEN cycle on client.ts behavior"
|
||||
|
||||
key_files:
|
||||
modified:
|
||||
- path: apps/pwa/src/api/client.ts
|
||||
change: "Added isAdmin: boolean to AdminMember interface; added updateMemberProfile fetcher"
|
||||
- path: apps/pwa/src/api/client.test.ts
|
||||
change: "Added 9 TDD tests: 8 for updateMemberProfile behavior + 1 for AdminMember.isAdmin shape"
|
||||
|
||||
decisions:
|
||||
- "Followed PATCH verb for the member-profile update (idiomatic REST, consistent with updateEvent at line 496)"
|
||||
- "last-admin sentinel maps both 409 and 422 — PATTERNS.md notes server may return either; both handled"
|
||||
- "isAdmin placed after color and before hasCredential in AdminMember — matches PATTERNS.md excerpt"
|
||||
|
||||
metrics:
|
||||
duration_minutes: 4
|
||||
completed_date: "2026-06-18"
|
||||
tasks_completed: 2
|
||||
files_modified: 2
|
||||
---
|
||||
|
||||
# Phase 20 Plan 02: PWA API Client — updateMemberProfile Fetcher + AdminMember.isAdmin Summary
|
||||
|
||||
**One-liner:** Thin API client glue: `updateMemberProfile` PATCH fetcher with `last-admin` 409/422 sentinel + `isAdmin: boolean` on `AdminMember`, enabling the Plan 20-03 editor.
|
||||
|
||||
## What Was Built
|
||||
|
||||
Added two changes to `apps/pwa/src/api/client.ts`:
|
||||
|
||||
1. **`AdminMember.isAdmin: boolean`** — new required field on the `AdminMember` interface (after `color`, before `hasCredential`). Feeds the editor toggle's initial state once Plan 20-01 lands (the `GET /api/admin/members` route already returns it after that plan's changes). No consumer code changes needed; Plan 20-03 reads it directly.
|
||||
|
||||
2. **`updateMemberProfile(memberId, body)`** — exported `async function` that issues `PATCH /api/admin/members/${memberId}` with `credentials: 'include'`, `redirect: 'manual'`, `Content-Type: application/json`, and JSON-stringified body `{ displayName?, isAdmin? }`. Error mapping:
|
||||
- `opaqueredirect` or `401` → `SessionExpiredError` (existing re-auth flow convention)
|
||||
- `409` or `422` → `new Error('last-admin')` (D-03 sentinel; editor branches on this message)
|
||||
- other non-ok → generic `Error`
|
||||
- `200` → resolves `void`
|
||||
|
||||
## TDD Gate Compliance
|
||||
|
||||
| Gate | Commit | Notes |
|
||||
|------|--------|-------|
|
||||
| RED | `18da7e9` | 8 `updateMemberProfile` behavior tests + 1 `AdminMember.isAdmin` shape test — all fail with `updateMemberProfile is not a function`; 42 existing tests pass |
|
||||
| GREEN | `5bcd818` | All 50 tests pass after implementation; eslint + prettier + tsc --noEmit exit 0 |
|
||||
| REFACTOR | N/A | No refactor needed — the implementation was minimal and clean on the first pass |
|
||||
|
||||
## Task Summary
|
||||
|
||||
| Task | Name | Commit | Files |
|
||||
|------|------|--------|-------|
|
||||
| RED | Add failing tests for updateMemberProfile + AdminMember.isAdmin | `18da7e9` | `client.test.ts` |
|
||||
| GREEN | Add updateMemberProfile fetcher + AdminMember.isAdmin | `5bcd818` | `client.ts`, `client.test.ts` |
|
||||
|
||||
## Verification
|
||||
|
||||
- `grep -n "updateMemberProfile" apps/pwa/src/api/client.ts` → line 249 (export), line 263 (error throw)
|
||||
- `grep -n "PATCH" apps/pwa/src/api/client.ts` → line 254 (`method: 'PATCH'`)
|
||||
- `grep -nE "isAdmin: boolean" apps/pwa/src/api/client.ts` → line 597 (AdminMember)
|
||||
- `grep -n "last-admin" apps/pwa/src/api/client.ts` → line 262 (the sentinel throw)
|
||||
- `pnpm --filter @familysync/pwa exec tsc --noEmit` → exit 0
|
||||
- `pnpm --filter @familysync/pwa exec eslint src/api/client.ts src/api/client.test.ts` → exit 0
|
||||
- `pnpm exec prettier --check apps/pwa/src/api/client.ts apps/pwa/src/api/client.test.ts` → exit 0
|
||||
- 50/50 tests pass
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None — plan executed exactly as written.
|
||||
|
||||
- The PATTERNS.md excerpt was followed verbatim for the function shape.
|
||||
- The eslint `require-await` issue in the test file was caught and fixed during Task 2 CI gates (test function did not need `async` — removed it). Not a plan deviation; it was a CI gate finding during Task 2 as specified.
|
||||
|
||||
## Known Stubs
|
||||
|
||||
None. This plan delivers typed wire code only; no UI rendering or data display.
|
||||
|
||||
## Threat Flags
|
||||
|
||||
No new security-relevant surface introduced. `updateMemberProfile` reuses the existing session-expiry path (T-20-05 mitigated) and does not introduce new trust boundaries (T-20-06 accepted per plan threat model).
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
| Check | Result |
|
||||
|-------|--------|
|
||||
| `apps/pwa/src/api/client.ts` exists | FOUND |
|
||||
| `apps/pwa/src/api/client.test.ts` exists | FOUND |
|
||||
| `20-02-SUMMARY.md` exists | FOUND |
|
||||
| RED commit `18da7e9` | FOUND |
|
||||
| GREEN commit `5bcd818` | FOUND |
|
||||
@@ -0,0 +1,208 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
plan: 03
|
||||
type: execute
|
||||
wave: 2
|
||||
depends_on:
|
||||
- "20-01"
|
||||
- "20-02"
|
||||
files_modified:
|
||||
- apps/pwa/src/components/MemberEditorSheet.tsx
|
||||
- apps/pwa/src/routes/AdminPage.tsx
|
||||
autonomous: true
|
||||
requirements: []
|
||||
user_setup: []
|
||||
must_haves:
|
||||
truths:
|
||||
- "Tapping a member row opens one editor sheet for all of that member's details"
|
||||
- "The editor has per-section saves: Profile (name + admin), Set new password, App password"
|
||||
- "The admin toggle initial state reflects the member's isAdmin; a last-admin demotion shows an inline error and reverts"
|
||||
- "Add member is collapsed behind a single trigger that opens the same sheet in create mode"
|
||||
- "The terms Rotate, Add credential, and the standalone Reset password button no longer appear"
|
||||
artifacts:
|
||||
- path: "apps/pwa/src/components/MemberEditorSheet.tsx"
|
||||
provides: "Member editor sheet (edit + create modes) with per-section saves"
|
||||
min_lines: 200
|
||||
contains: "MemberEditorSheet"
|
||||
- path: "apps/pwa/src/routes/AdminPage.tsx"
|
||||
provides: "Tappable MemberRow with chevron + single Add member trigger; ResetPasswordSheet + inline add-form removed"
|
||||
contains: "MemberEditorSheet"
|
||||
key_links:
|
||||
- from: "apps/pwa/src/routes/AdminPage.tsx MemberRow"
|
||||
to: "apps/pwa/src/components/MemberEditorSheet.tsx"
|
||||
via: "row tap opens sheet in edit mode; Add member trigger opens create mode"
|
||||
pattern: "MemberEditorSheet"
|
||||
- from: "apps/pwa/src/components/MemberEditorSheet.tsx Profile save"
|
||||
to: "apps/pwa/src/api/client.ts updateMemberProfile"
|
||||
via: "updateMemberProfile(memberId, { displayName, isAdmin })"
|
||||
pattern: "updateMemberProfile"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Rework the admin Members panel into the single-editor experience (D-01..D-07). Build a new `MemberEditorSheet.tsx` (one component, edit/create modes per D-07) with per-section saves (D-05), folding the standalone `ResetPasswordSheet` into a "Set new password" section (D-06) and retiring "Rotate" copy (D-06). Rework `AdminPage.tsx` so each `MemberRow` is a whole-row tap target with a trailing chevron (D-04), the per-row action-button cluster and the always-open inline Add-member form are removed, and a single "Add member" trigger opens the sheet in create mode (D-07). Verify the visual + interaction contract in 20-UI-SPEC.md with playwright-cli.
|
||||
|
||||
Purpose: This is the user-facing payload of the phase — UI/glue work over the route from Plan 20-01 and the fetcher from Plan 20-02. Standard execution, verified in a real Chromium browser via the playwright-cli skill (project convention for desktop-runnable UI checks).
|
||||
Output: A unified member editor + decluttered Members panel matching the UI-SPEC copy and interaction contracts.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/gsd-core/workflows/execute-plan.md
|
||||
@$HOME/.claude/gsd-core/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md
|
||||
@.planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md
|
||||
@.planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md
|
||||
@apps/pwa/src/components/CredentialSheet.tsx
|
||||
@apps/pwa/src/routes/AdminPage.tsx
|
||||
</context>
|
||||
|
||||
<artifacts_produced>
|
||||
## Artifacts this phase produces (Plan 20-03)
|
||||
- NEW component `apps/pwa/src/components/MemberEditorSheet.tsx` — single sheet with a `mode: 'edit' | 'create'` prop; edit mode renders Profile / Set new password / App password sections with per-section saves; create mode renders the four-field add-member form
|
||||
- Reworked `MemberRow` in `apps/pwa/src/routes/AdminPage.tsx` — whole-row `role="button"` tap target, trailing `ChevronRight` affordance, inline "Admin" badge when `member.isAdmin`, action-button cluster removed
|
||||
- New "Add member" ghost trigger (lucide `Plus` prefix) in `AdminPage.tsx`
|
||||
- New lucide imports: `ChevronRight`, `Plus` (AdminPage); the sheet imports `Loader2` (existing)
|
||||
- REMOVED: `ResetPasswordSheet` component, the inline Add-member form + its local state, and the dual CredentialSheet/ResetPasswordSheet mounting from `AdminPage.tsx`
|
||||
</artifacts_produced>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto" tdd="true">
|
||||
<name>Task 1: Build MemberEditorSheet.tsx (edit + create modes, per-section saves)</name>
|
||||
<files>apps/pwa/src/components/MemberEditorSheet.tsx</files>
|
||||
<read_first>
|
||||
- apps/pwa/src/components/CredentialSheet.tsx (full — copy the dialog scaffold: useFocusTrap wiring, handleClose+focus-return, Escape effect, focus-heading-on-open, phone/desktop sheet style object, h2 heading, email+password fields, "Validating against CalDAV…" Loader2 state, Fastmail device-tokens helper link, FAILURE_TEXT copy, saveCredential mutation; note the mode-discriminator + headingFor pattern)
|
||||
- apps/pwa/src/routes/AdminPage.tsx (the ResetPasswordSheet component ~lines 1375-1677: password+confirm+mismatch+length logic; the createMemberMutation + create-form fields ~lines 260-306 and ~443-662; the sectionLabelStyle ~lines 46-53; showToast usage ~lines 66-76; the openSheet/triggerRef capture pattern ~lines 252-258)
|
||||
- apps/pwa/src/hooks/useFocusTrap.ts and apps/pwa/src/hooks/useIsPhone.ts
|
||||
- apps/pwa/src/api/client.ts (updateMemberProfile + AdminMember from Plan 20-02; fetchCreateMember; fetchAdminResetPassword; saveCredential; the 'last-admin' / 'conflict' / 'mismatch' / 'short' sentinels)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md (Surface B, Copywriting Contract, Interaction Contracts, Accessibility Contract — the authoritative visual + copy contract)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-PATTERNS.md ("MemberEditorSheet.tsx" section)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-05, D-06, D-07; Claude's-discretion item on fastmailEmail prefill)
|
||||
</read_first>
|
||||
<action>
|
||||
Create apps/pwa/src/components/MemberEditorSheet.tsx as ONE component with a `mode: 'edit' | 'create'` prop (D-07 unification; `member` present implies edit). Props: `member?: AdminMember`, `mode`, `onClose`, `triggerRef`, and an `onToast(message)` callback (lift toast in AdminPage; pass success copy up). Copy the entire dialog scaffold from CredentialSheet (role="dialog", aria-modal, useFocusTrap on the dialog div, handleClose clearing form state + returning focus to triggerRef.current, Escape-to-close, focus the h2 on open, phone-vs-desktop sheet style with borderRadius 12px, maxWidth 480px, zIndex 301, padding var(--space-6), desktop maxHeight calc(100dvh - var(--space-8)) + overflowY auto). Use the backdrop overlay token `var(--color-overlay, rgba(0,0,0,0.32))` (per UI-SPEC, matching ResetPasswordSheet — NOT CredentialSheet's 0.4). headingFor(mode): edit -> "Edit member", create -> "Add member"; aria-label matches the h2.
|
||||
|
||||
EDIT MODE — three sections separated by `border-top: 1px solid var(--color-border-subtle); margin: var(--space-6) 0`. Section headings use a `<div>` with sectionLabelStyle (13px/600/uppercase, --color-text-muted) NOT `<h3>` (UI-SPEC Accessibility note).
|
||||
- Section 1 Profile (always): "Display name" text input (prefilled with member.displayName, min-height 44px) + an Admin toggle row rendered as `role="switch"` with `aria-checked`, `aria-label="Admin"`, label "Admin" + sub-label "Can access admin settings"; pill 44x24, --color-member-0 checked / --color-border unchecked, white thumb; initial state from `member.isAdmin`. Save button "Save". Mutation calls `updateMemberProfile(member.id, { displayName, isAdmin })`, invalidates `['admin','members']`, fires onToast("Profile saved."), KEEPS the sheet open (per-section, D-05). onError: if the error message is the `last-admin` sentinel, show inline "Cannot remove admin — at least one admin must remain." below the toggle AND revert the toggle to its previous value; otherwise "Something went wrong. Please try again."
|
||||
- Section 2 Set new password (render ONLY when `member.hasLocalCredential === true`): heading "Set new password", helper "Leave blank to keep the current password.", "New password" + "Confirm new password" fields (type=password, autoComplete="new-password", never prefilled). Save button "Set password". Client guards: mismatch -> "Passwords do not match."; < 8 chars -> "Password must be at least 8 characters." Mutation calls `fetchAdminResetPassword(member.id, newPassword)`, invalidates `['admin','members']`, fires onToast("Password updated."), keeps sheet open. Loader2 size 14 inline while pending.
|
||||
- Section 3 App password (always in edit mode): heading "App password", helper "Fastmail app password scoped to Calendars & Contacts (CalDAV)." with inline link "Get an app password" -> https://app.fastmail.com/settings/security/devicetokens (target=_blank rel=noopener noreferrer, --color-member-0). "Fastmail email" field (type=email, autoComplete="email"); "App password" field (type=password, autoComplete="new-password", never prefilled). For fastmailEmail prefill: `GET /members` does NOT currently return fastmailEmail, so the email field starts BLANK on edit (admin re-enters it) — document this in a code comment; do not invent a read of a field the API does not return. "Validating against CalDAV…" Loader2 16px in-flight state; failure copy "Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again." Save button "Save app password". Mutation calls `saveCredential` with `userId: member.id`, invalidates `['admin','members']` AND `['me']`, fires onToast("App password saved."), keeps sheet open.
|
||||
|
||||
CREATE MODE — a single form, no dividers: Display name, Username, Initial password, Confirm password fields. Save button "Add member". Validate passwords match + >= 8 chars; map a 409/username conflict to "That username is already in use. Choose a different one." Mutation calls `fetchCreateMember`, invalidates `['admin','members']`, fires onToast("Member added."), then closes the sheet (create success closes; edit per-section saves do not).
|
||||
|
||||
All save buttons: accent --color-member-0 background enabled / --color-border disabled, white text, min-height 44px, border-radius var(--space-1), Loader2 inline while pending. Cancel button: no background, --color-text-secondary, min-height 44px, calls handleClose. Inline errors: --color-destructive 13px, wired via aria-describedby on the relevant input. RETIRE "Rotate"/"Add credential"/"Reset password" — none of those literals appear in this file.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/luc/projects/familysync && pnpm --filter @familysync/pwa exec tsc --noEmit && grep -c 'role="switch"' apps/pwa/src/components/MemberEditorSheet.tsx && grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx; test $? -eq 1</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- `apps/pwa/src/components/MemberEditorSheet.tsx` exists and the PWA typechecks (tsc --noEmit exit 0).
|
||||
- The file contains the exact copy strings "Edit member", "Add member", "Profile", "Set new password", "App password", "Save app password", "Can access admin settings" (UI-SPEC Copywriting Contract).
|
||||
- `grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx` returns NO matches (retired copy, D-06).
|
||||
- The Profile save's onError branches on the `last-admin` sentinel and renders "Cannot remove admin — at least one admin must remain."
|
||||
- Section 2 is gated on `member.hasLocalCredential === true`.
|
||||
- The admin control uses `role="switch"` with `aria-checked` (Accessibility Contract).
|
||||
- Per-section saves keep the sheet open; create-mode save closes it.
|
||||
</acceptance_criteria>
|
||||
<done>MemberEditorSheet.tsx implements both modes with per-section saves, correct copy, the last-admin inline error, and typechecks.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto" tdd="true">
|
||||
<name>Task 2: Rework AdminPage MemberRow + Add-member trigger; remove old surfaces</name>
|
||||
<files>apps/pwa/src/routes/AdminPage.tsx</files>
|
||||
<read_first>
|
||||
- apps/pwa/src/routes/AdminPage.tsx (full — MemberRow ~lines 1151-1285 incl. avatar swatch, credential status badge, and the action-button cluster to remove; the inline Add-member form ~lines 443-662; the ResetPasswordSheet definition ~lines 1375-1677; the dual sheet mounting ~lines 1111-1137; create-form local state ~lines 94-98; CalendarRadioRow ~lines 1298-1318 for the role+onKeyDown Enter/Space template; openSheet/triggerRef ~lines 252-258)
|
||||
- apps/pwa/src/components/ListCard.tsx (lines ~120-145 — the trailing ChevronRight + "Shared" badge pattern to mirror for the chevron + "Admin" badge)
|
||||
- apps/pwa/src/components/CalendarShell.tsx (lines ~451-456 — the Plus-prefixed ghost button pattern for the Add-member trigger)
|
||||
- apps/pwa/src/components/MemberEditorSheet.tsx (the component from Task 1 — its props contract)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md (Surface A, Interaction Contracts, Accessibility Contract)
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-CONTEXT.md (D-04, D-07)
|
||||
</read_first>
|
||||
<action>
|
||||
In apps/pwa/src/routes/AdminPage.tsx:
|
||||
(1) Import `{ ChevronRight, Plus }` from lucide-react and `MemberEditorSheet` from ../components/MemberEditorSheet.js.
|
||||
(2) Rework MemberRow into a single tappable surface: `role="button"`, `aria-label={`Edit ${displayName}`}`, `tabIndex={0}`, `cursor: pointer`, min-height 44px, onClick + onKeyDown (Enter/Space -> open editor for that member, capturing the row element into triggerRef via the existing openSheet pattern). KEEP the avatar swatch (var(--color-member-${colorIndex})) and the CheckCircle/AlertCircle credential status badge ("Credential set"/"No credential"). ADD a trailing `ChevronRight` (size 16, color var(--color-text-muted), aria-hidden, flexShrink 0, marginLeft var(--space-2)). ADD an inline "Admin" badge when `member.isAdmin` (12px/600, --color-member-0 text on --color-surface-dim, border-radius 4px, padding 2px 6px), placed between the status badge and the chevron, mirroring ListCard's "Shared" badge. REMOVE the entire action-button cluster (the "Rotate"/"Add credential" button and the "Reset password" button).
|
||||
(3) Add an "Add member" ghost trigger button below the member list: `<Plus size={16}>` prefix, label "Add member", 1px solid var(--color-border), border-radius 8px, padding var(--space-3) var(--space-4), min-height 44px, --color-surface bg / --color-surface-dim hover; capture its ref into an `addMemberTriggerRef`; on click open MemberEditorSheet in create mode. Focus returns to this button on cancel/close.
|
||||
(4) Replace the dual CredentialSheet + ResetPasswordSheet mounting with a SINGLE `MemberEditorSheet` instance driven by sheet state (mode + selected member + triggerRef). Keep `showToast` in AdminPage and pass it as the sheet's `onToast` callback.
|
||||
(5) REMOVE: the entire inline Add-member form body (the "Local Accounts" add-form ~lines 443-662), the `ResetPasswordSheet` component definition (~lines 1375-1677), and all create-form local state (createDisplayName … createError ~lines 94-98) — these now live in MemberEditorSheet.
|
||||
Keep the two-tab AdminPage shell + roving-tabindex tabs intact (only the Members tab body changes). Use the empty/loading/error member-state copy from the UI-SPEC ("Loading members…", "Could not load members.", "No members yet", "Add a member to get started.") if those states are touched.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/luc/projects/familysync && pnpm --filter @familysync/pwa exec tsc --noEmit && grep -RnE '"Rotate"|>Rotate<|Add credential|Reset password' apps/pwa/src/routes/AdminPage.tsx; test $? -eq 1 && ! grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- PWA typechecks (tsc --noEmit exit 0).
|
||||
- `grep -RnE '"Rotate"|>Rotate<|Add credential|Reset password' apps/pwa/src/routes/AdminPage.tsx` returns NO matches (retired, D-06).
|
||||
- `grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx` returns nothing (component removed, folded into the editor).
|
||||
- `grep -n 'MemberEditorSheet' apps/pwa/src/routes/AdminPage.tsx` shows the single sheet mounted.
|
||||
- MemberRow has `role="button"` + `aria-label` starting with "Edit " and a trailing ChevronRight.
|
||||
- A single "Add member" ghost trigger with a `Plus` icon exists; the inline always-open add-form is gone.
|
||||
</acceptance_criteria>
|
||||
<done>AdminPage Members tab is a tappable list + chevron + single Add-member trigger wired to MemberEditorSheet; old action buttons, inline add-form, and ResetPasswordSheet removed.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 3: Verify the interaction + visual contract with playwright-cli; pass CI gates</name>
|
||||
<files>apps/pwa/src/components/MemberEditorSheet.tsx, apps/pwa/src/routes/AdminPage.tsx</files>
|
||||
<read_first>
|
||||
- .planning/phases/20-admin-member-editor-form-declutter/20-UI-SPEC.md (Interaction Contracts, Copywriting Contract)
|
||||
- .claude/skills/playwright-cli/ (the playwright-cli skill index)
|
||||
- /home/luc/.claude/projects/-home-luc-projects-familysync/memory/dev-bypass-feature-gating.md (how to reach the admin UI under DEV_AUTH_BYPASS)
|
||||
- /home/luc/.claude/projects/-home-luc-projects-familysync/memory/familysync-dev-stack-setup.md (how the dev stack runs on this box)
|
||||
- /home/luc/.claude/projects/-home-luc-projects-familysync/memory/ci-checks-conformance.md
|
||||
</read_first>
|
||||
<action>
|
||||
Bring up (or reuse) the host-side dev stack with DEV_AUTH_BYPASS so the admin Members tab is reachable (see the dev-bypass + dev-stack memory notes — the bypass user must be admin to see the admin route). Use the playwright-cli skill to drive desktop Chromium and OBSERVE: (a) the Members tab shows the decluttered list — no "Rotate"/"Add credential"/"Reset password" buttons, a single "Add member" trigger present; (b) tapping a member row opens the editor sheet titled "Edit member"; (c) the Profile section save fires the "Profile saved." toast and the sheet stays open; (d) the "Add member" trigger opens the same sheet titled "Add member" in create mode. Capture a screenshot of the editor for the SUMMARY. (iOS-Safari standalone behavior is out of scope here — desktop Chromium is the right surface.) Then run the full PWA CI gates (eslint + prettier + typecheck + the existing pwa vitest suite) and fix any violations. Commit: `feat(20-03): unify member editor + declutter admin members panel`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/luc/projects/familysync && pnpm --filter @familysync/pwa exec tsc --noEmit && pnpm --filter @familysync/pwa exec eslint src/components/MemberEditorSheet.tsx src/routes/AdminPage.tsx && pnpm exec prettier --check apps/pwa/src/components/MemberEditorSheet.tsx apps/pwa/src/routes/AdminPage.tsx && pnpm --filter @familysync/pwa test -- --run</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- playwright-cli observation confirms: no retired button labels in the Members tab; row tap opens an "Edit member" sheet; "Add member" trigger opens an "Add member" sheet; a Profile save shows the "Profile saved." toast (screenshot captured for the SUMMARY).
|
||||
- eslint + prettier + typecheck pass for both modified PWA files.
|
||||
- The existing PWA vitest suite passes (`pnpm --filter @familysync/pwa test -- --run` exit 0).
|
||||
- Change committed with a `feat(20-03):` message.
|
||||
</acceptance_criteria>
|
||||
<done>The unified editor + decluttered panel are observed working in a real browser and all PWA CI gates pass.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<threat_model>
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description |
|
||||
|----------|-------------|
|
||||
| PWA admin UI -> /api/admin | The editor's saves cross into the admin surface; the server's `requireAdmin` + the Plan 20-01 last-admin guard are the real boundaries. Client toggle state is non-authoritative (existing pattern). |
|
||||
|
||||
## STRIDE Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation Plan |
|
||||
|-----------|----------|-----------|-------------|-----------------|
|
||||
| T-20-07 | Information Disclosure | password / app-password fields | mitigate | All password fields are write-only: never prefilled, `autoComplete="new-password"`, never logged (preserves T-10-15/16). The app-password email field starts blank on edit (API does not return it). |
|
||||
| T-20-08 | Tampering | CalDAV credential | mitigate | App-password save routes through the existing `saveCredential` -> server-side CalDAV validation before store; invalid password surfaces the CalDAV-failure copy, nothing stored. |
|
||||
| T-20-09 | Elevation of Privilege (UI bypass) | admin toggle | mitigate | Toggle is cosmetic; the demotion guard (409) is enforced server-side (Plan 20-01). On 409 the UI shows the inline error and reverts — no client-side override of the guard. |
|
||||
| T-20-SC | Tampering | npm/pip/cargo installs | mitigate | No new packages installed; lucide-react `ChevronRight`/`Plus` are already project dependencies. No legitimacy checkpoint required. |
|
||||
</threat_model>
|
||||
|
||||
<verification>
|
||||
- `pnpm --filter @familysync/pwa exec tsc --noEmit` — PWA typechecks.
|
||||
- `grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx apps/pwa/src/routes/AdminPage.tsx` — no matches (retired copy).
|
||||
- `grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx` — empty (folded into editor).
|
||||
- playwright-cli: row tap opens "Edit member"; Add-member trigger opens "Add member"; Profile save -> "Profile saved." toast.
|
||||
- PWA eslint + prettier + vitest gates pass.
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- One sheet edits all of a member's details (name, admin, local password, app password) with per-section saves.
|
||||
- The standalone Reset password button and the "Rotate"/"Add credential" buttons are gone; the inline add-form is collapsed behind a single trigger.
|
||||
- The admin toggle reflects isAdmin and a last-admin demotion shows the inline error and reverts.
|
||||
- Verified in a real browser; all PWA CI gates pass.
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
Create `.planning/phases/20-admin-member-editor-form-declutter/20-03-SUMMARY.md` when done.
|
||||
</output>
|
||||
@@ -0,0 +1,143 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
plan: "03"
|
||||
subsystem: pwa-admin-ui
|
||||
tags:
|
||||
- admin
|
||||
- member-editor
|
||||
- ux
|
||||
- react
|
||||
- playwright-verified
|
||||
dependency_graph:
|
||||
requires:
|
||||
- "20-01" # PATCH /api/admin/members/:id route + last-admin guard
|
||||
- "20-02" # updateMemberProfile fetcher + AdminMember.isAdmin in client.ts
|
||||
provides:
|
||||
- unified-member-editor-sheet
|
||||
- decluttered-members-panel
|
||||
affects:
|
||||
- apps/pwa/src/routes/AdminPage.tsx
|
||||
- apps/pwa/src/components/MemberEditorSheet.tsx
|
||||
tech_stack:
|
||||
added: []
|
||||
patterns:
|
||||
- per-section-save-sheet
|
||||
- role-switch-toggle
|
||||
- tappable-row-with-chevron
|
||||
- ghost-trigger-button
|
||||
key_files:
|
||||
created:
|
||||
- apps/pwa/src/components/MemberEditorSheet.tsx
|
||||
modified:
|
||||
- apps/pwa/src/routes/AdminPage.tsx
|
||||
decisions:
|
||||
- "Admin toggle uses role=switch + aria-checked per UI-SPEC Accessibility Contract (not native checkbox)"
|
||||
- "fastmailEmail starts blank in edit mode — GET /api/admin/members does not return it (D-CONTEXT)"
|
||||
- "Per-section saves keep sheet open; create-mode save closes it (D-05, D-07)"
|
||||
- "onMouseEnter/Leave hover effect on Add-member button via e.currentTarget.style (no type assertion)"
|
||||
- "Pre-existing prettier drift in docs/*, CLAUDE.md, README.md, api/admin.ts fixed in Task 3 commit"
|
||||
metrics:
|
||||
duration: "~10 minutes"
|
||||
completed: "2026-06-18"
|
||||
tasks_completed: 3
|
||||
files_modified: 2
|
||||
files_created: 1
|
||||
status: complete
|
||||
---
|
||||
|
||||
# Phase 20 Plan 03: Member Editor & Admin Panel Declutter Summary
|
||||
|
||||
One unified MemberEditorSheet.tsx (edit + create modes, per-section saves) replacing the scattered per-row action buttons, standalone ResetPasswordSheet, and always-open inline Add-member form in AdminPage.tsx.
|
||||
|
||||
## Tasks Completed
|
||||
|
||||
| Task | Name | Commit | Key Files |
|
||||
|------|------|--------|-----------|
|
||||
| 1 | Build MemberEditorSheet.tsx (edit + create modes, per-section saves) | b125a69 | apps/pwa/src/components/MemberEditorSheet.tsx (NEW, 899 lines) |
|
||||
| 2 | Rework AdminPage MemberRow + Add-member trigger; remove old surfaces | 9e6b004 | apps/pwa/src/routes/AdminPage.tsx |
|
||||
| 3 | Verify interaction + visual contract with playwright-cli; pass CI gates | 9b62887 | docs/*, CLAUDE.md, README.md (prettier drift fixes) |
|
||||
|
||||
## What Was Built
|
||||
|
||||
### MemberEditorSheet.tsx (new)
|
||||
|
||||
Single component (`mode: 'edit' | 'create'`) that replaces the `CredentialSheet`, `ResetPasswordSheet`, and inline add-member form:
|
||||
|
||||
**Edit mode — three per-section saves (D-05):**
|
||||
- Section 1 Profile: display name input + `role="switch"` admin toggle (initial state from `member.isAdmin`); `updateMemberProfile` mutation; last-admin 409 shows inline "Cannot remove admin — at least one admin must remain." and reverts toggle (D-03)
|
||||
- Section 2 Set new password: only shown when `member.hasLocalCredential === true`; mismatch/short client guards; `fetchAdminResetPassword` mutation; fires "Password updated." toast; sheet stays open
|
||||
- Section 3 App password: `saveCredential` mutation with CalDAV validation; "Validating against CalDAV…" Loader2 state; FAILURE_TEXT on error; fastmailEmail field starts blank (API does not return stored email — documented in code comment); fires "App password saved." toast; sheet stays open
|
||||
|
||||
**Create mode (D-07):**
|
||||
- Single form: display name, username, initial password, confirm password
|
||||
- `fetchCreateMember` mutation; 409 → "That username is already in use."; fires "Member added." toast + closes sheet
|
||||
|
||||
Dialog scaffold matches CredentialSheet/ResetPasswordSheet exactly: `role="dialog"`, `aria-modal`, `useFocusTrap`, Escape closes, focus returns to `triggerRef.current`, phone bottom-sheet vs desktop modal, zIndex 301, overlay `rgba(0,0,0,0.32)`.
|
||||
|
||||
All passwords are write-only: never prefilled, `autoComplete="new-password"` (T-20-07/T-20-08 mitigations active).
|
||||
|
||||
### AdminPage.tsx (reworked Members tab)
|
||||
|
||||
**MemberRow reworked (D-04):** Whole-row `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, Enter/Space opens editor. Trailing `ChevronRight` (size 16, `--color-text-muted`). Inline "Admin" badge (`--color-member-0` text, `--color-surface-dim` bg, 12px/600, border-radius 4px) when `member.isAdmin`. Avatar swatch and credential status badge kept unchanged.
|
||||
|
||||
**"Add member" ghost trigger (D-07):** Full-width button with `Plus` icon prefix, `1px solid var(--color-border)`, `border-radius 8px`, `min-height 44px`; opens MemberEditorSheet in create mode; focus returns to this button on close.
|
||||
|
||||
**Removed:**
|
||||
- Entire "Local Accounts" section with inline add-member form (~220 lines)
|
||||
- `ResetPasswordSheet` component definition (~303 lines)
|
||||
- `CredentialSheet` import and dual-sheet mounting
|
||||
- All create-form local state (`createDisplayName`, `createUsername`, `createPassword`, `createConfirmPassword`, `createError`)
|
||||
- `createMemberMutation` in AdminPage (moved to MemberEditorSheet)
|
||||
- Per-row "Rotate"/"Add credential"/"Reset password" buttons
|
||||
|
||||
**Single `MemberEditorSheet` instance** replaces dual CredentialSheet + ResetPasswordSheet mounts; driven by `editorOpen`, `editorMode`, `editorMember`, `editorTriggerRef`.
|
||||
|
||||
## Playwright-CLI Verification
|
||||
|
||||
Verified on desktop Chromium against http://localhost:5173/admin with DEV_AUTH_BYPASS active (Dev User, id 1, is admin):
|
||||
|
||||
1. **Members tab decluttered:** `button "Edit Dev User"` (tappable row with chevron) + `button "Add member"` ghost trigger visible; no Rotate/Add credential/Reset password buttons.
|
||||
2. **Row tap → Edit member:** `dialog "Edit member"` opens with heading "Edit member", subtitle "Dev User", Profile section (display name prefilled, Admin toggle checked), Set new password section, App password section.
|
||||
3. **Profile save → sheet stays open:** Profile "Save" fires PATCH /api/admin/members/1; sheet remains open (`dialog "Edit member"` persists in snapshot after save).
|
||||
4. **Add member trigger → Create mode:** `dialog "Add member"` opens with heading "Add member" and four create-mode fields.
|
||||
|
||||
Screenshots captured:
|
||||
- `.planning/phases/20-admin-member-editor-form-declutter/screenshots/admin-members-tab-decluttered.png`
|
||||
- `.planning/phases/20-admin-member-editor-form-declutter/screenshots/member-editor-edit-mode.png`
|
||||
- `.planning/phases/20-admin-member-editor-form-declutter/screenshots/member-editor-create-mode.png`
|
||||
- `.planning/phases/20-admin-member-editor-form-declutter/screenshots/profile-save-toast.png`
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
### Auto-fixed Issues
|
||||
|
||||
None — plan executed exactly as written.
|
||||
|
||||
### Pre-existing Prettier Drift (out-of-scope cleanup)
|
||||
|
||||
**Deviation:** `pnpm format:check` (repo-wide) flagged 17 pre-existing formatting violations in `docs/*.md`, `README.md`, `CLAUDE.md`, `apps/api/src/routes/admin.ts`, and other files not authored in this plan.
|
||||
|
||||
**Action (Rule 3 — blocking CI gate):** Ran `pnpm format` to fix all violations. Staged and included in Task 3 commit to keep CI green. Confirmed the violations were pre-existing by checking git diff for files not created/modified by this plan.
|
||||
|
||||
## Known Stubs
|
||||
|
||||
None. The editor is fully wired to live endpoints. The fastmailEmail field starts blank on edit (documented behavior — `GET /api/admin/members` does not return the stored email; the admin must re-enter it) but this is intentional per the plan spec and D-CONTEXT note.
|
||||
|
||||
## Threat Surface Scan
|
||||
|
||||
No new network endpoints, auth paths, or file access patterns introduced. `MemberEditorSheet.tsx` is a pure client component wiring to existing Plan 20-01 endpoints behind `requireAdmin`. T-20-07, T-20-08, T-20-09 mitigations are active as documented in the component header.
|
||||
|
||||
## TDD Notes
|
||||
|
||||
The plan specified `tdd="true"` for Tasks 1 and 2. The PWA has no unit-test harness for sheet components (no existing `*.test.tsx` for CredentialSheet or MemberEditorSheet — jsdom/RTL setup is not in scope for this phase). All behavioral verification was performed via playwright-cli interaction against the live dev stack (per CLAUDE.md convention: "playwright-cli skill to validate UI and workflows instead of asking the operator to check manually"). The 22 existing test files (275 tests) all pass — no regressions.
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- `apps/pwa/src/components/MemberEditorSheet.tsx` exists: FOUND
|
||||
- `apps/pwa/src/routes/AdminPage.tsx` modified: FOUND
|
||||
- Commit b125a69 exists: FOUND
|
||||
- Commit 9e6b004 exists: FOUND
|
||||
- Commit 9b62887 exists: FOUND
|
||||
- `grep -RnE 'Rotate|Add credential|Reset password' apps/pwa/src/components/MemberEditorSheet.tsx apps/pwa/src/routes/AdminPage.tsx` — 0 matches: PASS
|
||||
- `grep -q 'ResetPasswordSheet' apps/pwa/src/routes/AdminPage.tsx` — no match: PASS
|
||||
- `pnpm --filter @familysync/pwa test -- --run` — 275 passed: PASS
|
||||
@@ -0,0 +1,112 @@
|
||||
# Phase 20: Admin Member Editor & Form Declutter - Context
|
||||
|
||||
**Gathered:** 2026-06-18
|
||||
**Status:** Ready for planning
|
||||
|
||||
<domain>
|
||||
## Phase Boundary
|
||||
|
||||
Rework the **admin Members panel** (`apps/pwa/src/routes/AdminPage.tsx`, "Members & Accounts" tab) so an admin edits all of a member's details from **one editor** instead of scattered per-row action buttons:
|
||||
|
||||
- Replace the per-row `Rotate` / `Add credential` button **and** the separate `Reset password` button with a single member editor opened from the row.
|
||||
- The editor changes: **display name**, **local-login password**, the **Fastmail/CalDAV app password** (calendar credential), and the member's **admin flag (`is_admin`)** — using clear, non-jargon labels that **retire the "Rotate" term**.
|
||||
- Collapse the always-open inline **Add member** form behind a single "Add member" trigger.
|
||||
|
||||
Primarily a client-side `AdminPage` + `CredentialSheet` rework over the existing `/api/admin` surface. **No new auth/authorization boundary** — everything stays behind `requireAdmin`. One small new *route* (member-profile update) is in scope; it is not a new boundary. Seeded by the gripe that "Rotate" for the app password is unintuitive.
|
||||
|
||||
**Out of scope (deferred):** editable member color, admin-driven OIDC link/unlink, member deletion/removal.
|
||||
</domain>
|
||||
|
||||
<decisions>
|
||||
## Implementation Decisions
|
||||
|
||||
### Editor field scope
|
||||
- **D-01:** The editor exposes **four** things: display name, local-login password, Fastmail/CalDAV app password, and the **admin toggle (`is_admin`)**. Color, OIDC link/unlink, and remove-member are explicitly deferred (see Deferred Ideas).
|
||||
- **D-02:** **Editing display name + `is_admin` needs one new route** within the existing `requireAdmin` boundary — today `displayName` is only written at member-create (`POST /members`) and there is no member-update route. Recommended shape: a single `PATCH /api/admin/members/:id` (or `POST`) accepting `displayName` and/or `is_admin`; exact verb/shape is the planner's call. `AdminMember` (`apps/pwa/src/api/client.ts:563`) and the `GET /members` select (`apps/api/src/routes/admin.ts:102`) must surface `isAdmin` for the toggle's initial state.
|
||||
|
||||
### Admin toggle safety
|
||||
- **D-03:** **Server blocks demoting the last admin.** Toggling `is_admin` off is rejected (409/422) when the target is the only remaining admin; self-demotion is permitted only when another admin exists. The client surfaces this as a clear inline error. The Phase 19 break-glass CLI/host command remains the true lockout-recovery path ([[19-CONTEXT]] D-13) — no new role/capability model.
|
||||
|
||||
### Edit affordance
|
||||
- **D-04:** **Whole-row tap opens the editor**, with a trailing chevron / edit icon as the affordance signal. The current per-row action buttons (`Rotate`/`Add credential`, `Reset password`) are removed from `MemberRow`. Big mobile tap target; matches the low-friction, warm aesthetic.
|
||||
|
||||
### Editor layout & save model
|
||||
- **D-05:** **One sheet, per-section save** — not a single combined Save. Sections:
|
||||
1. **Profile** — display name input + admin toggle, with one Save (writes the new member-profile route; subject to D-03 guard).
|
||||
2. **Set new password** — optional, **write-only** (blank = unchanged), with confirm; maps to existing `POST /members/:id/password` (`admin.ts:225`). Only shown for members with a local credential (`hasLocalCredential`).
|
||||
3. **Set app password** — optional, **write-only**; collects Fastmail email + app password, **CalDAV-validated** before store; maps to existing `POST /credentials` (`admin.ts:279`).
|
||||
Each section maps 1:1 to an endpoint, avoiding partial-failure ambiguity when CalDAV validation fails. Passwords are never prefilled/returned to the client (preserve T-10-15/T-10-16).
|
||||
- **D-06:** **Retire "Rotate" copy** everywhere; use plain labels (e.g. "Set app password" / "Update calendar password"). The standalone `ResetPasswordSheet` (currently in `AdminPage.tsx`) is **folded into** the editor's "Set new password" section — no separate reset sheet remains.
|
||||
|
||||
### Add-member declutter
|
||||
- **D-07:** **"Add member" opens a sheet**, not an inline-expanded form. Preferred: the **same Member sheet in a create mode** (compose_event-style — one component, create vs edit), so the panel collapses to a clean member list + a single "Add member" trigger. Create mode keeps today's fields (display name, username, initial password + confirm → `POST /members`).
|
||||
|
||||
### Claude's Discretion
|
||||
- Exact new-route verb/path/shape for the member-profile update (D-02).
|
||||
- Whether the Member editor and Add-member sheet are literally one component with a mode prop vs two siblings sharing a base — planner's call, but D-07 prefers unification.
|
||||
- In edit mode, whether the app-password section prefills/display the stored Fastmail email (read-only) or requires re-entry — minor UX detail for planning; note the stored `fastmailEmail` exists on the credential.
|
||||
- Icon choice for the row chevron/edit affordance (lucide, consistent with existing `CheckCircle`/`AlertCircle` usage).
|
||||
</decisions>
|
||||
|
||||
<canonical_refs>
|
||||
## Canonical References
|
||||
|
||||
**Downstream agents MUST read these before planning or implementing.**
|
||||
|
||||
### Phase definition
|
||||
- `.planning/ROADMAP.md` §"Phase 20: Admin Member Editor & Form Declutter" — goal + the open-scope note this discussion resolved.
|
||||
|
||||
### Code being reworked
|
||||
- `apps/pwa/src/routes/AdminPage.tsx` — the Members panel, `MemberRow`, the inline Add-member form, and the standalone `ResetPasswordSheet` being consolidated.
|
||||
- `apps/pwa/src/components/CredentialSheet.tsx` — dialog/focus-trap/Escape + CalDAV-validation sheet to generalize into the Member editor (and Add-member create mode).
|
||||
- `apps/pwa/src/api/client.ts` — `AdminMember` type (`:563`), admin fetchers (`fetchAdminMembers`, `fetchCreateMember`, `fetchAdminResetPassword`, `saveCredential`); add the new member-profile fetcher + `isAdmin` field here.
|
||||
- `apps/api/src/routes/admin.ts` — existing endpoints: `GET /members` (`:102`), `POST /members` (`:143`), `POST /members/:id/password` (`:225`), `POST /credentials` (`:279`); add the member-profile update route here behind the same `requireAdmin`.
|
||||
|
||||
### Prior decisions that constrain this phase
|
||||
- `.planning/phases/19-local-auth-no-oidc-mode/19-CONTEXT.md` — D-11 (password lifecycle = self-change + admin-reset, no email reset), D-12 (OIDC link is self-service only, deletes local credential), D-13 (single `is_admin`, break-glass = CLI/host, no role split).
|
||||
</canonical_refs>
|
||||
|
||||
<code_context>
|
||||
## Existing Code Insights
|
||||
|
||||
### Reusable Assets
|
||||
- **`CredentialSheet`**: full dialog scaffold (role=dialog, `aria-modal`, `useFocusTrap`, Escape-to-close, focus-return-to-trigger, phone bottom-sheet vs desktop modal, CalDAV-validating mutation). Generalize into the Member editor + Add-member create mode.
|
||||
- **`ResetPasswordSheet`** (in `AdminPage.tsx`): password + confirm + mismatch validation logic — folds into the editor's "Set new password" section (D-06).
|
||||
- **`useFocusTrap`, `useIsPhone`** hooks — reuse for the new sheet.
|
||||
- **Existing endpoints** cover login-password reset and app-password set; only the member-profile (displayName + is_admin) write is new.
|
||||
|
||||
### Established Patterns
|
||||
- Two-tab `AdminPage` ("Members & Accounts" / "Settings") with roving-tabindex tabs — keep; this phase only restructures the Members tab body.
|
||||
- Mutations invalidate `['admin','members']` (+ `['me']` for credential changes) on success; success toast via `showToast` (D-08 pattern). Reuse for editor saves.
|
||||
- Write-only password handling: never prefill, never log, `autoComplete="new-password"` (T-10-15/16).
|
||||
|
||||
### Integration Points
|
||||
- New `PATCH/POST /api/admin/members/:id` mounts on `adminRouter` behind `requireAdmin` (no new boundary).
|
||||
- `GET /members` select + `AdminMember` type gain `isAdmin` so the editor's toggle has initial state.
|
||||
- `MemberRow` becomes a single tappable row (chevron affordance), dropping its action-button cluster.
|
||||
</code_context>
|
||||
|
||||
<specifics>
|
||||
## Specific Ideas
|
||||
|
||||
- "Same sheet, create vs edit mode" is explicitly modeled on the Fastmail `compose_event` pattern (one widget, `id` present = edit, absent = create) — apply that shape to the Member sheet.
|
||||
- Labels must read for a non-technical household member: retire "Rotate"; prefer "Set app password" / "Set new password" / plain "Save".
|
||||
</specifics>
|
||||
|
||||
<deferred>
|
||||
## Deferred Ideas
|
||||
|
||||
- **Editable member color** — colors are currently derived by row index (`var(--color-member-N)`); there is no stored per-member color to edit. Would need schema + assignment UX. → backlog / future phase.
|
||||
- **Admin-driven OIDC link/unlink** — Phase 19 D-12 makes OIDC linking a self-service action performed *as that user*, never by an admin. Admin-side link/unlink is a different security model. → out of scope.
|
||||
- **Remove / delete member** — destructive, with cascade concerns (events, lists, credentials, last-admin). Not part of the gripe-seeded scope. → backlog / future phase.
|
||||
|
||||
### Reviewed Todos (not folded)
|
||||
- "Gitea CI — full regression + Docker publish" (score 0.6) — stale keyword match (already delivered as Phase 8); unrelated to this UI phase.
|
||||
- "PWA phone layout — BottomTabBar overlaps FAB + legend" (score 0.4) — already addressed in Phase 17; unrelated.
|
||||
|
||||
</deferred>
|
||||
|
||||
---
|
||||
|
||||
*Phase: 20-admin-member-editor-form-declutter*
|
||||
*Context gathered: 2026-06-18*
|
||||
@@ -0,0 +1,83 @@
|
||||
# Phase 20: Admin Member Editor & Form Declutter - Discussion Log
|
||||
|
||||
> **Audit trail only.** Do not use as input to planning, research, or execution agents.
|
||||
> Decisions are captured in CONTEXT.md — this log preserves the alternatives considered.
|
||||
|
||||
**Date:** 2026-06-18
|
||||
**Phase:** 20-admin-member-editor-form-declutter
|
||||
**Areas discussed:** Editor field scope, Edit affordance, Editor layout & save model, Add-member declutter, Admin toggle safety
|
||||
|
||||
---
|
||||
|
||||
## Editor field scope
|
||||
|
||||
| Option | Description | Selected |
|
||||
|--------|-------------|----------|
|
||||
| Core 3 only | Display name + local login password + app password; defer admin toggle/color/OIDC/remove. | |
|
||||
| Core 3 + admin toggle | Also flip `is_admin` from the editor, with a last-admin guard. | ✓ |
|
||||
|
||||
**User's choice:** "The entire scope plus admin toggle" — core 3 fields plus the `is_admin` toggle.
|
||||
**Notes:** Color, OIDC link/unlink, and remove-member stay deferred. Display name + admin toggle require one new within-`requireAdmin` route (no member-update route exists today).
|
||||
|
||||
---
|
||||
|
||||
## Edit affordance
|
||||
|
||||
| Option | Description | Selected |
|
||||
|--------|-------------|----------|
|
||||
| Whole-row tap + chevron | Tapping anywhere on the member row opens the editor; trailing chevron signals it. | ✓ |
|
||||
| Name link + pencil button | Literal roadmap wording — name link + dedicated edit icon. | |
|
||||
|
||||
**User's choice:** Whole-row tap + chevron.
|
||||
**Notes:** Removes the per-row `Rotate`/`Add credential` + `Reset password` button cluster.
|
||||
|
||||
---
|
||||
|
||||
## Editor layout & save model
|
||||
|
||||
| Option | Description | Selected |
|
||||
|--------|-------------|----------|
|
||||
| One sheet, per-section save | Name+toggle save; "Set new password"; "Set app password" — each independent, maps 1:1 to an endpoint. | ✓ |
|
||||
| One sheet, single combined Save | One Save writes every changed field; needs partial-failure handling for CalDAV validation. | |
|
||||
|
||||
**User's choice:** One sheet, per-section save.
|
||||
**Notes:** Avoids partial-failure ambiguity when CalDAV validation fails mid-save. Passwords stay write-only (blank = unchanged).
|
||||
|
||||
---
|
||||
|
||||
## Add-member declutter
|
||||
|
||||
| Option | Description | Selected |
|
||||
|--------|-------------|----------|
|
||||
| Open as a sheet | "Add member" opens a sheet — ideally the same Member sheet in create mode. | ✓ |
|
||||
| Expand inline form | Button toggles the existing inline form visible/hidden in place. | |
|
||||
|
||||
**User's choice:** Open as a sheet.
|
||||
**Notes:** Prefer the compose_event-style one-component create-vs-edit pattern so the panel collapses to a clean list + one button.
|
||||
|
||||
---
|
||||
|
||||
## Admin toggle safety
|
||||
|
||||
| Option | Description | Selected |
|
||||
|--------|-------------|----------|
|
||||
| Block demoting last admin | Server rejects toggling `is_admin` off when they're the only admin; self-demotion only if another admin exists. | ✓ |
|
||||
| Warn but allow | Confirm dialog when demoting the last admin/yourself, but permit it; rely on break-glass CLI. | |
|
||||
|
||||
**User's choice:** Block demoting the last admin (server-enforced).
|
||||
**Notes:** Phase 19 break-glass CLI/host command remains the true lockout-recovery path; no new role model.
|
||||
|
||||
---
|
||||
|
||||
## Claude's Discretion
|
||||
|
||||
- Exact verb/path/shape of the new member-profile update route (`displayName` + `is_admin`).
|
||||
- Whether the Member editor and Add-member sheet are literally one component (mode prop) vs two siblings on a shared base.
|
||||
- Whether the app-password section prefills the stored Fastmail email (read-only) or requires re-entry in edit mode.
|
||||
- Chevron/edit icon choice for the row affordance.
|
||||
|
||||
## Deferred Ideas
|
||||
|
||||
- Editable member color (no stored per-member color — derived by row index).
|
||||
- Admin-driven OIDC link/unlink (Phase 19 D-12: self-service only).
|
||||
- Remove / delete member (destructive, cascade concerns).
|
||||
@@ -0,0 +1,276 @@
|
||||
# Phase 20: Admin Member Editor & Form Declutter - Pattern Map
|
||||
|
||||
**Mapped:** 2026-06-18
|
||||
**Files analyzed:** 5 (2 new surfaces, 3 modified)
|
||||
**Analogs found:** 5 / 5 (all in-repo, recent)
|
||||
|
||||
> No RESEARCH.md for this phase — this is a client-side rework over existing `/api/admin` endpoints. Every new file copies a concrete in-repo analog; no external pattern is needed.
|
||||
|
||||
---
|
||||
|
||||
## File Classification
|
||||
|
||||
| New/Modified File | Role | Data Flow | Closest Analog | Match Quality |
|
||||
|-------------------|------|-----------|----------------|---------------|
|
||||
| `apps/pwa/src/components/MemberEditorSheet.tsx` (NEW) | component (dialog/sheet) | request-response (form → mutation) | `apps/pwa/src/components/CredentialSheet.tsx` + `ResetPasswordSheet` (in `AdminPage.tsx`) | exact |
|
||||
| `apps/api/src/routes/admin.ts` — new `PATCH /members/:id` (NEW route, MODIFIED file) | route (member-profile update) | CRUD (update) | `admin.ts` `POST /members/:id/password` (`:225`) + last-admin count in `auth/user.ts:151` | exact |
|
||||
| `apps/pwa/src/routes/AdminPage.tsx` (MODIFIED) | route/page (MemberRow + triggers) | request-response | `ListCard.tsx` (tappable row + ChevronRight) + existing `MemberRow` (`:1151`) | exact |
|
||||
| `apps/pwa/src/api/client.ts` (MODIFIED) | api client (type + fetcher) | request-response | `fetchAdminResetPassword` (`:218`) / `fetchCreateMember` (`:184`) | exact |
|
||||
| `apps/api/src/routes/admin.ts` — `GET /members` adds `isAdmin` (MODIFIED) | route | CRUD (read) | `admin.ts` `GET /members` (`:102`) | exact (same handler) |
|
||||
|
||||
---
|
||||
|
||||
## Pattern Assignments
|
||||
|
||||
### `apps/pwa/src/components/MemberEditorSheet.tsx` (component, dialog/sheet)
|
||||
|
||||
**Primary analog:** `apps/pwa/src/components/CredentialSheet.tsx`
|
||||
**Secondary analog:** `ResetPasswordSheet` inside `apps/pwa/src/routes/AdminPage.tsx:1391` (password+confirm+mismatch logic to fold into the "Set new password" section per D-06).
|
||||
|
||||
This is the central new file. Copy the **entire dialog scaffold** from CredentialSheet, then compose the three edit-mode sections (Profile / Set new password / App password) + the create-mode form from existing field/mutation snippets.
|
||||
|
||||
**Imports pattern** (`CredentialSheet.tsx:25-35`):
|
||||
```typescript
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import {
|
||||
saveCredential,
|
||||
type SaveCredentialPayload,
|
||||
} from '../api/client.js';
|
||||
import { useIsPhone } from '../hooks/useIsPhone.js';
|
||||
import { useFocusTrap } from '../hooks/useFocusTrap.js';
|
||||
```
|
||||
For Phase 20 also import the new `updateMemberProfile` fetcher + existing `fetchAdminResetPassword`, and add `ChevronRight`/`Plus` are NOT needed here (those go in AdminPage).
|
||||
|
||||
**`mode` prop pattern** — model the create/edit discriminator on `CredentialSheetMode` (`CredentialSheet.tsx:37`). UI-SPEC §Surface B wants a single `mode: 'edit' | 'create'` prop (id present = edit). Mirror the `headingFor(mode)` switch (`CredentialSheet.tsx:54-58`) for "Edit member" / "Add member" copy.
|
||||
|
||||
**Dialog scaffold — copy verbatim** (`CredentialSheet.tsx`):
|
||||
- `useFocusTrap(dialogRef)` wiring (`:88-89`) + `onKeyDown={handleDialogKeyDown}` on the dialog div (`:186`)
|
||||
- `handleClose` via `useCallback` that clears form state, calls `onClose()`, and returns focus to `triggerRef.current` (`:94-103`)
|
||||
- Escape-to-close effect (`:106-115`)
|
||||
- Focus-heading-on-open effect (`:118-122`)
|
||||
- Backdrop div (`:169-178`) — note UI-SPEC §Surface B wants `rgba(0,0,0,0.32)` / `--color-overlay`, which matches `ResetPasswordSheet:1459` (`var(--color-overlay, rgba(0,0,0,0.32))`), NOT CredentialSheet's `rgba(0,0,0,0.4)`. Prefer the ResetPasswordSheet overlay token.
|
||||
- Phone-vs-desktop sheet style object (`:187-217`) — copy exactly (borderRadius `12px 12px 0 0` phone / `12px` desktop, `maxWidth 480px`, zIndex 301, `padding var(--space-6)`, desktop `maxHeight: calc(100dvh - var(--space-8)); overflowY: auto`)
|
||||
- `h2 ref={headingRef} tabIndex={-1}` heading (`:220-233`)
|
||||
- Member subtitle block (`:236-247`) — edit mode only
|
||||
|
||||
**Section divider** (UI-SPEC §Surface B): `border-top: 1px solid var(--color-border-subtle)`, `margin: var(--space-6) 0`. Section headings reuse `sectionLabelStyle` from `AdminPage.tsx:46-53` (13px/600/uppercase/`--color-text-muted`) — UI-SPEC Accessibility note says use `<div>` not `<h3>` to avoid heading-hierarchy issues under the `<h2>`.
|
||||
|
||||
**Text input field pattern** (`CredentialSheet.tsx:250-283` email field; `AdminPage.tsx:477-495` display-name field) — label (13px/600) + input (`min-height 44px`, `border-radius var(--space-1)`, `padding var(--space-3) var(--space-4)`, `border` flips to `--color-destructive` on error).
|
||||
|
||||
**Password section (Section 2)** — copy `ResetPasswordSheet`'s new-password + confirm fields and mismatch logic:
|
||||
```typescript
|
||||
// AdminPage.tsx:1426-1443 — mutation with client-side mismatch guard
|
||||
const resetMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (newPassword !== confirmPassword) throw new Error('mismatch');
|
||||
await fetchAdminResetPassword(member.id, newPassword);
|
||||
},
|
||||
onSuccess: () => { handleClose(); onSuccess?.(); },
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'server';
|
||||
if (msg === 'mismatch') setError('Passwords do not match.');
|
||||
else setError('Something went wrong. Please try again.');
|
||||
},
|
||||
});
|
||||
```
|
||||
UI-SPEC adds a `< 8 chars` guard ("Password must be at least 8 characters.") — mirror the create-member length check at `AdminPage.tsx:267-269`. Fields use `autoComplete="new-password"`, never prefilled (T-10-15/16). **Per-section** save (not handleClose-on-success) — Section 2 success keeps the sheet open and fires toast "Password updated." Only render this section when `member.hasLocalCredential === true`.
|
||||
|
||||
**App-password section (Section 3)** — copy CredentialSheet's email + password fields (`:249-320`), the "Validating against CalDAV…" `Loader2` inline state (`:337-345`), the helper link to Fastmail device tokens (`:351-362`), and the FAILURE_TEXT copy (`:65-66`). The mutation maps to `saveCredential` (`:124-153`) — admin mode requires `userId: memberId`. Prefill `fastmailEmail` read-only convenience in edit mode (Claude's-discretion D — the stored `fastmailEmail` exists on `memberCredentials.fastmail_email`, but is NOT currently returned by `GET /members`; the password field is never prefilled).
|
||||
|
||||
**Create-mode form (single form, no dividers)** — copy the four fields + mutation from `AdminPage.tsx:260-306` (`createMemberMutation`): display name / username / initial password / confirm. Maps to `fetchCreateMember` (`client.ts:184`). Reuse the exact error mapping (`mismatch` / `short` / `conflict` → "That username is already in use.").
|
||||
|
||||
**Per-section Save button** (`CredentialSheet.tsx:397-419`): accent `--color-member-0` background when enabled, `--color-border` when disabled, white text, `min-height 44px`, `border-radius var(--space-1)`, inline `Loader2 size={14}` while pending (pattern at `AdminPage.tsx:651-657`).
|
||||
|
||||
**Cancel button** (`CredentialSheet.tsx:375-395`): no background, `--color-text-secondary`, `min-height 44px`.
|
||||
|
||||
---
|
||||
|
||||
### `apps/api/src/routes/admin.ts` — NEW `PATCH /members/:id` (route, CRUD update)
|
||||
|
||||
**Primary analog:** `POST /members/:id/password` (`admin.ts:225-269`) — same `:id` param shape, same `requireAdmin` boundary, same noEchoHook posture, same existence-check-then-update flow.
|
||||
**Secondary analog:** the admin-count query in `auth/user.ts:151-156` — reuse for the D-03 last-admin guard.
|
||||
|
||||
**Route handler shape — copy** (`admin.ts:225-269`):
|
||||
```typescript
|
||||
const updateMemberSchema = z.object({
|
||||
displayName: z.string().min(1).max(256).optional(),
|
||||
isAdmin: z.boolean().optional(),
|
||||
});
|
||||
|
||||
adminRouter.patch(
|
||||
'/members/:id',
|
||||
zValidator('json', updateMemberSchema, noEchoHook),
|
||||
async (c) => {
|
||||
const targetId = parsePositiveIntParam(c.req.param('id')); // :87
|
||||
if (targetId === null) return c.json({ error: 'Invalid member id' }, 400);
|
||||
const { displayName, isAdmin } = c.req.valid('json');
|
||||
// ... existence check + last-admin guard + update
|
||||
},
|
||||
);
|
||||
```
|
||||
- `parsePositiveIntParam` already exists (`admin.ts:87-92`) — reuse, do NOT re-implement.
|
||||
- `requireAdmin` is already mounted router-wide (`admin.ts:47`) — the new route inherits it automatically; **no new boundary** (D-02).
|
||||
- `noEchoHook` (`admin.ts:75-79`) — apply even though no password is in this body, for consistency with the other admin write routes.
|
||||
|
||||
**Last-admin guard (D-03) — adapt from `auth/user.ts:151-156`:**
|
||||
```typescript
|
||||
// Count remaining admins; reject demotion of the only admin.
|
||||
const [{ count }] = await db
|
||||
.select({ count: sql<number>`COUNT(*)` })
|
||||
.from(users)
|
||||
.where(eq(users.isAdmin, true))
|
||||
.limit(1);
|
||||
```
|
||||
When `isAdmin === false` is requested for a target that is currently an admin AND `Number(count) <= 1`, return 409 (or 422) `{ error: ... }`. UI-SPEC client maps this to "Cannot remove admin — at least one admin must remain." Note: `sql` and `eq` are already imported (`admin.ts:28`).
|
||||
|
||||
**Update + error handling** — mirror the try/catch + 503 fallback of the password route (`admin.ts:249-268`). Build a partial `set({ ... })` from whichever of `displayName` / `isAdmin` is present. Verify the target user exists (404 if not), matching the password route's `if (!credRow) return 404` shape (`:245`).
|
||||
|
||||
**Verb choice (Claude's discretion, D-02):** Hono supports `adminRouter.patch(...)`. The repo's existing admin writes use `POST` (`/members`, `/credentials`) and `PUT` (`/calendars/:id/shared`, `/config/timezone`); a `PATCH` for partial member update is idiomatic and consistent with REST, but `POST /members/:id` is equally acceptable — planner's call.
|
||||
|
||||
---
|
||||
|
||||
### `apps/api/src/routes/admin.ts` — `GET /members` adds `isAdmin` (route, CRUD read)
|
||||
|
||||
**Analog:** the existing handler itself (`admin.ts:102-124`). Add `isAdmin` to the select and the mapped object:
|
||||
```typescript
|
||||
.select({
|
||||
id: users.id,
|
||||
displayName: users.displayName,
|
||||
color: users.color,
|
||||
isAdmin: users.isAdmin, // NEW — feeds the editor toggle initial state (D-02)
|
||||
credentialId: memberCredentials.id,
|
||||
localCredId: localCredentials.id,
|
||||
})
|
||||
// ...
|
||||
const members = rows.map((row) => ({
|
||||
id: row.id,
|
||||
displayName: row.displayName,
|
||||
color: row.color,
|
||||
isAdmin: row.isAdmin, // NEW
|
||||
hasCredential: row.credentialId !== null,
|
||||
hasLocalCredential: row.localCredId !== null,
|
||||
}));
|
||||
```
|
||||
`users.isAdmin` already exists in the schema (`db/schema.ts:56`, `boolean('is_admin')`). No join change needed — it's a column on the base `users` table already in the FROM.
|
||||
|
||||
---
|
||||
|
||||
### `apps/pwa/src/api/client.ts` (api client — type + fetcher)
|
||||
|
||||
**Analog for the type:** `AdminMember` interface (`client.ts:563-569`). Add `isAdmin: boolean`:
|
||||
```typescript
|
||||
export interface AdminMember {
|
||||
id: number;
|
||||
displayName: string | null;
|
||||
color: string;
|
||||
isAdmin: boolean; // NEW — Phase 20 (drives editor admin toggle initial state)
|
||||
hasCredential: boolean;
|
||||
hasLocalCredential: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
**Analog for the new fetcher:** `fetchAdminResetPassword` (`client.ts:218-234`) — same `:id` path, same POST/PATCH-with-json shape, same error handling. New `updateMemberProfile`:
|
||||
```typescript
|
||||
export async function updateMemberProfile(
|
||||
memberId: number,
|
||||
body: { displayName?: string; isAdmin?: boolean },
|
||||
): Promise<void> {
|
||||
const res = await fetch(`/api/admin/members/${memberId}`, {
|
||||
method: 'PATCH', // match the chosen route verb
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
redirect: 'manual',
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (res.type === 'opaqueredirect' || res.status === 401) throw new SessionExpiredError();
|
||||
if (res.status === 409 || res.status === 422) throw new Error('last-admin'); // D-03 guard
|
||||
if (!res.ok) throw new Error(`updateMemberProfile failed: ${res.status}`);
|
||||
}
|
||||
```
|
||||
The `SessionExpiredError` + `handleAuthResponse` conventions are already in this file (used by every fetcher). Map the last-admin 409/422 to a sentinel the editor's onError can branch on (mirrors the `conflict` sentinel pattern at `client.ts:206`).
|
||||
|
||||
---
|
||||
|
||||
### `apps/pwa/src/routes/AdminPage.tsx` (route/page — MemberRow rework + triggers)
|
||||
|
||||
**MemberRow → tappable row analog:** `apps/pwa/src/components/ListCard.tsx` — a whole-row `<button>`/tappable surface with a trailing `ChevronRight`.
|
||||
|
||||
**ChevronRight affordance — copy** (`ListCard.tsx:139-144`):
|
||||
```typescript
|
||||
<ChevronRight
|
||||
size={16}
|
||||
color="var(--color-text-muted)"
|
||||
aria-hidden="true"
|
||||
style={{ flexShrink: 0, marginLeft: 'var(--space-2)' }}
|
||||
/>
|
||||
```
|
||||
Import: `import { ChevronRight, Plus } from 'lucide-react';` (both already used elsewhere — `ListCard.tsx:21`, `ListsIndex.tsx:24`).
|
||||
|
||||
**Row interaction (UI-SPEC §Surface A):** make the row `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, `cursor: pointer`, Enter/Space opens the editor. The existing `CalendarRadioRow` (`AdminPage.tsx:1298-1318`) is a good in-file template for the `role` + `onKeyDown` Enter/Space handler:
|
||||
```typescript
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(); }
|
||||
}}
|
||||
```
|
||||
|
||||
**Keep** the avatar swatch (`AdminPage.tsx:1167-1176`, `var(--color-member-${colorIndex})`) and the credential status badge (`:1193-1235`, CheckCircle/AlertCircle "Credential set" / "No credential"). **Remove** the entire action-button cluster (`:1238-1285`: "Rotate"/"Add credential" + "Reset password").
|
||||
|
||||
**New Admin badge (UI-SPEC §Surface A):** when `member.isAdmin`, render an inline "Admin" pill (12px/600, `--color-member-0` text on `--color-surface-dim`, `border-radius 4px`, `padding 2px 6px`) — same shape as the "Shared" badge in `ListCard.tsx:124-133`.
|
||||
|
||||
**"Add member" trigger button (UI-SPEC §Surface A):** ghost button with `<Plus size={16}>` prefix, `1px solid var(--color-border)`, `border-radius 8px`, `padding var(--space-3) var(--space-4)`, `min-height 44px`, `--color-surface` bg / `--color-surface-dim` hover. The `Plus`-prefixed button pattern is at `CalendarShell.tsx:451-456`.
|
||||
|
||||
**Sheet wiring & state** — replace the dual `CredentialSheet` + `ResetPasswordSheet` mounting (`AdminPage.tsx:1111-1137`) with a single `MemberEditorSheet`. Reuse the existing `triggerRef` capture pattern (`:252-258`, `openSheet`) so focus returns to the tapped row on close. Add an `addMemberTriggerRef` for the create-mode trigger (focus returns there on cancel, per UI-SPEC Interaction Contract).
|
||||
|
||||
**Remove from this file:** the entire inline Add-member form (`:443-662`, the "Local Accounts" section body), the `ResetPasswordSheet` component definition (`:1375-1677`), and all create-form local state (`createDisplayName` … `createError`, `:94-98`) — these move into `MemberEditorSheet`.
|
||||
|
||||
---
|
||||
|
||||
## Shared Patterns
|
||||
|
||||
### TanStack Query mutation + invalidation
|
||||
**Source:** `CredentialSheet.tsx:124-153` and `AdminPage.tsx` mutations.
|
||||
**Apply to:** every per-section save in `MemberEditorSheet`.
|
||||
```typescript
|
||||
const m = useMutation({
|
||||
mutationFn: async () => { /* call client fetcher */ },
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||
void queryClient.invalidateQueries({ queryKey: ['me'] }); // credential/app-password changes only
|
||||
showToast('…'); // per-section toast; sheet STAYS open (per-section save model, D-05)
|
||||
},
|
||||
onError: (err) => { /* map sentinel → inline error string */ },
|
||||
});
|
||||
```
|
||||
Profile/password saves invalidate only `['admin','members']`; app-password save also invalidates `['me']` (needsProviderSetup refresh — `CredentialSheet.tsx:146-147`).
|
||||
|
||||
### Success toast (D-08)
|
||||
**Source:** `AdminPage.tsx:66-76` (`showToast` + auto-dismiss effect) and the toast JSX (`:1068-1109`).
|
||||
**Apply to:** all editor saves. Keep `showToast` in `AdminPage` and pass an `onToast`/`onSuccess` callback into `MemberEditorSheet` (the way `ResetPasswordSheet` receives `onSuccess` at `AdminPage.tsx:1134`), OR lift the toast into the sheet — planner's call. Toast copy per UI-SPEC: "Profile saved." / "Password updated." / "App password saved." / "Member added."
|
||||
|
||||
### Write-only password handling (T-10-15 / T-10-16)
|
||||
**Source:** `CredentialSheet.tsx:299-319` (app password), `AdminPage.tsx:1544-1563` (reset password).
|
||||
**Apply to:** every password/app-password field in the editor. Never prefill, `autoComplete="new-password"`, never log, blank = unchanged (D-05).
|
||||
|
||||
### Server admin boundary (no new boundary — D-02)
|
||||
**Source:** `apps/api/src/lib/requireAdmin.ts` + `admin.ts:47` (`adminRouter.use('*', requireAdmin)`).
|
||||
**Apply to:** the new `PATCH /members/:id` — it inherits the router-wide guard automatically. Do not add a second guard.
|
||||
|
||||
### noEchoHook for admin write routes
|
||||
**Source:** `admin.ts:75-79`.
|
||||
**Apply to:** the new member-profile route's `zValidator`.
|
||||
|
||||
---
|
||||
|
||||
## No Analog Found
|
||||
|
||||
None. Every new file and route has a direct, recent in-repo analog. The only genuinely new logic is the **D-03 last-admin guard**, and even that adapts the existing admin-count query from `apps/api/src/auth/user.ts:151-156`.
|
||||
|
||||
---
|
||||
|
||||
## Metadata
|
||||
|
||||
**Analog search scope:** `apps/pwa/src/components/`, `apps/pwa/src/routes/`, `apps/pwa/src/api/`, `apps/pwa/src/hooks/`, `apps/api/src/routes/`, `apps/api/src/lib/`, `apps/api/src/auth/`, `apps/api/src/db/`
|
||||
**Files scanned:** ~12
|
||||
**Pattern extraction date:** 2026-06-18
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
fixed_at: 2026-06-18T14:45:00Z
|
||||
source_review: 20-REVIEW.md
|
||||
fix_scope: all
|
||||
findings_in_scope: 11
|
||||
fixed: 11
|
||||
skipped: 0
|
||||
iteration: 2
|
||||
status: all_fixed
|
||||
gates:
|
||||
typecheck: pass
|
||||
eslint: pass
|
||||
prettier: pass
|
||||
api_tests: 462/462
|
||||
---
|
||||
|
||||
# Phase 20 — Code Review Fix Report
|
||||
|
||||
Auto-fix pass over the deep review (`20-REVIEW.md`, 2 critical / 6 warning / 3 info).
|
||||
All 11 findings fixed and committed atomically; a deep re-review (iteration 2)
|
||||
independently confirmed 0 critical / 0 warning remain.
|
||||
|
||||
> Note: this report was reconstructed by the orchestrator — the fixer agent applied
|
||||
> and committed every fix but its `REVIEW-FIX.md` write did not persist. The commit
|
||||
> hashes below are the source of truth.
|
||||
|
||||
## Fixes applied
|
||||
|
||||
| ID | Severity | Fix | Commit |
|
||||
|----|----------|-----|--------|
|
||||
| CR-01 | Critical | Last-admin guard made atomic — single conditional UPDATE / `affectedRows` check closes the TOCTOU window; 409 response shape unchanged | `7297733` |
|
||||
| WR-06 | Warning | Empty `{}` PATCH body now rejected with a clean 400 via Zod refinement (was a Drizzle 503 on empty SET); new test added | `7297733` |
|
||||
| CR-02 | Critical | `AdminPage` derives the editor's member from live query data and refetches/invalidates after a save — no stale-snapshot demotion overwrite | `ee04aee` |
|
||||
| WR-01 | Warning | Toggle-only saves no longer re-send `displayName`, so admin-toggle saves don't 400 for OIDC-provisioned members with a null/empty stored name | `527d855` |
|
||||
| WR-02 | Warning | 409 revert uses the actual prior toggle state instead of defaulting to `true` | `527d855` |
|
||||
| WR-04 | Warning | `handleClose` closure fixed — Cancel after a per-section save no longer reverts to pre-save values | `527d855` |
|
||||
| WR-03 | Warning | Phone bottom-sheet gains `maxHeight` + `overflowY: auto` so the action button is reachable on short phones | `2fd253e` |
|
||||
| IN-03 | Info | Phone sheet adds `env(safe-area-inset-bottom)` padding (iOS home indicator) | `2fd253e` |
|
||||
| WR-05 | Warning | Admin toggle gains `aria-describedby` linking to the last-admin error region | `d2e9862` |
|
||||
| IN-01 | Info | Helper text shown when display name is empty | `400733f` |
|
||||
| IN-02 | Info | `maxLength` added to display-name and username inputs | `182ba1d` |
|
||||
|
||||
(`41a4fae` — prettier formatting of the updated `admin.test.ts`.)
|
||||
|
||||
## Verification
|
||||
|
||||
- `pnpm -r typecheck` — pass (API + PWA)
|
||||
- ESLint — 0 warnings
|
||||
- Prettier — clean
|
||||
- API integration tests — **462/462** (includes a new Test H asserting empty-body PATCH → 400)
|
||||
|
||||
## Introduced during fixes (caught by iteration-2 re-review)
|
||||
|
||||
- **IN-04 (Info, resolved):** The no-op profile-save path (`mutationFn` returns early on an
|
||||
empty payload) triggered `onSuccess`, firing the "Profile saved." toast and refetching the
|
||||
`['admin','members']` query even when nothing changed. Fixed in `5161bd3` — `mutationFn`
|
||||
now returns a `changed` flag and `onSuccess` skips the toast/refetch when no write occurred.
|
||||
Typecheck/eslint/prettier all pass.
|
||||
@@ -0,0 +1,457 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
reviewed: 2026-06-18T12:00:00Z
|
||||
depth: deep
|
||||
files_reviewed: 5
|
||||
files_reviewed_list:
|
||||
- apps/api/src/routes/admin.ts
|
||||
- apps/api/tests/routes/admin.test.ts
|
||||
- apps/pwa/src/api/client.ts
|
||||
- apps/pwa/src/components/MemberEditorSheet.tsx
|
||||
- apps/pwa/src/routes/AdminPage.tsx
|
||||
findings:
|
||||
critical: 2
|
||||
warning: 6
|
||||
info: 3
|
||||
total: 11
|
||||
status: issues_found
|
||||
---
|
||||
|
||||
# Phase 20: Code Review Report (Deep Re-Review)
|
||||
|
||||
**Reviewed:** 2026-06-18
|
||||
**Depth:** deep (cross-file, call-chain, state-machine analysis)
|
||||
**Files Reviewed:** 5
|
||||
**Status:** issues_found
|
||||
|
||||
## Summary
|
||||
|
||||
Phase 20 adds `PATCH /api/admin/members/:id` (displayName + isAdmin update), a unified
|
||||
`MemberEditorSheet` (edit/create modes), and a decluttered `AdminPage` member list. The
|
||||
authorization boundary (`requireAdmin` first on the router, live DB lookup every request) is
|
||||
sound and correctly inherited by all new routes. Password write-only discipline is preserved
|
||||
across the PATCH→client→sheet→AdminPage chain. The credential echo-protection pattern and the
|
||||
`noEchoHook` usage are consistent and correct.
|
||||
|
||||
This deep pass confirms all nine findings from the prior standard review (re-verified against the
|
||||
current code — none have been remediated). Two are re-classified: CR-01 (TOCTOU) remains
|
||||
Critical; the newly-discovered CR-02 (admin-demotion race via stale-member prop) joins it. WR-04
|
||||
is materially worse in the deep view — the stale `editorMember` is never updated from query data,
|
||||
making the Reset-to-pre-save regression reproducible on every session where a save is followed by
|
||||
Cancel. Two new issues are also added: WR-06 (profileMutation unconditionally sends displayName,
|
||||
blocking admin toggle on null-displayName members) and WR-07 (no-op {} PATCH crashes Drizzle
|
||||
with a 503 instead of a proper 400).
|
||||
|
||||
---
|
||||
|
||||
## Critical Issues
|
||||
|
||||
### CR-01: Last-admin demotion guard is a non-atomic TOCTOU race
|
||||
|
||||
**File:** `apps/api/src/routes/admin.ts:251-267`
|
||||
|
||||
**Issue:** The D-03 last-admin guard issues a `SELECT COUNT(*) WHERE is_admin=true` and only
|
||||
if the count is >1 proceeds to `UPDATE`. The SELECT and the UPDATE are not in a transaction.
|
||||
Two concurrent PATCH requests demoting the two existing admins both read `count=2`, both pass
|
||||
the guard, and both updates commit — leaving the household with zero admins. MariaDB's default
|
||||
InnoDB READ COMMITTED isolation does not prevent this: a phantom read between the COUNT and the
|
||||
UPDATE is possible even in REPEATABLE READ unless a locking read (`FOR UPDATE`/`FOR SHARE`) is
|
||||
used. The test suite (Test C and Test D) exercises the single-request path only; no concurrent
|
||||
scenario is tested.
|
||||
|
||||
```
|
||||
Thread 1: SELECT COUNT(*) WHERE is_admin=true → 2 → passes guard
|
||||
Thread 2: SELECT COUNT(*) WHERE is_admin=true → 2 → passes guard
|
||||
Thread 1: UPDATE users SET is_admin=false WHERE id=1 → ok
|
||||
Thread 2: UPDATE users SET is_admin=false WHERE id=2 → ok (now 0 admins)
|
||||
```
|
||||
|
||||
**Fix:** Wrap the full guard-plus-update in a transaction and use a locking read:
|
||||
|
||||
```typescript
|
||||
await db.transaction(async (tx) => {
|
||||
const [target] = await tx
|
||||
.select({ id: users.id, isAdmin: users.isAdmin })
|
||||
.from(users)
|
||||
.where(eq(users.id, targetId))
|
||||
.limit(1);
|
||||
if (!target) throw new Error('not-found');
|
||||
|
||||
if (isAdmin === false && target.isAdmin) {
|
||||
// Lock all admin rows before counting so concurrent demotions block each other
|
||||
const [{ count }] = await tx
|
||||
.select({ count: sql<number>`COUNT(*)` })
|
||||
.from(users)
|
||||
.where(eq(users.isAdmin, true));
|
||||
// Note: add `.for('update')` when Drizzle exposes it, or use raw sql suffix
|
||||
if (Number(count) <= 1) throw new Error('last-admin');
|
||||
}
|
||||
|
||||
const updates: { displayName?: string; isAdmin?: boolean } = {};
|
||||
if (displayName !== undefined) updates.displayName = displayName;
|
||||
if (isAdmin !== undefined) updates.isAdmin = isAdmin;
|
||||
await tx.update(users).set(updates).where(eq(users.id, targetId));
|
||||
});
|
||||
```
|
||||
|
||||
Alternatively, replace the SELECT/UPDATE pair with a single atomic conditional UPDATE and check
|
||||
`affectedRows`:
|
||||
|
||||
```sql
|
||||
UPDATE users
|
||||
SET is_admin = false
|
||||
WHERE id = :targetId
|
||||
AND (SELECT COUNT(*) FROM users u2 WHERE u2.is_admin = true) > 1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### CR-02: Stale `editorMember` in AdminPage means per-section save can silently overwrite a concurrent admin change
|
||||
|
||||
**File:** `apps/pwa/src/routes/AdminPage.tsx:83,243` / `apps/pwa/src/components/MemberEditorSheet.tsx:262-265`
|
||||
|
||||
**Issue:** `editorMember` is set once when the user taps a row (`openEditorForMember` at line 243)
|
||||
and is never refreshed from query data. `MemberEditorSheet` receives this as `member` and
|
||||
`profileMutation.mutationFn` (line 262-265) unconditionally sends both `displayName` and
|
||||
`isAdmin`:
|
||||
|
||||
```typescript
|
||||
await updateMemberProfile(member.id, {
|
||||
displayName: displayName.trim(),
|
||||
isAdmin, // ← always the value at sheet-open time, not query-refreshed
|
||||
});
|
||||
```
|
||||
|
||||
Scenario: Admin A opens the editor for Member X (isAdmin=false). Admin B (in another session)
|
||||
concurrently promotes Member X to admin. The server query cache eventually refetches and
|
||||
`membersQuery.data` shows `isAdmin=true`. But `editorMember` in AdminPage is still the stale
|
||||
object (`isAdmin=false`). Admin A's sheet still shows the toggle in the "off" position (because
|
||||
`useEffect` at line 234 re-syncs on `member?.isAdmin` change, but the `member` prop itself is
|
||||
never updated from the fresh query data — `editorMember` is the source and it never changes).
|
||||
Admin A clicks Save without touching the toggle → `isAdmin: false` is sent → Member X is silently
|
||||
demoted back to non-admin. No warning is shown. The profile-save toast reads "Profile saved."
|
||||
|
||||
This is the cross-file manifestation of WR-04 (stale closure) compounded by the fact that
|
||||
`editorMember` is never derived from `membersQuery.data`.
|
||||
|
||||
**Fix:** Derive the member prop from the live query data instead of holding a stale copy:
|
||||
|
||||
```typescript
|
||||
// In AdminPage:
|
||||
const editorMember = editorMemberId !== null
|
||||
? (membersQuery.data?.members.find((m) => m.id === editorMemberId) ?? null)
|
||||
: null;
|
||||
```
|
||||
|
||||
Replace `setEditorMember(member)` with `setEditorMemberId(member.id)`. This way, whenever
|
||||
`membersQuery.data` updates (e.g., after a save + invalidation), the derived `editorMember` is
|
||||
always fresh. The existing `useEffect` in `MemberEditorSheet` (line 234) already reacts to
|
||||
`member?.isAdmin` and `member?.displayName` changes, so the form state stays in sync
|
||||
automatically.
|
||||
|
||||
---
|
||||
|
||||
## Warnings
|
||||
|
||||
### WR-01: Profile save always sends `displayName` even when only `isAdmin` changed; blocks admin toggle for null-displayName members
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:262-265, 568`
|
||||
|
||||
**Issue:** `profileMutation.mutationFn` always sends `{ displayName: displayName.trim(), isAdmin }`.
|
||||
Two distinct problems follow:
|
||||
|
||||
1. **Partial-update miss.** Every profile save re-writes the displayName even when the admin only
|
||||
toggled the admin flag. This doubles the blast radius of a profile save.
|
||||
|
||||
2. **Toggle blocked on null displayName.** The DB schema (`apps/api/src/db/schema.ts:52`)
|
||||
defines `display_name` as a nullable varchar (no `.notNull()`). An OIDC-provisioned user whose
|
||||
ID token had no `name` claim can have `displayName = null`. The editor initialises `displayName`
|
||||
state to `member?.displayName ?? ''` → `''`. The Save button is disabled when
|
||||
`displayName.trim().length === 0` (line 568), so the admin cannot toggle the admin flag for
|
||||
this member at all — the Save button remains permanently disabled with no explanatory copy.
|
||||
There is no empty-state message telling the admin they must add a name first.
|
||||
|
||||
**Fix — option A (preferred):** Send only changed fields:
|
||||
|
||||
```typescript
|
||||
mutationFn: async () => {
|
||||
if (!member) throw new Error('no-member');
|
||||
const payload: { displayName?: string; isAdmin?: boolean } = {};
|
||||
if (displayName.trim() !== (member.displayName ?? '')) {
|
||||
if (displayName.trim().length === 0) throw new Error('name-required');
|
||||
payload.displayName = displayName.trim();
|
||||
}
|
||||
if (isAdmin !== member.isAdmin) payload.isAdmin = isAdmin;
|
||||
if (Object.keys(payload).length === 0) return; // no-op guard
|
||||
await updateMemberProfile(member.id, payload);
|
||||
},
|
||||
```
|
||||
|
||||
**Fix — option B (minimal):** Add an inline note when displayName is empty to explain why Save is
|
||||
disabled:
|
||||
|
||||
```tsx
|
||||
{displayName.trim().length === 0 && (
|
||||
<div style={inlineErrorStyle}>A display name is required before saving.</div>
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### WR-02: D-03 error revert uses `member?.isAdmin ?? true` — wrong default direction
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:276`
|
||||
|
||||
**Issue:** When the server returns 409 (last-admin guard), `onError` reverts the toggle with:
|
||||
|
||||
```typescript
|
||||
setIsAdmin(member?.isAdmin ?? true);
|
||||
```
|
||||
|
||||
The `?? true` default is semantically wrong. The guard fires only when the admin tries to
|
||||
demote the last admin, meaning the correct revert value is `true` (the member IS admin). However
|
||||
the `?? true` codifies this accidentally — if `member` were ever undefined here for another reason,
|
||||
any future mutation reuse could silently set `isAdmin=true` on an unrelated user. The mutation
|
||||
already guards `if (!member) throw new Error('no-member')` at line 261 so a missing `member` in
|
||||
the 409 path is structurally impossible today. The defect is that the code is correct only by
|
||||
coincidence, and the fallback `true` would be wrong if the same handler were reused to revert any
|
||||
*other* error that legitimately has `member=undefined`.
|
||||
|
||||
**Fix:** Capture the pre-mutation value at call time and carry it through context:
|
||||
|
||||
```typescript
|
||||
const profileMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!member) throw new Error('no-member');
|
||||
await updateMemberProfile(member.id, { displayName: displayName.trim(), isAdmin });
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'server';
|
||||
if (msg === 'last-admin') {
|
||||
// member is guaranteed non-null here (no-member throws before the API call)
|
||||
setIsAdmin(member!.isAdmin); // ← explicit, not ?? true
|
||||
setProfileError('Cannot remove admin — at least one admin must remain.');
|
||||
} else {
|
||||
setProfileError('Something went wrong. Please try again.');
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### WR-03: Phone bottom-sheet lacks `maxHeight`/`overflowY` — action buttons unreachable on short phones
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:379-392`
|
||||
|
||||
**Issue:** The desktop sheet style (lines 399-407) sets `maxHeight: 'calc(100dvh - var(--space-8, 32px))'`
|
||||
and `overflowY: 'auto'`. The phone bottom-sheet style (lines 380-392) has neither. In edit mode
|
||||
with all three sections visible (Profile + Set new password + App password), the content exceeds
|
||||
the viewport height on a 667px-tall iPhone SE. There is no scroll affordance; the "Save app
|
||||
password" button is unreachable without a way to scroll.
|
||||
|
||||
**Fix:**
|
||||
|
||||
```typescript
|
||||
// phone branch of sheetStyle:
|
||||
{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
maxHeight: '90dvh',
|
||||
overflowY: 'auto',
|
||||
background: 'var(--color-surface)',
|
||||
borderRadius: '12px 12px 0 0',
|
||||
boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
|
||||
padding: 'var(--space-6, 24px)',
|
||||
paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))',
|
||||
zIndex: 301,
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}
|
||||
```
|
||||
|
||||
This also resolves IN-03 (missing `env(safe-area-inset-bottom)`) in a single fix.
|
||||
|
||||
---
|
||||
|
||||
### WR-04: `handleClose` useCallback holds stale `member` fields — Cancel after per-section save resets to pre-save values
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:210-231`
|
||||
|
||||
**Issue:** `handleClose` is memoised:
|
||||
|
||||
```typescript
|
||||
const handleClose = useCallback(() => {
|
||||
setDisplayName(member?.displayName ?? ''); // ← captures member at memo creation time
|
||||
setIsAdmin(member?.isAdmin ?? false);
|
||||
...
|
||||
}, [onClose, triggerRef, member?.displayName, member?.isAdmin]);
|
||||
```
|
||||
|
||||
When `profileMutation.onSuccess` fires, it invalidates `['admin','members']`. The query refetches
|
||||
and `membersQuery.data` updates. BUT `editorMember` in `AdminPage` is never derived from
|
||||
`membersQuery.data` (confirmed by inspection — see CR-02). So `member?.displayName` in the
|
||||
dependency array still holds the pre-save value. `handleClose` correctly rebuilds when the dep
|
||||
changes in principle, but since `editorMember` never updates, the dep never changes.
|
||||
|
||||
Concretely: admin saves "New Name" → toast "Profile saved." → clicks Cancel → form resets to
|
||||
"Old Name". The next GET /api/admin/members will show the correct new name in the list row, but
|
||||
the sheet state that Cancel resets to is stale.
|
||||
|
||||
**Fix (preferred, pairs with CR-02 fix):** Once `editorMember` is derived from live query data
|
||||
(CR-02 fix), `member?.displayName` in the dep array will update after a save+refetch, and
|
||||
`handleClose` will capture the refreshed value. Separately, remove the redundant form-field
|
||||
resets from `handleClose` for member-sourced fields and let the existing `useEffect` (line 234)
|
||||
own that state:
|
||||
|
||||
```typescript
|
||||
const handleClose = useCallback(() => {
|
||||
// Only reset ephemeral fields (not member-derived: those belong to useEffect)
|
||||
setProfileError(null);
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setPasswordError(null);
|
||||
setFastmailEmail('');
|
||||
setAppPassword('');
|
||||
setAppPasswordError(null);
|
||||
setCreateDisplayName('');
|
||||
setCreateUsername('');
|
||||
setCreatePassword('');
|
||||
setCreateConfirmPassword('');
|
||||
setCreateError(null);
|
||||
onClose();
|
||||
if (triggerRef?.current) triggerRef.current.focus();
|
||||
}, [onClose, triggerRef]);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### WR-05: Admin toggle missing `aria-describedby` for the last-admin error
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:515-537`
|
||||
|
||||
**Issue:** The display-name input has `aria-describedby={profileError ? 'profile-error' : undefined}`
|
||||
(line 479), correctly linking it to the shared error container at line 557. However the admin
|
||||
toggle button (line 515) has `aria-label="Admin"` but no `aria-describedby`. When the last-admin
|
||||
guard fires, `profileError` is set and the error `<div id="profile-error">` renders below the
|
||||
action buttons — but screen-reader users who activated the toggle have no announcement path from
|
||||
the toggle element to the error message.
|
||||
|
||||
**Fix:**
|
||||
|
||||
```tsx
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={isAdmin}
|
||||
aria-label="Admin"
|
||||
aria-describedby={profileError ? 'profile-error' : undefined}
|
||||
onClick={() => { setProfileError(null); setIsAdmin((prev) => !prev); }}
|
||||
...
|
||||
>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### WR-06: Empty `{}` PATCH body passes Zod but causes Drizzle to throw → returns 503 instead of 400
|
||||
|
||||
**File:** `apps/api/src/routes/admin.ts:225-228, 261-275`
|
||||
|
||||
**Issue:** `updateMemberSchema` marks both fields optional:
|
||||
|
||||
```typescript
|
||||
const updateMemberSchema = z.object({
|
||||
displayName: z.string().min(1).max(256).optional(),
|
||||
isAdmin: z.boolean().optional(),
|
||||
});
|
||||
```
|
||||
|
||||
A client that sends `{}` passes Zod validation. Inside the handler, the `updates` object remains
|
||||
`{}` (lines 262-264, neither branch fires). `db.update(users).set({}).where(...)` is then called.
|
||||
In Drizzle ORM 0.45.x (mysql dialect) an empty `set({})` produces invalid SQL (`UPDATE users SET
|
||||
WHERE id = ?`) and the mysql2 driver throws a query error. The `catch` block at line 269 returns
|
||||
`503 Service unavailable` rather than a proper `400 Bad Request`. Callers receive an incorrect
|
||||
status that implies a transient server failure rather than a client error.
|
||||
|
||||
The existing client (`updateMemberProfile` in `client.ts`) always sends at least one field, so
|
||||
this path is unreachable from the UI today. It is reachable via direct API access.
|
||||
|
||||
**Fix:** Add a Zod refinement or an explicit pre-flight check:
|
||||
|
||||
```typescript
|
||||
const updateMemberSchema = z.object({
|
||||
displayName: z.string().min(1).max(256).optional(),
|
||||
isAdmin: z.boolean().optional(),
|
||||
}).refine(
|
||||
(data) => data.displayName !== undefined || data.isAdmin !== undefined,
|
||||
{ message: 'At least one field must be provided' },
|
||||
);
|
||||
```
|
||||
|
||||
This returns a 400 through the existing `noEchoHook` before the handler body runs.
|
||||
|
||||
---
|
||||
|
||||
## Info
|
||||
|
||||
### IN-01: Profile-section "Save" in edit mode blocks admin-toggle saves when member has no Fastmail credential
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:567-575`
|
||||
|
||||
**Issue:** The Save button for Section 1 (Profile) is disabled when `displayName.trim().length === 0`.
|
||||
This is correct as a client-side guard, but there is no visible copy explaining *why* Save is
|
||||
disabled when the member's display name is null (a valid DB state for OIDC-provisioned users with
|
||||
no name claim). The button is greyed out and inert with no tooltip or inline copy. An admin who
|
||||
taps a member row and sees a greyed Save button for the admin toggle has no indication of what to
|
||||
do.
|
||||
|
||||
**Fix:** Render a short helper line when `displayName.trim().length === 0`:
|
||||
|
||||
```tsx
|
||||
{displayName.trim().length === 0 && (
|
||||
<p style={helperTextStyle}>Enter a display name to enable Save.</p>
|
||||
)}
|
||||
```
|
||||
|
||||
### IN-02: Display-name inputs lack `maxLength` — long entries get a generic server-side 400
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:474-481, 793-799`
|
||||
|
||||
**Issue:** Both the edit-mode display-name input (line 476) and the create-mode display-name input
|
||||
(line 795) have no `maxLength` attribute. The server schema enforces `max(256)` via Zod, but a
|
||||
client submission exceeding 256 characters returns a generic 400 (the `noEchoHook` maps all Zod
|
||||
failures to `{ error: 'Invalid request' }`) with no user-visible copy explaining the length limit.
|
||||
The edit-mode username input in create mode (line 805) similarly has no `maxLength={128}`.
|
||||
|
||||
**Fix:**
|
||||
|
||||
```tsx
|
||||
<input id="editor-display-name" type="text" maxLength={256} ... />
|
||||
<input id="create-display-name" type="text" maxLength={256} ... />
|
||||
<input id="create-username" type="text" maxLength={128} ... />
|
||||
```
|
||||
|
||||
### IN-03: Phone bottom-sheet does not account for `env(safe-area-inset-bottom)`
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:380-392`
|
||||
|
||||
**Issue:** The phone sheet style uses `bottom: 0` with no `paddingBottom` accounting for the iOS
|
||||
home-indicator / Android gesture-navigation bar. On a notched or edge-to-edge device, the Cancel
|
||||
and Save buttons in Section 1 (the first action row visible on open) may sit behind the system
|
||||
gesture bar. The `AdminPage` scroll container correctly uses
|
||||
`calc(56px + env(safe-area-inset-bottom, 0px))` (line 269) for its fixed tab-bar clearance, but
|
||||
the sheet itself does not.
|
||||
|
||||
**Fix:** Combined with WR-03 (add `maxHeight`/`overflowY` to the phone sheet), add bottom
|
||||
padding:
|
||||
|
||||
```typescript
|
||||
paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))',
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
_Reviewed: 2026-06-18_
|
||||
_Reviewer: Claude Sonnet 4.6 (gsd-code-reviewer, deep pass)_
|
||||
_Depth: deep_
|
||||
@@ -0,0 +1,183 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
reviewed: 2026-06-18T14:30:00Z
|
||||
depth: deep
|
||||
files_reviewed: 5
|
||||
files_reviewed_list:
|
||||
- apps/api/src/routes/admin.ts
|
||||
- apps/api/tests/routes/admin.test.ts
|
||||
- apps/pwa/src/api/client.ts
|
||||
- apps/pwa/src/components/MemberEditorSheet.tsx
|
||||
- apps/pwa/src/routes/AdminPage.tsx
|
||||
findings:
|
||||
critical: 0
|
||||
warning: 0
|
||||
info: 0
|
||||
total: 0
|
||||
status: clean
|
||||
---
|
||||
|
||||
# Phase 20: Code Review Report (Deep Re-Review — Iteration 2)
|
||||
|
||||
**Reviewed:** 2026-06-18
|
||||
**Depth:** deep (cross-file, call-chain, state-machine analysis)
|
||||
**Files Reviewed:** 5
|
||||
**Status:** clean
|
||||
|
||||
## Summary
|
||||
|
||||
All 11 findings from the prior pass (2 Critical, 6 Warning, 3 Info) are genuinely resolved — not superficially patched. Verification traces are below.
|
||||
|
||||
One new Info-level issue was introduced by the no-op guard fix: the "Profile saved." toast fires even when the admin clicks Save without changing anything, because `mutationFn` returns early (no network call) but `onSuccess` still runs unconditionally.
|
||||
|
||||
---
|
||||
|
||||
## Prior Finding Verification
|
||||
|
||||
### CR-01 — Last-admin guard now atomic: RESOLVED
|
||||
|
||||
`apps/api/src/routes/admin.ts:258–286`
|
||||
|
||||
The guard and UPDATE are wrapped in a single `db.transaction()` call. Inside the transaction, the target row is re-read with a plain (non-locking) SELECT. The locking read is then a raw `tx.execute(sql\`SELECT COUNT(*) AS count FROM ... WHERE is_admin = true FOR UPDATE\`)`. Under InnoDB REPEATABLE READ (MariaDB default), `FOR UPDATE` acquires exclusive row locks on all qualifying rows, serialising concurrent demotion transactions: the second PATCH blocks until the first commits, then re-reads a count of 1 and trips the guard.
|
||||
|
||||
The `tx.execute()` call uses the transaction's dedicated connection (confirmed via drizzle-orm 0.45.2 `mysql2/session.js`: the transaction callback receives a `MySql2Transaction` whose session holds the connection obtained by `pool.getConnection()` — the same connection that issued `BEGIN`). The FOR UPDATE lock is therefore in-scope for the transaction.
|
||||
|
||||
The COUNT result is destructured as `[[{ count }]]` from the raw execute result `[RowDataPacket[], FieldPacket[]]`. The cast is correct. `Number(count)` safely handles both `number` and `string` returns from MariaDB.
|
||||
|
||||
The 409 response shape `{ error: 'Cannot remove the last admin' }` is unchanged. The client (`client.ts:262`) maps 409 → `throw new Error('last-admin')`, and the sheet's `onError` checks `msg === 'last-admin'`. The chain is intact.
|
||||
|
||||
Test C and Test D exercise the single-request guard paths and still pass. No concurrent-scenario test exists, but the fix is structurally correct and cannot be unit-tested against a single in-process MariaDB without intentional sleep-based race staging.
|
||||
|
||||
---
|
||||
|
||||
### CR-02 — Stale editorMember: RESOLVED
|
||||
|
||||
`apps/pwa/src/routes/AdminPage.tsx:87, 122–127`
|
||||
|
||||
`AdminPage` now stores only `editorMemberId: number | null` (line 87) and derives `editorMember` as a computed value on every render:
|
||||
|
||||
```typescript
|
||||
const editorMember =
|
||||
editorMemberId !== null
|
||||
? (membersQuery.data?.members.find((m) => m.id === editorMemberId) ?? null)
|
||||
: null;
|
||||
```
|
||||
|
||||
`openEditorForMember` calls `setEditorMemberId(member.id)` (line 254). After `profileMutation.onSuccess` invalidates `['admin', 'members']` and the query refetches, `editorMember` is rederived from fresh data on the next render. The `useEffect` in `MemberEditorSheet` (line 235–239) depends on `[member?.id, member?.displayName, member?.isAdmin]` and re-syncs form state immediately. The stale-snapshot overwrite path is closed.
|
||||
|
||||
---
|
||||
|
||||
### WR-01 — Profile mutation sends diff-only payload: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:261–275`
|
||||
|
||||
`mutationFn` now builds a partial payload: `displayName` is added only when `trimmed !== (member.displayName ?? '')`, and `isAdmin` only when `isAdmin !== member.isAdmin`. An admin toggling only the admin flag on a null-displayName member sends `{ isAdmin: true/false }` with no `displayName` field — the Zod schema accepts this (both optional, refine requires at least one). The Save button remains enabled as long as `displayName.trim().length > 0` (or the existing displayName is non-null and unchanged). Toggle-only saves on null-displayName members are now unblocked.
|
||||
|
||||
---
|
||||
|
||||
### WR-02 — Error revert uses explicit value: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:290`
|
||||
|
||||
`setIsAdmin(member!.isAdmin)` replaces the accidental `?? true` default. The `member!` non-null assertion is safe here: `mutationFn` at line 262 throws `Error('no-member')` before any API call when `member` is undefined, so the 409 error path can only be reached with a non-null `member`. The revert is now semantically explicit.
|
||||
|
||||
---
|
||||
|
||||
### WR-03 — Phone bottom-sheet overflow: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:395–413`
|
||||
|
||||
The phone branch of `sheetStyle` now has `maxHeight: '90dvh'` and `overflowY: 'auto'` (lines 404–405). All three sections scroll within the 90dvh cap on short phones.
|
||||
|
||||
---
|
||||
|
||||
### WR-04 — handleClose stale closure: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:214–232`
|
||||
|
||||
`handleClose` dependency array is now `[onClose, triggerRef]` — it no longer captures `member?.displayName` or `member?.isAdmin`. Only ephemeral fields (password inputs, error states, create-mode fields) are reset in `handleClose`. Member-derived fields (`displayName`, `isAdmin`) are owned exclusively by the `useEffect` at lines 235–239, which fires whenever the live `member` prop changes. Cancel after a successful save now resets to the saved (fresh) values, not the pre-save snapshot.
|
||||
|
||||
---
|
||||
|
||||
### WR-05 — Admin toggle aria-describedby: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:544`
|
||||
|
||||
The admin toggle `<button>` now has `aria-describedby={profileError ? 'profile-error' : undefined}`, linking it to the shared `<div id="profile-error">` error container (line 588). Screen-reader users who activated the toggle receive an announcement path to the last-admin guard error.
|
||||
|
||||
---
|
||||
|
||||
### WR-06 — Empty {} PATCH returns 400: RESOLVED
|
||||
|
||||
`apps/api/src/routes/admin.ts:225–232`
|
||||
|
||||
`updateMemberSchema` now has a `.refine()` that rejects any body where both `displayName` and `isAdmin` are absent. The `noEchoHook` returns `{ error: 'Invalid request' }` 400 before the handler body executes. Drizzle is never called with an empty `set({})`.
|
||||
|
||||
Test H (line 1231–1241 in `admin.test.ts`) asserts this path returns 400 with `{ error: 'Invalid request' }`.
|
||||
|
||||
---
|
||||
|
||||
### IN-01 — Helper text for empty displayName: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:580–584`
|
||||
|
||||
The helper text "Enter a display name to enable Save." renders when `displayName.trim().length === 0 && !profileError`. Admins opening a null-displayName member's editor now see an explanation for why the Save button is disabled.
|
||||
|
||||
---
|
||||
|
||||
### IN-02 — maxLength on display-name and username inputs: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:500, 826, 842`
|
||||
|
||||
All three inputs now have `maxLength`: edit-mode display-name `maxLength={256}` (line 500), create-mode display-name `maxLength={256}` (line 826), create-mode username `maxLength={128}` (line 842). Over-length submissions are prevented at the browser input level.
|
||||
|
||||
---
|
||||
|
||||
### IN-03 — Phone sheet safe-area padding: RESOLVED
|
||||
|
||||
`apps/pwa/src/components/MemberEditorSheet.tsx:411`
|
||||
|
||||
`paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))'` is present in the phone branch, co-located with the `maxHeight`/`overflowY` fix from WR-03.
|
||||
|
||||
---
|
||||
|
||||
## Info
|
||||
|
||||
### IN-01: No-op profile save fires misleading "Profile saved." toast
|
||||
|
||||
**File:** `apps/pwa/src/components/MemberEditorSheet.tsx:274, 277–280`
|
||||
|
||||
**Issue:** When the admin opens the editor and clicks Save without making any changes, `mutationFn` detects an empty payload (`Object.keys(payload).length === 0`) and returns early without calling the API. TanStack Query v5 treats a non-throwing return as a successful mutation and calls `onSuccess`, which fires `invalidateQueries(['admin', 'members'])` and `onToast('Profile saved.')`. The admin sees a confirmation toast for an action that sent nothing. The query also refetches unnecessarily.
|
||||
|
||||
This cannot be reached through the empty-displayName path (Save is disabled then), but it is reachable any time an admin opens a sheet and saves without touching anything.
|
||||
|
||||
**Fix:** Guard the toast and invalidation on whether a payload was actually sent:
|
||||
|
||||
```typescript
|
||||
mutationFn: async () => {
|
||||
if (!member) throw new Error('no-member');
|
||||
const payload: { displayName?: string; isAdmin?: boolean } = {};
|
||||
const trimmed = displayName.trim();
|
||||
if (trimmed !== (member.displayName ?? '')) {
|
||||
if (trimmed.length === 0) throw new Error('name-required');
|
||||
payload.displayName = trimmed;
|
||||
}
|
||||
if (isAdmin !== member.isAdmin) payload.isAdmin = isAdmin;
|
||||
if (Object.keys(payload).length === 0) return { noop: true };
|
||||
await updateMemberProfile(member.id, payload);
|
||||
return { noop: false };
|
||||
},
|
||||
onSuccess: (result) => {
|
||||
if (result?.noop) return; // nothing changed — no toast, no refetch
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||
onToast('Profile saved.');
|
||||
},
|
||||
```
|
||||
|
||||
Alternatively, disable the Save button when `displayName.trim() === (member?.displayName ?? '')` and `isAdmin === member?.isAdmin` (change-detection guard on the button itself).
|
||||
|
||||
---
|
||||
|
||||
_Reviewed: 2026-06-18_
|
||||
_Reviewer: Claude Sonnet 4.6 (gsd-code-reviewer, deep pass — iteration 2)_
|
||||
_Depth: deep_
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
phase: 20
|
||||
slug: admin-member-editor-form-declutter
|
||||
status: verified
|
||||
threats_open: 0
|
||||
asvs_level: 1
|
||||
created: 2026-06-18
|
||||
---
|
||||
|
||||
# Phase 20 — Security
|
||||
|
||||
> Per-phase security contract: threat register, accepted risks, and audit trail.
|
||||
> Result: **SECURED** — 10/10 threats CLOSED. `register_authored_at_plan_time: true` (verify-only; no new-threat scan).
|
||||
|
||||
---
|
||||
|
||||
## Trust Boundaries
|
||||
|
||||
| Boundary | Description | Data Crossing |
|
||||
|----------|-------------|---------------|
|
||||
| client → /api/admin | Untrusted admin-session input crosses into the admin surface; guarded by router-wide `requireAdmin` (`admin.ts:48`). No NEW boundary added by this phase. | Member profile fields, `isAdmin` toggle, app-password credential |
|
||||
| PWA → /api/admin | Client fetch (`updateMemberProfile`, `saveCredential`) calls into the admin surface; server-side `requireAdmin` + last-admin guard are the real boundaries. Client toggle state is non-authoritative. | Same as above; password fields are write-only |
|
||||
|
||||
---
|
||||
|
||||
## Threat Register
|
||||
|
||||
| Threat ID | Category | Component | Disposition | Mitigation | Status |
|
||||
|-----------|----------|-----------|-------------|------------|--------|
|
||||
| T-20-01 | Elevation of Privilege | PATCH /members/:id isAdmin toggle | mitigate | Router-wide `requireAdmin` first statement (`admin.ts:48`); PATCH adds no second/weaker guard (`:234`); 403 test (`admin.test.ts:1180-1190`) | closed |
|
||||
| T-20-02 | Denial of Service (self-lockout) | last-admin demotion | mitigate | Last-admin 409 guard, count+update in txn with `FOR UPDATE` (`admin.ts:271-293`); 409 test (`:1128-1150`), self-demote-with-2nd-admin 200 test (`:1153-1177`) | closed |
|
||||
| T-20-03 | Tampering | malformed :id / wrong-type body | mitigate | `parsePositiveIntParam` rejects bad ids → 400 (`admin.ts:88-93,235`); `updateMemberSchema` + `noEchoHook` reject wrong types → 400 (`:225-234,76`); test F (`:1193-1216`) | closed |
|
||||
| T-20-04 | Information Disclosure | error echo on invalid input | mitigate | `noEchoHook` returns only `{ error: 'Invalid request' }` (`admin.ts:76-80`); request body never logged (`:241,297-300`) | closed |
|
||||
| T-20-05 | Spoofing (stale session) | updateMemberProfile fetch | mitigate | `SessionExpiredError` on 401/opaqueredirect reuses existing re-auth flow (`client.ts:261`); `redirect:'manual'` + `credentials:'include'` (`:254-258`) | closed |
|
||||
| T-20-06 | Elevation of Privilege (client trust) | last-admin sentinel | accept | Server 409 authoritative (`admin.ts:271-293`); client only surfaces `'last-admin'` sentinel (`client.ts:262`). See Accepted Risks Log. | closed |
|
||||
| T-20-07 | Information Disclosure | password / app-password fields | mitigate | Fields write-only: `type=password` + `autoComplete="new-password"`, blank init (`MemberEditorSheet.tsx:188-205,639-882`); no `console.*` logging (0 grep matches) | closed |
|
||||
| T-20-08 | Tampering | CalDAV credential | mitigate | App-password save routes through `saveCredential` → server-side CalDAV validation before store (`MemberEditorSheet.tsx:338`, `admin.ts:373-393`); invalid → failure copy, nothing stored (`:355`) | closed |
|
||||
| T-20-09 | Elevation of Privilege (UI bypass) | admin toggle | mitigate | Toggle cosmetic `role=switch` (`MemberEditorSheet.tsx:546`); reverts + inline error on `last-admin` (`:288-295`); real enforcement is server 409 (T-20-02) | closed |
|
||||
| T-20-SC | Tampering (supply chain) | npm installs | mitigate | No new packages; `lucide-react@1.17.0` already in `package.json:30`; imports `AdminPage.tsx:28`, `MemberEditorSheet.tsx:25-27` | closed |
|
||||
|
||||
*Status: open · closed*
|
||||
*Disposition: mitigate (implementation required) · accept (documented risk) · transfer (third-party)*
|
||||
|
||||
---
|
||||
|
||||
## Accepted Risks Log
|
||||
|
||||
| Risk ID | Threat Ref | Rationale | Accepted By | Date |
|
||||
|---------|------------|-----------|-------------|------|
|
||||
| AR-20-01 | T-20-06 | Client-side last-admin toggle state is non-authoritative by design. The demotion guard is enforced server-side (409, `admin.ts:271-293`); the client only surfaces the rejection via the `'last-admin'` sentinel (`client.ts:262`) and reverts the toggle (`MemberEditorSheet.tsx:294`). A tampered client that ignores the sentinel still cannot bypass the guard — the server rejects regardless. Matches existing pattern: "isAdmin drives nav visibility; the real boundary is server-side." Residual risk: none beyond the already-mitigated server boundary at ASVS L1. | Lucas Berger (per Plan 20-02 threat model) | 2026-06-18 |
|
||||
|
||||
---
|
||||
|
||||
## Security Audit Trail
|
||||
|
||||
| Audit Date | Threats Total | Closed | Open | Run By |
|
||||
|------------|---------------|--------|------|--------|
|
||||
| 2026-06-18 | 10 | 10 | 0 | gsd-security-auditor |
|
||||
|
||||
**Notable hardening beyond plan:** the last-admin guard wraps count+update in a transaction with a `FOR UPDATE` locking read (`admin.ts:249-286`) to defeat a concurrent double-demotion race — strengthens T-20-02 past the plan minimum.
|
||||
|
||||
---
|
||||
|
||||
## Sign-Off
|
||||
|
||||
- [x] All threats have a disposition (mitigate / accept / transfer)
|
||||
- [x] Accepted risks documented in Accepted Risks Log
|
||||
- [x] `threats_open: 0` confirmed
|
||||
- [x] `status: verified` set in frontmatter
|
||||
|
||||
**Approval:** verified 2026-06-18
|
||||
@@ -0,0 +1,317 @@
|
||||
---
|
||||
phase: 20
|
||||
slug: admin-member-editor-form-declutter
|
||||
status: draft
|
||||
shadcn_initialized: false
|
||||
preset: none
|
||||
created: 2026-06-18
|
||||
---
|
||||
|
||||
# Phase 20 — UI Design Contract
|
||||
|
||||
> Visual and interaction contract for the Admin Member Editor & Form Declutter phase.
|
||||
> Generated by gsd-ui-researcher, verified by gsd-ui-checker.
|
||||
|
||||
---
|
||||
|
||||
## Design System
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| Tool | none — custom CSS custom properties |
|
||||
| Preset | not applicable |
|
||||
| Component library | none — inline styles referencing CSS tokens |
|
||||
| Icon library | lucide-react (existing: CheckCircle, AlertCircle, Loader2; add ChevronRight) |
|
||||
| Font | system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif |
|
||||
|
||||
No `components.json` detected. Project uses a hand-rolled design token system declared in
|
||||
`apps/pwa/src/styles/tokens.css`. All new components must reference those CSS custom properties
|
||||
(never hard-code hex/px). This is an established project convention — do not introduce shadcn or
|
||||
any third-party component library in this phase.
|
||||
|
||||
---
|
||||
|
||||
## Spacing Scale
|
||||
|
||||
All tokens sourced from `apps/pwa/src/styles/tokens.css` (pre-populated — no change needed):
|
||||
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| `--space-1` | 4px | Icon gaps, label-to-input margin |
|
||||
| `--space-2` | 8px | Badge icon gap, toast icon gap, button row gap |
|
||||
| `--space-3` | 12px | Field gap inside editor sections, tab padding |
|
||||
| `--space-4` | 16px | Default field padding, section heading margin-bottom |
|
||||
| `--space-6` | 24px | Sheet padding, section gap between Profile / Password / App-password |
|
||||
| `--space-8` | 32px | Section bottom margin in Members panel |
|
||||
| `--space-12` | 48px | Page top/bottom padding |
|
||||
|
||||
Exceptions:
|
||||
- Member row minimum height: 44px (touch target floor — not a spacing token)
|
||||
- Sheet border-radius: 12px phone bottom-sheet top corners / 12px desktop modal all corners (matches existing CredentialSheet / ResetPasswordSheet)
|
||||
- MemberRow add-member trigger button bottom margin: `--space-4` below member list, above the trigger
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
All values sourced from `tokens.css` (pre-populated — no change):
|
||||
|
||||
| Role | Size | Weight | Line Height | Usage in this phase |
|
||||
|------|------|--------|-------------|---------------------|
|
||||
| Body | 15px (`--text-body-size`) | 400 (`--text-body-weight`) | 1.5 (`--text-body-line-height`) | Member display name in row; section description text; subtitle line under sheet heading |
|
||||
| Label | 13px (`--text-label-size`) | 400 or 600 | 1.4 (`--text-label-line-height`) | Form field labels (600), credential status badges (400), toast copy (400), section MEMBERS heading (600 + uppercase) |
|
||||
| Heading | 18px (`--text-heading-size`) | 600 (`--text-heading-weight`) | 1.25 (`--text-heading-line-height`) | Sheet h2 ("Edit member", "Add member"), editor section dividers |
|
||||
| Display | 24px (`--text-display-size`) | 600 (`--text-display-weight`) | 1.2 (`--text-display-line-height`) | Not used in this phase |
|
||||
|
||||
---
|
||||
|
||||
## Color
|
||||
|
||||
All values sourced from `tokens.css` (pre-populated):
|
||||
|
||||
| Role | Value | Usage |
|
||||
|------|-------|-------|
|
||||
| Dominant (60%) | `--color-surface` (#ffffff) | Page background, sheet background, input background |
|
||||
| Secondary (30%) | `--color-surface-dim` (#f7f7f8) / `--color-border-subtle` (#eceef2) | MemberRow bottom border, section dividers, "Add member" trigger button border |
|
||||
| Accent (10%) | `--color-member-0` (#e8915a) | Primary action buttons only (see reserved-for list below) |
|
||||
| Destructive | `--color-destructive` (#dc2626) | Inline error text, error-state input border |
|
||||
|
||||
Accent (`--color-member-0`) reserved for:
|
||||
1. Primary save/submit button background (enabled state) in the Member editor — each section's "Save" button
|
||||
2. Active tab underline indicator in the Members & Accounts / Settings tab strip
|
||||
3. "Currently shared" label text in the calendar picker (existing pattern, unchanged)
|
||||
4. Toast success icon (`CheckCircle`)
|
||||
5. "Use detected:" timezone affordance link (existing pattern, unchanged)
|
||||
|
||||
Accent is NOT used on:
|
||||
- Cancel buttons (use `--color-text-secondary`, no background)
|
||||
- Disabled buttons (use `--color-border` as background)
|
||||
- The "Add member" trigger button (ghost button: `--color-surface` background, `--color-surface-dim` hover — matches Surface A; not an accent CTA)
|
||||
- The row chevron/edit icon (use `--color-text-muted`)
|
||||
|
||||
Member avatar swatches use `--color-member-{colorIndex}` (index-derived, unchanged from existing MemberRow).
|
||||
|
||||
---
|
||||
|
||||
## Surface Inventory
|
||||
|
||||
This phase introduces or reworks the following surfaces:
|
||||
|
||||
### Surface A — Member list (Members tab, existing panel body)
|
||||
|
||||
The current inline "Add member" form and the per-row action-button cluster are removed.
|
||||
The panel body becomes:
|
||||
|
||||
```
|
||||
[Section label: MEMBERS]
|
||||
[MemberRow] × N ← whole-row tap opens editor sheet; trailing ChevronRight icon
|
||||
[Divider]
|
||||
[+ Add member button] ← single trigger at bottom; opens MemberEditorSheet in create mode
|
||||
```
|
||||
|
||||
MemberRow (reworked):
|
||||
- Layout: avatar swatch (32px circle) → name + status badge → flex spacer → ChevronRight icon (16px, `--color-text-muted`)
|
||||
- The entire row is the tap/click target (min-height 44px, `cursor: pointer`)
|
||||
- `role="button"` on the row div, `aria-label="Edit {displayName}"`, `tabIndex={0}`, keyboard: Enter/Space opens editor
|
||||
- Trailing admin badge: when `member.isAdmin === true`, show a small inline badge — label "Admin", 12px/600, `--color-member-0` text on `--color-surface-dim` background, border-radius 4px, padding 2px 6px — placed between the status badge and the chevron
|
||||
- Remove: "Rotate" button, "Add credential" button, "Reset password" button — all removed from MemberRow
|
||||
|
||||
"Add member" trigger button:
|
||||
- Full-width or left-aligned ghost button with `+` icon prefix (use lucide `Plus`, 16px)
|
||||
- Label: "Add member"
|
||||
- Border: `1px solid var(--color-border)`, border-radius 8px, padding `--space-3` vertical / `--space-4` horizontal
|
||||
- Background: `--color-surface`; hover/focus: `--color-surface-dim`
|
||||
- Min-height: 44px
|
||||
- Opens MemberEditorSheet in create mode
|
||||
|
||||
### Surface B — Member editor sheet (MemberEditorSheet, new component)
|
||||
|
||||
Single sheet component with `mode` prop: `'edit'` (id present) or `'create'` (no id).
|
||||
|
||||
Sheet chrome (identical to CredentialSheet / ResetPasswordSheet):
|
||||
- Phone: fixed bottom, `border-radius 12px 12px 0 0`, `box-shadow: 0 -4px 24px rgba(0,0,0,0.15)`, `padding: var(--space-6)`, zIndex 301
|
||||
- Desktop: centered modal, `max-width 480px`, `border-radius 12px`, `box-shadow: 0 8px 32px rgba(0,0,0,0.18)`, `padding: var(--space-6)`, zIndex 301
|
||||
- Backdrop: `rgba(0,0,0,0.32)` (`--color-overlay`), zIndex 300, click closes
|
||||
- Escape closes; focus returns to trigger row on close
|
||||
- `role="dialog"`, `aria-modal="true"`, `aria-label` = sheet heading
|
||||
- `useFocusTrap` on dialog div
|
||||
- On open: focus the h2 heading (`tabIndex={-1}`)
|
||||
- Desktop: `max-height: calc(100dvh - var(--space-8))`, `overflow-y: auto`
|
||||
|
||||
Sheet heading:
|
||||
- `h2`, 18px/600/1.25, `--color-text-primary`
|
||||
- Edit mode: "Edit member"
|
||||
- Create mode: "Add member"
|
||||
|
||||
Member subtitle (edit mode only):
|
||||
- 15px/400, `--color-text-secondary`, `margin-bottom: var(--space-6)`
|
||||
- Displays `member.displayName`
|
||||
|
||||
**Edit mode — three collapsible sections rendered as labeled card blocks:**
|
||||
|
||||
Section divider style (between sections):
|
||||
- `border-top: 1px solid var(--color-border-subtle)`, `margin: var(--space-6) 0`
|
||||
|
||||
**Section 1 — Profile** (always shown in edit mode):
|
||||
- Section heading: "Profile", 13px/600/uppercase/letterspacing 0.06em, `--color-text-muted`
|
||||
- Field: "Display name" — text input, 15px, min-height 44px, border `--color-border`, border-radius 4px, padding `--space-3 --space-4`
|
||||
- Field: "Admin" — toggle/checkbox row:
|
||||
- Label: "Admin", 15px/400, `--color-text-primary`
|
||||
- Sub-label: "Can access admin settings", 13px/400, `--color-text-secondary`
|
||||
- Control: native `<input type="checkbox">` styled as a toggle (or a `<button role="switch">` with `aria-checked`) — use whichever is cleaner; visually: pill shape, 44px×24px, `--color-member-0` when checked, `--color-border` when unchecked, white thumb circle
|
||||
- Initial state: `member.isAdmin` from API
|
||||
- Last-admin guard: if saving would demote the last admin, show inline error below the toggle: "Cannot remove admin — at least one admin must remain." (red, 13px)
|
||||
- Save button for this section: label "Save", right-aligned, same primary button style (accent background, 13px/600, min-height 44px, border-radius 4px)
|
||||
- Error state: inline below Save button, `--color-destructive`, 13px
|
||||
|
||||
**Section 2 — Set new password** (edit mode only; only shown when `member.hasLocalCredential === true`):
|
||||
- Section heading: "Set new password", same style as above
|
||||
- Helper: "Leave blank to keep the current password." — 13px/400, `--color-text-secondary`, below heading
|
||||
- Field: "New password" — `type="password"`, `autoComplete="new-password"`, min-height 44px
|
||||
- Field: "Confirm new password" — same
|
||||
- Password never pre-filled. `autoComplete="new-password"` on both fields.
|
||||
- Save button: label "Set password", right-aligned, primary style
|
||||
- Validation: if fields differ, inline error "Passwords do not match." If new password < 8 chars, "Password must be at least 8 characters."
|
||||
- In-flight: show `Loader2` 14px inline in the button (existing pattern)
|
||||
|
||||
**Section 3 — App password** (edit mode only):
|
||||
- Section heading: "App password", same style
|
||||
- Helper text: "Fastmail app password scoped to Calendars & Contacts (CalDAV)."
|
||||
- Include inline link: "Get an app password" → `https://app.fastmail.com/settings/security/devicetokens`, `target="_blank" rel="noopener noreferrer"`, `--color-member-0` color, underline
|
||||
- Field: "Fastmail email" — `type="email"`, `autoComplete="email"`, min-height 44px
|
||||
- In edit mode: if the stored `fastmailEmail` is available from the credential, prefill this field with the stored email (read-convenience; the user can correct it). The app password field is never prefilled.
|
||||
- Field: "App password" — `type="password"`, `autoComplete="new-password"`, never prefilled
|
||||
- "Validating against CalDAV…" — shown during in-flight mutation, using `Loader2` 16px + text (matches CredentialSheet pattern)
|
||||
- CalDAV failure error: "Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again."
|
||||
- Save button: label "Save app password", right-aligned, primary style
|
||||
|
||||
**Create mode — single unified form (no section dividers):**
|
||||
- Fields: Display name, Username, Initial password, Confirm password
|
||||
- Matches today's inline Add-member form fields exactly
|
||||
- Save button: label "Add member", right-aligned, primary style
|
||||
- Client validation: passwords match + ≥ 8 chars; username conflict 409 → "That username is already in use."
|
||||
|
||||
---
|
||||
|
||||
## Copywriting Contract
|
||||
|
||||
| Element | Copy |
|
||||
|---------|------|
|
||||
| Editor sheet heading (edit) | "Edit member" |
|
||||
| Editor sheet heading (create) | "Add member" |
|
||||
| Profile section heading | "Profile" |
|
||||
| Password section heading | "Set new password" |
|
||||
| Password section helper | "Leave blank to keep the current password." |
|
||||
| App password section heading | "App password" |
|
||||
| App password helper | "Fastmail app password scoped to Calendars & Contacts (CalDAV)." |
|
||||
| App password link text | "Get an app password" |
|
||||
| Profile Save CTA | "Save" |
|
||||
| Password Save CTA | "Set password" |
|
||||
| App password Save CTA | "Save app password" |
|
||||
| Create mode Save CTA | "Add member" |
|
||||
| Add member trigger (panel) | "Add member" |
|
||||
| Cancel (all sheets) | "Cancel" |
|
||||
| Admin badge label | "Admin" |
|
||||
| Admin toggle label | "Admin" |
|
||||
| Admin toggle sub-label | "Can access admin settings" |
|
||||
| Credential status — set | "Credential set" |
|
||||
| Credential status — missing | "No credential" |
|
||||
| Validating state | "Validating against CalDAV…" |
|
||||
| CalDAV failure error | "Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again." |
|
||||
| Last-admin guard error | "Cannot remove admin — at least one admin must remain." |
|
||||
| Password mismatch error | "Passwords do not match." |
|
||||
| Password too short error | "Password must be at least 8 characters." |
|
||||
| Username conflict error | "That username is already in use. Choose a different one." |
|
||||
| Generic save error | "Something went wrong. Please try again." |
|
||||
| Profile saved toast | "Profile saved." |
|
||||
| Password reset toast | "Password updated." |
|
||||
| App password saved toast | "App password saved." |
|
||||
| Member added toast | "Member added." |
|
||||
| Loading members state | "Loading members…" |
|
||||
| Members load error | "Could not load members." |
|
||||
| Empty members state heading | "No members yet" |
|
||||
| Empty members state body | "Add a member to get started." |
|
||||
|
||||
**Retired copy (must not appear anywhere after this phase):**
|
||||
- "Rotate" — remove from all button labels, headings, and aria-labels
|
||||
- "Add credential" — remove from MemberRow button
|
||||
- "Reset password" — remove as standalone button; replaced by "Set new password" section inside editor
|
||||
|
||||
---
|
||||
|
||||
## Interaction Contracts
|
||||
|
||||
### Row tap → editor open
|
||||
- Tap/click anywhere on a MemberRow opens MemberEditorSheet in edit mode for that member
|
||||
- Keyboard: Enter or Space on the row (when `role="button"`) opens the sheet
|
||||
- Focus returns to the tapped row on sheet close
|
||||
|
||||
### "Add member" trigger → create sheet
|
||||
- Tap/click the "Add member" button opens MemberEditorSheet in create mode
|
||||
- On success: sheet closes, member list refreshes, toast "Member added." fires
|
||||
- Focus returns to the "Add member" button on cancel/close
|
||||
|
||||
### Per-section saves (edit mode)
|
||||
- Each section (Profile / Set new password / App password) has its own Save button
|
||||
- Save is independent — one section save does not affect other sections
|
||||
- Disabled state: button uses `--color-border` background, `cursor: default`
|
||||
- In-flight: Loader2 spinner inline in button label (existing pattern), button disabled
|
||||
- Success: toast fires, sheet stays open (user may save another section)
|
||||
- Error: inline error below the section's save button
|
||||
|
||||
### Admin toggle
|
||||
- Toggle flips `is_admin` optimistically on the client
|
||||
- On save (Profile section Save): sends to `PATCH /api/admin/members/:id`
|
||||
- If server returns 409/422 (last-admin guard): show inline error "Cannot remove admin — at least one admin must remain." Revert toggle to previous state.
|
||||
|
||||
### Sheet dismissal
|
||||
- Backdrop click: closes sheet, discards unsaved changes, focus returns to trigger
|
||||
- Escape key: same as backdrop click
|
||||
- Cancel button: same as backdrop click
|
||||
- No confirmation dialog for unsaved changes (forms are short; data loss is minimal)
|
||||
|
||||
### Toast positioning
|
||||
- Phone: `bottom: calc(var(--bottom-chrome-h) + var(--space-4))` (clears BottomTabBar)
|
||||
- Desktop: `bottom: var(--space-6)`
|
||||
- Auto-dismiss: 3000ms (existing pattern, unchanged)
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Contract
|
||||
|
||||
- MemberRow: `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, keyboard Enter/Space
|
||||
- MemberEditorSheet: `role="dialog"`, `aria-modal="true"`, `aria-label` matches sheet h2
|
||||
- Focus management: on open → h2 (`tabIndex={-1}`); on close → trigger element
|
||||
- `useFocusTrap` traps Tab/Shift+Tab within dialog
|
||||
- Admin toggle: `role="switch"`, `aria-checked={isAdmin}`, `aria-label="Admin"`
|
||||
- Inline errors: `aria-describedby` on the relevant input(s) pointing to the error id
|
||||
- Password fields: `autoComplete="new-password"`, never prefilled
|
||||
- Fastmail email field (app password section): `autoComplete="email"`
|
||||
- Toast: `role="status"`, `aria-live="polite"`, `aria-atomic="true"`
|
||||
- 44px minimum touch target on all interactive elements
|
||||
- Section headings inside sheet: use `<div>` with sectionLabelStyle (matches AdminPage pattern) — not `<h3>`, to avoid heading hierarchy issues with the existing `<h2>` sheet title
|
||||
|
||||
---
|
||||
|
||||
## Registry Safety
|
||||
|
||||
| Registry | Blocks Used | Safety Gate |
|
||||
|----------|-------------|-------------|
|
||||
| shadcn official | none | not applicable — shadcn not initialized |
|
||||
| Third-party | none | not applicable |
|
||||
|
||||
No third-party component registries. All components are hand-authored using project CSS tokens.
|
||||
Icon additions from `lucide-react` (already a project dependency): `ChevronRight`, `Plus`.
|
||||
|
||||
---
|
||||
|
||||
## Checker Sign-Off
|
||||
|
||||
- [ ] Dimension 1 Copywriting: PASS
|
||||
- [ ] Dimension 2 Visuals: PASS
|
||||
- [ ] Dimension 3 Color: PASS
|
||||
- [ ] Dimension 4 Typography: PASS
|
||||
- [ ] Dimension 5 Spacing: PASS
|
||||
- [ ] Dimension 6 Registry Safety: PASS
|
||||
|
||||
**Approval:** pending
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
phase: 20-admin-member-editor-form-declutter
|
||||
verified: 2026-06-18T00:00:00Z
|
||||
status: passed
|
||||
score: 9/9 must-haves verified
|
||||
behavior_unverified: 0
|
||||
overrides_applied: 0
|
||||
re_verification: false
|
||||
---
|
||||
|
||||
# Phase 20: Admin Member Editor & Form Declutter Verification Report
|
||||
|
||||
**Phase Goal:** Replace the per-member-row action buttons (Rotate/Add credential + Reset password) with a SINGLE edit affordance — tapping a member opens a member-detail editor where an admin modifies all of that member's details in one place. Also collapse the "Add member" section behind a single trigger.
|
||||
**Verified:** 2026-06-18
|
||||
**Status:** passed
|
||||
**Re-verification:** No — initial verification
|
||||
|
||||
---
|
||||
|
||||
## Goal Achievement
|
||||
|
||||
### Observable Truths
|
||||
|
||||
| # | Truth | Status | Evidence |
|
||||
|---|-------|--------|---------|
|
||||
| 1 | An admin can update a member's display name and admin flag through one route behind requireAdmin | VERIFIED | `adminRouter.patch('/members/:id', zValidator(...), handler)` at admin.ts:230; `adminRouter.use('*', requireAdmin)` at admin.ts:48 — no second guard in the PATCH handler |
|
||||
| 2 | Demoting the only remaining admin is rejected with a 409 and the member stays admin | VERIFIED | admin.ts:251-258: counts admins with `sql\`COUNT(*)\`` where `users.isAdmin` is true; returns `c.json({ error: 'Cannot remove the last admin' }, 409)` when count <= 1. Test C in admin.test.ts asserts 409 + subsequent GET confirms isAdmin still true |
|
||||
| 3 | Self-demotion succeeds while another admin exists | VERIFIED | Same guard only fires when `count <= 1`; Test D seeds two admins and asserts 200 + one admin remaining |
|
||||
| 4 | GET /api/admin/members returns each member's isAdmin so the editor toggle has correct initial state | VERIFIED | admin.ts:109: `isAdmin: users.isAdmin` in select; admin.ts:121: `isAdmin: row.isAdmin` in mapped object. Test H asserts boolean `isAdmin` on each member object |
|
||||
| 5 | The PWA can call the member-profile update route and receive a typed result; 409/422 surfaces as a last-admin sentinel | VERIFIED | client.ts:249-264: `updateMemberProfile` issues `PATCH /api/admin/members/${memberId}`, maps 409/422 to `throw new Error('last-admin')`, maps 401/opaqueredirect to `SessionExpiredError` |
|
||||
| 6 | AdminMember carries isAdmin so the editor toggle can show the correct initial state | VERIFIED | client.ts:597: `isAdmin: boolean;` present in `AdminMember` interface with Phase 20 comment |
|
||||
| 7 | Tapping a member row opens one editor sheet for all of that member's details | VERIFIED | AdminPage.tsx:929-933: `role="button"`, `tabIndex={0}`, `onClick={handleActivate}`, `onKeyDown` Enter/Space handler — full tap target. MemberEditorSheet imported and mounted at AdminPage.tsx:891. Per-section saves (Profile/Set new password/App password) all wired to live endpoints |
|
||||
| 8 | Add member is collapsed behind a single trigger that opens the same sheet in create mode | VERIFIED | AdminPage.tsx:408-440: single ghost button with `Plus` icon, `1px solid var(--color-border)`, opens `MemberEditorSheet` in `'create'` mode. No inline always-open add-form present |
|
||||
| 9 | The terms Rotate, Add credential, and the standalone Reset password button no longer appear | VERIFIED | `grep -RnE '"Rotate"\|>Rotate<\|Add credential\|Reset password' apps/pwa/src/routes/AdminPage.tsx apps/pwa/src/components/MemberEditorSheet.tsx` — zero matches. `ResetPasswordSheet` absent from AdminPage.tsx |
|
||||
|
||||
**Score:** 9/9 truths verified (0 present, behavior-unverified)
|
||||
|
||||
---
|
||||
|
||||
### Required Artifacts
|
||||
|
||||
| Artifact | Expected | Status | Details |
|
||||
|----------|----------|--------|---------|
|
||||
| `apps/api/src/routes/admin.ts` | PATCH /api/admin/members/:id + isAdmin in GET /members select | VERIFIED | Route at line 230; `isAdmin: users.isAdmin` in select at line 109; last-admin guard at lines 251-258; `updateMemberSchema` Zod schema at line 225 |
|
||||
| `apps/api/tests/routes/admin.test.ts` | Tests A-H for PATCH route + isAdmin in GET | VERIFIED | Tests A-H present (lines 1079-1260+); test C asserts 409 last-admin guard; test H asserts isAdmin boolean per member |
|
||||
| `apps/pwa/src/api/client.ts` | `updateMemberProfile` fetcher + `AdminMember.isAdmin` | VERIFIED | `updateMemberProfile` at line 249 (PATCH verb, correct URL); `isAdmin: boolean` on `AdminMember` at line 597; `last-admin` sentinel at line 262 |
|
||||
| `apps/pwa/src/components/MemberEditorSheet.tsx` | Single editor, edit+create modes, per-section saves, retired Rotate copy | VERIFIED | 899 lines; `mode: 'edit' | 'create'` prop; three edit-mode sections; `role="switch"` admin toggle; last-admin inline error; create mode with four fields; no "Rotate"/"Add credential"/"Reset password" literals |
|
||||
| `apps/pwa/src/routes/AdminPage.tsx` | Tappable MemberRow + ChevronRight + single Add-member trigger; no per-row action cluster; no ResetPasswordSheet | VERIFIED | MemberRow has `role="button"`, `aria-label="Edit {displayName}"`, `tabIndex={0}`, Enter/Space handler; ChevronRight at line 1039; Admin badge at line 1022-1036; Plus ghost trigger at line 437; MemberEditorSheet mounted at line 891; zero ResetPasswordSheet references |
|
||||
|
||||
---
|
||||
|
||||
### Key Link Verification
|
||||
|
||||
| From | To | Via | Status | Details |
|
||||
|------|----|-----|--------|---------|
|
||||
| `AdminPage.tsx MemberRow` | `MemberEditorSheet.tsx` | `onEdit(rowEl) → openEditorForMember(member, rowEl) → setEditorOpen(true), setEditorMode('edit')` | WIRED | AdminPage.tsx:241-246 and 398-404; MemberEditorSheet imported at line 38 |
|
||||
| `AdminPage.tsx "Add member" trigger` | `MemberEditorSheet.tsx create mode` | `openEditorForCreate() → setEditorMode('create'), setEditorOpen(true)` | WIRED | AdminPage.tsx:249-254 and 413 |
|
||||
| `MemberEditorSheet.tsx Profile save` | `client.ts updateMemberProfile` | `updateMemberProfile(member.id, { displayName, isAdmin })` | WIRED | MemberEditorSheet.tsx:262; client.ts:249 |
|
||||
| `client.ts updateMemberProfile` | `admin.ts PATCH /members/:id` | `fetch PATCH /api/admin/members/${memberId}` | WIRED | client.ts:253; admin.ts:230 |
|
||||
| `admin.ts PATCH handler` | `db/schema.ts users.isAdmin` | `db.update(users).set(updates).where(eq(users.id, targetId))` | WIRED | admin.ts:267; COUNT query at line 253-256 |
|
||||
| `MemberEditorSheet.tsx 409 onError` | `setProfileError('Cannot remove admin...')` | `msg === 'last-admin'` sentinel branch + toggle revert | WIRED | MemberEditorSheet.tsx:274-278 |
|
||||
|
||||
---
|
||||
|
||||
### Data-Flow Trace (Level 4)
|
||||
|
||||
| Artifact | Data Variable | Source | Produces Real Data | Status |
|
||||
|----------|---------------|--------|--------------------|--------|
|
||||
| `MemberEditorSheet.tsx` | `member` (prop) | `membersQuery.data?.members` in AdminPage → `fetchAdminMembers()` → `GET /api/admin/members` → DB select of users + joins | DB query returns live rows including `isAdmin` | FLOWING |
|
||||
| `AdminPage.tsx MemberRow` | `member.isAdmin` | Same path above; `isAdmin: row.isAdmin` mapped from `users.isAdmin` column | Live boolean from DB | FLOWING |
|
||||
| `MemberEditorSheet.tsx isAdmin toggle` | `useState(member?.isAdmin ?? false)` | Seeded from `member.isAdmin` on open and on member change via `useEffect` | Reflects live DB value on sheet open | FLOWING |
|
||||
|
||||
---
|
||||
|
||||
### Behavioral Spot-Checks
|
||||
|
||||
| Behavior | Evidence | Status |
|
||||
|----------|----------|--------|
|
||||
| Last-admin guard returns 409 and member stays admin | Test C in admin.test.ts (line 1128): asserts 409 response + subsequent GET confirms `isAdmin: true`. SUMMARY.md confirms 44 tests green | PASS |
|
||||
| GET /members returns boolean isAdmin per member | Test H in admin.test.ts (line 1235): asserts boolean `isAdmin` on each member object | PASS |
|
||||
| `updateMemberProfile` maps 409 to 'last-admin' sentinel | client.ts:262: `if (res.status === 409 || res.status === 422) throw new Error('last-admin')` — deterministic static analysis | PASS |
|
||||
| Retired copy absent | grep on all four modified files — zero matches for "Rotate", "Add credential", "Reset password" | PASS |
|
||||
| Playwright-cli verified UI contract | Screenshots in `screenshots/`: admin-members-tab-decluttered.png, member-editor-edit-mode.png, member-editor-create-mode.png, profile-save-toast.png — executor verified no retired buttons, row tap opens "Edit member", Add-member trigger opens "Add member", Profile save fires toast and sheet stays open | PASS |
|
||||
|
||||
---
|
||||
|
||||
### Probe Execution
|
||||
|
||||
No phase-specific probes declared. The orchestrator has confirmed 461/461 API tests green (includes the 8 new PATCH /members/:id tests) and PWA production build passing.
|
||||
|
||||
---
|
||||
|
||||
### Requirements Coverage
|
||||
|
||||
Phase 20 PLANs declare `requirements: []` in all three frontmatter blocks. The REQUIREMENTS.md traceability table maps ADMIN-01, ADMIN-02, ADMIN-03 to Phase 10 — Phase 20 is a UI/UX improvement layer over those already-shipped requirements and does not introduce new REQ-IDs. No orphaned requirements for this phase.
|
||||
|
||||
---
|
||||
|
||||
### Anti-Patterns Found
|
||||
|
||||
| File | Pattern | Severity | Impact |
|
||||
|------|---------|----------|--------|
|
||||
| None | — | — | — |
|
||||
|
||||
Zero TBD / FIXME / XXX markers in any of the four modified files. No stub patterns (empty returns, placeholder renders, hardcoded empty arrays). The `fastmailEmail` field starting blank in edit mode is intentional and documented via a code comment (the API does not return it), not a stub.
|
||||
|
||||
---
|
||||
|
||||
### Human Verification Required
|
||||
|
||||
None. All behavioral checks were either:
|
||||
- Covered by the 8 new integration tests (last-admin guard, isAdmin read, auth boundary, validation, 404)
|
||||
- Verified by playwright-cli observation (four screenshots captured by executor)
|
||||
- Verifiable statically (retired copy grep, artifact wiring, sentinel mapping)
|
||||
|
||||
No iOS-Safari-standalone or other device-only checks are in scope for this phase.
|
||||
|
||||
---
|
||||
|
||||
### Gaps Summary
|
||||
|
||||
No gaps. All 9 observable truths verified at all four levels (exists, substantive, wired, data flowing). The 3 CONTEXT decisions (D-01..D-07) are honored:
|
||||
|
||||
- D-01: Editor exposes exactly the four fields (displayName, password, app password, isAdmin)
|
||||
- D-02: PATCH /members/:id in existing requireAdmin boundary; `AdminMember.isAdmin` surfaces the initial state
|
||||
- D-03: Last-admin guard returns 409; client shows inline error and reverts toggle
|
||||
- D-04: Whole-row `role="button"` with ChevronRight; per-row action cluster removed
|
||||
- D-05: Per-section saves; sheet stays open after edit saves; closes only on create success
|
||||
- D-06: "Rotate" / "Add credential" / "Reset password" retired from all files
|
||||
- D-07: Single `MemberEditorSheet` component with `mode: 'edit' | 'create'` prop; inline add-form collapsed behind ghost trigger
|
||||
|
||||
---
|
||||
|
||||
_Verified: 2026-06-18_
|
||||
_Verifier: Claude (gsd-verifier)_
|
||||
@@ -11,12 +11,13 @@
|
||||
* - No console.log of request bodies or passwords in any handler (T-10-10).
|
||||
*
|
||||
* Routes:
|
||||
* GET /api/admin/members → list members + credential status (UI-SPEC Surface 2)
|
||||
* POST /api/admin/members → create local member: users row + local_credentials (AUTH-LOCAL-07)
|
||||
* POST /api/admin/members/:id/password → admin reset local member password (AUTH-LOCAL-08)
|
||||
* POST /api/admin/credentials → validate+encrypt+store for any member (ADMIN-01)
|
||||
* GET /api/admin/calendars → list synced calendars (UI-SPEC Surface 5)
|
||||
* PUT /api/admin/calendars/:id/shared → exclusive is_shared designation (ADMIN-02)
|
||||
* GET /api/admin/members → list members + credential status + isAdmin (UI-SPEC Surface 2)
|
||||
* POST /api/admin/members → create local member: users row + local_credentials (AUTH-LOCAL-07)
|
||||
* PATCH /api/admin/members/:id → update member profile: displayName and/or isAdmin (Plan 20-01)
|
||||
* POST /api/admin/members/:id/password → admin reset local member password (AUTH-LOCAL-08)
|
||||
* POST /api/admin/credentials → validate+encrypt+store for any member (ADMIN-01)
|
||||
* GET /api/admin/calendars → list synced calendars (UI-SPEC Surface 5)
|
||||
* PUT /api/admin/calendars/:id/shared → exclusive is_shared designation (ADMIN-02)
|
||||
*
|
||||
* Mounted in index.ts: app.route('/api/admin', adminRouter)
|
||||
*/
|
||||
@@ -105,6 +106,7 @@ adminRouter.get('/members', async (c) => {
|
||||
id: users.id,
|
||||
displayName: users.displayName,
|
||||
color: users.color,
|
||||
isAdmin: users.isAdmin, // Plan 20-01: feeds editor admin toggle initial state (D-02)
|
||||
credentialId: memberCredentials.id,
|
||||
localCredId: localCredentials.id, // LEFT JOIN — null when no local_credentials row
|
||||
})
|
||||
@@ -116,6 +118,7 @@ adminRouter.get('/members', async (c) => {
|
||||
id: row.id,
|
||||
displayName: row.displayName,
|
||||
color: row.color,
|
||||
isAdmin: row.isAdmin, // Plan 20-01
|
||||
hasCredential: row.credentialId !== null,
|
||||
hasLocalCredential: row.localCredId !== null, // AUTH-LOCAL-17
|
||||
}));
|
||||
@@ -208,6 +211,97 @@ adminRouter.post('/members', zValidator('json', createMemberSchema, noEchoHook),
|
||||
}
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// PATCH /api/admin/members/:id
|
||||
//
|
||||
// Updates a member's displayName and/or isAdmin flag (Plan 20-01, D-02, D-03).
|
||||
// Security:
|
||||
// - requireAdmin: inherited from adminRouter.use('*', requireAdmin) (D-02 — no second guard)
|
||||
// - noEchoHook: applied for consistency with other admin write routes (T-20-04)
|
||||
// - D-03 last-admin guard: rejects isAdmin=false when target is the sole remaining admin (T-20-02)
|
||||
// - parsePositiveIntParam: rejects malformed ids (T-20-03)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const updateMemberSchema = z
|
||||
.object({
|
||||
displayName: z.string().min(1).max(256).optional(),
|
||||
isAdmin: z.boolean().optional(),
|
||||
})
|
||||
.refine((data) => data.displayName !== undefined || data.isAdmin !== undefined, {
|
||||
message: 'At least one field must be provided',
|
||||
});
|
||||
|
||||
adminRouter.patch('/members/:id', zValidator('json', updateMemberSchema, noEchoHook), async (c) => {
|
||||
const targetId = parsePositiveIntParam(c.req.param('id'));
|
||||
if (targetId === null) {
|
||||
return c.json({ error: 'Invalid member id' }, 400);
|
||||
}
|
||||
|
||||
const { displayName, isAdmin } = c.req.valid('json');
|
||||
// T-20-04: NEVER log request body
|
||||
|
||||
// Build a partial set() from whichever fields are present — validated non-empty by schema
|
||||
const updates: { displayName?: string; isAdmin?: boolean } = {};
|
||||
if (displayName !== undefined) updates.displayName = displayName;
|
||||
if (isAdmin !== undefined) updates.isAdmin = isAdmin;
|
||||
|
||||
try {
|
||||
// CR-01: wrap the guard + update in a transaction so the last-admin check and
|
||||
// the UPDATE are atomic. Without a transaction, two concurrent demotions both
|
||||
// read count=2, both pass the guard, and both commit — leaving zero admins.
|
||||
// The locking read (FOR UPDATE via raw SQL suffix) serialises concurrent
|
||||
// demotions: the second PATCH blocks until the first commits and then re-reads
|
||||
// a count of 1, triggering the 'last-admin' error correctly.
|
||||
let lastAdminViolation = false;
|
||||
let notFound = false;
|
||||
|
||||
await db.transaction(async (tx) => {
|
||||
// Re-read the target inside the transaction so we see the committed state
|
||||
const [target] = await tx
|
||||
.select({ id: users.id, isAdmin: users.isAdmin })
|
||||
.from(users)
|
||||
.where(eq(users.id, targetId))
|
||||
.limit(1);
|
||||
|
||||
if (!target) {
|
||||
notFound = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// D-03 last-admin guard: reject demotion of the only remaining admin (T-20-02).
|
||||
// Use a raw locking read to serialise concurrent demotions. Drizzle 0.45.x does
|
||||
// not expose a first-class .for('update') on select; appending FOR UPDATE via a
|
||||
// raw sql suffix achieves the same serialisation in InnoDB.
|
||||
if (isAdmin === false && target.isAdmin) {
|
||||
const [[{ count }]] = (await tx.execute(
|
||||
sql`SELECT COUNT(*) AS count FROM ${users} WHERE ${users.isAdmin} = true FOR UPDATE`,
|
||||
)) as unknown as [{ count: number | string }[], unknown];
|
||||
if (Number(count) <= 1) {
|
||||
lastAdminViolation = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
await tx.update(users).set(updates).where(eq(users.id, targetId));
|
||||
});
|
||||
|
||||
if (notFound) {
|
||||
return c.json({ error: 'Member not found' }, 404);
|
||||
}
|
||||
if (lastAdminViolation) {
|
||||
return c.json({ error: 'Cannot remove the last admin' }, 409);
|
||||
}
|
||||
|
||||
return c.json({ ok: true }, 200);
|
||||
} catch (err) {
|
||||
console.error(
|
||||
'[admin/PATCH /members/:id] Unexpected error:',
|
||||
err instanceof Error ? err.message : String(err),
|
||||
);
|
||||
return c.json({ error: 'Service unavailable' }, 503);
|
||||
}
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// POST /api/admin/members/:id/password
|
||||
//
|
||||
|
||||
@@ -1071,3 +1071,200 @@ describe('POST /api/admin/members', () => {
|
||||
expect(parsed.error).toBe('Invalid request');
|
||||
});
|
||||
});
|
||||
|
||||
// ===========================================================================
|
||||
// PATCH /api/admin/members/:id — member-profile update + last-admin guard (Plan 20-01)
|
||||
// ===========================================================================
|
||||
|
||||
describe('PATCH /api/admin/members/:id', () => {
|
||||
// Test A: happy path — update displayName only
|
||||
it('Test A (happy path displayName): PATCH with { displayName } as admin returns 200; GET reflects new name', async () => {
|
||||
const adminId = await seedUser('admin-patch-name', true);
|
||||
const memberId = await seedUser('member-patch-target', false);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', `/api/admin/members/${memberId}`, { displayName: 'New Name' }),
|
||||
);
|
||||
expect(res.status).toBe(200);
|
||||
const body = (await res.json()) as { ok: boolean };
|
||||
expect(body.ok).toBe(true);
|
||||
|
||||
// GET /members should reflect the updated displayName
|
||||
const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
|
||||
expect(getRes.status).toBe(200);
|
||||
const getBody = (await getRes.json()) as {
|
||||
members: Array<{ id: number; displayName: string }>;
|
||||
};
|
||||
const updated = getBody.members.find((m) => m.id === memberId);
|
||||
expect(updated).toBeDefined();
|
||||
expect(updated!.displayName).toBe('New Name');
|
||||
});
|
||||
|
||||
// Test B: happy path — promote non-admin to admin
|
||||
it('Test B (happy path isAdmin promote): PATCH with { isAdmin: true } returns 200; GET shows isAdmin true', async () => {
|
||||
const adminId = await seedUser('admin-patch-promote', true);
|
||||
const memberId = await seedUser('member-patch-promote', false);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', `/api/admin/members/${memberId}`, { isAdmin: true }),
|
||||
);
|
||||
expect(res.status).toBe(200);
|
||||
|
||||
const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
|
||||
expect(getRes.status).toBe(200);
|
||||
const getBody = (await getRes.json()) as {
|
||||
members: Array<{ id: number; isAdmin: boolean }>;
|
||||
};
|
||||
const promoted = getBody.members.find((m) => m.id === memberId);
|
||||
expect(promoted).toBeDefined();
|
||||
expect(promoted!.isAdmin).toBe(true);
|
||||
});
|
||||
|
||||
// Test C: last-admin guard — only admin cannot demote themselves
|
||||
it('Test C (last-admin guard): with exactly one admin, PATCH { isAdmin: false } returns 409; member stays admin', async () => {
|
||||
const adminId = await seedUser('admin-last-admin', true);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', `/api/admin/members/${adminId}`, { isAdmin: false }),
|
||||
);
|
||||
expect(res.status).toBe(409);
|
||||
const body = (await res.json()) as { error: string };
|
||||
expect(typeof body.error).toBe('string');
|
||||
expect(body.error.length).toBeGreaterThan(0);
|
||||
|
||||
// The admin flag must still be true after the rejected demotion
|
||||
const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
|
||||
expect(getRes.status).toBe(200);
|
||||
const getBody = (await getRes.json()) as {
|
||||
members: Array<{ id: number; isAdmin: boolean }>;
|
||||
};
|
||||
const adminRow = getBody.members.find((m) => m.id === adminId);
|
||||
expect(adminRow).toBeDefined();
|
||||
expect(adminRow!.isAdmin).toBe(true);
|
||||
});
|
||||
|
||||
// Test D: self-demotion allowed when another admin exists
|
||||
it('Test D (self-demotion allowed): with two admins, PATCH { isAdmin: false } returns 200; one admin remains', async () => {
|
||||
const adminId1 = await seedUser('admin-demote-1', true);
|
||||
const adminId2 = await seedUser('admin-demote-2', true);
|
||||
// Log in as adminId1 to perform the self-demotion
|
||||
currentDevUserId = adminId1;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', `/api/admin/members/${adminId1}`, { isAdmin: false }),
|
||||
);
|
||||
expect(res.status).toBe(200);
|
||||
|
||||
// Switch to adminId2 to verify the outcome — adminId1 is now non-admin
|
||||
// and can no longer call GET /members (would 403).
|
||||
currentDevUserId = adminId2;
|
||||
const getRes = await app.fetch(jsonRequest('GET', '/api/admin/members'));
|
||||
expect(getRes.status).toBe(200);
|
||||
const getBody = (await getRes.json()) as {
|
||||
members: Array<{ id: number; isAdmin: boolean }>;
|
||||
};
|
||||
const row1 = getBody.members.find((m) => m.id === adminId1);
|
||||
const row2 = getBody.members.find((m) => m.id === adminId2);
|
||||
expect(row1!.isAdmin).toBe(false);
|
||||
expect(row2!.isAdmin).toBe(true);
|
||||
});
|
||||
|
||||
// Test E: auth boundary — non-admin gets 403
|
||||
it('Test E (auth boundary): non-admin PATCH returns 403', async () => {
|
||||
const adminId = await seedUser('admin-patch-auth', true);
|
||||
const nonAdminId = await seedUser('non-admin-patch', false);
|
||||
currentDevUserId = nonAdminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', `/api/admin/members/${adminId}`, { displayName: 'Hacked' }),
|
||||
);
|
||||
expect(res.status).toBe(403);
|
||||
});
|
||||
|
||||
// Test F: validation — wrong type and malformed id
|
||||
it('Test F (validation): PATCH with { isAdmin: "yes" } returns 400 { error: "Invalid request" }', async () => {
|
||||
const adminId = await seedUser('admin-patch-validation', true);
|
||||
const memberId = await seedUser('member-patch-validation', false);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', `/api/admin/members/${memberId}`, { isAdmin: 'yes' }),
|
||||
);
|
||||
expect(res.status).toBe(400);
|
||||
const body = (await res.json()) as { error: string };
|
||||
expect(body.error).toBe('Invalid request');
|
||||
});
|
||||
|
||||
it('Test F (malformed id): PATCH with malformed :id (e.g. "1abc") returns 400', async () => {
|
||||
const adminId = await seedUser('admin-patch-badid', true);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', '/api/admin/members/1abc', { displayName: 'Test' }),
|
||||
);
|
||||
expect(res.status).toBe(400);
|
||||
});
|
||||
|
||||
// Test G: not found — non-existent member id
|
||||
it('Test G (not found): PATCH non-existent member id returns 404', async () => {
|
||||
const adminId = await seedUser('admin-patch-notfound', true);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(
|
||||
jsonRequest('PATCH', '/api/admin/members/99999999', { displayName: 'Ghost' }),
|
||||
);
|
||||
expect(res.status).toBe(404);
|
||||
});
|
||||
|
||||
// Test H (WR-06): empty {} body must return 400, not crash Drizzle with a 503
|
||||
it('Test H (WR-06 empty body): PATCH with {} returns 400 { error: "Invalid request" }', async () => {
|
||||
const adminId = await seedUser('admin-patch-empty', true);
|
||||
const memberId = await seedUser('member-patch-empty', false);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(jsonRequest('PATCH', `/api/admin/members/${memberId}`, {}));
|
||||
expect(res.status).toBe(400);
|
||||
const body = (await res.json()) as { error: string };
|
||||
expect(body.error).toBe('Invalid request');
|
||||
});
|
||||
});
|
||||
|
||||
// ===========================================================================
|
||||
// GET /api/admin/members — isAdmin field (Plan 20-01)
|
||||
// ===========================================================================
|
||||
|
||||
describe('GET /api/admin/members — isAdmin field', () => {
|
||||
it('Test H (GET isAdmin field): each member object includes a boolean isAdmin field', async () => {
|
||||
const adminId = await seedUser('admin-isadmin-field', true);
|
||||
const memberId = await seedUser('member-isadmin-field', false);
|
||||
currentDevUserId = adminId;
|
||||
const app = await getApp();
|
||||
|
||||
const res = await app.fetch(jsonRequest('GET', '/api/admin/members'));
|
||||
expect(res.status).toBe(200);
|
||||
const body = (await res.json()) as {
|
||||
members: Array<{ id: number; isAdmin: boolean }>;
|
||||
};
|
||||
// Both seeded users should have a boolean isAdmin field
|
||||
const adminRow = body.members.find((m) => m.id === adminId);
|
||||
const memberRow = body.members.find((m) => m.id === memberId);
|
||||
expect(adminRow).toBeDefined();
|
||||
expect(typeof adminRow!.isAdmin).toBe('boolean');
|
||||
expect(adminRow!.isAdmin).toBe(true);
|
||||
expect(memberRow).toBeDefined();
|
||||
expect(typeof memberRow!.isAdmin).toBe('boolean');
|
||||
expect(memberRow!.isAdmin).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -684,3 +684,140 @@ describe('fetchAdminResetPassword — URL contract (Phase 19, AUTH-LOCAL-08)', (
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Phase 20 (Plan 20-02): updateMemberProfile + AdminMember.isAdmin ─────────
|
||||
// TDD RED: these tests MUST fail before the implementation is added to client.ts.
|
||||
|
||||
describe('updateMemberProfile — URL + verb contract (Phase 20, Plan 20-02)', () => {
|
||||
beforeEach(() => {
|
||||
vi.stubGlobal('fetch', vi.fn());
|
||||
});
|
||||
afterEach(() => {
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it('PATCHes /api/admin/members/:id (must match PATCH /members/:id in admin.ts)', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
type: 'basic',
|
||||
status: 200,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile } = await import('./client.js');
|
||||
await updateMemberProfile(7, { displayName: 'Alice' });
|
||||
|
||||
expect(fetch).toHaveBeenCalledWith(
|
||||
'/api/admin/members/7',
|
||||
expect.objectContaining({ method: 'PATCH' }),
|
||||
);
|
||||
});
|
||||
|
||||
it('sends credentials:include and redirect:manual', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
type: 'basic',
|
||||
status: 200,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile } = await import('./client.js');
|
||||
await updateMemberProfile(3, { isAdmin: true });
|
||||
|
||||
expect(fetch).toHaveBeenCalledWith(
|
||||
'/api/admin/members/3',
|
||||
expect.objectContaining({
|
||||
credentials: 'include',
|
||||
redirect: 'manual',
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('resolves void on 200', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
type: 'basic',
|
||||
status: 200,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile } = await import('./client.js');
|
||||
const result = await updateMemberProfile(7, { displayName: 'Bob' });
|
||||
expect(result).toBeUndefined();
|
||||
});
|
||||
|
||||
it('throws SessionExpiredError on opaqueredirect', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: false,
|
||||
type: 'opaqueredirect',
|
||||
status: 0,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile, SessionExpiredError } = await import('./client.js');
|
||||
await expect(updateMemberProfile(7, { displayName: 'X' })).rejects.toBeInstanceOf(
|
||||
SessionExpiredError,
|
||||
);
|
||||
});
|
||||
|
||||
it('throws SessionExpiredError on 401', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: false,
|
||||
type: 'basic',
|
||||
status: 401,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile, SessionExpiredError } = await import('./client.js');
|
||||
await expect(updateMemberProfile(7, { displayName: 'X' })).rejects.toBeInstanceOf(
|
||||
SessionExpiredError,
|
||||
);
|
||||
});
|
||||
|
||||
it('throws Error("last-admin") on 409 (last-admin demotion sentinel)', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: false,
|
||||
type: 'basic',
|
||||
status: 409,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile } = await import('./client.js');
|
||||
await expect(updateMemberProfile(7, { isAdmin: false })).rejects.toThrow('last-admin');
|
||||
});
|
||||
|
||||
it('throws Error("last-admin") on 422 as well (server may return either)', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: false,
|
||||
type: 'basic',
|
||||
status: 422,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile } = await import('./client.js');
|
||||
await expect(updateMemberProfile(7, { isAdmin: false })).rejects.toThrow('last-admin');
|
||||
});
|
||||
|
||||
it('throws a generic error on any other non-ok status (not last-admin sentinel)', async () => {
|
||||
vi.mocked(fetch).mockResolvedValueOnce({
|
||||
ok: false,
|
||||
type: 'basic',
|
||||
status: 500,
|
||||
} as unknown as Response);
|
||||
|
||||
const { updateMemberProfile, SessionExpiredError } = await import('./client.js');
|
||||
await expect(updateMemberProfile(7, { displayName: 'X' })).rejects.toSatisfy(
|
||||
(e: unknown) =>
|
||||
e instanceof Error && !(e instanceof SessionExpiredError) && e.message !== 'last-admin',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('AdminMember.isAdmin field (Phase 20, Plan 20-02)', () => {
|
||||
it('AdminMember interface has isAdmin: boolean (compile-time type check via runtime shape)', () => {
|
||||
// Construct a conforming object — TypeScript will error at compile time if
|
||||
// isAdmin is missing from the AdminMember interface (caught by tsc --noEmit).
|
||||
const member: import('./client.js').AdminMember = {
|
||||
id: 1,
|
||||
displayName: 'Test',
|
||||
color: '#abc',
|
||||
isAdmin: true,
|
||||
hasCredential: false,
|
||||
hasLocalCredential: false,
|
||||
};
|
||||
expect(member.isAdmin).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -233,6 +233,36 @@ export async function fetchAdminResetPassword(
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* PATCH /api/admin/members/:id — update a member's display name and/or admin flag (Phase 20, D-02).
|
||||
*
|
||||
* Admin-only; server enforces requireAdmin. Sends only the fields that are present in `body`
|
||||
* (partial update — the server schema marks both fields optional).
|
||||
*
|
||||
* Status codes:
|
||||
* 200 → success (resolves void)
|
||||
* 401 / opaqueredirect → throws SessionExpiredError (session expired; existing convention)
|
||||
* 409 / 422 → throws Error('last-admin') — the D-03 sentinel: demoting the last admin is
|
||||
* rejected server-side; the editor branches on this message to show inline copy.
|
||||
* other non-ok → generic error
|
||||
*/
|
||||
export async function updateMemberProfile(
|
||||
memberId: number,
|
||||
body: { displayName?: string; isAdmin?: boolean },
|
||||
): Promise<void> {
|
||||
const res = await fetch(`/api/admin/members/${memberId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
redirect: 'manual',
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (res.type === 'opaqueredirect' || res.status === 401) throw new SessionExpiredError();
|
||||
if (res.status === 409 || res.status === 422) throw new Error('last-admin');
|
||||
if (!res.ok) throw new Error(`updateMemberProfile failed: ${res.status}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /api/me/link-oidc — initiate the OIDC-link flow for the current local user (Surface 13).
|
||||
*
|
||||
@@ -564,6 +594,7 @@ export interface AdminMember {
|
||||
id: number;
|
||||
displayName: string | null;
|
||||
color: string;
|
||||
isAdmin: boolean; // Phase 20 — drives the editor admin toggle initial state (D-02)
|
||||
hasCredential: boolean;
|
||||
hasLocalCredential: boolean; // true when a local_credentials row exists for this member (Phase 19)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,936 @@
|
||||
/**
|
||||
* MemberEditorSheet — unified member editor sheet (Phase 20, D-05, D-06, D-07).
|
||||
*
|
||||
* Single component with a `mode` prop:
|
||||
* - 'edit' — three per-section saves: Profile, Set new password, App password
|
||||
* - 'create' — single form: display name, username, initial password, confirm
|
||||
*
|
||||
* UI-SPEC §Surface B (20-UI-SPEC.md):
|
||||
* - role="dialog", aria-modal, useFocusTrap, Escape closes, focus returns to trigger
|
||||
* - Phone: fixed bottom bottom-sheet; Desktop: centered modal (480px)
|
||||
* - zIndex 301 / backdrop 300 / overlay rgba(0,0,0,0.32)
|
||||
* - Per-section saves keep the sheet open; create-mode save closes it
|
||||
* - Admin toggle: role="switch", aria-checked (Accessibility Contract)
|
||||
*
|
||||
* Security:
|
||||
* T-20-07: password/app-password fields are write-only: never prefilled,
|
||||
* autoComplete="new-password", never logged (T-10-15/16 preserved)
|
||||
* T-20-08: app-password save routes through saveCredential → server-side CalDAV
|
||||
* validation; invalid password surfaces copy, nothing stored
|
||||
* T-20-09: admin toggle is cosmetic; D-03 409 guard enforced server-side (Plan 20-01)
|
||||
*
|
||||
* Retired copy (D-06): per-row credential buttons and standalone password-reset button removed from this phase.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import {
|
||||
updateMemberProfile,
|
||||
fetchAdminResetPassword,
|
||||
fetchCreateMember,
|
||||
saveCredential,
|
||||
type AdminMember,
|
||||
} from '../api/client.js';
|
||||
import { useIsPhone } from '../hooks/useIsPhone.js';
|
||||
import { useFocusTrap } from '../hooks/useFocusTrap.js';
|
||||
|
||||
// ── Types ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export type MemberEditorSheetMode = 'edit' | 'create';
|
||||
|
||||
interface MemberEditorSheetProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
mode: MemberEditorSheetMode;
|
||||
/** Present in edit mode; absent in create mode */
|
||||
member?: AdminMember;
|
||||
/** Ref to the trigger element — focus returns here on close (a11y) */
|
||||
triggerRef?: React.RefObject<HTMLElement | null>;
|
||||
/** Lift toast copy up to AdminPage which owns the toast state */
|
||||
onToast: (message: string) => void;
|
||||
}
|
||||
|
||||
// ── Copywriting (UI-SPEC §Copywriting Contract) ───────────────────────────
|
||||
|
||||
function headingFor(mode: MemberEditorSheetMode): string {
|
||||
return mode === 'edit' ? 'Edit member' : 'Add member';
|
||||
}
|
||||
|
||||
const CALDAV_FAILURE_TEXT =
|
||||
"Invalid password — CalDAV validation failed. Check the scope is 'Calendars & Contacts (CalDAV)' and try again.";
|
||||
const CALDAV_VALIDATING_TEXT = 'Validating against CalDAV…';
|
||||
const CALDAV_LINK_HREF = 'https://app.fastmail.com/settings/security/devicetokens';
|
||||
const CALDAV_LINK_TEXT = 'Get an app password';
|
||||
|
||||
// ── Shared field style helpers ─────────────────────────────────────────────
|
||||
|
||||
const inputStyle = (hasError: boolean): React.CSSProperties => ({
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
border: `1px solid ${hasError ? 'var(--color-destructive, #DC2626)' : 'var(--color-border)'}`,
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
color: 'var(--color-text-primary)',
|
||||
background: 'var(--color-surface)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
outline: 'none',
|
||||
minHeight: '44px',
|
||||
});
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'block',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-1, 4px)',
|
||||
};
|
||||
|
||||
const sectionLabelStyle: React.CSSProperties = {
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-muted)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.06em',
|
||||
marginBottom: 'var(--space-4, 16px)',
|
||||
};
|
||||
|
||||
const sectionDividerStyle: React.CSSProperties = {
|
||||
borderTop: '1px solid var(--color-border-subtle)',
|
||||
margin: 'var(--space-6, 24px) 0',
|
||||
};
|
||||
|
||||
const fieldContainerStyle: React.CSSProperties = {
|
||||
marginBottom: 'var(--space-3, 12px)',
|
||||
};
|
||||
|
||||
const inlineErrorStyle: React.CSSProperties = {
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-destructive, #DC2626)',
|
||||
marginTop: 'var(--space-2, 8px)',
|
||||
};
|
||||
|
||||
const helperTextStyle: React.CSSProperties = {
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-text-secondary)',
|
||||
marginBottom: 'var(--space-3, 12px)',
|
||||
lineHeight: 1.4,
|
||||
};
|
||||
|
||||
function primaryButtonStyle(disabled: boolean): React.CSSProperties {
|
||||
return {
|
||||
background: disabled ? 'var(--color-border, #E2E4E9)' : 'var(--color-member-0, #e8915a)',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
cursor: disabled ? 'default' : 'pointer',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
padding: '0 var(--space-4, 16px)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
transition: 'background 0.15s ease',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2, 8px)',
|
||||
};
|
||||
}
|
||||
|
||||
const cancelButtonStyle: React.CSSProperties = {
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-secondary)',
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
padding: '0 var(--space-4, 16px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
};
|
||||
|
||||
const actionsRowStyle: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 'var(--space-3, 12px)',
|
||||
marginTop: 'var(--space-4, 16px)',
|
||||
};
|
||||
|
||||
// ── Component ──────────────────────────────────────────────────────────────
|
||||
|
||||
export function MemberEditorSheet({
|
||||
isOpen,
|
||||
onClose,
|
||||
mode,
|
||||
member,
|
||||
triggerRef,
|
||||
onToast,
|
||||
}: MemberEditorSheetProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const phone = useIsPhone();
|
||||
|
||||
// Focus management refs
|
||||
const headingRef = useRef<HTMLHeadingElement>(null);
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
const handleDialogKeyDown = useFocusTrap(dialogRef);
|
||||
|
||||
// ── Profile section state ────────────────────────────────────────────────
|
||||
const [displayName, setDisplayName] = useState(member?.displayName ?? '');
|
||||
const [isAdmin, setIsAdmin] = useState(member?.isAdmin ?? false);
|
||||
const [profileError, setProfileError] = useState<string | null>(null);
|
||||
|
||||
// ── Set new password section state ──────────────────────────────────────
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [passwordError, setPasswordError] = useState<string | null>(null);
|
||||
|
||||
// ── App password section state ───────────────────────────────────────────
|
||||
// NOTE: GET /api/admin/members does NOT return fastmailEmail; the stored
|
||||
// fastmail_email lives only on the member_credentials row, which is not
|
||||
// surfaced to the admin list. So the email field starts BLANK on edit —
|
||||
// the admin must re-enter it. This is intentional (see D-CONTEXT note).
|
||||
const [fastmailEmail, setFastmailEmail] = useState('');
|
||||
const [appPassword, setAppPassword] = useState('');
|
||||
const [appPasswordError, setAppPasswordError] = useState<string | null>(null);
|
||||
|
||||
// ── Create mode state ───────────────────────────────────────────────────
|
||||
const [createDisplayName, setCreateDisplayName] = useState('');
|
||||
const [createUsername, setCreateUsername] = useState('');
|
||||
const [createPassword, setCreatePassword] = useState('');
|
||||
const [createConfirmPassword, setCreateConfirmPassword] = useState('');
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
// ── handleClose ──────────────────────────────────────────────────────────
|
||||
|
||||
// WR-04: only reset ephemeral fields (password inputs, error states, create-mode
|
||||
// fields). Member-derived fields (displayName, isAdmin) are owned by the useEffect
|
||||
// below and will re-sync from the live member prop when the sheet re-opens or when
|
||||
// membersQuery refetches — no stale closure problem.
|
||||
const handleClose = useCallback(() => {
|
||||
setProfileError(null);
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setPasswordError(null);
|
||||
setFastmailEmail('');
|
||||
setAppPassword('');
|
||||
setAppPasswordError(null);
|
||||
setCreateDisplayName('');
|
||||
setCreateUsername('');
|
||||
setCreatePassword('');
|
||||
setCreateConfirmPassword('');
|
||||
setCreateError(null);
|
||||
onClose();
|
||||
// Return focus to trigger element (a11y)
|
||||
if (triggerRef?.current) {
|
||||
triggerRef.current.focus();
|
||||
}
|
||||
}, [onClose, triggerRef]);
|
||||
|
||||
// Sync profile state when member changes (different row opened)
|
||||
useEffect(() => {
|
||||
setDisplayName(member?.displayName ?? '');
|
||||
setIsAdmin(member?.isAdmin ?? false);
|
||||
setProfileError(null);
|
||||
}, [member?.id, member?.displayName, member?.isAdmin]);
|
||||
|
||||
// Escape key closes the sheet
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') handleClose();
|
||||
};
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => document.removeEventListener('keydown', onKeyDown);
|
||||
}, [isOpen, handleClose]);
|
||||
|
||||
// Focus heading on open (a11y)
|
||||
useEffect(() => {
|
||||
if (isOpen && headingRef.current) {
|
||||
headingRef.current.focus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// ── Profile mutation (Section 1) ─────────────────────────────────────────
|
||||
|
||||
const profileMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!member) throw new Error('no-member');
|
||||
// WR-01: send only the fields that actually changed to avoid re-writing
|
||||
// displayName on an admin-toggle-only save (and to prevent 400s when a member
|
||||
// has a null displayName and the admin only wants to toggle the admin flag).
|
||||
const payload: { displayName?: string; isAdmin?: boolean } = {};
|
||||
const trimmed = displayName.trim();
|
||||
if (trimmed !== (member.displayName ?? '')) {
|
||||
if (trimmed.length === 0) throw new Error('name-required');
|
||||
payload.displayName = trimmed;
|
||||
}
|
||||
if (isAdmin !== member.isAdmin) payload.isAdmin = isAdmin;
|
||||
// No-op guard — nothing changed, skip the network call and signal no write
|
||||
// (IN-04: avoids firing the "Profile saved." toast + refetch on a no-op save).
|
||||
if (Object.keys(payload).length === 0) return false;
|
||||
await updateMemberProfile(member.id, payload);
|
||||
return true;
|
||||
},
|
||||
onSuccess: (changed) => {
|
||||
// IN-04: only surface success feedback when an actual write occurred.
|
||||
if (!changed) return;
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||
onToast('Profile saved.');
|
||||
// Sheet stays open — per-section save (D-05)
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'server';
|
||||
if (msg === 'last-admin') {
|
||||
// D-03 guard: revert toggle to the actual prior value on the member object.
|
||||
// WR-02: use member!.isAdmin explicitly rather than `?? true` — the `?? true`
|
||||
// was accidentally correct only because the guard fires when demoting an admin,
|
||||
// but it would incorrectly set isAdmin=true for any future error path where
|
||||
// member is non-null but isAdmin is false.
|
||||
setIsAdmin(member!.isAdmin);
|
||||
setProfileError('Cannot remove admin — at least one admin must remain.');
|
||||
} else if (msg === 'name-required') {
|
||||
setProfileError('A display name is required before saving.');
|
||||
} else {
|
||||
setProfileError('Something went wrong. Please try again.');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// ── Set new password mutation (Section 2) ────────────────────────────────
|
||||
|
||||
const passwordMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!member) throw new Error('no-member');
|
||||
if (newPassword !== confirmPassword) throw new Error('mismatch');
|
||||
if (newPassword.length < 8) throw new Error('short');
|
||||
await fetchAdminResetPassword(member.id, newPassword);
|
||||
},
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setPasswordError(null);
|
||||
onToast('Password updated.');
|
||||
// Sheet stays open — per-section save (D-05)
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'server';
|
||||
if (msg === 'mismatch') {
|
||||
setPasswordError('Passwords do not match.');
|
||||
} else if (msg === 'short') {
|
||||
setPasswordError('Password must be at least 8 characters.');
|
||||
} else {
|
||||
setPasswordError('Something went wrong. Please try again.');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// ── App password mutation (Section 3) ────────────────────────────────────
|
||||
|
||||
const appPasswordMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (!member) throw new Error('no-member');
|
||||
await saveCredential({
|
||||
userId: member.id,
|
||||
providerType: 'caldav',
|
||||
fastmailEmail: fastmailEmail.trim(),
|
||||
appPassword,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||
void queryClient.invalidateQueries({ queryKey: ['me'] });
|
||||
setFastmailEmail('');
|
||||
setAppPassword('');
|
||||
setAppPasswordError(null);
|
||||
onToast('App password saved.');
|
||||
// Sheet stays open — per-section save (D-05)
|
||||
},
|
||||
onError: () => {
|
||||
setAppPasswordError(CALDAV_FAILURE_TEXT);
|
||||
},
|
||||
});
|
||||
|
||||
// ── Create member mutation ────────────────────────────────────────────────
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (createPassword !== createConfirmPassword) throw new Error('mismatch');
|
||||
if (createPassword.length < 8) throw new Error('short');
|
||||
await fetchCreateMember({
|
||||
displayName: createDisplayName.trim(),
|
||||
username: createUsername.trim(),
|
||||
password: createPassword,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||
onToast('Member added.');
|
||||
// Create mode closes on success (D-07)
|
||||
handleClose();
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'server';
|
||||
if (msg === 'mismatch') {
|
||||
setCreateError('Passwords do not match.');
|
||||
} else if (msg === 'short') {
|
||||
setCreateError('Password must be at least 8 characters.');
|
||||
} else if (msg === 'conflict' || msg.includes('409')) {
|
||||
setCreateError('That username is already in use. Choose a different one.');
|
||||
} else {
|
||||
setCreateError('Something went wrong. Please try again.');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// ── Render guard ──────────────────────────────────────────────────────────
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const heading = headingFor(mode);
|
||||
|
||||
// ── Sheet style ───────────────────────────────────────────────────────────
|
||||
|
||||
const sheetStyle: React.CSSProperties = phone
|
||||
? {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
// WR-03: cap height so content does not spill off screen on short phones
|
||||
// (iPhone SE 667px with three sections visible). overflowY:'auto' enables
|
||||
// scroll when content exceeds maxHeight.
|
||||
maxHeight: '90dvh',
|
||||
overflowY: 'auto',
|
||||
background: 'var(--color-surface)',
|
||||
borderRadius: '12px 12px 0 0',
|
||||
boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
|
||||
padding: 'var(--space-6, 24px)',
|
||||
// IN-03: pad the bottom to clear iOS home indicator / Android gesture bar
|
||||
paddingBottom: 'calc(var(--space-6, 24px) + env(safe-area-inset-bottom, 0px))',
|
||||
zIndex: 301,
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}
|
||||
: {
|
||||
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',
|
||||
background: 'var(--color-surface)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
|
||||
padding: 'var(--space-6, 24px)',
|
||||
zIndex: 301,
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop — uses --color-overlay per UI-SPEC §Surface B (matches ResetPasswordSheet) */}
|
||||
<div
|
||||
onClick={handleClose}
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'var(--color-overlay, rgba(0,0,0,0.32))',
|
||||
zIndex: 300,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Sheet */}
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={heading}
|
||||
onKeyDown={handleDialogKeyDown}
|
||||
style={sheetStyle}
|
||||
>
|
||||
{/* Heading */}
|
||||
<h2
|
||||
ref={headingRef}
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
margin: '0 0 var(--space-1, 4px) 0',
|
||||
fontSize: 'var(--text-heading-size, 18px)',
|
||||
fontWeight: 600,
|
||||
lineHeight: 'var(--text-heading-line-height, 1.25)',
|
||||
color: 'var(--color-text-primary)',
|
||||
outline: 'none',
|
||||
}}
|
||||
>
|
||||
{heading}
|
||||
</h2>
|
||||
|
||||
{/* Member subtitle (edit mode only) */}
|
||||
{mode === 'edit' && member && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-text-secondary)',
|
||||
marginBottom: 'var(--space-6, 24px)',
|
||||
}}
|
||||
>
|
||||
{member.displayName ?? 'Member'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── EDIT MODE ──────────────────────────────────────────────────── */}
|
||||
{mode === 'edit' && member && (
|
||||
<>
|
||||
{/* Section 1 — Profile */}
|
||||
<div>
|
||||
<div style={sectionLabelStyle}>Profile</div>
|
||||
|
||||
{/* Display name */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="editor-display-name" style={labelStyle}>
|
||||
Display name
|
||||
</label>
|
||||
<input
|
||||
id="editor-display-name"
|
||||
type="text"
|
||||
maxLength={256}
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
aria-describedby={profileError ? 'profile-error' : undefined}
|
||||
style={inputStyle(!!profileError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Admin toggle */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 'var(--space-4, 16px)',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
>
|
||||
Admin
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Can access admin settings
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle pill — role="switch" per UI-SPEC Accessibility Contract */}
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={isAdmin}
|
||||
aria-label="Admin"
|
||||
aria-describedby={profileError ? 'profile-error' : undefined}
|
||||
onClick={() => {
|
||||
setProfileError(null);
|
||||
setIsAdmin((prev) => !prev);
|
||||
}}
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '24px',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
background: isAdmin
|
||||
? 'var(--color-member-0, #e8915a)'
|
||||
: 'var(--color-border, #E2E4E9)',
|
||||
position: 'relative',
|
||||
transition: 'background 0.15s ease',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{/* Thumb */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '2px',
|
||||
left: isAdmin ? '22px' : '2px',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
background: '#ffffff',
|
||||
transition: 'left 0.15s ease',
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* IN-01: helper text when display name is empty (e.g. null-displayName
|
||||
OIDC member) so the admin knows why Save is disabled */}
|
||||
{displayName.trim().length === 0 && !profileError && (
|
||||
<p style={helperTextStyle}>Enter a display name to enable Save.</p>
|
||||
)}
|
||||
|
||||
{/* Last-admin guard inline error */}
|
||||
{profileError && (
|
||||
<div id="profile-error" style={inlineErrorStyle}>
|
||||
{profileError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={actionsRowStyle}>
|
||||
<button type="button" onClick={handleClose} style={cancelButtonStyle}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={profileMutation.isPending || displayName.trim().length === 0}
|
||||
onClick={() => {
|
||||
setProfileError(null);
|
||||
profileMutation.mutate();
|
||||
}}
|
||||
style={primaryButtonStyle(
|
||||
profileMutation.isPending || displayName.trim().length === 0,
|
||||
)}
|
||||
>
|
||||
{profileMutation.isPending && (
|
||||
<Loader2
|
||||
size={14}
|
||||
aria-hidden="true"
|
||||
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
|
||||
/>
|
||||
)}
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section 2 — Set new password (only for members with local credential) */}
|
||||
{member.hasLocalCredential && (
|
||||
<>
|
||||
<div style={sectionDividerStyle} />
|
||||
<div>
|
||||
<div style={sectionLabelStyle}>Set new password</div>
|
||||
<div style={helperTextStyle}>Leave blank to keep the current password.</div>
|
||||
|
||||
{/* New password */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="editor-new-password" style={labelStyle}>
|
||||
New password
|
||||
</label>
|
||||
<input
|
||||
id="editor-new-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
aria-describedby={passwordError ? 'password-error' : undefined}
|
||||
style={inputStyle(!!passwordError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Confirm new password */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="editor-confirm-password" style={labelStyle}>
|
||||
Confirm new password
|
||||
</label>
|
||||
<input
|
||||
id="editor-confirm-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
aria-describedby={passwordError ? 'password-error' : undefined}
|
||||
style={inputStyle(!!passwordError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Password error */}
|
||||
{passwordError && (
|
||||
<div id="password-error" style={inlineErrorStyle}>
|
||||
{passwordError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={actionsRowStyle}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={
|
||||
passwordMutation.isPending ||
|
||||
newPassword.length === 0 ||
|
||||
confirmPassword.length === 0
|
||||
}
|
||||
onClick={() => {
|
||||
setPasswordError(null);
|
||||
passwordMutation.mutate();
|
||||
}}
|
||||
style={primaryButtonStyle(
|
||||
passwordMutation.isPending ||
|
||||
newPassword.length === 0 ||
|
||||
confirmPassword.length === 0,
|
||||
)}
|
||||
>
|
||||
{passwordMutation.isPending && (
|
||||
<Loader2
|
||||
size={14}
|
||||
aria-hidden="true"
|
||||
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
|
||||
/>
|
||||
)}
|
||||
Set password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Section 3 — App password (always in edit mode) */}
|
||||
<>
|
||||
<div style={sectionDividerStyle} />
|
||||
<div>
|
||||
<div style={sectionLabelStyle}>App password</div>
|
||||
|
||||
{/* Helper text with link */}
|
||||
<div style={{ ...helperTextStyle, marginBottom: 'var(--space-4, 16px)' }}>
|
||||
Fastmail app password scoped to Calendars & Contacts (CalDAV).{' '}
|
||||
<a
|
||||
href={CALDAV_LINK_HREF}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
color: 'var(--color-member-0, #e8915a)',
|
||||
textDecoration: 'underline',
|
||||
}}
|
||||
>
|
||||
{CALDAV_LINK_TEXT}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* In-flight validating state */}
|
||||
{appPasswordMutation.isPending && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2, 8px)',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
color: 'var(--color-text-secondary)',
|
||||
marginBottom: 'var(--space-4, 16px)',
|
||||
}}
|
||||
>
|
||||
<Loader2
|
||||
size={16}
|
||||
aria-hidden="true"
|
||||
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
|
||||
/>
|
||||
{CALDAV_VALIDATING_TEXT}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fastmail email */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="editor-fastmail-email" style={labelStyle}>
|
||||
Fastmail email
|
||||
</label>
|
||||
<input
|
||||
id="editor-fastmail-email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
value={fastmailEmail}
|
||||
onChange={(e) => setFastmailEmail(e.target.value)}
|
||||
placeholder="user@fastmail.com"
|
||||
aria-describedby={appPasswordError ? 'app-password-error' : undefined}
|
||||
style={inputStyle(!!appPasswordError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* App password field — NEVER prefilled (T-20-07) */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="editor-app-password" style={labelStyle}>
|
||||
App password
|
||||
</label>
|
||||
<input
|
||||
id="editor-app-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={appPassword}
|
||||
onChange={(e) => setAppPassword(e.target.value)}
|
||||
aria-describedby={appPasswordError ? 'app-password-error' : undefined}
|
||||
style={inputStyle(!!appPasswordError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CalDAV error */}
|
||||
{appPasswordError && (
|
||||
<div id="app-password-error" style={inlineErrorStyle}>
|
||||
{appPasswordError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={actionsRowStyle}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={
|
||||
appPasswordMutation.isPending ||
|
||||
fastmailEmail.trim().length === 0 ||
|
||||
appPassword.length === 0
|
||||
}
|
||||
onClick={() => {
|
||||
setAppPasswordError(null);
|
||||
appPasswordMutation.mutate();
|
||||
}}
|
||||
style={primaryButtonStyle(
|
||||
appPasswordMutation.isPending ||
|
||||
fastmailEmail.trim().length === 0 ||
|
||||
appPassword.length === 0,
|
||||
)}
|
||||
>
|
||||
{appPasswordMutation.isPending && (
|
||||
<Loader2
|
||||
size={14}
|
||||
aria-hidden="true"
|
||||
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
|
||||
/>
|
||||
)}
|
||||
Save app password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── CREATE MODE ────────────────────────────────────────────────── */}
|
||||
{mode === 'create' && (
|
||||
<div>
|
||||
{/* Display name */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="create-display-name" style={labelStyle}>
|
||||
Display name
|
||||
</label>
|
||||
<input
|
||||
id="create-display-name"
|
||||
type="text"
|
||||
maxLength={256}
|
||||
value={createDisplayName}
|
||||
onChange={(e) => setCreateDisplayName(e.target.value)}
|
||||
aria-describedby={createError ? 'create-error' : undefined}
|
||||
style={inputStyle(!!createError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Username */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="create-username" style={labelStyle}>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="create-username"
|
||||
type="text"
|
||||
maxLength={128}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
autoCapitalize="none"
|
||||
value={createUsername}
|
||||
onChange={(e) => setCreateUsername(e.target.value)}
|
||||
aria-describedby={createError ? 'create-error' : undefined}
|
||||
style={inputStyle(!!createError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Initial password */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="create-initial-password" style={labelStyle}>
|
||||
Initial password
|
||||
</label>
|
||||
<input
|
||||
id="create-initial-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={createPassword}
|
||||
onChange={(e) => setCreatePassword(e.target.value)}
|
||||
aria-describedby={createError ? 'create-error' : undefined}
|
||||
style={inputStyle(!!createError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Confirm password */}
|
||||
<div style={fieldContainerStyle}>
|
||||
<label htmlFor="create-confirm-password" style={labelStyle}>
|
||||
Confirm password
|
||||
</label>
|
||||
<input
|
||||
id="create-confirm-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={createConfirmPassword}
|
||||
onChange={(e) => setCreateConfirmPassword(e.target.value)}
|
||||
aria-describedby={createError ? 'create-error' : undefined}
|
||||
style={inputStyle(!!createError)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Create error */}
|
||||
{createError && (
|
||||
<div id="create-error" style={inlineErrorStyle}>
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={actionsRowStyle}>
|
||||
<button type="button" onClick={handleClose} style={cancelButtonStyle}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={
|
||||
createMutation.isPending ||
|
||||
createDisplayName.trim().length === 0 ||
|
||||
createUsername.trim().length === 0 ||
|
||||
createPassword.length === 0 ||
|
||||
createConfirmPassword.length === 0
|
||||
}
|
||||
onClick={() => {
|
||||
setCreateError(null);
|
||||
createMutation.mutate();
|
||||
}}
|
||||
style={primaryButtonStyle(
|
||||
createMutation.isPending ||
|
||||
createDisplayName.trim().length === 0 ||
|
||||
createUsername.trim().length === 0 ||
|
||||
createPassword.length === 0 ||
|
||||
createConfirmPassword.length === 0,
|
||||
)}
|
||||
>
|
||||
{createMutation.isPending && (
|
||||
<Loader2
|
||||
size={14}
|
||||
aria-hidden="true"
|
||||
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
|
||||
/>
|
||||
)}
|
||||
Add member
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
+151
-686
@@ -9,10 +9,10 @@
|
||||
* - Centered content column, maxWidth 640px on desktop
|
||||
* - var(--space-12) top/bottom padding, var(--space-6) horizontal padding
|
||||
*
|
||||
* UI-SPEC §Surface 2 (MEMBERS section):
|
||||
* - 32px avatar swatch (var(--color-member-N)) + member name + credential status badge
|
||||
* - "Rotate" or "Add credential" action button per hasCredential
|
||||
* - Opens CredentialSheet in admin-rotate or admin-add mode
|
||||
* UI-SPEC §Surface A (MEMBERS section — Phase 20):
|
||||
* - Tappable MemberRow with trailing ChevronRight + "Admin" badge when isAdmin
|
||||
* - Single "Add member" ghost trigger at the bottom (opens MemberEditorSheet in create mode)
|
||||
* - No per-row action-button cluster; no always-open inline add form
|
||||
*
|
||||
* UI-SPEC §Surface 5 (SHARED CALENDAR section):
|
||||
* - Radio group, one row per synced calendar
|
||||
@@ -25,21 +25,18 @@
|
||||
|
||||
import { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
|
||||
import { CheckCircle, AlertCircle, ChevronRight, Plus } from 'lucide-react';
|
||||
import {
|
||||
fetchAdminMembers,
|
||||
fetchAdminCalendars,
|
||||
setSharedCalendar,
|
||||
fetchAdminTimezone,
|
||||
setAdminTimezone,
|
||||
fetchCreateMember,
|
||||
fetchAdminResetPassword,
|
||||
type AdminMember,
|
||||
type AdminCalendar,
|
||||
} from '../api/client.js';
|
||||
import { CredentialSheet, type CredentialSheetMode } from '../components/CredentialSheet.js';
|
||||
import { MemberEditorSheet } from '../components/MemberEditorSheet.js';
|
||||
import { useIsPhone } from '../hooks/useIsPhone.js';
|
||||
import { useFocusTrap } from '../hooks/useFocusTrap.js';
|
||||
|
||||
// ── Styles ─────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -78,24 +75,20 @@ export function AdminPage() {
|
||||
// Two-tab navigation state (D-10)
|
||||
const [activeTab, setActiveTab] = useState<'members' | 'settings'>('members');
|
||||
|
||||
// Credential sheet state
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const [sheetMode, setSheetMode] = useState<CredentialSheetMode>('admin-add');
|
||||
const [sheetMember, setSheetMember] = useState<AdminMember | null>(null);
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
// Reset-password sheet state (Surface 11B)
|
||||
const [resetSheetOpen, setResetSheetOpen] = useState(false);
|
||||
const [resetTargetMember, setResetTargetMember] = useState<AdminMember | null>(null);
|
||||
// resetTriggerRef: stores the exact button that opened the reset sheet so focus can return on close
|
||||
const resetTriggerRef = useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
// Create-member form state (Surface 11A)
|
||||
const [createDisplayName, setCreateDisplayName] = useState('');
|
||||
const [createUsername, setCreateUsername] = useState('');
|
||||
const [createPassword, setCreatePassword] = useState('');
|
||||
const [createConfirmPassword, setCreateConfirmPassword] = useState('');
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
// ── Member editor sheet state ───────────────────────────────────────────
|
||||
// A single MemberEditorSheet instance handles both edit (row tap) and
|
||||
// create ("Add member" trigger) modes (D-07 unification).
|
||||
const [editorOpen, setEditorOpen] = useState(false);
|
||||
const [editorMode, setEditorMode] = useState<'edit' | 'create'>('edit');
|
||||
// CR-02: store only the id, not the full member object. The full member is
|
||||
// derived from live query data each render (see below, after membersQuery),
|
||||
// so per-section saves + invalidations keep the editor's member prop fresh
|
||||
// without a stale captured reference.
|
||||
const [editorMemberId, setEditorMemberId] = useState<number | null>(null);
|
||||
// Ref to the element that opened the sheet — focus returns here on close (a11y)
|
||||
const editorTriggerRef = useRef<HTMLElement | null>(null);
|
||||
// Ref for the "Add member" ghost trigger button
|
||||
const addMemberTriggerRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
// Shared calendar picker state
|
||||
const [selectedCalendarId, setSelectedCalendarId] = useState<number | null>(null);
|
||||
@@ -126,6 +119,13 @@ export function AdminPage() {
|
||||
staleTime: 60 * 1000,
|
||||
});
|
||||
|
||||
// CR-02: derive editorMember from live query data so saves + invalidations always
|
||||
// reflect the latest server state rather than a snapshot from when the row was tapped.
|
||||
const editorMember =
|
||||
editorMemberId !== null
|
||||
? (membersQuery.data?.members.find((m) => m.id === editorMemberId) ?? null)
|
||||
: null;
|
||||
|
||||
// Calendars query
|
||||
const calendarsQuery = useQuery({
|
||||
queryKey: ['admin', 'calendars'],
|
||||
@@ -248,62 +248,21 @@ export function AdminPage() {
|
||||
)?.focus();
|
||||
}
|
||||
|
||||
// Open credential sheet for a member
|
||||
function openSheet(member: AdminMember, buttonRef: React.RefObject<HTMLButtonElement | null>) {
|
||||
// Capture the button so focus can return on close
|
||||
(triggerRef as React.MutableRefObject<HTMLElement | null>).current = buttonRef.current;
|
||||
setSheetMember(member);
|
||||
setSheetMode(member.hasCredential ? 'admin-rotate' : 'admin-add');
|
||||
setSheetOpen(true);
|
||||
// Open the editor for a specific member (row tap → edit mode)
|
||||
function openEditorForMember(member: AdminMember, rowEl: HTMLElement) {
|
||||
editorTriggerRef.current = rowEl;
|
||||
setEditorMemberId(member.id); // CR-02: store id only; editorMember is derived from live data
|
||||
setEditorMode('edit');
|
||||
setEditorOpen(true);
|
||||
}
|
||||
|
||||
// Create-member mutation (Surface 11A)
|
||||
const createMemberMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
// Client-side validation (server also validates; this is for UX)
|
||||
if (createPassword !== createConfirmPassword) {
|
||||
throw new Error('mismatch');
|
||||
}
|
||||
if (createPassword.length < 8) {
|
||||
throw new Error('short');
|
||||
}
|
||||
await fetchCreateMember({
|
||||
displayName: createDisplayName.trim(),
|
||||
username: createUsername.trim(),
|
||||
password: createPassword,
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
// Clear form + refresh member list
|
||||
setCreateDisplayName('');
|
||||
setCreateUsername('');
|
||||
setCreatePassword('');
|
||||
setCreateConfirmPassword('');
|
||||
setCreateError(null);
|
||||
void queryClient.invalidateQueries({ queryKey: ['admin', 'members'] });
|
||||
void queryClient.invalidateQueries({ queryKey: ['me'] });
|
||||
showToast('Member added.');
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'server';
|
||||
if (msg === 'mismatch') {
|
||||
setCreateError('Passwords do not match.');
|
||||
} else if (msg === 'short') {
|
||||
setCreateError('Password is too short. Use at least 8 characters.');
|
||||
} else if (msg === 'conflict' || msg.includes('409')) {
|
||||
setCreateError('That username is already in use. Choose a different one.');
|
||||
} else {
|
||||
setCreateError('Something went wrong. Please try again.');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const createSubmitDisabled =
|
||||
createMemberMutation.isPending ||
|
||||
createDisplayName.trim().length === 0 ||
|
||||
createUsername.trim().length === 0 ||
|
||||
createPassword.length === 0 ||
|
||||
createConfirmPassword.length === 0;
|
||||
// Open the editor in create mode ("Add member" trigger)
|
||||
function openEditorForCreate() {
|
||||
editorTriggerRef.current = addMemberTriggerRef.current;
|
||||
setEditorMemberId(null);
|
||||
setEditorMode('create');
|
||||
setEditorOpen(true);
|
||||
}
|
||||
|
||||
const saveDisabled =
|
||||
sharedCalMutation.isPending ||
|
||||
@@ -416,248 +375,79 @@ export function AdminPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{membersQuery.data && (
|
||||
{membersQuery.data && membersQuery.data.members.length === 0 && (
|
||||
<div
|
||||
style={{
|
||||
padding: 'var(--space-8, 32px) 0',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-2, 8px)',
|
||||
}}
|
||||
>
|
||||
No members yet
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
color: 'var(--color-text-secondary)',
|
||||
}}
|
||||
>
|
||||
Add a member to get started.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{membersQuery.data && membersQuery.data.members.length > 0 && (
|
||||
<div>
|
||||
{membersQuery.data.members.map((member, idx) => (
|
||||
<MemberRow
|
||||
key={member.id}
|
||||
member={member}
|
||||
colorIndex={idx}
|
||||
onAction={(buttonRef) => openSheet(member, buttonRef)}
|
||||
onResetPassword={(buttonRef) => {
|
||||
// Capture trigger button so focus can return on close
|
||||
resetTriggerRef.current = buttonRef.current;
|
||||
setResetTargetMember(member);
|
||||
setResetSheetOpen(true);
|
||||
}}
|
||||
onEdit={(rowEl) => openEditorForMember(member, rowEl)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── LOCAL ACCOUNTS section ──────────────────────────────────────── */}
|
||||
<section aria-label="Local Accounts" style={{ marginBottom: 'var(--space-8, 32px)' }}>
|
||||
<div style={sectionLabelStyle}>Local Accounts</div>
|
||||
|
||||
{/* Surface 11A — Add member inline form */}
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--color-border-subtle, var(--color-border))',
|
||||
borderRadius: '8px',
|
||||
padding: 'var(--space-4, 16px)',
|
||||
marginBottom: 'var(--space-6, 24px)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
{/* "Add member" ghost trigger — opens MemberEditorSheet in create mode (D-07) */}
|
||||
<div style={{ marginTop: 'var(--space-4, 16px)' }}>
|
||||
<button
|
||||
ref={addMemberTriggerRef}
|
||||
type="button"
|
||||
onClick={openEditorForCreate}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2, 8px)',
|
||||
width: '100%',
|
||||
background: 'var(--color-surface)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: '8px',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
minHeight: '44px',
|
||||
cursor: 'pointer',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
fontWeight: 600,
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-4, 16px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'var(--color-surface-dim)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'var(--color-surface)';
|
||||
}}
|
||||
>
|
||||
<Plus size={16} aria-hidden="true" style={{ flexShrink: 0 }} />
|
||||
Add member
|
||||
</div>
|
||||
|
||||
{/* Display name */}
|
||||
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
|
||||
<label
|
||||
htmlFor="admin-create-display-name"
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-1, 4px)',
|
||||
}}
|
||||
>
|
||||
Display name
|
||||
</label>
|
||||
<input
|
||||
id="admin-create-display-name"
|
||||
type="text"
|
||||
value={createDisplayName}
|
||||
onChange={(e) => setCreateDisplayName(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
color: 'var(--color-text-primary)',
|
||||
background: 'var(--color-surface)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
outline: 'none',
|
||||
minHeight: '44px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Username */}
|
||||
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
|
||||
<label
|
||||
htmlFor="admin-create-username"
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-1, 4px)',
|
||||
}}
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="admin-create-username"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
autoCapitalize="none"
|
||||
value={createUsername}
|
||||
onChange={(e) => setCreateUsername(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
color: 'var(--color-text-primary)',
|
||||
background: 'var(--color-surface)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
outline: 'none',
|
||||
minHeight: '44px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Initial password */}
|
||||
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
|
||||
<label
|
||||
htmlFor="admin-create-password"
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-1, 4px)',
|
||||
}}
|
||||
>
|
||||
Initial password
|
||||
</label>
|
||||
<input
|
||||
id="admin-create-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={createPassword}
|
||||
onChange={(e) => setCreatePassword(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
color: 'var(--color-text-primary)',
|
||||
background: 'var(--color-surface)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
outline: 'none',
|
||||
minHeight: '44px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Confirm password */}
|
||||
<div style={{ marginBottom: 'var(--space-4, 16px)' }}>
|
||||
<label
|
||||
htmlFor="admin-create-confirm-password"
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-1, 4px)',
|
||||
}}
|
||||
>
|
||||
Confirm password
|
||||
</label>
|
||||
<input
|
||||
id="admin-create-confirm-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={createConfirmPassword}
|
||||
onChange={(e) => setCreateConfirmPassword(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
color: 'var(--color-text-primary)',
|
||||
background: 'var(--color-surface)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
outline: 'none',
|
||||
minHeight: '44px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Inline error */}
|
||||
{createError && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-destructive)',
|
||||
marginBottom: 'var(--space-3, 12px)',
|
||||
}}
|
||||
>
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action row */}
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<button
|
||||
type="button"
|
||||
disabled={createSubmitDisabled}
|
||||
onClick={() => {
|
||||
setCreateError(null);
|
||||
createMemberMutation.mutate();
|
||||
}}
|
||||
style={{
|
||||
background: createSubmitDisabled
|
||||
? 'var(--color-border, #e2e4e9)'
|
||||
: 'var(--color-member-0, #4a90d9)',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
cursor: createSubmitDisabled ? 'default' : 'pointer',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
padding: '0 var(--space-6, 24px)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
transition: 'background 0.15s ease',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--space-2, 8px)',
|
||||
}}
|
||||
>
|
||||
{createMemberMutation.isPending && (
|
||||
<Loader2
|
||||
size={14}
|
||||
aria-hidden="true"
|
||||
style={{ animation: 'spin 1s linear infinite', flexShrink: 0 }}
|
||||
/>
|
||||
)}
|
||||
Add member
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -1108,33 +898,15 @@ export function AdminPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Credential sheet — admin-rotate or admin-add */}
|
||||
{sheetMember && (
|
||||
<CredentialSheet
|
||||
isOpen={sheetOpen}
|
||||
onClose={() => setSheetOpen(false)}
|
||||
mode={sheetMode}
|
||||
memberName={sheetMember.displayName}
|
||||
memberId={sheetMember.id}
|
||||
triggerRef={triggerRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Surface 11B — Reset password sheet */}
|
||||
{resetTargetMember && (
|
||||
<ResetPasswordSheet
|
||||
isOpen={resetSheetOpen}
|
||||
onClose={() => {
|
||||
setResetSheetOpen(false);
|
||||
// Return focus to trigger
|
||||
if (resetTriggerRef.current) {
|
||||
resetTriggerRef.current.focus();
|
||||
}
|
||||
}}
|
||||
onSuccess={() => showToast('Password reset.')}
|
||||
member={resetTargetMember}
|
||||
/>
|
||||
)}
|
||||
{/* Single unified MemberEditorSheet — handles edit + create modes (D-07) */}
|
||||
<MemberEditorSheet
|
||||
isOpen={editorOpen}
|
||||
onClose={() => setEditorOpen(false)}
|
||||
mode={editorMode}
|
||||
member={editorMember ?? undefined}
|
||||
triggerRef={editorTriggerRef}
|
||||
onToast={showToast}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1144,16 +916,37 @@ export function AdminPage() {
|
||||
interface MemberRowProps {
|
||||
member: AdminMember;
|
||||
colorIndex: number;
|
||||
onAction: (buttonRef: React.RefObject<HTMLButtonElement | null>) => void;
|
||||
onResetPassword?: (buttonRef: React.RefObject<HTMLButtonElement | null>) => void;
|
||||
/** Called with the row element so focus can return to it on editor close */
|
||||
onEdit: (rowEl: HTMLElement) => void;
|
||||
}
|
||||
|
||||
function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowProps) {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const resetBtnRef = useRef<HTMLButtonElement>(null);
|
||||
/**
|
||||
* Tappable member row (D-04): whole-row role="button" target with trailing
|
||||
* ChevronRight affordance. Opens MemberEditorSheet in edit mode on tap/click
|
||||
* or Enter/Space. Admin badge displayed when member.isAdmin.
|
||||
*/
|
||||
function MemberRow({ member, colorIndex, onEdit }: MemberRowProps) {
|
||||
const rowRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
function handleActivate() {
|
||||
if (rowRef.current) {
|
||||
onEdit(rowRef.current);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rowRef}
|
||||
role="button"
|
||||
aria-label={`Edit ${member.displayName ?? 'Member'}`}
|
||||
tabIndex={0}
|
||||
onClick={handleActivate}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleActivate();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -1161,6 +954,7 @@ function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowP
|
||||
minHeight: '44px',
|
||||
padding: 'var(--space-2, 8px) 0',
|
||||
borderBottom: '1px solid var(--color-border-subtle, var(--color-border))',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{/* Avatar swatch */}
|
||||
@@ -1175,7 +969,7 @@ function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowP
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Name + status */}
|
||||
{/* Name + credential status badge */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
@@ -1235,54 +1029,29 @@ function MemberRow({ member, colorIndex, onAction, onResetPassword }: MemberRowP
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action button row */}
|
||||
<div style={{ display: 'flex', gap: 'var(--space-2, 8px)', flexShrink: 0 }}>
|
||||
{/* Credential rotate/add button */}
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
onClick={() => onAction(buttonRef)}
|
||||
{/* Admin badge — shown when member.isAdmin (UI-SPEC §Surface A) */}
|
||||
{member.isAdmin && (
|
||||
<span
|
||||
style={{
|
||||
background: 'none',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
cursor: 'pointer',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
padding: '0 var(--space-3, 12px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-member-0, #e8915a)',
|
||||
background: 'var(--color-surface-dim, #f7f7f8)',
|
||||
borderRadius: '4px',
|
||||
padding: '2px 6px',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{member.hasCredential ? 'Rotate' : 'Add credential'}
|
||||
</button>
|
||||
Admin
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Surface 11B — Reset password button (only for members with a local credential) */}
|
||||
{member.hasLocalCredential && onResetPassword && (
|
||||
<button
|
||||
ref={resetBtnRef}
|
||||
type="button"
|
||||
onClick={() => onResetPassword(resetBtnRef)}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: '1px solid var(--color-border)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
cursor: 'pointer',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
padding: '0 var(--space-3, 12px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}}
|
||||
>
|
||||
Reset password
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Trailing chevron affordance */}
|
||||
<ChevronRight
|
||||
size={16}
|
||||
aria-hidden="true"
|
||||
style={{ color: 'var(--color-text-muted)', flexShrink: 0, marginLeft: 'var(--space-2)' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1372,310 +1141,6 @@ function CalendarRadioRow({ calendar, isSelected, onSelect }: CalendarRadioRowPr
|
||||
);
|
||||
}
|
||||
|
||||
// ── ResetPasswordSheet ──────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Surface 11B — Admin password reset sheet.
|
||||
* Opens as a bottom sheet (mobile) / centered modal (desktop).
|
||||
* Pattern: CredentialSheet (role=dialog, aria-modal, Escape closes, focus returns to trigger).
|
||||
* No current-password field — admin reset does not require knowing the old password.
|
||||
*/
|
||||
|
||||
interface ResetPasswordSheetProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
member: AdminMember;
|
||||
}
|
||||
|
||||
function ResetPasswordSheet({ isOpen, onClose, onSuccess, member }: ResetPasswordSheetProps) {
|
||||
// WR-05: resize-aware phone detection.
|
||||
const sheetPhone = useIsPhone();
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const headingRef = useRef<HTMLHeadingElement>(null);
|
||||
// WR-01: trap Tab/Shift+Tab inside the dialog (matches aria-modal="true").
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
const handleDialogKeyDown = useFocusTrap(dialogRef);
|
||||
|
||||
// Escape closes the sheet
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => document.removeEventListener('keydown', onKeyDown);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
// Focus heading on open
|
||||
useEffect(() => {
|
||||
if (isOpen && headingRef.current) {
|
||||
headingRef.current.focus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
function handleClose() {
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
setError(null);
|
||||
onClose();
|
||||
}
|
||||
|
||||
const resetMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
if (newPassword !== confirmPassword) throw new Error('mismatch');
|
||||
await fetchAdminResetPassword(member.id, newPassword);
|
||||
},
|
||||
onSuccess: () => {
|
||||
handleClose();
|
||||
onSuccess?.();
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'server';
|
||||
if (msg === 'mismatch') {
|
||||
setError('Passwords do not match.');
|
||||
} else {
|
||||
setError('Something went wrong. Please try again.');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const isPending = resetMutation.isPending;
|
||||
const submitDisabled = isPending || newPassword.length === 0 || confirmPassword.length === 0;
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
onClick={handleClose}
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
background: 'var(--color-overlay, rgba(0,0,0,0.32))',
|
||||
zIndex: 300,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Sheet — phone: bottom-sheet / desktop: centered modal (D-09) */}
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Reset password"
|
||||
onKeyDown={handleDialogKeyDown}
|
||||
style={
|
||||
sheetPhone
|
||||
? {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
background: 'var(--color-surface, #ffffff)',
|
||||
borderRadius: '12px 12px 0 0',
|
||||
boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
|
||||
padding: 'var(--space-6, 24px)',
|
||||
zIndex: 301,
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}
|
||||
: {
|
||||
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',
|
||||
background: 'var(--color-surface, #ffffff)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
|
||||
padding: 'var(--space-6, 24px)',
|
||||
zIndex: 301,
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
}
|
||||
}
|
||||
>
|
||||
<h2
|
||||
ref={headingRef}
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
margin: '0 0 var(--space-1, 4px) 0',
|
||||
fontSize: 'var(--text-heading-size, 18px)',
|
||||
fontWeight: 600,
|
||||
lineHeight: 'var(--text-heading-line-height, 1.25)',
|
||||
color: 'var(--color-text-primary)',
|
||||
outline: 'none',
|
||||
}}
|
||||
>
|
||||
Reset password
|
||||
</h2>
|
||||
|
||||
{/* Member subtitle */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-text-secondary)',
|
||||
marginBottom: 'var(--space-6, 24px)',
|
||||
}}
|
||||
>
|
||||
{member.displayName ?? 'Member'}
|
||||
</div>
|
||||
|
||||
{/* New password */}
|
||||
<div style={{ marginBottom: 'var(--space-3, 12px)' }}>
|
||||
<label
|
||||
htmlFor="reset-new-password"
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-1, 4px)',
|
||||
}}
|
||||
>
|
||||
New password
|
||||
</label>
|
||||
<input
|
||||
id="reset-new-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
border: `1px solid ${error ? 'var(--color-destructive)' : 'var(--color-border)'}`,
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
color: 'var(--color-text-primary)',
|
||||
background: 'var(--color-surface)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
outline: 'none',
|
||||
minHeight: '44px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Confirm new password */}
|
||||
<div style={{ marginBottom: 'var(--space-4, 16px)' }}>
|
||||
<label
|
||||
htmlFor="reset-confirm-password"
|
||||
style={{
|
||||
display: 'block',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-primary)',
|
||||
marginBottom: 'var(--space-1, 4px)',
|
||||
}}
|
||||
>
|
||||
Confirm new password
|
||||
</label>
|
||||
<input
|
||||
id="reset-confirm-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
aria-describedby={error ? 'reset-error' : undefined}
|
||||
style={{
|
||||
width: '100%',
|
||||
boxSizing: 'border-box',
|
||||
padding: 'var(--space-3, 12px) var(--space-4, 16px)',
|
||||
border: `1px solid ${error ? 'var(--color-destructive)' : 'var(--color-border)'}`,
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontSize: 'var(--text-body-size, 15px)',
|
||||
color: 'var(--color-text-primary)',
|
||||
background: 'var(--color-surface)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
outline: 'none',
|
||||
minHeight: '44px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Inline error */}
|
||||
{error && (
|
||||
<div
|
||||
id="reset-error"
|
||||
style={{
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 400,
|
||||
color: 'var(--color-destructive)',
|
||||
marginBottom: 'var(--space-4, 16px)',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action row */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 'var(--space-3, 12px)',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={isPending}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: isPending ? 'default' : 'pointer',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
color: 'var(--color-text-secondary)',
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
padding: '0 var(--space-4, 16px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={submitDisabled}
|
||||
onClick={() => {
|
||||
setError(null);
|
||||
resetMutation.mutate();
|
||||
}}
|
||||
style={{
|
||||
background: submitDisabled
|
||||
? 'var(--color-border, #e2e4e9)'
|
||||
: 'var(--color-member-0, #4a90d9)',
|
||||
color: '#ffffff',
|
||||
border: 'none',
|
||||
cursor: submitDisabled ? 'default' : 'pointer',
|
||||
fontSize: 'var(--text-label-size, 13px)',
|
||||
fontWeight: 600,
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
padding: '0 var(--space-4, 16px)',
|
||||
borderRadius: 'var(--space-1, 4px)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
transition: 'background 0.15s ease',
|
||||
}}
|
||||
>
|
||||
Reset password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── EmptyCalendarsState ─────────────────────────────────────────────────────
|
||||
|
||||
function EmptyCalendarsState() {
|
||||
|
||||
Reference in New Issue
Block a user