fix(console): apply labelpolicy if icon is provided, signout page (#4499)

* label policy as observable

* signedout policy via state

* add caching

* disable loading spinner on signedout

* cleanup

* catch error

* update deps

* move policy to localstorage

* handle labelpolicy for users without org

Co-authored-by: Livio Spring <livio.a@gmail.com>
Co-authored-by: Fabi <38692350+hifabienne@users.noreply.github.com>

console/src/app/services/grpc-auth.service.ts

@@ -9,8 +9,10 @@ import {
   finalize,
   map,
   mergeMap,
+  pairwise,
   switchMap,
   take,
+  tap,
   timeout,
   withLatestFrom,
 } from 'rxjs/operators';
@@ -103,15 +105,17 @@ import { ChangeQuery } from '../proto/generated/zitadel/change_pb';
 import { MetadataQuery } from '../proto/generated/zitadel/metadata_pb';
 import { ListQuery } from '../proto/generated/zitadel/object_pb';
 import { Org, OrgFieldName, OrgQuery } from '../proto/generated/zitadel/org_pb';
+import { LabelPolicy } from '../proto/generated/zitadel/policy_pb';
 import { Gender, MembershipQuery, User, WebAuthNVerification } from '../proto/generated/zitadel/user_pb';
 import { GrpcService } from './grpc.service';
 import { StorageKey, StorageLocation, StorageService } from './storage.service';
+import { ThemeService } from './theme.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class GrpcAuthService {
-  private _activeOrgChanged: Subject<Org.AsObject> = new Subject();
+  private _activeOrgChanged: Subject<Org.AsObject | undefined> = new Subject();
   public user!: Observable<User.AsObject | undefined>;
   public userSubject: BehaviorSubject<User.AsObject | undefined> = new BehaviorSubject<User.AsObject | undefined>(undefined);
   private triggerPermissionsRefresh: Subject<void> = new Subject();
@@ -132,18 +136,47 @@ export class GrpcAuthService {
       ),
     ),
   );
+
+  public labelpolicy$!: Observable<LabelPolicy.AsObject>;
+  public labelpolicy: BehaviorSubject<LabelPolicy.AsObject | undefined> = new BehaviorSubject<
+    LabelPolicy.AsObject | undefined
+  >(undefined);
+  labelPolicyLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+
   public zitadelPermissions: BehaviorSubject<string[]> = new BehaviorSubject<string[]>([]);
   public readonly fetchedZitadelPermissions: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   private cachedOrgs: Org.AsObject[] = [];
+  private cachedLabelPolicies: { [orgId: string]: LabelPolicy.AsObject } = {};
 
   constructor(
     private readonly grpcService: GrpcService,
     private oauthService: OAuthService,
     private storage: StorageService,
+    themeService: ThemeService,
   ) {
     this.zitadelPermissions$.subscribe(this.zitadelPermissions);
 
+    this.labelpolicy$ = this.activeOrgChanged.pipe(
+      switchMap((org) => {
+        this.labelPolicyLoading$.next(true);
+        return from(this.getMyLabelPolicy(org ? org.id : ''));
+      }),
+      filter((policy) => !!policy),
+    );
+
+    this.labelpolicy$.subscribe({
+      next: (policy) => {
+        themeService.applyLabelPolicy(policy);
+        this.labelpolicy.next(policy);
+        this.labelPolicyLoading$.next(false);
+      },
+      error: (error) => {
+        console.error(error);
+        this.labelPolicyLoading$.next(false);
+      },
+    });
+
     this.user = merge(
       of(this.oauthService.getAccessToken()).pipe(filter((token) => (token ? true : false))),
       this.oauthService.events.pipe(
@@ -225,10 +258,12 @@ export class GrpcAuthService {
       const org = this.storage.getItem<Org.AsObject>(StorageKey.organization, StorageLocation.local);
       if (org && orgs.find((tmp) => tmp.id === org.id)) {
         this.storage.setItem(StorageKey.organization, org, StorageLocation.session);
-        return org;
+        this.setActiveOrg(org);
+        return Promise.resolve(org);
       }
 
       if (orgs.length === 0) {
+        this._activeOrgChanged.next(undefined);
         return Promise.reject(new Error('No organizations found!'));
       }
       const orgToSet = orgs.find((element) => element.id !== '0' && element.name !== '');
@@ -241,7 +276,7 @@ export class GrpcAuthService {
     }
   }
 
-  public get activeOrgChanged(): Observable<Org.AsObject> {
+  public get activeOrgChanged(): Observable<Org.AsObject | undefined> {
     return this._activeOrgChanged;
   }
 
@@ -605,8 +640,24 @@ export class GrpcAuthService {
     return this.grpcService.auth.listMyUserChanges(req, null).then((resp) => resp.toObject());
   }
 
-  public getMyLabelPolicy(): Promise<GetMyLabelPolicyResponse.AsObject> {
-    return this.grpcService.auth.getMyLabelPolicy(new GetMyLabelPolicyRequest(), null).then((resp) => resp.toObject());
+  public getMyLabelPolicy(orgIdForCache?: string): Promise<LabelPolicy.AsObject> {
+    if (orgIdForCache && this.cachedLabelPolicies[orgIdForCache]) {
+      return Promise.resolve(this.cachedLabelPolicies[orgIdForCache]);
+    } else {
+      return this.grpcService.auth
+        .getMyLabelPolicy(new GetMyLabelPolicyRequest(), null)
+        .then((resp) => resp.toObject())
+        .then((resp) => {
+          if (resp.policy) {
+            if (orgIdForCache) {
+              this.cachedLabelPolicies[orgIdForCache] = resp.policy;
+            }
+            return Promise.resolve(resp.policy);
+          } else {
+            return Promise.reject();
+          }
+        });
+    }
   }
 
   public getMyPrivacyPolicy(): Promise<GetMyPrivacyPolicyResponse.AsObject> {