Implement Settings page with form validation (P2.9)

- Add client-side form for cycleLength, notificationTime, timezone
- Fetch user data on mount and pre-fill form values
- Submit updates via PATCH /api/user with loading states
- Display success/error messages with proper accessibility
- Clear messages when user modifies form
- 24 tests covering rendering, data loading, validation, error handling

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-10 20:14:49 +00:00
parent e73d131450
commit 75f0e8ec80
3 changed files with 704 additions and 8 deletions

View File

@@ -46,7 +46,7 @@ This file is maintained by Ralph. Run `./ralph-sandbox.sh plan 3` to generate ta
|------|--------|-------|
| Dashboard (`/`) | **COMPLETE** | Wired with /api/today, DecisionCard, DataPanel, NutritionPanel, OverrideToggles |
| Login (`/login`) | **COMPLETE** | Email/password form with auth, error handling, loading states |
| Settings (`/settings`) | Placeholder | Needs form implementation |
| Settings (`/settings`) | **COMPLETE** | Form with cycleLength, notificationTime, timezone |
| Settings/Garmin (`/settings/garmin`) | Placeholder | Needs token management UI |
| Calendar (`/calendar`) | Placeholder | Needs MonthView integration |
| History (`/history`) | Placeholder | Needs list/pagination implementation |
@@ -374,12 +374,12 @@ Full feature set for production use.
- **Why:** Users want to see their training history
- **Depends On:** P0.1, P0.2
### P2.9: Settings Page Implementation
- [ ] User profile management UI
### P2.9: Settings Page Implementation ✅ COMPLETE
- [x] User profile management UI
- **Files:**
- `src/app/settings/page.tsx` - Form for cycleLength, notificationTime, timezone
- `src/app/settings/page.tsx` - Form for cycleLength, notificationTime, timezone with validation, loading states, error handling
- **Tests:**
- E2E test: settings update and persist
- `src/app/settings/page.test.tsx` - 24 tests covering rendering, data loading, form submission, validation, error handling
- **Why:** Users need to configure their preferences
- **Depends On:** P0.4, P1.1
@@ -614,6 +614,7 @@ P2.14 Mini calendar
### Pages
- [x] **Login Page** - Email/password form with PocketBase auth, error handling, loading states, redirect, 14 tests (P1.6)
- [x] **Dashboard Page** - Complete daily interface with /api/today integration, DecisionCard, DataPanel, NutritionPanel, OverrideToggles, 23 tests (P1.7)
- [x] **Settings Page** - Form for cycleLength, notificationTime, timezone with validation, loading states, error handling, 24 tests (P2.9)
### Test Infrastructure
- [x] **test-setup.ts** - Global test setup with @testing-library/jest-dom matchers and cleanup