50 lines
1.9 KiB
Markdown
50 lines
1.9 KiB
Markdown
# 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
|