Phase 15: Dev Environment + Keycloak SPA Client + Validation #38

Closed
opened 2026-03-18 05:15:45 +00:00 by forgejo_admin · 1 comment

Lineage

plan-wkq → Phase 15 (Production Port — SPA Rebuild)

Repo

forgejo_admin/westside-app

User Story

As an admin
I want the SPA dev environment running with Keycloak auth wired
So that I can validate all 13 ported pages on phone with live data before pushing to prod

Context

Previous session completed the full SPA scaffold: adapter-static, keycloak-js, all 13 playground pages ported to SvelteKit routes. This issue covers standing up the dev overlay, creating the Keycloak SPA client, creating all user accounts (coaches, confirming admin/member creds), and validating the app end-to-end on phone.

Key discovery: registered parents have player role in Keycloak but the layout auth guard checks for member. Need to align.

File Targets

Files modified:

  • vite.config.js — add allowedHosts for dev funnel hostname
  • src/routes/+layout.svelte — fix memberplayer role reference

Files in pal-e-deployments (already created):

  • overlays/westsidekingsandqueens/dev/deployment.yaml
  • overlays/westsidekingsandqueens/dev/service.yaml
  • overlays/westsidekingsandqueens/dev/ingress.yaml
  • overlays/westsidekingsandqueens/dev/kustomization.yaml

Files NOT to touch:

  • src/lib/keycloak.js — already correct
  • src/lib/api.js — already correct

Acceptance Criteria

  • Dev overlay deployed — westside-dev.tail5b443a.ts.net serving Vite
  • westside-spa Keycloak client created (public, PKCE, redirect URIs for prod+dev+capacitor+localhost)
  • Coach accounts created in Keycloak with coach role
  • Lucas + Marcus passwords confirmed/reset
  • Landing page renders on phone
  • Keycloak login flow works (admin, coach, member/player)
  • Role-based nav renders correctly per role
  • API data loads on authenticated pages
  • player vs member role mismatch resolved

Test Expectations

  • Manual: load westside-dev.tail5b443a.ts.net on phone — landing page renders
  • Manual: sign in as admin — see admin bottom nav, admin dashboard loads data
  • Manual: sign in as coach — see coach bottom nav, coach dashboard loads data
  • Manual: sign in as parent — see member bottom nav, my-players loads data
  • No automated tests — this is phone validation

Constraints

  • NO scoped Svelte <style> blocks — all CSS stays in global app.css
  • Dev overlay uses port 5174 (per SOP port convention)
  • Dev pod uses hostPath mount to ~/westside-app — edits are instant via Vite HMR
  • .claude-no-enforce present — direct coding authorized for frontend iteration

Checklist

  • Dev overlay created and applied
  • Keycloak SPA client created
  • All user accounts ready
  • Phone validation complete
  • Role mismatch fixed
  • PR opened (for westside-app changes: vite.config.js, layout fix)
  • phase-wkq-15-production-port — parent phase
  • sop-frontend-dev-overlay — the pattern we followed
  • todo-document-claude-no-enforce — escape hatch documentation
