feat(web): Login-Screen + Responsive Navigation (#128) #129

Merged

admin-mrrm merged 1 commit from feat/web-login-nav into main

2026-04-27 08:46:31 +02:00

admin-mrrm commented

2026-04-27 08:24:32 +02:00

Owner

Summary

/login-Route: Sign-In-Button, Spinner, Fehlermeldung; liest returnTo aus Search-Params
requireAuth: wirft jetzt Router-Redirect nach /login?returnTo=... statt direkt zum OAuth-Provider
Layout: persistente Sidebar (240px) ab 768px, Top-Bar auf schmalem Viewport
Aktiver Menüeintrag via TanStack Router activeProps hervorgehoben
Nav-Einträge: Einkaufen (/), Listen (/lists), Einstellungen (/stores)
useIsWideScreen-Hook: window.resize-Listener analog zur Mobile-App

Schließt #128.

Test plan

Nicht eingeloggt → /lists öffnen → Redirect nach /login?returnTo=%2Flists
Login-Button klicken → Weiterleitung zu Keycloak
Nach Auth-Callback → Redirect zurück zu /lists
Dev-Modus (kein OIDC) → Login-Button navigiert direkt zur Zielroute
Breites Fenster (≥768px) → Sidebar sichtbar
Schmales Fenster (<768px) → Top-Bar mit Links
Aktiver Menüeintrag ist fett hervorgehoben

🤖 Generated with Claude Code

## Summary - **/login-Route**: Sign-In-Button, Spinner, Fehlermeldung; liest `returnTo` aus Search-Params - **requireAuth**: wirft jetzt Router-Redirect nach `/login?returnTo=...` statt direkt zum OAuth-Provider - **Layout**: persistente Sidebar (240px) ab 768px, Top-Bar auf schmalem Viewport - **Aktiver Menüeintrag** via TanStack Router `activeProps` hervorgehoben - **Nav-Einträge**: Einkaufen (/), Listen (/lists), Einstellungen (/stores) - **useIsWideScreen-Hook**: window.resize-Listener analog zur Mobile-App Schließt #128. ## Test plan - [ ] Nicht eingeloggt → /lists öffnen → Redirect nach /login?returnTo=%2Flists - [ ] Login-Button klicken → Weiterleitung zu Keycloak - [ ] Nach Auth-Callback → Redirect zurück zu /lists - [ ] Dev-Modus (kein OIDC) → Login-Button navigiert direkt zur Zielroute - [ ] Breites Fenster (≥768px) → Sidebar sichtbar - [ ] Schmales Fenster (<768px) → Top-Bar mit Links - [ ] Aktiver Menüeintrag ist fett hervorgehoben 🤖 Generated with [Claude Code](https://claude.com/claude-code)

admin-mrrm added 1 commit

2026-04-27 08:24:32 +02:00

feat(web): Login-Screen + Responsive Sidebar-Navigation (#128 )

continuous-integration/drone/push Build is passing

Details

continuous-integration/drone/pr Build is passing

Details

4c54d8bbaf

- /login-Route mit Sign-In-Button, Spinner und Fehlermeldung
- requireAuth wirft jetzt Router-Redirect nach /login?returnTo=... statt
  direkt window.location.assign zum OAuth-Provider
- Layout: persistente Sidebar (240px) ab 768px, Top-Bar auf Mobile
- Aktiver Menüeintrag via TanStack Router activeProps hervorgehoben
- Nav-Einträge: Einkaufen (/), Listen (/lists), Einstellungen (/stores)
- useIsWideScreen-Hook analog zur Mobile-App

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>