fix(console): change console favicon (#7366)

* feat: initial favicon poc

* feat: reload page if icons changed and we apply config

---------

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/app.component.ts

@@ -224,9 +224,11 @@ export class AppComponent implements OnDestroy {
     });
 
     this.isDarkTheme = this.themeService.isDarkTheme;
-    this.isDarkTheme
+    this.isDarkTheme.pipe(takeUntil(this.destroy$)).subscribe((dark) => {
-      .pipe(takeUntil(this.destroy$))
+      const theme = dark ? 'dark-theme' : 'light-theme';
-      .subscribe((dark) => this.onSetTheme(dark ? 'dark-theme' : 'light-theme'));
+      this.onSetTheme(theme);
+      this.setFavicon(theme);
+    });
 
     this.translate.onLangChange.pipe(takeUntil(this.destroy$)).subscribe((language: LangChangeEvent) => {
       this.document.documentElement.lang = language.lang;
@@ -300,4 +302,27 @@ export class AppComponent implements OnDestroy {
       }
     });
   }
+
+  private setFavicon(theme: string): void {
+    this.authService.labelpolicy.pipe(takeUntil(this.destroy$)).subscribe((lP) => {
+      if (theme === 'dark-theme' && lP?.iconUrlDark) {
+        // Check if asset url is stable, maybe it was deleted but still wasn't applied
+        fetch(lP.iconUrlDark).then((response) => {
+          if (response.ok) {
+            this.document.getElementById('appFavicon')?.setAttribute('href', lP.iconUrlDark);
+          }
+        });
+      } else if (theme === 'light-theme' && lP?.iconUrl) {
+        // Check if asset url is stable, maybe it was deleted but still wasn't applied
+        fetch(lP.iconUrl).then((response) => {
+          if (response.ok) {
+            this.document.getElementById('appFavicon')?.setAttribute('href', lP.iconUrl);
+          }
+        });
+      } else {
+        // Default Zitadel favicon
+        this.document.getElementById('appFavicon')?.setAttribute('href', 'favicon.ico');
+      }
+    });
+  }
 }

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts

@@ -87,6 +87,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
   public refreshPreview: EventEmitter<void> = new EventEmitter();
   public org!: Org.AsObject;
   public InfoSectionType: any = InfoSectionType;
+  private iconChanged: boolean = false;
 
   private destroy$: Subject<void> = new Subject();
   public view: View = View.PREVIEW;
@@ -265,6 +266,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
             return previewHandler(this.service.removeLabelPolicyLogo());
           }
         } else if (type === AssetType.ICON) {
+          this.iconChanged = true;
           if (theme === Theme.DARK) {
             return previewHandler(this.service.removeLabelPolicyIconDark());
           } else if (theme === Theme.LIGHT) {
@@ -300,6 +302,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               return previewHandler(this.service.removeLabelPolicyLogo());
             }
           } else if (type === AssetType.ICON) {
+            this.iconChanged = true;
             if (theme === Theme.DARK) {
               return previewHandler(this.service.removeLabelPolicyIconDark());
             } else if (theme === Theme.LIGHT) {
@@ -348,6 +351,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               break;
           }
         }
+        this.iconChanged = true;
       }
     }
   }
@@ -647,6 +651,10 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
           .then(() => {
             this.toast.showInfo('POLICY.PRIVATELABELING.ACTIVATED', true);
             setTimeout(() => {
+              if (this.iconChanged) {
+                this.iconChanged = false;
+                window.location.reload();
+              }
               this.getData().then((data) => {
                 if (data.policy) {
                   this.data = data.policy;
@@ -668,6 +676,10 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
           .then(() => {
             this.toast.showInfo('POLICY.PRIVATELABELING.ACTIVATED', true);
             setTimeout(() => {
+              if (this.iconChanged) {
+                this.iconChanged = false;
+                window.location.reload();
+              }
               this.getData().then((data) => {
                 if (data.policy) {
                   this.data = data.policy;

console/src/index.html

@@ -5,7 +5,7 @@
     <title>ZITADEL • Console</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link id="appFavicon" rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="stylesheet" href="./assets/icons/line-awesome/css/line-awesome.min.css" />
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#e6768b" />