-
+ {{'MENU.TOS'
| translate}}
|
-
{{'MENU.PRIVACY'
| translate}}
diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts
index a4d710da2..91cd5321c 100644
--- a/console/src/app/app.component.ts
+++ b/console/src/app/app.component.ts
@@ -14,6 +14,7 @@ import { catchError, debounceTime, finalize, map, take } from 'rxjs/operators';
import { accountCard, adminLineAnimation, navAnimations, routeAnimations, toolbarAnimation } from './animations';
import { TextQueryMethod } from './proto/generated/zitadel/object_pb';
import { Org, OrgNameQuery, OrgQuery } from './proto/generated/zitadel/org_pb';
+import { LabelPolicy, PrivacyPolicy } from './proto/generated/zitadel/policy_pb';
import { User } from './proto/generated/zitadel/user_pb';
import { AuthenticationService } from './services/authentication.service';
import { GrpcAuthService } from './services/grpc-auth.service';
@@ -22,284 +23,348 @@ import { ThemeService } from './services/theme.service';
import { UpdateService } from './services/update.service';
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss'],
- animations: [
- toolbarAnimation,
- ...navAnimations,
- accountCard,
- routeAnimations,
- adminLineAnimation,
- ],
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss'],
+ animations: [
+ toolbarAnimation,
+ ...navAnimations,
+ accountCard,
+ routeAnimations,
+ adminLineAnimation,
+ ],
})
export class AppComponent implements OnDestroy {
- @ViewChild('drawer') public drawer!: MatDrawer;
- @ViewChild('input', { static: false }) input!: ElementRef;
- public isHandset$: Observable
= this.breakpointObserver
- .observe('(max-width: 599px)')
- .pipe(map(result => {
- return result.matches;
- }));
- @HostBinding('class') public componentCssClass: string = 'dark-theme';
+ @ViewChild('drawer') public drawer!: MatDrawer;
+ @ViewChild('input', { static: false }) input!: ElementRef;
+ public isHandset$: Observable = this.breakpointObserver
+ .observe('(max-width: 599px)')
+ .pipe(map(result => {
+ return result.matches;
+ }));
+ @HostBinding('class') public componentCssClass: string = 'dark-theme';
- public showAccount: boolean = false;
- public org!: Org.AsObject;
- public orgs$: Observable = of([]);
- public user!: User.AsObject;
- public isDarkTheme: Observable = of(true);
+ public showAccount: boolean = false;
+ public org!: Org.AsObject;
+ public orgs$: Observable = of([]);
+ public user!: User.AsObject;
+ public isDarkTheme: Observable = of(true);
- public orgLoading$: BehaviorSubject = new BehaviorSubject(false);
+ public orgLoading$: BehaviorSubject = new BehaviorSubject(false);
- public showProjectSection: boolean = false;
+ public showProjectSection: boolean = false;
- public filterControl: FormControl = new FormControl('');
- private authSub: Subscription = new Subscription();
- private orgSub: Subscription = new Subscription();
+ public filterControl: FormControl = new FormControl('');
+ private authSub: Subscription = new Subscription();
+ private orgSub: Subscription = new Subscription();
+ public labelpolicy!: LabelPolicy.AsObject;
- public hideAdminWarn: boolean = true;
- public language: string = 'en';
- constructor(
- public viewPortScroller: ViewportScroller,
- @Inject('windowObject') public window: Window,
- public translate: TranslateService,
- public authenticationService: AuthenticationService,
- public authService: GrpcAuthService,
- private breakpointObserver: BreakpointObserver,
- public overlayContainer: OverlayContainer,
- private themeService: ThemeService,
- public mgmtService: ManagementService,
- public matIconRegistry: MatIconRegistry,
- public domSanitizer: DomSanitizer,
- private router: Router,
- update: UpdateService,
- @Inject(DOCUMENT) private document: Document,
- ) {
- console.log('%cWait!', 'text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #5469D4; font-size: 50px');
- console.log('%cInserting something here could give attackers access to your zitadel account.', 'color: red; font-size: 18px');
- console.log('%cIf you don\'t know exactly what you\'re doing, close the window and stay on the safe side', 'font-size: 16px');
- console.log('%cIf you know exactly what you are doing, you should work for us', 'font-size: 16px');
- this.setLanguage();
+ public hideAdminWarn: boolean = true;
+ public language: string = 'en';
+ public privacyPolicy!: PrivacyPolicy.AsObject;
+ constructor(
+ public viewPortScroller: ViewportScroller,
+ @Inject('windowObject') public window: Window,
+ public translate: TranslateService,
+ public authenticationService: AuthenticationService,
+ public authService: GrpcAuthService,
+ private breakpointObserver: BreakpointObserver,
+ public overlayContainer: OverlayContainer,
+ private themeService: ThemeService,
+ public mgmtService: ManagementService,
+ public matIconRegistry: MatIconRegistry,
+ public domSanitizer: DomSanitizer,
+ private router: Router,
+ update: UpdateService,
+ @Inject(DOCUMENT) private document: Document,
+ ) {
+ console.log('%cWait!', 'text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #5469D4; font-size: 50px');
+ console.log('%cInserting something here could give attackers access to your zitadel account.', 'color: red; font-size: 18px');
+ console.log('%cIf you don\'t know exactly what you\'re doing, close the window and stay on the safe side', 'font-size: 16px');
+ console.log('%cIf you know exactly what you are doing, you should work for us', 'font-size: 16px');
+ this.setLanguage();
- this.matIconRegistry.addSvgIcon(
- 'mdi_account_check_outline',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/account-check-outline.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_account_check_outline',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/account-check-outline.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_account_cancel',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/account-cancel-outline.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_account_cancel',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/account-cancel-outline.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_light_on',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lightbulb-on-outline.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_light_on',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lightbulb-on-outline.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_content_copy',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/content-copy.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_content_copy',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/content-copy.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_light_off',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lightbulb-off-outline.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_light_off',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lightbulb-off-outline.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_radar',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/radar.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_radar',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/radar.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_lock_question',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lock-question.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_lock_question',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lock-question.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_textbox_password',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/textbox-password.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_textbox_password',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/textbox-password.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_lock_reset',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lock-reset.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_lock_reset',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lock-reset.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_broom',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/broom.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_broom',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/broom.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_pin_outline',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/pin-outline.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_pin_outline',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/pin-outline.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_pin',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/pin.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_pin',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/pin.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_format-letter-case-lower',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/format-letter-case-lower.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_format-letter-case-lower',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/format-letter-case-lower.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_format-letter-case-upper',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/format-letter-case-upper.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_format-letter-case-upper',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/format-letter-case-upper.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_counter',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/counter.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_counter',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/counter.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_symbol',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/symbol.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_symbol',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/symbol.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_numeric',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/numeric.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_numeric',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/numeric.svg'),
+ );
- this.matIconRegistry.addSvgIcon(
- 'mdi_api',
- this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/api.svg'),
- );
+ this.matIconRegistry.addSvgIcon(
+ 'mdi_api',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/api.svg'),
+ );
- this.getProjectCount();
+ this.loadPrivateLabelling();
- this.orgSub = this.authService.activeOrgChanged.subscribe(org => {
- this.org = org;
- this.getProjectCount();
+ this.getProjectCount();
+
+ this.orgSub = this.authService.activeOrgChanged.subscribe(org => {
+ this.org = org;
+ this.getProjectCount();
+ });
+
+ this.authSub = this.authenticationService.authenticationChanged.subscribe((authenticated) => {
+ if (authenticated) {
+ this.authService.getActiveOrg().then(org => {
+ this.org = org;
});
+ }
+ });
- this.authSub = this.authenticationService.authenticationChanged.subscribe((authenticated) => {
- if (authenticated) {
- this.authService.getActiveOrg().then(org => {
- this.org = org;
- });
- }
- });
-
- const theme = localStorage.getItem('theme');
- if (theme) {
- this.overlayContainer.getContainerElement().classList.add(theme);
- this.componentCssClass = theme;
- }
-
- this.isDarkTheme = this.themeService.isDarkTheme;
- this.isDarkTheme.subscribe(thema => this.onSetTheme(thema ? 'dark-theme' : 'light-theme'));
-
- this.translate.onLangChange.subscribe((language: LangChangeEvent) => {
- this.document.documentElement.lang = language.lang;
- this.language = language.lang;
- });
-
- this.filterControl.valueChanges.pipe(debounceTime(300)).subscribe(value => {
- this.loadOrgs(
- value.trim().toLowerCase(),
- );
- });
-
- this.hideAdminWarn = localStorage.getItem('hideAdministratorWarning') === 'true' ? true : false;
+ const theme = localStorage.getItem('theme');
+ if (theme) {
+ this.overlayContainer.getContainerElement().classList.add(theme);
+ this.componentCssClass = theme;
}
- public ngOnDestroy(): void {
- this.authSub.unsubscribe();
- this.orgSub.unsubscribe();
+ this.isDarkTheme = this.themeService.isDarkTheme;
+ this.isDarkTheme.subscribe(dark => this.onSetTheme(dark ? 'dark-theme' : 'light-theme'));
+
+ this.translate.onLangChange.subscribe((language: LangChangeEvent) => {
+ this.document.documentElement.lang = language.lang;
+ this.language = language.lang;
+ });
+
+ this.filterControl.valueChanges.pipe(debounceTime(300)).subscribe(value => {
+ this.loadOrgs(
+ value.trim().toLowerCase(),
+ );
+ });
+
+ this.hideAdminWarn = localStorage.getItem('hideAdministratorWarning') === 'true' ? true : false;
+
+ this.loadPolicies();
+ }
+
+ public ngOnDestroy(): void {
+ this.authSub.unsubscribe();
+ this.orgSub.unsubscribe();
+ }
+
+ public toggleAdminHide(): void {
+ this.hideAdminWarn = !this.hideAdminWarn;
+ localStorage.setItem('hideAdministratorWarning', this.hideAdminWarn.toString());
+ }
+
+ public loadPrivateLabelling(): void {
+ const setDefaultColors = () => {
+ const darkPrimary = '#5282c1';
+ const lightPrimary = '#5282c1';
+
+ const darkWarn = '#F44336';
+ const lightWarn = '#F44336';
+
+ const darkBackground = '#212224';
+ const lightBackground = '#fafafa';
+
+ this.themeService.savePrimaryColor(darkPrimary, true);
+ this.themeService.savePrimaryColor(lightPrimary, false);
+
+ this.themeService.saveWarnColor(darkWarn, true);
+ this.themeService.saveWarnColor(lightWarn, false);
+
+ this.themeService.saveBackgroundColor(darkBackground, true);
+ this.themeService.saveBackgroundColor(lightBackground, false);
+ };
+
+ setDefaultColors();
+
+ this.mgmtService.getLabelPolicy().then(labelpolicy => {
+ if (labelpolicy.policy) {
+ this.labelpolicy = labelpolicy.policy;
+
+ const darkPrimary = this.labelpolicy?.primaryColorDark || '#5282c1';
+ const lightPrimary = this.labelpolicy?.primaryColor || '#5282c1';
+
+ const darkWarn = this.labelpolicy?.warnColorDark || '#F44336';
+ const lightWarn = this.labelpolicy?.warnColor || '#F44336';
+
+ const darkBackground = this.labelpolicy?.backgroundColorDark || '#212224';
+ const lightBackground = this.labelpolicy?.backgroundColor || '#fafafa';
+
+ this.themeService.savePrimaryColor(darkPrimary, true);
+ this.themeService.savePrimaryColor(lightPrimary, false);
+
+ this.themeService.saveWarnColor(darkWarn, true);
+ this.themeService.saveWarnColor(lightWarn, false);
+
+ this.themeService.saveBackgroundColor(darkBackground, true);
+ this.themeService.saveBackgroundColor(lightBackground, false);
+ }
+ });
+ }
+
+ public loadPolicies(): void {
+ this.mgmtService.getPrivacyPolicy().then(privacypolicy => {
+
+ if (privacypolicy.policy) {
+ this.privacyPolicy = privacypolicy.policy;
+ }
+ });
+ }
+
+ public loadOrgs(filter?: string): void {
+ let query;
+ if (filter) {
+ query = new OrgQuery();
+ const orgNameQuery = new OrgNameQuery();
+ orgNameQuery.setName(filter);
+ orgNameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+ query.setNameQuery(orgNameQuery);
}
- public toggleAdminHide(): void {
- this.hideAdminWarn = !this.hideAdminWarn;
- localStorage.setItem('hideAdministratorWarning', this.hideAdminWarn.toString());
+ this.orgLoading$.next(true);
+ this.orgs$ = from(this.authService.listMyProjectOrgs(10, 0, query ? [query] : undefined)).pipe(
+ map(resp => {
+ return resp.resultList;
+ }),
+ catchError(() => of([])),
+ finalize(() => {
+ this.orgLoading$.next(false);
+ this.focusFilter();
+ }),
+ );
+ }
+
+ public prepareRoute(outlet: RouterOutlet): boolean {
+ return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
+ }
+
+ public closeAccountCard(): void {
+ if (this.showAccount) {
+ this.showAccount = false;
}
+ }
- public loadOrgs(filter?: string): void {
- let query;
- if (filter) {
- query = new OrgQuery();
- const orgNameQuery = new OrgNameQuery();
- orgNameQuery.setName(filter);
- orgNameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
- query.setNameQuery(orgNameQuery);
- }
+ public onSetTheme(theme: string): void {
+ localStorage.setItem('theme', theme);
+ this.overlayContainer.getContainerElement().classList.add(theme);
+ this.componentCssClass = theme;
+ }
- this.orgLoading$.next(true);
- this.orgs$ = from(this.authService.listMyProjectOrgs(10, 0, query ? [query] : undefined)).pipe(
- map(resp => {
- return resp.resultList;
- }),
- catchError(() => of([])),
- finalize(() => {
- this.orgLoading$.next(false);
- this.focusFilter();
- }),
- );
- }
+ private setLanguage(): void {
+ this.translate.addLangs(['en', 'de']);
+ this.translate.setDefaultLang('en');
- public prepareRoute(outlet: RouterOutlet): boolean {
- return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
- }
+ this.authService.user.subscribe(userprofile => {
+ if (userprofile) {
+ this.user = userprofile;
+ const cropped = navigator.language.split('-')[0] ?? 'en';
+ const fallbackLang = cropped.match(/en|de/) ? cropped : 'en';
- public closeAccountCard(): void {
- if (this.showAccount) {
- this.showAccount = false;
- }
- }
+ const lang =
+ userprofile?.human?.profile?.preferredLanguage.match(/en|de/) ?
+ userprofile.human.profile?.preferredLanguage :
+ fallbackLang;
+ this.translate.use(lang);
+ this.language = lang;
+ this.document.documentElement.lang = lang;
+ }
+ });
+ }
- public onSetTheme(theme: string): void {
- localStorage.setItem('theme', theme);
- this.overlayContainer.getContainerElement().classList.add(theme);
- this.componentCssClass = theme;
- }
+ public setActiveOrg(org: Org.AsObject): void {
+ this.org = org;
+ this.authService.setActiveOrg(org);
+ this.loadPrivateLabelling();
+ this.authService.zitadelPermissionsChanged.pipe(take(1)).subscribe(() => {
+ this.router.navigate(['/']);
+ });
+ }
- private setLanguage(): void {
- this.translate.addLangs(['en', 'de']);
- this.translate.setDefaultLang('en');
+ private getProjectCount(): void {
+ this.authService.isAllowed(['project.read']).subscribe((allowed) => {
+ if (allowed) {
+ this.mgmtService.listProjects(0, 0);
+ this.mgmtService.listGrantedProjects(0, 0);
+ }
+ });
+ }
- this.authService.user.subscribe(userprofile => {
- if (userprofile) {
- this.user = userprofile;
- const cropped = navigator.language.split('-')[0] ?? 'en';
- const fallbackLang = cropped.match(/en|de/) ? cropped : 'en';
-
- const lang =
- userprofile?.human?.profile?.preferredLanguage.match(/en|de/) ?
- userprofile.human.profile?.preferredLanguage :
- fallbackLang;
- this.translate.use(lang);
- this.language = lang;
- this.document.documentElement.lang = lang;
- }
- });
- }
-
- public setActiveOrg(org: Org.AsObject): void {
- this.org = org;
- this.authService.setActiveOrg(org);
- this.authService.zitadelPermissionsChanged.pipe(take(1)).subscribe(() => {
- this.router.navigate(['/']);
- });
- }
-
- private getProjectCount(): void {
- this.authService.isAllowed(['project.read']).subscribe((allowed) => {
- if (allowed) {
- this.mgmtService.listProjects(0, 0);
- this.mgmtService.listGrantedProjects(0, 0);
- }
- });
- }
-
- focusFilter(): void {
- setTimeout(() => {
- this.input.nativeElement.focus();
- }, 0);
- }
+ focusFilter(): void {
+ setTimeout(() => {
+ this.input.nativeElement.focus();
+ }, 0);
+ }
}
diff --git a/console/src/app/modules/app-card/app-card.component.scss b/console/src/app/modules/app-card/app-card.component.scss
index d51e13342..758489e91 100644
--- a/console/src/app/modules/app-card/app-card.component.scss
+++ b/console/src/app/modules/app-card/app-card.component.scss
@@ -3,10 +3,12 @@
@mixin app-card-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
- $primary-dark: mat.get-color-from-palette($primary, A900);
+ $background: map-get($theme, background);
$accent: map-get($theme, accent);
$is-dark-theme: map-get($theme, is-dark);
$accent-color: mat.get-color-from-palette($primary, 500);
+ $back: map-get($background, background);
+
/* stylelint-enable */
.cnsl-app-card {
@@ -25,7 +27,7 @@
text-transform: uppercase;
border-radius: .5rem;
font-weight: 800;
- background-color: $primary-dark;
+ background-color: $back;
transition: background-color box-shadow .3s ease-in;
&.web {
diff --git a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
index 4219aa28b..5ea09163e 100644
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
@@ -93,7 +93,7 @@
span {
margin: 2rem;
font-size: 30px;
- color: if($is-dark-theme, #21222450, #ffffff50);
+ color: if($is-dark-theme, #00000050, #ffffff50);
}
}
diff --git a/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss b/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
index d1bede349..73c1e7f86 100644
--- a/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
+++ b/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
@@ -50,7 +50,7 @@
span {
margin: 2rem;
font-size: 30px;
- color: if($is-dark-theme, #21222450, #ffffff50);
+ color: if($is-dark-theme, #00000050, #ffffff50);
}
}
diff --git a/console/src/app/modules/card/card.component.html b/console/src/app/modules/card/card.component.html
index a52d73075..c5ea81593 100644
--- a/console/src/app/modules/card/card.component.html
+++ b/console/src/app/modules/card/card.component.html
@@ -1,4 +1,4 @@
-
diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
index 3432162a8..86ff8455f 100644
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
+++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
@@ -6,6 +6,8 @@
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
$is-dark-theme: map-get($theme, is-dark);
+ $background: map-get($theme, background);
+ $foreground: map-get($theme, foreground);
.policy {
.header {
@@ -157,8 +159,6 @@
margin-bottom: 2rem;
.expansion {
- background: if($is-dark-theme, #2d2e30, #fff) !important;
-
.header {
justify-content: flex-start;
}
@@ -189,8 +189,7 @@
height: 150px;
width: 100%;
border-radius: .5rem;
- background: if($is-dark-theme, #2d2e30, #fff);
- border: 1px solid if($is-dark-theme, #4a4b4b, #ddd);
+ border: 1px solid map-get($foreground, divider);
display: flex;
justify-content: center;
align-items: center;
@@ -202,11 +201,8 @@
flex-direction: column;
align-items: center;
- .btn {
+ a {
margin-bottom: .5rem;
- }
-
- .btn:not[disabled] {
cursor: pointer;
}
@@ -272,32 +268,29 @@
margin-bottom: 1rem;
.img-wrapper {
- flex: 1;
position: relative;
- min-height: 80px;
- border: 1px solid if($is-dark-theme, #ffffff20, #00000020);
- border-radius: .5rem;
- max-width: 120px;
+ height: 80px;
+ width: 80px;
+ border-radius: 50vw;
+ background-color: #00000020;
.dl-btn {
z-index: 2;
position: absolute;
- top: -12px;
- left: -12px;
+ top: 0;
+ left: 0;
cursor: pointer;
visibility: hidden;
}
.prev,
.curr {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
+ top: 0;
left: 0;
- max-height: 80px;
- max-width: 120px;
+ width: 80px;
+ height: 80px;
object-fit: contain;
- border-radius: .5rem;
+ border-radius: 50%;
}
&:hover {
@@ -412,7 +405,7 @@
position: absolute;
top: .5rem;
left: .5rem;
- border-radius: 10px !important;
+ border-radius: 8px !important;
z-index: 1;
span {
diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
index 5cf035c0e..89e81315b 100644
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
@@ -22,6 +22,7 @@ import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.s
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageService } from 'src/app/services/storage.service';
+import { ThemeService } from 'src/app/services/theme.service';
import { ToastService } from 'src/app/services/toast.service';
import { GridPolicy, PRIVATELABEL_POLICY } from '../../policy-grid/policies';
@@ -95,6 +96,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
private assetService: AssetService,
private sanitizer: DomSanitizer,
private storageService: StorageService,
+ private themeService: ThemeService,
) {
const org: Org.AsObject | null = (this.storageService.getItem(ORG_STORAGE_KEY));
@@ -587,6 +589,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
if (data.policy) {
this.data = data.policy;
+ this.applyToConsole(data.policy);
this.loadImages();
}
});
@@ -603,6 +606,7 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
if (data.policy) {
this.data = data.policy;
+ this.applyToConsole(data.policy);
this.loadImages();
}
});
@@ -613,6 +617,26 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
}
}
+ private applyToConsole(labelpolicy: LabelPolicy.AsObject): void {
+ const darkPrimary = labelpolicy?.primaryColorDark || '#5282c1';
+ const lightPrimary = labelpolicy?.primaryColor || '#5282c1';
+
+ const darkWarn = labelpolicy?.warnColorDark || '#F44336';
+ const lightWarn = labelpolicy?.warnColor || '#F44336';
+
+ const darkBackground = labelpolicy?.backgroundColorDark || '#212224';
+ const lightBackground = labelpolicy?.backgroundColor || '#fafafa';
+
+ this.themeService.savePrimaryColor(darkPrimary, true);
+ this.themeService.savePrimaryColor(lightPrimary, false);
+
+ this.themeService.saveWarnColor(darkWarn, true);
+ this.themeService.saveWarnColor(lightWarn, false);
+
+ this.themeService.saveBackgroundColor(darkBackground, true);
+ this.themeService.saveBackgroundColor(lightBackground, false);
+ }
+
public resetPolicy(): Promise