Home page redesign + role redirect + fix Sign In button (Phase 10f-1, 10f-2, 10f-3) #28

New issue

Closed

opened 2026-03-15 04:58:56 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-15 04:58:56 +00:00

Owner

Lineage

plan-2026-03-08-tryout-prep → Phase 10f → Phase 10f-1 (Home page redesign) + 10f-2 (Post-login redirect) + 10f-3 (Fix Sign In button)

Repo

forgejo_admin/westside-app

User Story

As a parent visiting the Westside Kings & Queens website on my phone
I want to see a professional club landing page with program info and a clear Sign In button
So that I feel confident this is a legitimate basketball program, not a developer admin tool

As a logged-in member (admin/coach/player)
I want to land directly on my dashboard after sign-in
So that I don't see a stats page meant for nobody

Context

Session 2026-03-15 UX review revealed the home page (/) shows raw backend stats (Total Players: 54, Checked In: 0, Tryout Numbers: 52) to everyone — including unauthenticated visitors. No user story asks for this. It's developer placeholder content from Phase 6 that was never replaced.

The landing page at ~/west-side-basketball/index.html already has professional design: hero section, about the program, tryout details, how-it-works steps, FAQ. That content should BE the home page.

The Sign In button has a white oval artifact because @auth/sveltekit's <SignIn> component renders <button> wrapping a slotted <button> — invalid HTML.

