# Self-Service Profile Page — Implementation Plan

## Tasks

### Task 1: Create `manage/base.html` template with navigation
- Create `src/porchlight/templates/manage/base.html`
- Extends `base.html`
- Adds `<nav>` block with Profile and Credentials links
- Style nav links in `style.css` (minimal, consistent with existing design)

### Task 2: Update `credentials.html` to extend `manage/base.html`
- Change `{% extends "base.html" %}` to `{% extends "manage/base.html" %}`
- Verify credentials page still renders correctly

### Task 3: Create `profile.html` template
- Extends `manage/base.html`
- Form with fields: given_name, family_name, preferred_username, email, phone_number, picture, locale
- Read-only username display
- HTMX form submission with status target
- HTML5 input types and validation attributes

### Task 4: Add GET and POST routes for `/manage/profile`
- `GET /manage/profile` — fetch user, render profile.html with pre-filled fields
- `POST /manage/profile` — validate form data, update user via repo, return HTMX partial
- Auth guard via `get_session_user()` on both routes
- Server-side validation for email format, URL format, string lengths

### Task 5: Add nav CSS styles
- Style the manage nav bar (links, active state, spacing)
- Keep consistent with existing design system

### Task 6: Add E2E tests (`profile.spec.js`)
- Page structure and form fields
- Auth guard redirect
- Successful profile update and persistence
- Validation error handling
- Navigation between profile and credentials

### Task 7: Seed test user profile data in `setup_db.py`
- Add profile fields to an existing test user so tests can verify pre-filled data

### Task 8: Run full test suite and verify
- `uv run pytest` (Python tests)
- `npx playwright test` (E2E tests)
- Fix any failures

## Verification
- All existing tests continue to pass
- New E2E tests pass
- Profile page renders, submits, and updates correctly