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

* 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 <livio.a@gmail.com> Co-authored-by: Tim Möhlmann <tim+github@zitadel.com>
2025-08-11 18:57:32 +00:00 · 2023-10-26 07:54:09 +02:00
parent 7b0506c19c
commit cb7b50b513
43 changed files with 527 additions and 100 deletions
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
@@ -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>

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

--- 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
@@ -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,
  ],
--- a/console/src/assets/i18n/bg.json
+++ b/console/src/assets/i18n/bg.json
@@ -1197,6 +1197,11 @@
        "ERROR": "Потребителят не може да бъде намерен!",
        "PRIMARYBUTTON": "следващия",
        "SECONDARYBUTTON": "регистрирам"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Автоматичен режим",
+        "THEME_MODE_LIGHT": "Само светъл режим",
+        "THEME_MODE_DARK": "Само тъмен режим"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -1203,6 +1203,11 @@
        "ERROR": "Benutzer konnte nicht gefunden werden!",
        "PRIMARYBUTTON": "weiter",
        "SECONDARYBUTTON": "registrieren"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Automatischer Modus",
+        "THEME_MODE_LIGHT": "Nur heller Modus",
+        "THEME_MODE_DARK": "Nur dunkler Modus"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -1204,6 +1204,11 @@
        "ERROR": "User could not be found!",
        "PRIMARYBUTTON": "next",
        "SECONDARYBUTTON": "register"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Auto Mode",
+        "THEME_MODE_LIGHT": "Light Mode only",
+        "THEME_MODE_DARK": "Dark Mode only"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/es.json
+++ b/console/src/assets/i18n/es.json
@@ -1204,6 +1204,11 @@
        "ERROR": "¡No se encontró el usuario!",
        "PRIMARYBUTTON": "siguiente",
        "SECONDARYBUTTON": "registrar"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Modo automático",
+        "THEME_MODE_LIGHT": "Sólo modo claro",
+        "THEME_MODE_DARK": "Sólo modo oscuro"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/fr.json
+++ b/console/src/assets/i18n/fr.json
@@ -1203,6 +1203,11 @@
        "ERROR": "L'utilisateur n'a pas pu être trouvé !",
        "PRIMARYBUTTON": "suivant",
        "SECONDARYBUTTON": "enregistrez-vous"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Mode automatique",
+        "THEME_MODE_LIGHT": "Mode clair uniquement",
+        "THEME_MODE_DARK": "Mode sombre uniquement"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/it.json
+++ b/console/src/assets/i18n/it.json
@@ -1203,6 +1203,11 @@
        "ERROR": "L'utente non \u00e8 stato trovato!",
        "PRIMARYBUTTON": "Avanti",
        "SECONDARYBUTTON": "Registra"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Modalità automatica",
+        "THEME_MODE_LIGHT": "Solo modalità luminosa",
+        "THEME_MODE_DARK": "Solo modalità oscura"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/ja.json
+++ b/console/src/assets/i18n/ja.json
@@ -1200,6 +1200,11 @@
        "ERROR": "ユーザーは見つかりません！",
        "PRIMARYBUTTON": "次へ",
        "SECONDARYBUTTON": "登録"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "自動モード",
+        "THEME_MODE_LIGHT": "ライトモードのみ",
+        "THEME_MODE_DARK": "ダークモードのみ"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/mk.json
+++ b/console/src/assets/i18n/mk.json
@@ -1205,6 +1205,11 @@
        "ERROR": "Корисникот не е пронајден!",
        "PRIMARYBUTTON": "следно",
        "SECONDARYBUTTON": "регистрирај се"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Автоматски режим",
+        "THEME_MODE_LIGHT": "Само светлосен режим",
+        "THEME_MODE_DARK": "Само темен режим"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/pl.json
+++ b/console/src/assets/i18n/pl.json
@@ -1203,6 +1203,11 @@
        "ERROR": "Nie znaleziono użytkownika!",
        "PRIMARYBUTTON": "Dalej",
        "SECONDARYBUTTON": "Zarejestruj"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Tryb automatyczny",
+        "THEME_MODE_LIGHT": "Tylko tryb jasny",
+        "THEME_MODE_DARK": "Tylko tryb ciemny"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/pt.json
+++ b/console/src/assets/i18n/pt.json
@@ -1205,6 +1205,11 @@
        "ERROR": "Usuário não encontrado!",
        "PRIMARYBUTTON": "próximo",
        "SECONDARYBUTTON": "registrar"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "Modo Automático",
+        "THEME_MODE_LIGHT": "Somente modo claro",
+        "THEME_MODE_DARK": "Somente modo escuro"
      }
    },
    "PWD_AGE": {
--- a/console/src/assets/i18n/zh.json
+++ b/console/src/assets/i18n/zh.json
@@ -1202,6 +1202,11 @@
        "ERROR": "找不到用户！",
        "PRIMARYBUTTON": "下一步",
        "SECONDARYBUTTON": "注册"
+      },
+      "THEMEMODE": {
+        "THEME_MODE_AUTO": "自动模式",
+        "THEME_MODE_LIGHT": "仅限灯光模式",
+        "THEME_MODE_DARK": "仅限深色模式"
      }
    },
    "PWD_AGE": {