Skip to content

Move kiosk enrollment to a standalone, mobile-first /enroll page - #199

Merged
sdunster merged 1 commit into
mainfrom
claude/qr-kiosk-enrollment-form-cxxbdo
Sep 4, 2026
Merged

Move kiosk enrollment to a standalone, mobile-first /enroll page#199
sdunster merged 1 commit into
mainfrom
claude/qr-kiosk-enrollment-form-cxxbdo

Conversation

@sdunster

@sdunster sdunster commented Sep 4, 2026

Copy link
Copy Markdown
Member

Summary

Scanning a kiosk's enrollment QR code is almost always done from a phone, so this pulls the whole enrollment form out of the admin dashboard and gives it its own mobile-first page, rather than just tucking a location <select> into the dashboard flow.

  • New top-level route /enroll (web/src/enroll/EnrollApp.tsx), lazy-loaded as its own chunk (~2.4KB gzipped) so a scan doesn't pull in the ~70KB admin dashboard bundle. The old /admin/sessions/enroll path now redirects to /enroll, preserving ?fp=, for any kiosk QR code still showing the old URL until it refreshes.
  • It reuses the admin dashboard's login/session plumbing — the same seslogin token, Relay environment, user info, and toast notifications — via a new AuthenticatedSession component extracted from admin/Layout.tsx, so the two auth flows can't drift apart. The onLogout callback is now handed down via a small context (useLogout) instead of a prop, so areas that don't need it (like this one) don't have to thread it through.
  • It skips the dashboard's chrome entirely — no menu bar, submenu, title bar, footer — and skips the passkey-enrollment nudge too, so scanning the code goes straight to one focused screen. SessionEnroll renders in the same full-screen "Panel" card style already used by the login screen, so it looks like a continuation of signing in rather than a different app.
  • The location <select> in the enrollment form (added in the first commit on this branch) stays — it's still how the admin picks which unit the kiosk belongs to, just now inside a page that was never gated behind the dashboard's location interstitial in the first place. LocationSelector and TitleBar revert to their original, simpler behaviour since the enroll page — the only place that needed to bypass that interstitial — isn't part of /admin/* anymore.

Test plan

  • cd web && npm run relay — new query/mutation types generated under web/src/enroll/__generated__/
  • cd web && npx tsc -b
  • cd web && npx eslint src/
  • cd web && npx prettier --check src/
  • cd web && npx vitest run — 146 tests passing
  • cd web && npm run build/enroll is its own lazy chunk
  • Manual click-through against make local-e2e (AWS-free local stack), including an iPhone-13-sized viewport:
    • A kiosk's enrollment QR code now points at /enroll?fp=...
    • Visiting the old /admin/sessions/enroll?fp=... path redirects to /enroll, ?fp= intact
    • On a fresh mobile session with no location ever selected, /enroll renders directly with no admin chrome and no location interstitial — just the enrollment card
    • Submitting with a location chosen from the <select> succeeds ("Kiosk enrolled")
    • Regression check: /admin/members (and the rest of the dashboard) still shows full chrome and the location interstitial as before

🤖 Generated with Claude Code

https://claude.ai/code/session_01DntxGWMSNgUkvBn5oS4ra3

@sdunster sdunster changed the title Let QR kiosk enrollment pick its location in the form Move kiosk enrollment to a standalone, mobile-first /enroll page Sep 4, 2026
@sdunster
sdunster marked this pull request as ready for review September 4, 2026 20:44
Scanning a kiosk's enrollment QR code is almost always done from a phone, so
pull the enrollment form out of the admin dashboard entirely rather than
just bypassing its location interstitial:

- Add a location <select> to the enrollment form (SessionForm), since the
  page no longer has an ambient "currently selected location" to fall back
  on once it moves out of /admin/*.
- New top-level route /enroll (EnrollApp.tsx), lazy-loaded as its own chunk
  so a scan doesn't pull in the ~300KB admin dashboard bundle. The old
  /admin/sessions/enroll path redirects, preserving ?fp=, for any kiosk QR
  code still showing the old URL.
- It reuses the admin dashboard's login/session plumbing (same seslogin
  token, Relay environment, user info, notifications) via a new
  AuthenticatedSession component extracted from admin/Layout.tsx, so the two
  can't drift on auth behaviour. The onLogout callback is now handed down
  via context (useLogout) rather than as a prop, so areas that don't need
  it don't have to thread it through.
- It skips the dashboard's chrome entirely (menu bar, submenu, title bar,
  footer) and the passkey-enrollment nudge, rendering just the enrollment
  card in the same full-screen Panel style as the login screen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DntxGWMSNgUkvBn5oS4ra3
@sdunster
sdunster force-pushed the claude/qr-kiosk-enrollment-form-cxxbdo branch from 2f3a9d8 to 33f3286 Compare September 4, 2026 21:57
@sdunster
sdunster merged commit 9c22087 into main Sep 4, 2026
1 check passed
@sdunster
sdunster deleted the claude/qr-kiosk-enrollment-form-cxxbdo branch September 4, 2026 22:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants