feat: Unified registration flow — single form with payment + account creation messaging #9

New issue

Closed

opened 2026-03-16 21:58:11 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-16 21:58:11 +00:00

Owner

Lineage

plan-wkq → Phase 10 (Playground) → Phase 12 UX preview

Repo

forgejo_admin/westside-playground

User Story

As a parent registering my child for the first time,
I want one seamless form that collects player info, photo, waiver, and payment all in one flow,
So that I don't have to visit multiple pages or wonder what happens next.

Context

register.html currently has the form fields but it's designed for the old fragmented flow. Phase 12 (Unified Registration) envisions: single form → Stripe payment → Keycloak account auto-created → credentials shown. The playground should show this vision NOW so Phase 15 (SPA port) builds the right thing.

Key changes:

Add a progress indicator at top (Step 1: Player Info → Step 2: Parent Info → Step 3: Waiver → Step 4: Pay)
After the "Register & Pay $30" button, add a confirmation/success state section showing: "Account Created! Your login: [email] / [password]. You can now sign in."
Keep existing form fields — they're correct
The $30 is correct for tryouts. Add a note: "Monthly dues ($200/mo) begin after team placement."

File Targets

register.html — redesign for unified flow UX

Acceptance Criteria

Progress indicator visible at top showing 4 steps
Form flows naturally: player info → parent info → waiver → pay button
Success/confirmation state visible below the form (can be shown/hidden with simple JS toggle or just always visible as a "what happens next" section)
Confirmation shows placeholder credentials: "Your login email: parent@example.com / Password: westside-marcus-2026"
Note about monthly dues after placement
Uses existing CSS from shared/app.css — minimal new styles

Test Expectations

No automated tests (static HTML). Visual verification only.

Constraints

HTML + CSS only (minimal JS for toggle is OK)
Use existing form styles already in the file
Do NOT change other files

Checklist

PR opened
No unrelated changes

project-westside-basketball

### Lineage `plan-wkq` → Phase 10 (Playground) → Phase 12 UX preview ### Repo `forgejo_admin/westside-playground` ### User Story As a parent registering my child for the first time, I want one seamless form that collects player info, photo, waiver, and payment all in one flow, So that I don't have to visit multiple pages or wonder what happens next. ### Context `register.html` currently has the form fields but it's designed for the old fragmented flow. Phase 12 (Unified Registration) envisions: single form → Stripe payment → Keycloak account auto-created → credentials shown. The playground should show this vision NOW so Phase 15 (SPA port) builds the right thing. Key changes: - Add a progress indicator at top (Step 1: Player Info → Step 2: Parent Info → Step 3: Waiver → Step 4: Pay) - After the "Register & Pay $30" button, add a confirmation/success state section showing: "Account Created! Your login: [email] / [password]. You can now sign in." - Keep existing form fields — they're correct - The $30 is correct for tryouts. Add a note: "Monthly dues ($200/mo) begin after team placement." ### File Targets - `register.html` — redesign for unified flow UX ### Acceptance Criteria - [ ] Progress indicator visible at top showing 4 steps - [ ] Form flows naturally: player info → parent info → waiver → pay button - [ ] Success/confirmation state visible below the form (can be shown/hidden with simple JS toggle or just always visible as a "what happens next" section) - [ ] Confirmation shows placeholder credentials: "Your login email: parent@example.com / Password: westside-marcus-2026" - [ ] Note about monthly dues after placement - [ ] Uses existing CSS from `shared/app.css` — minimal new styles ### Test Expectations - No automated tests (static HTML). Visual verification only. ### Constraints - HTML + CSS only (minimal JS for toggle is OK) - Use existing form styles already in the file - Do NOT change other files ### Checklist - [ ] PR opened - [ ] No unrelated changes ### Related - `project-westside-basketball`