Design reference: ~/west-side-basketball/index.html + ~/west-side-basketball/css/style.css. Design tokens already aligned in src/app.css (PR #27). The landing page CSS uses the same color palette.

File Targets

Files to modify:

src/routes/+page.svelte — FULL REWRITE. Replace stats dashboard with landing page content: hero, about (3 cards), tryout details, how-it-works (3 steps), FAQ. Port HTML structure from ~/west-side-basketball/index.html sections: hero, #about, #tryouts, how-it-works, #faq. Adapt CSS from ~/west-side-basketball/css/style.css into scoped styles using design tokens from app.css. Sign In CTA button (direct form POST, no <SignIn> component).
src/routes/+page.server.js — REWRITE. If authenticated, redirect by role: admin→/admin, coach→/coach, player→/player. If unauthenticated, return minimal data (or nothing — the landing page is static content).
src/routes/+layout.svelte — May need adjustment so AuthStatus nav doesn't render on the landing page (unauthenticated visitors should see clean landing page nav, not the empty member nav)
src/app.css — Add landing page styles (hero gradient, section alternating backgrounds, card grid, step circles, FAQ accordion, quote block). Prefix with /* Landing Page */ comment section. Use existing design tokens.

Files to read for reference (DO NOT modify these — they're in a different repo):

~/west-side-basketball/index.html — HTML content to port (hero through FAQ sections)
~/west-side-basketball/css/style.css — CSS to adapt (use as reference, translate to design tokens)
~/west-side-basketball/assets/images/logo.jpeg — copy to static/ if needed

Files NOT to touch:

src/routes/admin/** — admin dashboards work fine
src/routes/coach/** — coach view works fine
src/routes/player/** — player view works fine
src/routes/teams/** — team list works fine
src/routes/signin/** — auth routes
src/routes/signout/** — auth routes
src/hooks.server.js — auth middleware
src/auth.js — auth config

Acceptance Criteria

Unauthenticated visit to / shows branded landing page with hero, about, tryouts, FAQ — NOT raw stats
Landing page has a prominent "Member Sign In" button that works (no white oval, no double-button)
Sign In button submits a form POST to /signin with providerId=keycloak (replacing the broken <SignIn> component)
After Keycloak login, admin lands on /admin, coach on /coach, player on /player
The landing page matches the visual style of west-side-basketball — same brand voice, same section structure, same color palette
Landing page is mobile-first — looks great at 390px
Hero section has the Marcus quote: "Built on the Westside. Built to win the right way."
No hydration mismatch warnings in console
npm run build passes

Test Expectations

Visual: landing page renders professional club content on 390px viewport
Auth flow: tap Sign In → Keycloak → login → redirect to role dashboard
Redirect: authenticated admin visiting / gets 303 to /admin
Redirect: authenticated coach visiting / gets 303 to /coach
Redirect: authenticated player visiting / gets 303 to /player
Build: npm run build passes
Run command: npm run build && npm run preview

Constraints

Use existing design tokens from src/app.css — do NOT add hardcoded hex values
Port the landing page CONTENT faithfully — hero, about, tryouts, how-it-works, FAQ
Adapt Stripe registration links to Sign In CTA (we're past tryout registration phase)
The <SignIn> component from @auth/sveltekit is broken (double-button). Use a direct <form method="POST" action="/signin"> with hidden input name="providerId" value="keycloak" instead
Mobile-first design — 390px viewport is the primary target
Keep the hamburger nav (AuthStatus) for authenticated pages but don't show it on the landing page for unauthenticated visitors
Copy ~/west-side-basketball/assets/images/logo.jpeg to static/logo.jpeg for use in the landing page

Checklist

PR opened
Tests pass (npm run build)
No unrelated changes
Landing page verified at 390px
Role redirect verified for all 3 roles

westside-basketball — project
plan-2026-03-08-tryout-prep — parent plan, Phase 10f
~/west-side-basketball/ — design reference repo (GitHub: ldraney/west-side-basketball)
PR #23 (design system), PR #25 (mobile nav), PR #27 (color alignment) — prerequisites

### Lineage `plan-2026-03-08-tryout-prep` → Phase 10f → Phase 10f-1 (Home page redesign) + 10f-2 (Post-login redirect) + 10f-3 (Fix Sign In button) ### Repo `forgejo_admin/westside-app` ### User Story As a parent visiting the Westside Kings & Queens website on my phone I want to see a professional club landing page with program info and a clear Sign In button So that I feel confident this is a legitimate basketball program, not a developer admin tool As a logged-in member (admin/coach/player) I want to land directly on my dashboard after sign-in So that I don't see a stats page meant for nobody ### Context Session 2026-03-15 UX review revealed the home page (`/`) shows raw backend stats (Total Players: 54, Checked In: 0, Tryout Numbers: 52) to everyone — including unauthenticated visitors. No user story asks for this. It's developer placeholder content from Phase 6 that was never replaced. The landing page at `~/west-side-basketball/index.html` already has professional design: hero section, about the program, tryout details, how-it-works steps, FAQ. That content should BE the home page. The Sign In button has a white oval artifact because `@auth/sveltekit`'s `<SignIn>` component renders `<button>` wrapping a slotted `<button>` — invalid HTML. Design reference: `~/west-side-basketball/index.html` + `~/west-side-basketball/css/style.css`. Design tokens already aligned in `src/app.css` (PR #27). The landing page CSS uses the same color palette. ### File Targets Files to modify: - `src/routes/+page.svelte` — FULL REWRITE. Replace stats dashboard with landing page content: hero, about (3 cards), tryout details, how-it-works (3 steps), FAQ. Port HTML structure from `~/west-side-basketball/index.html` sections: hero, #about, #tryouts, how-it-works, #faq. Adapt CSS from `~/west-side-basketball/css/style.css` into scoped styles using design tokens from `app.css`. Sign In CTA button (direct form POST, no `<SignIn>` component). - `src/routes/+page.server.js` — REWRITE. If authenticated, redirect by role: admin→`/admin`, coach→`/coach`, player→`/player`. If unauthenticated, return minimal data (or nothing — the landing page is static content). - `src/routes/+layout.svelte` — May need adjustment so AuthStatus nav doesn't render on the landing page (unauthenticated visitors should see clean landing page nav, not the empty member nav) - `src/app.css` — Add landing page styles (hero gradient, section alternating backgrounds, card grid, step circles, FAQ accordion, quote block). Prefix with `/* Landing Page */` comment section. Use existing design tokens. Files to read for reference (DO NOT modify these — they're in a different repo): - `~/west-side-basketball/index.html` — HTML content to port (hero through FAQ sections) - `~/west-side-basketball/css/style.css` — CSS to adapt (use as reference, translate to design tokens) - `~/west-side-basketball/assets/images/logo.jpeg` — copy to `static/` if needed Files NOT to touch: - `src/routes/admin/**` — admin dashboards work fine - `src/routes/coach/**` — coach view works fine - `src/routes/player/**` — player view works fine - `src/routes/teams/**` — team list works fine - `src/routes/signin/**` — auth routes - `src/routes/signout/**` — auth routes - `src/hooks.server.js` — auth middleware - `src/auth.js` — auth config ### Acceptance Criteria - [ ] Unauthenticated visit to `/` shows branded landing page with hero, about, tryouts, FAQ — NOT raw stats - [ ] Landing page has a prominent "Member Sign In" button that works (no white oval, no double-button) - [ ] Sign In button submits a form POST to `/signin` with `providerId=keycloak` (replacing the broken `<SignIn>` component) - [ ] After Keycloak login, admin lands on `/admin`, coach on `/coach`, player on `/player` - [ ] The landing page matches the visual style of `west-side-basketball` — same brand voice, same section structure, same color palette - [ ] Landing page is mobile-first — looks great at 390px - [ ] Hero section has the Marcus quote: "Built on the Westside. Built to win the right way." - [ ] No hydration mismatch warnings in console - [ ] `npm run build` passes ### Test Expectations - [ ] Visual: landing page renders professional club content on 390px viewport - [ ] Auth flow: tap Sign In → Keycloak → login → redirect to role dashboard - [ ] Redirect: authenticated admin visiting `/` gets 303 to `/admin` - [ ] Redirect: authenticated coach visiting `/` gets 303 to `/coach` - [ ] Redirect: authenticated player visiting `/` gets 303 to `/player` - [ ] Build: `npm run build` passes - Run command: `npm run build && npm run preview` ### Constraints - Use existing design tokens from `src/app.css` — do NOT add hardcoded hex values - Port the landing page CONTENT faithfully — hero, about, tryouts, how-it-works, FAQ - Adapt Stripe registration links to Sign In CTA (we're past tryout registration phase) - The `<SignIn>` component from `@auth/sveltekit` is broken (double-button). Use a direct `<form method="POST" action="/signin">` with hidden input `name="providerId" value="keycloak"` instead - Mobile-first design — 390px viewport is the primary target - Keep the hamburger nav (AuthStatus) for authenticated pages but don't show it on the landing page for unauthenticated visitors - Copy `~/west-side-basketball/assets/images/logo.jpeg` to `static/logo.jpeg` for use in the landing page ### Checklist - [ ] PR opened - [ ] Tests pass (`npm run build`) - [ ] No unrelated changes - [ ] Landing page verified at 390px - [ ] Role redirect verified for all 3 roles ### Related - `westside-basketball` — project - `plan-2026-03-08-tryout-prep` — parent plan, Phase 10f - `~/west-side-basketball/` — design reference repo (GitHub: ldraney/west-side-basketball) - PR #23 (design system), PR #25 (mobile nav), PR #27 (color alignment) — prerequisites