TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-03-01 03:17:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: initial favicon poc

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

---------

Co-authored-by: Max Peintner <max@caos.ch>
This commit is contained in:
Miguel Cabrerizo 2024-02-14 09:38:53 +01:00 committed by GitHub
parent f6995fcb6c
commit 4789734946
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
console/src/app/app.component.ts
View File

@ -224,9 +224,11 @@ export class AppComponent implements OnDestroy {
});
this.isDarkTheme = this.themeService.isDarkTheme;
this.isDarkTheme
.pipe(takeUntil(this.destroy$))
.subscribe((dark) => this.onSetTheme(dark ? 'dark-theme' : 'light-theme'));
this.isDarkTheme.pipe(takeUntil(this.destroy$)).subscribe((dark) => {
const theme = 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');
}
});
}
}

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

@ -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;

2
console/src/index.html
View File

@ -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" />