mirror of
https://github.com/complexcaresolutions/dak.c2s.git
synced 2026-03-17 21:53:41 +00:00
101 lines
3.5 KiB
Markdown
101 lines
3.5 KiB
Markdown
# Kontoverwaltung für DAK-Mitarbeiter — Design
|
|
|
|
**Datum:** 2026-02-26
|
|
**Status:** Genehmigt
|
|
|
|
## Zusammenfassung
|
|
|
|
Neue Kontoverwaltungsseite (`/account`) für alle authentifizierten User. Tab-basiertes Layout mit drei Bereichen: Profil, Sicherheit und Zwei-Faktor-Authentifizierung. Sidebar-Eintrag "Kontoverwaltung" für alle User sichtbar.
|
|
|
|
## Route & Navigation
|
|
|
|
- Route: `/account` (innerhalb `ProtectedRoute`/`AppLayout`)
|
|
- Seite: `AccountPage.tsx`
|
|
- Sidebar: "Kontoverwaltung" mit `UserCog`-Icon, sichtbar für alle authentifizierten User
|
|
- Position: unterhalb der Main-Navigation, oberhalb der Admin-Sektion
|
|
- Header-Dropdown: Link "Konto verwalten" als Quick-Access
|
|
|
|
## Tab-Struktur
|
|
|
|
### Tab 1 — Profil
|
|
|
|
| Feld | Typ | Bemerkung |
|
|
|------|-----|-----------|
|
|
| Profilbild | Avatar-Upload (Drag & Drop / Klick) | Max 2MB, JPG/PNG, `/uploads/avatars/{user_id}_{timestamp}.{ext}` |
|
|
| Vorname | Text-Input | `first_name`, neu |
|
|
| Nachname | Text-Input | `last_name`, neu |
|
|
| Anzeigename | Text-Input | `display_name`, auto-generiert aus Vor+Nachname, überschreibbar |
|
|
| Benutzername | Text-Input | `username`, bestehend |
|
|
| E-Mail | Text-Input | `email`, bestehend |
|
|
|
|
Speichern-Button am Ende. Erfolgsmeldung nach Speichern.
|
|
|
|
### Tab 2 — Sicherheit
|
|
|
|
| Bereich | Funktion |
|
|
|---------|----------|
|
|
| Passwort ändern | Aktuelles Passwort, Neues Passwort, Bestätigung. Min 8 Zeichen. Nutzt `POST /api/auth/change-password` |
|
|
| Aktive Sessions | Info: Letzter Login-Zeitpunkt (`last_login`) |
|
|
|
|
### Tab 3 — Zwei-Faktor-Authentifizierung
|
|
|
|
| Status | Anzeige |
|
|
|--------|---------|
|
|
| Deaktiviert | Erklärungs-Text + "2FA aktivieren"-Button → Setup-Flow |
|
|
| Setup-Flow | QR-Code → Authenticator scannen → Bestätigungscode eingeben |
|
|
| Aktiviert | Status-Badge "Aktiv" + "2FA deaktivieren"-Button (Passwort-Bestätigung) |
|
|
|
|
## Backend-Erweiterungen
|
|
|
|
### Neue Felder im User-Model (Alembic-Migration)
|
|
|
|
- `first_name: Optional[str]` (max 100)
|
|
- `last_name: Optional[str]` (max 100)
|
|
- `display_name: Optional[str]` (max 200)
|
|
- `avatar_url: Optional[str]` (max 500)
|
|
|
|
### Neue Endpoints
|
|
|
|
| Methode | Pfad | Beschreibung |
|
|
|---------|------|-------------|
|
|
| PUT | `/api/auth/profile` | Eigene Profildaten ändern |
|
|
| POST | `/api/auth/avatar` | Profilbild hochladen (multipart) |
|
|
| DELETE | `/api/auth/avatar` | Profilbild löschen |
|
|
| DELETE | `/api/auth/mfa` | MFA selbst deaktivieren (Passwort nötig) |
|
|
| DELETE | `/api/admin/users/{id}/mfa` | MFA durch Admin zurücksetzen |
|
|
|
|
### Avatar-Speicherung
|
|
|
|
- Verzeichnis: `backend/uploads/avatars/`
|
|
- Dateiname: `{user_id}_{timestamp}.{ext}`
|
|
- StaticFiles Mount: `/uploads/`
|
|
- Max 2MB, nur JPG/PNG
|
|
|
|
## Datenfluss
|
|
|
|
### Profil speichern
|
|
```
|
|
React Hook Form + Zod → PUT /api/auth/profile → Uniqueness-Check → DB Update → re-fetch /api/auth/me → AuthContext aktualisiert
|
|
```
|
|
|
|
### Avatar hochladen
|
|
```
|
|
File-Input → POST /api/auth/avatar (multipart) → Validierung (Typ/Größe) → Speicherung → DB avatar_url Update → Avatar in Header/Sidebar aktualisiert
|
|
```
|
|
|
|
### 2FA aktivieren
|
|
```
|
|
POST /api/auth/mfa/setup → QR-Code anzeigen → User gibt Code ein → POST /api/auth/mfa/verify → mfa_enabled = true
|
|
```
|
|
|
|
### 2FA deaktivieren
|
|
```
|
|
Dialog: Passwort eingeben → DELETE /api/auth/mfa → mfa_enabled = false
|
|
```
|
|
|
|
## Fehlerbehandlung
|
|
|
|
- E-Mail/Username vergeben → 409 Conflict → Fehlermeldung am Feld
|
|
- Falsches Passwort → 401 → Fehlermeldung
|
|
- Ungültiger MFA-Code → 400 → "Code ungültig"
|
|
- Avatar zu groß / falsches Format → Client-Validierung + Backend-Fallback
|