groups und impersination

listify-client/src/app/account/account.component.html

@@ -18,6 +18,26 @@
         </span>
       </div>
 
+      <section class="groups-section" aria-label="Keycloak Gruppen">
+        <div class="settings-heading">
+          <mat-icon aria-hidden="true">groups</mat-icon>
+          <div>
+            <h2>Keycloak-Gruppen</h2>
+            <p>{{ auth.user()?.groups?.length || 0 }} synchronisiert</p>
+          </div>
+        </div>
+
+        @if (auth.user()?.groups?.length) {
+          <ul class="group-list">
+            @for (group of auth.user()?.groups ?? []; track group) {
+              <li>{{ group }}</li>
+            }
+          </ul>
+        } @else {
+          <p class="settings-description">Keine Gruppen hinterlegt.</p>
+        }
+      </section>
+
       <section class="settings-section" aria-label="Task-Mail Einstellungen">
         <div class="settings-heading">
           <mat-icon aria-hidden="true">mark_email_unread</mat-icon>

listify-client/src/app/account/account.component.scss

@@ -40,6 +40,16 @@
   background: color-mix(in srgb, var(--mat-sys-surface-container-low) 36%, var(--mat-sys-surface));
 }
 
+.groups-section {
+  display: grid;
+  gap: 0.8rem;
+  margin-top: 1rem;
+  padding: 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--mat-sys-surface-container-low) 36%, var(--mat-sys-surface));
+}
+
 .settings-heading {
   display: flex;
   gap: 0.75rem;
@@ -72,6 +82,26 @@
   width: 100%;
 }
 
+.group-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.group-list li {
+  max-width: 100%;
+  padding: 0.35rem 0.6rem;
+  border: 1px solid color-mix(in srgb, var(--mat-sys-outline-variant) 72%, transparent);
+  border-radius: 999px;
+  background: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface-variant);
+  font-size: 0.88rem;
+  overflow-wrap: anywhere;
+}
+
 .saving-row {
   display: inline-flex;
   align-items: center;

listify-client/src/app/auth/auth.models.ts

@@ -6,6 +6,7 @@ export interface PublicUser {
   name?: string;
   onboardingCompleted: boolean;
   taskDigestPreference: TaskDigestPreference;
+  groups: string[];
 }
 
 export interface PublicUserSearchResult {

listify-client/src/app/auth/auth.service.ts

@@ -116,8 +116,9 @@ export class AuthService {
   }
 
   private storeUser(user: PublicUser): void {
-    this.storage?.setItem(USER_KEY, JSON.stringify(user));
-    this.userSignal.set(user);
+    const normalizedUser = this.normalizeUser(user);
+    this.storage?.setItem(USER_KEY, JSON.stringify(normalizedUser));
+    this.userSignal.set(normalizedUser);
   }
 
   private readStoredUser(): PublicUser | null {
@@ -128,13 +129,20 @@ export class AuthService {
     }
 
     try {
-      return JSON.parse(rawUser) as PublicUser;
+      return this.normalizeUser(JSON.parse(rawUser) as PublicUser);
     } catch {
       this.storage?.removeItem(USER_KEY);
       return null;
     }
   }
 
+  private normalizeUser(user: PublicUser): PublicUser {
+    return {
+      ...user,
+      groups: Array.isArray(user.groups) ? user.groups : [],
+    };
+  }
+
   private get storage(): Storage | null {
     return typeof window === 'undefined' ? null : window.localStorage;
   }