### Lineage `plan-wkq` → Phase 15 (Production Port — SPA Rebuild) ### Repo `forgejo_admin/westside-app` ### User Story As an admin I want the SPA dev environment running with Keycloak auth wired So that I can validate all 13 ported pages on phone with live data before pushing to prod ### Context Previous session completed the full SPA scaffold: `adapter-static`, `keycloak-js`, all 13 playground pages ported to SvelteKit routes. This issue covers standing up the dev overlay, creating the Keycloak SPA client, creating all user accounts (coaches, confirming admin/member creds), and validating the app end-to-end on phone. Key discovery: registered parents have `player` role in Keycloak but the layout auth guard checks for `member`. Need to align. ### File Targets Files modified: - `vite.config.js` — add `allowedHosts` for dev funnel hostname - `src/routes/+layout.svelte` — fix `member` → `player` role reference Files in pal-e-deployments (already created): - `overlays/westsidekingsandqueens/dev/deployment.yaml` - `overlays/westsidekingsandqueens/dev/service.yaml` - `overlays/westsidekingsandqueens/dev/ingress.yaml` - `overlays/westsidekingsandqueens/dev/kustomization.yaml` Files NOT to touch: - `src/lib/keycloak.js` — already correct - `src/lib/api.js` — already correct ### Acceptance Criteria - [x] Dev overlay deployed — `westside-dev.tail5b443a.ts.net` serving Vite - [x] `westside-spa` Keycloak client created (public, PKCE, redirect URIs for prod+dev+capacitor+localhost) - [ ] Coach accounts created in Keycloak with `coach` role - [ ] Lucas + Marcus passwords confirmed/reset - [ ] Landing page renders on phone - [ ] Keycloak login flow works (admin, coach, member/player) - [ ] Role-based nav renders correctly per role - [ ] API data loads on authenticated pages - [ ] `player` vs `member` role mismatch resolved ### Test Expectations - [ ] Manual: load `westside-dev.tail5b443a.ts.net` on phone — landing page renders - [ ] Manual: sign in as admin — see admin bottom nav, admin dashboard loads data - [ ] Manual: sign in as coach — see coach bottom nav, coach dashboard loads data - [ ] Manual: sign in as parent — see member bottom nav, my-players loads data - No automated tests — this is phone validation ### Constraints - NO scoped Svelte `<style>` blocks — all CSS stays in global app.css - Dev overlay uses port 5174 (per SOP port convention) - Dev pod uses hostPath mount to `~/westside-app` — edits are instant via Vite HMR - `.claude-no-enforce` present — direct coding authorized for frontend iteration ### Checklist - [x] Dev overlay created and applied - [x] Keycloak SPA client created - [ ] All user accounts ready - [ ] Phone validation complete - [ ] Role mismatch fixed - [ ] PR opened (for westside-app changes: vite.config.js, layout fix) ### Related - `phase-wkq-15-production-port` — parent phase - `sop-frontend-dev-overlay` — the pattern we followed - `todo-document-claude-no-enforce` — escape hatch documentation
Author
Owner

Progress: Dev Environment + Keycloak Client (DONE)

Completed

  • westsidekingsandqueens/dev/ overlay created in pal-e-deployments (4 files)
  • Dev pod running: westside-dev.tail5b443a.ts.net — Vite on port 5174, hostPath to ~/westside-app
  • .claude-no-enforce dropped in repo root
  • vite.config.js updated with allowedHosts
  • westside-spa Keycloak client created: public, PKCE S256, redirect URIs for prod+dev+capacitor+localhost
  • silent-check-sso.html already in static/ — confirmed correct
  • All 13 routes audited — fully ported from playground (2,492 lines total)

Discovered

  • Registered parents have player role, but layout checks for member — mismatch to fix
  • Prod pods in ImagePullBackOff (old SSR image) — harmless, will be replaced
  • No coach accounts exist in Keycloak yet

Next

  • Create coach accounts (James Taylor, KJ Ng, Ken Seka, Abbie Sa)
  • Reset/confirm Lucas + Marcus passwords
  • Fix player/member role mismatch
  • Phone validation
## Progress: Dev Environment + Keycloak Client (DONE) ### Completed - `westsidekingsandqueens/dev/` overlay created in pal-e-deployments (4 files) - Dev pod running: `westside-dev.tail5b443a.ts.net` — Vite on port 5174, hostPath to `~/westside-app` - `.claude-no-enforce` dropped in repo root - `vite.config.js` updated with `allowedHosts` - `westside-spa` Keycloak client created: public, PKCE S256, redirect URIs for prod+dev+capacitor+localhost - `silent-check-sso.html` already in `static/` — confirmed correct - All 13 routes audited — fully ported from playground (2,492 lines total) ### Discovered - Registered parents have `player` role, but layout checks for `member` — mismatch to fix - Prod pods in ImagePullBackOff (old SSR image) — harmless, will be replaced - No coach accounts exist in Keycloak yet ### Next - Create coach accounts (James Taylor, KJ Ng, Ken Seka, Abbie Sa) - Reset/confirm Lucas + Marcus passwords - Fix player/member role mismatch - Phone validation
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
forgejo_admin/westside-landing#38
No description provided.