presseportale/dev/frontend/hub-flux/11-PHASE-4E-PROFILE-SETTINGS.md

Phase 4E — Profile & Settings

Fünftes Päckchen aus Phase 4. Folgt auf 4D Companies.

Status: ✅ abgeschlossen · Aufwand: ~½ Tag · Risiko: niedrig

---

Scope

Admin / „/settings/*" (alle Rollen)

• resources/views/livewire/settings/profile.blade.php (117 Z.)
• resources/views/livewire/settings/password.blade.php (82 Z.)
• resources/views/livewire/settings/appearance.blade.php (21 Z.)
• resources/views/livewire/settings/delete-user-form.blade.php (59 Z., wird in profile.blade.php als Komponente eingebunden)

Customer („Mein Bereich")

• resources/views/livewire/customer/profile.blade.php (451 Z.)
• resources/views/livewire/customer/security.blade.php (295 Z.)

NICHT in diesem Päckchen:

• customer/invoices.blade.php, customer/tokens.blade.php, customer/bookings.blade.php, customer/company-switcher — eigenes Päckchen 4F.
• 2FA-Pages aus Fortify-Standard-Setup — bleiben FluxUI bis sie separat angepackt werden.

Ziel

Beide Settings-Strecken im Hub-Vokabular wie Press-Releases / Companies:

• Page-Header mit Rolle-Pille („Admin Backend" oder „User Backend") + Eyebrow + H1 + Subtitle.
• Form-Sektionen als .panel mit .panel-head und section-eyebrow.
• FluxUI-Form-Felder bleiben (flux:field, flux:input, flux:label, flux:error, flux:checkbox, flux:radio, flux:textarea, flux:button).
• Required-Marker auf Hub-Token (text-[color:var(--color-err)]).
• Save-Action in eigenem Panel-Footer mit Save-Indicator-Span.
• Flash-/Success-Messages auf Hub-Token-Pillen.
• Danger-Zone (Delete-Account, Sessions löschen) als .panel mit is-danger-Akzent (linker Roter Strip).

Was explizit NICHT angefasst wird

• Volt-Logik in allen Dateien.
• <x-settings.layout> Wrapper-Komponente (falls vorhanden) — Layout-only-Änderungen, keine Hülle.
• 2FA-/Confirm-Password-Modals.
• Test-relevante Strings auf customer/profile + customer/security:
  • profile: „Rechnungsadresse"
  • security: „Konto-Sicherheit", „Letzter Login", „Aktive Sessions", „Passwort ändern", „E-Mail-Adresse ändern", „Zwei-Faktor-Authentifizierung"

Akzeptanzkriterien

• Plan
• partials/settings-heading zentral auf Hub-Page-Header.
• components/settings/layout zentral auf Hub-Sidebar + Content-Panel.
• settings/appearance Hub-styled (profitiert vom neuen Wrapper, kein Body-Touch nötig).
• settings/profile Hub-styled + Verification-Hinweis als Hub-Warn-Box + Save-Button mit Token-„Saved."-Pill.
• settings/delete-user-form als Hub-Danger-Box mit linkem Roten Strip. Modal-Markup unverändert.
• settings/password Hub-styled (Save-Bar mit Border-Top).
• customer/profile Hub-styled: Header, 3 Panels (Konto, Profil, Rechnungsadresse), Aktionen-Panel, Zugeordnete-Firmen- Panel mit Hub-Badges.
• customer/security Hub-styled: Header, 4-spaltige KPI-Reihe, Passwort+E-Mail 2-Col-Grid, 2FA-Panel mit Hub-Recovery-Codes, Sessions-Panel mit Hub-Empty-State.
• Tests grün:
  • Settings|CustomerProfileSecurity|CustomerCompanyContext → 33 passed (146 assertions).
  • Volle Suite → 230 passed, 3 skipped, 1 pre-existing ApiDocumentationTest-Fail (nicht von 4E).
• Build + Pint + PROGRESS.

Notes

• Der zentrale Umbau der beiden Wrapper (settings-heading, settings.layout) hat sich bezahlt gemacht: die drei settings/*-Pages sind weitgehend identisch klein geblieben, Page-Header und Side-Nav kommen automatisch im Hub-Look.
• <x-action-message> für „Saved."-Toast bleibt drin, aber der Slot ist auf einen Hub-getönten <span> umgestellt.
• Empty-State für „Aktive Sessions" nutzt das gleiche Hub-Icon-Box-Pattern wie auf den Press-Releases-Listen.
• 2FA-QR-Container behält explizit weißen Hintergrund — QR-Codes brauchen hohen Kontrast unabhängig vom Mode.
• Alle Test-Pflicht-Strings unverändert: „Rechnungsadresse", „Konto-Sicherheit", „Letzter Login", „Aktive Sessions", „Passwort ändern", „E-Mail-Adresse ändern", „Zwei-Faktor-Authentifizierung".