-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/console/src/app/modules/footer/footer.component.ts b/console/src/app/modules/footer/footer.component.ts
index 85faef6335..eac84ec5a6 100644
--- a/console/src/app/modules/footer/footer.component.ts
+++ b/console/src/app/modules/footer/footer.component.ts
@@ -9,8 +9,7 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
})
export class FooterComponent {
public policy?: PrivacyPolicy.AsObject;
- @Input() public privateLabelPolicy?: LabelPolicy.AsObject;
- constructor(authService: GrpcAuthService) {
+ constructor(public authService: GrpcAuthService) {
authService.getMyPrivacyPolicy().then((policyResp) => {
if (policyResp.policy) {
this.policy = policyResp.policy;
diff --git a/console/src/app/modules/header/header.component.html b/console/src/app/modules/header/header.component.html
index f6c926ae40..31dd9965f1 100644
--- a/console/src/app/modules/header/header.component.html
+++ b/console/src/app/modules/header/header.component.html
@@ -1,26 +1,27 @@
-
- ![home logo]()
-
+
+
![home logo]()
-
-
+
+ ![home logo]()
+
+
+
diff --git a/console/src/app/modules/header/header.component.scss b/console/src/app/modules/header/header.component.scss
index edd3a3f3a4..0ba8558793 100644
--- a/console/src/app/modules/header/header.component.scss
+++ b/console/src/app/modules/header/header.component.scss
@@ -181,6 +181,16 @@
}
}
+ .logo-placeholder {
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ background-color: if($is-dark-theme, #00000020, #00000010);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
.title {
text-decoration: none;
color: white;
diff --git a/console/src/app/modules/header/header.component.ts b/console/src/app/modules/header/header.component.ts
index ba6a5b87d5..b276ba71cd 100644
--- a/console/src/app/modules/header/header.component.ts
+++ b/console/src/app/modules/header/header.component.ts
@@ -22,7 +22,6 @@ export class HeaderComponent implements OnDestroy {
@Input() public isDarkTheme: boolean = true;
@Input() public user?: User.AsObject;
- @Input() public labelpolicy?: LabelPolicy.AsObject;
public showOrgContext: boolean = false;
public orgs$: Observable = of([]);
diff --git a/console/src/app/modules/nav/nav.component.ts b/console/src/app/modules/nav/nav.component.ts
index d8bc11e0df..6f254f6ab3 100644
--- a/console/src/app/modules/nav/nav.component.ts
+++ b/console/src/app/modules/nav/nav.component.ts
@@ -6,10 +6,10 @@ import { UntypedFormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { BehaviorSubject, map, Observable, Subject, take } from 'rxjs';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
-import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { User } from 'src/app/proto/generated/zitadel/user_pb';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { KeyboardShortcutsService } from 'src/app/services/keyboard-shortcuts/keyboard-shortcuts.service';
import { ManagementService } from 'src/app/services/mgmt.service';
@@ -73,7 +73,6 @@ export class NavComponent implements OnDestroy {
@Input() public isDarkTheme: boolean = true;
@Input() public user!: User.AsObject;
- @Input() public labelpolicy?: LabelPolicy.AsObject;
public isHandset$: Observable = this.breakpointObserver.observe('(max-width: 599px)').pipe(
map((result) => {
return result.matches;
@@ -91,6 +90,7 @@ export class NavComponent implements OnDestroy {
public customerPortalLink: string = '';
constructor(
+ public authService: GrpcAuthService,
public authenticationService: AuthenticationService,
public breadcrumbService: BreadcrumbService,
public mgmtService: ManagementService,
diff --git a/console/src/app/modules/org-table/org-table.component.ts b/console/src/app/modules/org-table/org-table.component.ts
index b8715e1db6..9fade5f1b5 100644
--- a/console/src/app/modules/org-table/org-table.component.ts
+++ b/console/src/app/modules/org-table/org-table.component.ts
@@ -57,7 +57,6 @@ export class OrgTableComponent {
private router: Router,
private toast: ToastService,
private _liveAnnouncer: LiveAnnouncer,
- private themeService: ThemeService,
) {
this.requestOrgs$.next({ limit: this.initialLimit, offset: 0, queries: this.searchQueries });
this.authService.getActiveOrg().then((org) => (this.activeOrg = org));
@@ -137,7 +136,6 @@ export class OrgTableComponent {
public setAndNavigateToOrg(org: Org.AsObject): void {
this.authService.setActiveOrg(org);
- this.themeService.loadPrivateLabelling();
this.router.navigate(['/org']);
}
diff --git a/console/src/app/pages/signedout/signedout.component.html b/console/src/app/pages/signedout/signedout.component.html
index 89313532e5..4f989e4cd9 100644
--- a/console/src/app/pages/signedout/signedout.component.html
+++ b/console/src/app/pages/signedout/signedout.component.html
@@ -1,13 +1,23 @@
diff --git a/console/src/app/pages/signedout/signedout.component.scss b/console/src/app/pages/signedout/signedout.component.scss
index aa98536496..49cd0439cd 100644
--- a/console/src/app/pages/signedout/signedout.component.scss
+++ b/console/src/app/pages/signedout/signedout.component.scss
@@ -18,8 +18,7 @@
p {
text-align: center;
font-size: 14px;
- margin: 0;
- margin-bottom: 3rem;
+ margin: 2rem 0 3rem 0;
}
img {
diff --git a/console/src/app/pages/signedout/signedout.component.ts b/console/src/app/pages/signedout/signedout.component.ts
index 1e33fef556..423b56e04d 100644
--- a/console/src/app/pages/signedout/signedout.component.ts
+++ b/console/src/app/pages/signedout/signedout.component.ts
@@ -1,5 +1,8 @@
import { Component } from '@angular/core';
+import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ThemeService } from 'src/app/services/theme.service';
+const LABELPOLICY_LOCALSTORAGE_KEY = 'labelPolicyOnSignout';
@Component({
selector: 'cnsl-signedout',
@@ -9,10 +12,25 @@ import { ThemeService } from 'src/app/services/theme.service';
export class SignedoutComponent {
public dark: boolean = true;
- constructor(themeService: ThemeService) {
- themeService.loadPrivateLabelling();
-
+ public labelpolicy?: LabelPolicy.AsObject;
+ public queryParams = { state: '' };
+ constructor(themeService: ThemeService, authService: GrpcAuthService) {
const theme = localStorage.getItem('theme');
this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true;
+
+ const lP = localStorage.getItem(LABELPOLICY_LOCALSTORAGE_KEY);
+
+ if (lP) {
+ const parsed = JSON.parse(lP);
+ localStorage.removeItem(LABELPOLICY_LOCALSTORAGE_KEY);
+ if (parsed) {
+ this.labelpolicy = parsed;
+ themeService.applyLabelPolicy(parsed);
+ authService.labelpolicy.next(parsed);
+ authService.labelPolicyLoading$.next(false);
+ }
+ } else {
+ authService.labelPolicyLoading$.next(false);
+ }
}
}
diff --git a/console/src/app/services/authentication.service.ts b/console/src/app/services/authentication.service.ts
index b4b24c30fd..8f238efb2c 100644
--- a/console/src/app/services/authentication.service.ts
+++ b/console/src/app/services/authentication.service.ts
@@ -1,6 +1,7 @@
import { Injectable } from '@angular/core';
import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
import { BehaviorSubject, from, lastValueFrom, Observable } from 'rxjs';
+import { GrpcAuthService } from './grpc-auth.service';
import { StatehandlerService } from './statehandler/statehandler.service';
diff --git a/console/src/app/services/grpc-auth.service.ts b/console/src/app/services/grpc-auth.service.ts
index 6e767baad6..84b4f4e028 100644
--- a/console/src/app/services/grpc-auth.service.ts
+++ b/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 = new Subject();
+ private _activeOrgChanged: Subject = new Subject();
public user!: Observable;
public userSubject: BehaviorSubject = new BehaviorSubject(undefined);
private triggerPermissionsRefresh: Subject = new Subject();
@@ -132,18 +136,47 @@ export class GrpcAuthService {
),
),
);
+
+ public labelpolicy$!: Observable;
+ public labelpolicy: BehaviorSubject = new BehaviorSubject<
+ LabelPolicy.AsObject | undefined
+ >(undefined);
+ labelPolicyLoading$: BehaviorSubject = new BehaviorSubject(true);
+
public zitadelPermissions: BehaviorSubject = new BehaviorSubject([]);
public readonly fetchedZitadelPermissions: BehaviorSubject = new BehaviorSubject(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(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 {
+ public get activeOrgChanged(): Observable {
return this._activeOrgChanged;
}
@@ -605,8 +640,24 @@ export class GrpcAuthService {
return this.grpcService.auth.listMyUserChanges(req, null).then((resp) => resp.toObject());
}
- public getMyLabelPolicy(): Promise {
- return this.grpcService.auth.getMyLabelPolicy(new GetMyLabelPolicyRequest(), null).then((resp) => resp.toObject());
+ public getMyLabelPolicy(orgIdForCache?: string): Promise {
+ 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 {
diff --git a/console/src/app/services/theme.service.ts b/console/src/app/services/theme.service.ts
index 7b8b77525d..2064571a0d 100644
--- a/console/src/app/services/theme.service.ts
+++ b/console/src/app/services/theme.service.ts
@@ -13,16 +13,28 @@ export interface Color {
contrastColor: string;
}
+const DARK_PRIMARY = '#bbbafa';
+const PRIMARY = '#5469d4';
+
+const DARK_WARN = '#ff3b5b';
+const WARN = '#cd3d56';
+
+const DARK_BACKGROUND = '#111827';
+const BACKGROUND = '#fafafa';
+
+const DARK_TEXT = '#ffffff';
+const TEXT = '#000000';
+
@Injectable()
export class ThemeService {
private _darkTheme: BehaviorSubject = new BehaviorSubject(true);
public isDarkTheme: Observable = this._darkTheme.asObservable();
-
+ public loading: boolean = false;
private primaryColorPalette: Color[] = [];
private warnColorPalette: Color[] = [];
private backgroundColorPalette: Color[] = [];
- constructor(private authService: GrpcAuthService) {
+ constructor() {
const theme = localStorage.getItem('theme');
if (theme) {
if (theme === 'light-theme') {
@@ -31,6 +43,7 @@ export class ThemeService {
this.setDarkTheme(true);
}
}
+ this.applyLabelPolicy(); // apply default
}
setDarkTheme(isDarkTheme: boolean): void {
@@ -116,105 +129,68 @@ export class ThemeService {
}
public setDefaultColors = () => {
- const darkPrimary = '#bbbafa';
- const lightPrimary = '#5469d4';
+ this.savePrimaryColor(DARK_PRIMARY, true);
+ this.savePrimaryColor(PRIMARY, false);
- const darkWarn = '#ff3b5b';
- const lightWarn = '#cd3d56';
+ this.saveWarnColor(DARK_WARN, true);
+ this.saveWarnColor(WARN, false);
- const darkBackground = '#111827';
- const lightBackground = '#fafafa';
+ this.saveBackgroundColor(DARK_BACKGROUND, true);
+ this.saveBackgroundColor(BACKGROUND, false);
- const darkText = '#ffffff';
- const lightText = '#000000';
-
- this.savePrimaryColor(darkPrimary, true);
- this.savePrimaryColor(lightPrimary, false);
-
- this.saveWarnColor(darkWarn, true);
- this.saveWarnColor(lightWarn, false);
-
- this.saveBackgroundColor(darkBackground, true);
- this.saveBackgroundColor(lightBackground, false);
-
- this.saveTextColor(darkText, true);
- this.saveTextColor(lightText, false);
+ this.saveTextColor(DARK_TEXT, true);
+ this.saveTextColor(TEXT, false);
};
- public loadPrivateLabelling(forceDefault: boolean = false): Promise {
- if (forceDefault) {
- this.setDefaultColors();
- return Promise.resolve(undefined);
+ public applyLabelPolicy(labelpolicy?: LabelPolicy.AsObject) {
+ if (labelpolicy) {
+ const darkPrimary = labelpolicy?.primaryColorDark ?? DARK_PRIMARY;
+ const lightPrimary = labelpolicy?.primaryColor ?? PRIMARY;
+
+ const darkWarn = labelpolicy?.warnColorDark ?? DARK_WARN;
+ const lightWarn = labelpolicy?.warnColor ?? WARN;
+
+ let darkBackground = labelpolicy?.backgroundColorDark ?? DARK_BACKGROUND;
+ let lightBackground = labelpolicy?.backgroundColor ?? BACKGROUND;
+
+ let darkText = labelpolicy?.fontColorDark ?? DARK_TEXT;
+ let lightText = labelpolicy?.fontColor ?? TEXT;
+
+ this.savePrimaryColor(darkPrimary, true);
+ this.savePrimaryColor(lightPrimary, false);
+
+ this.saveWarnColor(darkWarn, true);
+ this.saveWarnColor(lightWarn, false);
+
+ if (darkBackground && !this.isDark(darkBackground)) {
+ console.info(
+ `Background (${darkBackground}) is not dark enough for a dark theme. Falling back to zitadel background`,
+ );
+ darkBackground = '#111827';
+ }
+ this.saveBackgroundColor(darkBackground || '#111827', true);
+
+ if (lightBackground && !this.isLight(lightBackground)) {
+ console.info(
+ `Background (${lightBackground}) is not light enough for a light theme. Falling back to zitadel background`,
+ );
+ lightBackground = '#fafafa';
+ }
+ this.saveBackgroundColor(lightBackground || '#fafafa', false);
+
+ if (darkText && !this.isLight(darkText)) {
+ console.info(`Text color (${darkText}) is not light enough for a dark theme. Falling back to zitadel's text color`);
+ darkText = '#ffffff';
+ }
+ this.saveTextColor(darkText || '#ffffff', true);
+
+ if (lightText && !this.isDark(lightText)) {
+ console.info(`Text color (${lightText}) is not dark enough for a light theme. Falling back to zitadel's text color`);
+ lightText = '#000000';
+ }
+ this.saveTextColor(lightText || '#000000', false);
} else {
- const isDark = (color: string) => this.isDark(color);
- const isLight = (color: string) => this.isLight(color);
-
- return this.authService
- .getMyLabelPolicy()
- .then((lpresp) => {
- const labelpolicy = lpresp.policy;
-
- const darkPrimary = labelpolicy?.primaryColorDark || '#bbbafa';
- const lightPrimary = labelpolicy?.primaryColor || '#5469d4';
-
- const darkWarn = labelpolicy?.warnColorDark || '#ff3b5b';
- const lightWarn = labelpolicy?.warnColor || '#cd3d56';
-
- let darkBackground = labelpolicy?.backgroundColorDark;
- let lightBackground = labelpolicy?.backgroundColor;
-
- let darkText = labelpolicy?.fontColorDark ?? '#ffffff';
- let lightText = labelpolicy?.fontColor ?? '#000000';
-
- this.savePrimaryColor(darkPrimary, true);
- this.savePrimaryColor(lightPrimary, false);
-
- this.saveWarnColor(darkWarn, true);
- this.saveWarnColor(lightWarn, false);
-
- if (darkBackground && !isDark(darkBackground)) {
- console.info(
- `Background (${darkBackground}) is not dark enough for a dark theme. Falling back to zitadel background`,
- );
- darkBackground = '#111827';
- }
- this.saveBackgroundColor(darkBackground || '#111827', true);
-
- if (lightBackground && !isLight(lightBackground)) {
- console.info(
- `Background (${lightBackground}) is not light enough for a light theme. Falling back to zitadel background`,
- );
- lightBackground = '#fafafa';
- }
- this.saveBackgroundColor(lightBackground || '#fafafa', false);
-
- if (darkText && !isLight(darkText)) {
- console.info(
- `Text color (${darkText}) is not light enough for a dark theme. Falling back to zitadel's text color`,
- );
- darkText = '#ffffff';
- }
- this.saveTextColor(darkText || '#ffffff', true);
-
- if (lightText && !isDark(lightText)) {
- console.info(
- `Text color (${lightText}) is not dark enough for a light theme. Falling back to zitadel's text color`,
- );
- lightText = '#000000';
- }
- this.saveTextColor(lightText || '#000000', false);
-
- if (labelpolicy) {
- return labelpolicy;
- } else {
- return Promise.reject();
- }
- })
- .catch((error) => {
- console.error('could not load private labelling policy!', error);
- this.setDefaultColors();
- return Promise.reject();
- });
+ this.setDefaultColors();
}
}
}
+
+
- 
-
- 
+
+ ![logo]()
+
+ ![logo]()
+
+
+
+
+
+
+
+
+
-
+
+
+ {{ 'USER.SIGNEDOUT' | translate }}
- +