porchlight/docs/plans/2026-02-18-profile-page-plan.md

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