diff --git a/console/angular.json b/console/angular.json index 338b52832d..697d1fb4de 100644 --- a/console/angular.json +++ b/console/angular.json @@ -31,6 +31,7 @@ "src/app/proto/generated/zitadel/admin_pb", "src/app/proto/generated/zitadel/org_pb", "src/app/proto/generated/zitadel/management_pb", + "src/app/proto/generated/zitadel/user_pb", "src/app/proto/generated/**", "google-protobuf/google/protobuf/empty_pb", "file-saver", diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts index 98d6ae95ae..b1499b18ba 100644 --- a/console/src/app/app.component.ts +++ b/console/src/app/app.component.ts @@ -216,13 +216,14 @@ export class AppComponent implements OnDestroy { .getActiveOrg() .then((org) => { this.org = org; - - this.loadPrivateLabelling(); + this.themeService.loadPrivateLabelling(); // TODO add when console storage is implemented // this.startIntroWorkflow(); }) .catch((error) => { + console.error(error); + this.themeService.setDefaultColors(); this.router.navigate(['/users/me']); }); } @@ -256,95 +257,6 @@ export class AppComponent implements OnDestroy { this.destroy$.complete(); } - public loadPrivateLabelling(): void { - const setDefaultColors = () => { - const darkPrimary = '#bbbafa'; - const lightPrimary = '#5469d4'; - - const darkWarn = '#ff3b5b'; - const lightWarn = '#cd3d56'; - - const darkBackground = '#111827'; - const lightBackground = '#fafafa'; - - const darkText = '#ffffff'; - const lightText = '#000000'; - - 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); - - this.themeService.saveTextColor(darkText, true); - this.themeService.saveTextColor(lightText, false); - }; - - setDefaultColors(); - - this.mgmtService.getLabelPolicy().then((labelpolicy) => { - if (labelpolicy.policy) { - this.labelpolicy = labelpolicy.policy; - - const isDark = (color: string) => this.themeService.isDark(color); - const isLight = (color: string) => this.themeService.isLight(color); - - const darkPrimary = this.labelpolicy?.primaryColorDark || '#bbbafa'; - const lightPrimary = this.labelpolicy?.primaryColor || '#5469d4'; - - const darkWarn = this.labelpolicy?.warnColorDark || '#ff3b5b'; - const lightWarn = this.labelpolicy?.warnColor || '#cd3d56'; - - let darkBackground = this.labelpolicy?.backgroundColorDark; - let lightBackground = this.labelpolicy?.backgroundColor; - - let darkText = this.labelpolicy.fontColorDark; - let lightText = this.labelpolicy.fontColor; - - this.themeService.savePrimaryColor(darkPrimary, true); - this.themeService.savePrimaryColor(lightPrimary, false); - - this.themeService.saveWarnColor(darkWarn, true); - this.themeService.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.themeService.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.themeService.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.themeService.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.themeService.saveTextColor(lightText || '#000000', false); - } - }); - } - public prepareRoute(outlet: RouterOutlet): boolean { return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation; } @@ -357,7 +269,7 @@ export class AppComponent implements OnDestroy { } public changedOrg(org: Org.AsObject): void { - this.loadPrivateLabelling(); + this.themeService.loadPrivateLabelling(); this.authService.zitadelPermissionsChanged.pipe(take(1)).subscribe(() => { this.router.navigate(['/org'], { fragment: org.id }); }); diff --git a/console/src/app/modules/footer/footer.component.html b/console/src/app/modules/footer/footer.component.html index 27822c69cc..472c367c0c 100644 --- a/console/src/app/modules/footer/footer.component.html +++ b/console/src/app/modules/footer/footer.component.html @@ -11,7 +11,7 @@ -
+
@@ -32,70 +32,5 @@
- -
diff --git a/console/src/app/modules/idp-table/idp-table.component.html b/console/src/app/modules/idp-table/idp-table.component.html index bfa88fbc7b..da80ff730d 100644 --- a/console/src/app/modules/idp-table/idp-table.component.html +++ b/console/src/app/modules/idp-table/idp-table.component.html @@ -11,7 +11,7 @@ - - + + + - \ No newline at end of file + 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 866884d5a4..dc4c7304ab 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 @@ -1,5 +1,6 @@ import { HttpErrorResponse } from '@angular/common/http'; import { Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; import { Subject, Subscription } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { @@ -23,6 +24,7 @@ import { ThemeService } from 'src/app/services/theme.service'; import { ToastService } from 'src/app/services/toast.service'; import { InfoSectionType } from '../../info-section/info-section.component'; +import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component'; import { PolicyComponentServiceType } from '../policy-component-types.enum'; export enum Theme { @@ -90,6 +92,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy { private assetService: AssetService, private storageService: StorageService, private themeService: ThemeService, + private dialog: MatDialog, ) {} public toggleHoverLogo(theme: Theme, isHovering: boolean): void { @@ -395,17 +398,31 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy { public removePolicy(): void { if (this.service instanceof ManagementService) { - this.service - .resetLabelPolicyToDefault() - .then(() => { - this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true); - setTimeout(() => { - this.fetchData(); - }, 1000); - }) - .catch((error) => { - this.toast.showError(error); - }); + const dialogRef = this.dialog.open(WarnDialogComponent, { + data: { + confirmKey: 'ACTIONS.RESET', + cancelKey: 'ACTIONS.CANCEL', + titleKey: 'SETTING.DIALOG.RESET.DEFAULTTITLE', + descriptionKey: 'SETTING.DIALOG.RESET.DEFAULTDESCRIPTION', + }, + width: '400px', + }); + + dialogRef.afterClosed().subscribe((resp) => { + if (resp) { + (this.service as ManagementService) + .resetLabelPolicyToDefault() + .then(() => { + this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true); + setTimeout(() => { + this.fetchData(); + }, 1000); + }) + .catch((error) => { + this.toast.showError(error); + }); + } + }); } } diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts index a2d0f9390b..d715d4ba00 100644 --- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts +++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts @@ -4,6 +4,7 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatDialogModule } from '@angular/material/dialog'; import { MatExpansionModule } from '@angular/material/expansion'; import { MatIconModule } from '@angular/material/icon'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; @@ -19,6 +20,7 @@ import { CardModule } from '../../card/card.module'; import { DetailLayoutModule } from '../../detail-layout/detail-layout.module'; import { InfoSectionModule } from '../../info-section/info-section.module'; import { InputModule } from '../../input/input.module'; +import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module'; import { ColorComponent } from './color/color.component'; import { PreviewComponent } from './preview/preview.component'; import { PrivateLabelingPolicyRoutingModule } from './private-labeling-policy-routing.module'; @@ -43,6 +45,8 @@ import { PrivateLabelingPolicyComponent } from './private-labeling-policy.compon TranslateModule, DetailLayoutModule, DropzoneModule, + MatDialogModule, + WarnDialogModule, HasRolePipeModule, MatProgressSpinnerModule, MatExpansionModule, diff --git a/console/src/app/modules/settings-list/settings.ts b/console/src/app/modules/settings-list/settings.ts index b67e106946..b890611f3f 100644 --- a/console/src/app/modules/settings-list/settings.ts +++ b/console/src/app/modules/settings-list/settings.ts @@ -70,8 +70,8 @@ export const IDP: SidenavSetting = { i18nKey: 'SETTINGS.LIST.IDP', groupI18nKey: 'SETTINGS.GROUPS.LOGIN', requiredRoles: { - [PolicyComponentServiceType.MGMT]: ['policy.read'], - [PolicyComponentServiceType.ADMIN]: ['iam.policy.read'], + [PolicyComponentServiceType.MGMT]: ['policy.read', 'org.idp.read'], + [PolicyComponentServiceType.ADMIN]: ['iam.policy.read', 'org.idp.read'], }, }; diff --git a/console/src/app/modules/sidenav/sidenav.component.html b/console/src/app/modules/sidenav/sidenav.component.html index d7338c1e7c..16ee8056cf 100644 --- a/console/src/app/modules/sidenav/sidenav.component.html +++ b/console/src/app/modules/sidenav/sidenav.component.html @@ -30,8 +30,8 @@ (click)="value = setting.id" *ngIf=" !setting.requiredRoles || - (setting.requiredRoles.mgmt && (setting.requiredRoles.mgmt | hasRole | async)) || - (setting.requiredRoles.admin && (setting.requiredRoles.admin | hasRole | async)) + (setting.requiredRoles.mgmt && (setting.requiredRoles.mgmt | hasRole: true | async)) || + (setting.requiredRoles.admin && (setting.requiredRoles.admin | hasRole: true | async)) " class="sidenav-setting-list-element hide-on-mobile" [ngClass]="{ active: currentSetting === setting.id, show: currentSetting === undefined }" diff --git a/console/src/app/modules/warn-dialog/warn-dialog.component.html b/console/src/app/modules/warn-dialog/warn-dialog.component.html index d6c5411085..98f8da4853 100644 --- a/console/src/app/modules/warn-dialog/warn-dialog.component.html +++ b/console/src/app/modules/warn-dialog/warn-dialog.component.html @@ -1,22 +1,31 @@ -{{data.titleKey | translate: data.titleParam}} +{{ data.titleKey | translate: data.titleParam }}
- +
-

{{data.descriptionKey | translate: data.descriptionParam}}

+

{{ data.descriptionKey | translate: data.descriptionParam }}

+ {{ + data.warnSectionKey | translate + }} - {{data.confirmationKey | translate: {value: data.confirmation} }} - + {{ data.confirmationKey | translate: { value: data.confirmation } }} +
- -
\ No newline at end of file + diff --git a/console/src/app/modules/warn-dialog/warn-dialog.component.ts b/console/src/app/modules/warn-dialog/warn-dialog.component.ts index 7b658af06c..85f39b9adc 100644 --- a/console/src/app/modules/warn-dialog/warn-dialog.component.ts +++ b/console/src/app/modules/warn-dialog/warn-dialog.component.ts @@ -1,6 +1,8 @@ import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { InfoSectionType } from '../info-section/info-section.component'; + @Component({ selector: 'cnsl-warn-dialog', templateUrl: './warn-dialog.component.html', @@ -8,6 +10,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; }) export class WarnDialogComponent { public confirm: string = ''; + InfoSectionType: any = InfoSectionType; constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: any) {} public closeDialog(): void { diff --git a/console/src/app/modules/warn-dialog/warn-dialog.module.ts b/console/src/app/modules/warn-dialog/warn-dialog.module.ts index 0ec93b3591..f94e7e6025 100644 --- a/console/src/app/modules/warn-dialog/warn-dialog.module.ts +++ b/console/src/app/modules/warn-dialog/warn-dialog.module.ts @@ -4,11 +4,12 @@ import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { TranslateModule } from '@ngx-translate/core'; +import { InfoSectionModule } from '../info-section/info-section.module'; import { InputModule } from '../input/input.module'; import { WarnDialogComponent } from './warn-dialog.component'; @NgModule({ declarations: [WarnDialogComponent], - imports: [CommonModule, FormsModule, TranslateModule, MatButtonModule, InputModule], + imports: [CommonModule, FormsModule, TranslateModule, InfoSectionModule, MatButtonModule, InputModule], }) export class WarnDialogModule {} diff --git a/console/src/app/pages/instance-settings/instance-settings.component.ts b/console/src/app/pages/instance-settings/instance-settings.component.ts index d8578061e0..26be3e0bb6 100644 --- a/console/src/app/pages/instance-settings/instance-settings.component.ts +++ b/console/src/app/pages/instance-settings/instance-settings.component.ts @@ -36,9 +36,10 @@ export class InstanceSettingsComponent { NOTIFICATIONS, // login LOGIN, + IDP, COMPLEXITY, LOCKOUT, - IDP, + DOMAIN, // appearance BRANDING, diff --git a/console/src/app/pages/org-create/org-create.component.html b/console/src/app/pages/org-create/org-create.component.html index c7f3d4bccf..60a10a2a47 100644 --- a/console/src/app/pages/org-create/org-create.component.html +++ b/console/src/app/pages/org-create/org-create.component.html @@ -32,8 +32,7 @@ -
- +
-
+
@@ -193,8 +192,7 @@
-
- +