andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-30 02:52:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add attribute to only enable specific themes (#6798)

Browse Source 
* feat: enable only specific themes in label policy

* feat: enable only specific themes in label policy

* feat: enable only specific themes in label policy

* feat: enable only specific themes in label policy

* add management in console

* pass enabledTheme

* render login ui based on enabled theme

* add in branding / settings service and name consistently

* update console to latest proto state

* fix console linting

* fix linting

* cleanup

* add translations

---------

Co-authored-by: Livio Spring <[email protected]>
Co-authored-by: Tim Möhlmann <[email protected]>
This commit is contained in:
Stefan Benz
2023-10-26 05:54:09 +00:00
committed by GitHub
co-authored by Livio Spring Tim Möhlmann
parent 7b0506c19c
commit cb7b50b513
43 changed files with 527 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+104 -17
View File
@@ -7,27 +7,11 @@
</div>
<div class="privatelabeling-top-row">
<mat-button-toggle-group class="buttongroup" [(ngModel)]="theme" name="theme" aria-label="Theme">
<mat-button-toggle [value]="Theme.LIGHT">
<div class="toggle-row">
<i class="icon las la-sun"></i>
<span>{{ 'POLICY.PRIVATELABELING.LIGHT' | translate }}</span>
<div *ngIf="theme === Theme.LIGHT" class="current-dot"></div>
</div>
</mat-button-toggle>
<mat-button-toggle [value]="Theme.DARK">
<div class="toggle-row">
<i class="icon las la-moon"></i>
<span> {{ 'POLICY.PRIVATELABELING.DARK' | translate }}</span>
<div *ngIf="theme === Theme.DARK" class="current-dot"></div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group
class="theme-toggle"
class="buttongroup"
[(ngModel)]="view"
(change)="toggleView(view)"
name="displayview"
aria-label="Display View"
>
@@ -48,6 +32,109 @@
</div>
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="privatelabeling-top-row">
<mat-button-toggle-group
*ngIf="previewData && data"
class="buttongroup"
[(ngModel)]="view === View.CURRENT ? data.themeMode : previewData.themeMode"
(change)="toggleThemeMode()"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
name="thememode"
aria-label="Theme Mode"
>
<mat-button-toggle [value]="ThemeMode.THEME_MODE_AUTO">
<div class="toggle-row">
<i class="icon las la-adjust"></i>
<span>{{ 'POLICY.PRIVATELABELING.THEMEMODE.THEME_MODE_AUTO' | translate }}</span>
<div
*ngIf="
view === View.PREVIEW
? previewData.themeMode === ThemeMode.THEME_MODE_AUTO
: data.themeMode === ThemeMode.THEME_MODE_AUTO
"
class="current-dot"
></div>
</div>
</mat-button-toggle>
<mat-button-toggle [value]="ThemeMode.THEME_MODE_LIGHT">
<div class="toggle-row">
<i class="icon las la-sun"></i>
<span> {{ 'POLICY.PRIVATELABELING.THEMEMODE.THEME_MODE_LIGHT' | translate }}</span>
<div
*ngIf="
view === View.PREVIEW
? previewData.themeMode === ThemeMode.THEME_MODE_LIGHT
: data.themeMode === ThemeMode.THEME_MODE_LIGHT
"
class="current-dot"
></div>
</div>
</mat-button-toggle>
<mat-button-toggle [value]="ThemeMode.THEME_MODE_DARK">
<div class="toggle-row">
<i class="icon las la-moon"></i>
<span> {{ 'POLICY.PRIVATELABELING.THEMEMODE.THEME_MODE_DARK' | translate }}</span>
<div
*ngIf="
view === View.PREVIEW
? previewData.themeMode === ThemeMode.THEME_MODE_DARK
: data.themeMode === ThemeMode.THEME_MODE_DARK
"
class="current-dot"
></div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group
class="buttongroup"
[(ngModel)]="theme"
name="theme"
aria-label="Theme"
*ngIf="previewData && data"
>
<mat-button-toggle
[value]="Theme.LIGHT"
[disabled]="
view === View.PREVIEW
? previewData.themeMode === ThemeMode.THEME_MODE_DARK
: data.themeMode === ThemeMode.THEME_MODE_DARK
"
>
<div class="toggle-row">
<i class="icon las la-sun"></i>
<span>{{ 'POLICY.PRIVATELABELING.LIGHT' | translate }}</span>
<div *ngIf="theme === Theme.LIGHT" class="current-dot"></div>
</div>
</mat-button-toggle>
<mat-button-toggle
[value]="Theme.DARK"
[disabled]="
view === View.PREVIEW
? previewData.themeMode === ThemeMode.THEME_MODE_LIGHT
: data.themeMode === ThemeMode.THEME_MODE_LIGHT
"
>
<div class="toggle-row">
<i class="icon las la-moon"></i>
<span> {{ 'POLICY.PRIVATELABELING.DARK' | translate }}</span>
<div *ngIf="theme === Theme.DARK" class="current-dot"></div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<span class="fill-space"></span>
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+30 -1
View File
@@ -15,7 +15,7 @@ import {
UpdateCustomLabelPolicyRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { LabelPolicy, ThemeMode } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service';
import { ManagementService } from 'src/app/services/mgmt.service';
@@ -88,6 +88,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
public View: any = View;
public ColorType: any = ColorType;
public AssetType: any = AssetType;
public ThemeMode: any = ThemeMode;
public fontName = '';
@@ -106,6 +107,32 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
private dialog: MatDialog,
) {}
public toggleThemeMode(): void {
if (this.view === View.CURRENT) {
return;
}
if (this.previewData?.themeMode === ThemeMode.THEME_MODE_LIGHT) {
this.theme = Theme.LIGHT;
}
if (this.previewData?.themeMode === ThemeMode.THEME_MODE_DARK) {
this.theme = Theme.DARK;
}
this.savePolicy();
}
public toggleView(view: View): void {
let themeMode = this.data?.themeMode;
if (view === View.PREVIEW) {
themeMode = this.previewData?.themeMode;
}
if (themeMode === ThemeMode.THEME_MODE_LIGHT) {
this.theme = Theme.LIGHT;
}
if (themeMode === ThemeMode.THEME_MODE_DARK) {
this.theme = Theme.DARK;
}
}
public toggleHoverLogo(theme: Theme, isHovering: boolean): void {
if (theme === Theme.DARK) {
this.isHoveringOverDarkLogo = isHovering;
@@ -614,6 +641,8 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
req.setDisableWatermark(this.previewData.disableWatermark);
req.setHideLoginNameSuffix(this.previewData.hideLoginNameSuffix);
req.setThemeMode(this.previewData.themeMode);
}
}
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts
+2
View File
@@ -9,6 +9,7 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { ColorChromeModule } from 'ngx-color/chrome';
@@ -49,6 +50,7 @@ import { PrivateLabelingPolicyComponent } from './private-labeling-policy.compon
WarnDialogModule,
HasRolePipeModule,
MatProgressSpinnerModule,
MatSelectModule,
MatExpansionModule,
InfoSectionModule,
],