Add frontend auth, dashboard & router guards
Introduce a complete frontend auth flow and protected dashboard. - Add auth session module (GUI/src/services/authSession.ts) with fetchCurrentUser, login, logout, caching and structured errors. - Add Dashboard page (GUI/src/routes/dashboard/Dashboard.vue) and a protected Dashboard route (meta.requiresAuth) at '/'. - Move public landing page to /welcome and mark it Visibility.Unauthenticated; update 404 and Impressum links. - Implement router guard (GUI/src/router/index.ts) to redirect unauthenticated users to Login and prevent logged-in users from accessing guest-only pages. - Update routes layout (GUI/src/plugins/routesLayout.ts) to include authenticated/unauthenticated visibility and dashboard entry. - Update Layout.vue to track current user, show username/menu, conditionally render sidebar items, add logout flow and error snackbar, and insert visual divider before auth-only items. - Convert Login.vue into a working login form with loading state, error handling and redirect after success. - Update codexInfo.md to document the new auth features and related UI/route changes.
This commit is contained in:
@@ -101,6 +101,12 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
|
||||
- `API/appsettings.custom.json` ist in `.gitignore` hinterlegt, damit lokale Konfigurationswerte nicht versehentlich committed werden.
|
||||
- Backend-Logging ist aktiviert mit strukturierter Console-Ausgabe (inkl. Zeitstempel) sowie HTTP-Request-Logging.
|
||||
- Beim Identity-Seeding wird explizit geloggt, wenn ein Admin-Account neu angelegt wurde.
|
||||
- Frontend-Auth ist jetzt aktiv: Login-Form (`GUI/src/routes/authentication/Login.vue`) sendet an `POST /auth/login` und zeigt API-Fehler als sichtbare Meldung.
|
||||
- Dashboard ist als geschützte Route auf `/` umgesetzt (`GUI/src/routes/dashboard/Dashboard.vue`) und zeigt die Antwort von `GET /auth/me`.
|
||||
- Router-Guards in `GUI/src/router/index.ts` leiten nicht eingeloggte Nutzer von geschützten Routen auf `/login` um und leiten eingeloggte Nutzer von `/login` zurück aufs Dashboard.
|
||||
- Öffentliche Landingpage wurde auf `/welcome` verschoben; `404`- und Impressum-Links zur Startseite zeigen entsprechend auf `/welcome`.
|
||||
- Sidebar-Navigation berücksichtigt Auth-Status differenziert: `Startseite` wird nur unangemeldet angezeigt (inkl. unterem Drawer-Link), `Dash` nur angemeldet.
|
||||
- Topbar zeigt bei aktiver Anmeldung den Benutzernamen; die Abmelden-Aktion erscheint im Hover-Menü unter dem Benutzernamen (Desktop) bzw. im Account-Menü (Mobile).
|
||||
|
||||
## Änderungen durch Codex
|
||||
- Grundlegender UI-Neuaufbau der App-Shell (`GUI/src/Layout.vue`) inklusive Navigation, Footer und Seitenkontext.
|
||||
@@ -139,3 +145,13 @@ Ich baue alleine neben meiner Ausbildung eine einfache self-hosted Web-App für
|
||||
- `API/Program.cs` um Identity-Service-Registrierung, Cookie-Konfiguration (`hoard.auth`), `UseAuthentication`/`UseAuthorization` und Startup-Seeding erweitert.
|
||||
- Backend-Logging in `API/Program.cs` ergänzt: `AddSimpleConsole` (Zeitstempel, Single-Line), `AddDebug` und `AddHttpLogging`/`UseHttpLogging` für Request-Logs.
|
||||
- `API/Services/IdentitySeedService.cs` neu ergänzt: erstellt beim ersten Start einen initialen Admin aus `SeedAdmin:*` und loggt Erfolg/Fehler nachvollziehbar.
|
||||
- Neues Frontend-Auth-Modul `GUI/src/services/authSession.ts` ergänzt (Login-Request, Session-Abfrage via `/auth/me`, Fehler-Mapping und Session-Cache).
|
||||
- Routing für Auth ergänzt: neue geschützte Dashboard-Route (`/`) mit `meta.requiresAuth`, Login als `guestOnly` und globaler Guard in `GUI/src/router/index.ts`.
|
||||
- Neue Seite `GUI/src/routes/dashboard/Dashboard.vue` ergänzt, die die `/auth/me`-Nutzerdaten anzeigt.
|
||||
- `GUI/src/routes/authentication/Login.vue` von statischer Maske auf echten Login-Flow mit Loading-State, Fehlermeldung und Redirect nach erfolgreicher Anmeldung umgestellt.
|
||||
- Öffentliche Home/Landing-Route auf `/welcome` verschoben und Navigation in `Layout.vue`, `404NotFound.vue` und `Impressum.vue` entsprechend angepasst.
|
||||
- `GUI/src/services/authSession.ts` um `logout()` für `POST /auth/logout` ergänzt; Session-Cache wird beim Abmelden zuverlässig geleert.
|
||||
- `GUI/src/plugins/routesLayout.ts` angepasst: Dashboard-Navigationseintrag als `Dash` mit `Visibility.Authenticated` und Reihenfolge hinter `Startseite`.
|
||||
- `GUI/src/Layout.vue` erweitert: Sidebar filtert jetzt auch `Visibility.Authenticated`/`Visibility.Unauthenticated`, zeigt Trennlinie vor Auth-Einträgen, Topbar zeigt Benutzernamen bei Login und bietet Abmelden (Desktop + Mobile) inkl. Fehler-Snackbar.
|
||||
- `GUI/src/plugins/routesLayout.ts` weiter angepasst: `Startseite` nutzt jetzt `Visibility.Unauthenticated`, damit sie in der Sidebar nach Login nicht mehr auswählbar ist.
|
||||
- `GUI/src/Layout.vue` Topbar angepasst: separater Logout-Button entfernt; Logout ist jetzt als Menüpunkt unter dem Benutzernamen verfügbar (`open-on-hover` auf Desktop, Menü auf Mobile).
|
||||
|
||||
Reference in New Issue
Block a user