fix(console): preserve logo and icon aspect ratios, remove border radius in header (#4585)

console/src/app/modules/header/header.component.scss

@@ -184,11 +184,13 @@
       .logo-placeholder {
         height: 40px;
         width: 40px;
-        border-radius: 50%;
-        background-color: if($is-dark-theme, #00000020, #00000010);
+        border-radius: 2px;
         display: flex;
         align-items: center;
         justify-content: center;
+        box-sizing: border-box;
+        object-fit: cover;
+        object-position: center;
       }
 
       .title {
@@ -202,17 +204,18 @@
           height: 40px;
           width: 40px;
           box-sizing: border-box;
+          object-fit: cover;
+          object-position: center;
         }
 
         &.custom {
-          border-radius: 50%;
+          border-radius: 2px;
           height: 40px;
           width: 40px;
           box-sizing: border-box;
-          background-color: if($is-dark-theme, #00000020, #00000010);
 
           .logo {
-            border-radius: 50%;
+            border-radius: 2px;
           }
         }
       }

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html

@@ -569,49 +569,57 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <div class="adv-container">
-          <mat-slide-toggle
-            class="toggle"
-            color="primary"
-            ngDefaultControl
-            [disabled]="
-              view === View.CURRENT ||
-              ([
-                serviceType === PolicyComponentServiceType.ADMIN
-                  ? 'iam.policy.write'
-                  : serviceType === PolicyComponentServiceType.MGMT
-                  ? 'policy.write'
-                  : ''
-              ]
-                | hasRole
-                | async) === false
-            "
-            [(ngModel)]="view === View.CURRENT ? data.hideLoginNameSuffix : previewData.hideLoginNameSuffix"
-            (change)="savePolicy()"
-          >
-            {{ 'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate }}
-          </mat-slide-toggle>
+          <cnsl-info-section>
+            <div class="checkbox-info-section">
+              <mat-checkbox
+                class="toggle"
+                color="primary"
+                [disabled]="
+                  view === View.CURRENT ||
+                  ([
+                    serviceType === PolicyComponentServiceType.ADMIN
+                      ? 'iam.policy.write'
+                      : serviceType === PolicyComponentServiceType.MGMT
+                      ? 'policy.write'
+                      : ''
+                  ]
+                    | hasRole
+                    | async) === false
+                "
+                [(ngModel)]="view === View.CURRENT ? data.hideLoginNameSuffix : previewData.hideLoginNameSuffix"
+                (change)="savePolicy()"
+              >
+                {{ 'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate }}
+              </mat-checkbox>
+              <span class="label">{{ 'POLICY.DATA.HIDELOGINNAMESUFFIX_DESC' | translate }}</span>
+            </div>
+          </cnsl-info-section>
 
-          <mat-slide-toggle
-            class="toggle"
-            color="primary"
-            ngDefaultControl
-            [(ngModel)]="view === View.CURRENT ? data.disableWatermark : previewData.disableWatermark"
-            (change)="savePolicy()"
-            [disabled]="
-              view === View.CURRENT ||
-              ([
-                serviceType === PolicyComponentServiceType.ADMIN
-                  ? 'iam.policy.write'
-                  : serviceType === PolicyComponentServiceType.MGMT
-                  ? 'policy.write'
-                  : ''
-              ]
-                | hasRole
-                | async) === false
-            "
-          >
-            {{ 'POLICY.DATA.DISABLEWATERMARK' | translate }}
-          </mat-slide-toggle>
+          <cnsl-info-section>
+            <div class="checkbox-info-section">
+              <mat-checkbox
+                class="toggle"
+                color="primary"
+                [(ngModel)]="view === View.CURRENT ? data.disableWatermark : previewData.disableWatermark"
+                (change)="savePolicy()"
+                [disabled]="
+                  view === View.CURRENT ||
+                  ([
+                    serviceType === PolicyComponentServiceType.ADMIN
+                      ? 'iam.policy.write'
+                      : serviceType === PolicyComponentServiceType.MGMT
+                      ? 'policy.write'
+                      : ''
+                  ]
+                    | hasRole
+                    | async) === false
+                "
+              >
+                {{ 'POLICY.DATA.DISABLEWATERMARK' | translate }}
+              </mat-checkbox>
+              <span class="label">{{ 'POLICY.DATA.DISABLEWATERMARK_DESC' | translate }}</span>
+            </div>
+          </cnsl-info-section>
         </div>
       </mat-expansion-panel>
     </mat-accordion>

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss

@@ -295,12 +295,13 @@
           flex-direction: column;
           padding-bottom: 50px;
 
-          .info {
-            margin-bottom: 0.5rem;
-          }
+          .checkbox-info-section {
+            display: flex;
+            flex-direction: column;
 
-          .toggle {
-            margin-bottom: 1rem;
+            .label {
+              margin-top: 0.5rem;
+            }
           }
         }
       }

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts

@@ -238,17 +238,38 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
         }
         break;
       case PolicyComponentServiceType.MGMT:
-        if (type === AssetType.LOGO) {
-          if (theme === Theme.DARK) {
-            return previewHandler(this.service.removeLabelPolicyLogoDark());
-          } else if (theme === Theme.LIGHT) {
-            return previewHandler(this.service.removeLabelPolicyLogo());
-          }
-        } else if (type === AssetType.ICON) {
-          if (theme === Theme.DARK) {
-            return previewHandler(this.service.removeLabelPolicyIconDark());
-          } else if (theme === Theme.LIGHT) {
-            return previewHandler(this.service.removeLabelPolicyIcon());
+        if ((this.previewData as LabelPolicy.AsObject).isDefault) {
+          const req0 = new AddCustomLabelPolicyRequest();
+          this.overwriteValues(req0);
+
+          return (this.service as ManagementService)
+            .addCustomLabelPolicy(req0)
+            .then(() => {
+              if (this.previewData) {
+                this.previewData.isDefault = false;
+              }
+              this.toast.showInfo('POLICY.TOAST.SET', true);
+
+              setTimeout(() => {
+                this.fetchData();
+              }, 1000);
+            })
+            .catch((error: HttpErrorResponse) => {
+              this.toast.showError(error);
+            });
+        } else {
+          if (type === AssetType.LOGO) {
+            if (theme === Theme.DARK) {
+              return previewHandler(this.service.removeLabelPolicyLogoDark());
+            } else if (theme === Theme.LIGHT) {
+              return previewHandler(this.service.removeLabelPolicyLogo());
+            }
+          } else if (type === AssetType.ICON) {
+            if (theme === Theme.DARK) {
+              return previewHandler(this.service.removeLabelPolicyIconDark());
+            } else if (theme === Theme.LIGHT) {
+              return previewHandler(this.service.removeLabelPolicyIcon());
+            }
           }
         }
         break;

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts

@@ -4,11 +4,11 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 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';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { ColorChromeModule } from 'ngx-color/chrome';
@@ -40,10 +40,10 @@ import { PrivateLabelingPolicyComponent } from './private-labeling-policy.compon
     CardModule,
     MatIconModule,
     HasRoleModule,
-    MatSlideToggleModule,
     MatTooltipModule,
     TranslateModule,
     DetailLayoutModule,
+    MatCheckboxModule,
     DropzoneModule,
     MatDialogModule,
     WarnDialogModule,

console/src/app/pages/signedout/signedout.component.scss

@@ -22,7 +22,9 @@
     }
 
     img {
-      height: 100px;
+      height: 140px;
+      object-fit: contain;
+      object-position: center;
       max-width: 170px;
     }
   }

console/src/app/services/mgmt.service.ts

@@ -5,6 +5,7 @@ import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject } from 'rxjs';
 
 import { FlowType, TriggerType } from '../proto/generated/zitadel/action_pb';
+import { RemoveLabelPolicyLogoDarkRequest } from '../proto/generated/zitadel/admin_pb';
 import { AppQuery } from '../proto/generated/zitadel/app_pb';
 import { KeyType } from '../proto/generated/zitadel/auth_n_key_pb';
 import { ChangeQuery } from '../proto/generated/zitadel/change_pb';

console/src/assets/i18n/de.json

@@ -1177,6 +1177,7 @@
       "HIDEPASSWORDRESET": "Passwort vergessen ausblenden",
       "HIDEPASSWORDRESET_DESC": "Ist die Option gewählt, ist es nicht möglich im Login das Passwort zurück zusetzen via Passwort vergessen Link.",
       "HIDELOGINNAMESUFFIX": "Loginname Suffix ausblenden",
+      "HIDELOGINNAMESUFFIX_DESC": "Blendet das Suffix des Login-Namens in der Login-Oberfläche aus",
       "IGNOREUNKNOWNUSERNAMES": "Unbekannte Usernamen ignorieren",
       "IGNOREUNKNOWNUSERNAMES_DESC": "Ist die Option gewählt, wird der Passwort Schritt im Login auch angezeigt wenn der User nicht gefunden wurde. Dem Benutzer wird auf bei der Passwortprüfung nicht angezeigt ob der Username oder das Passwort falsch war.",
       "ALLOWDOMAINDISCOVERY": "Domänenentdeckung erlauben",
@@ -1187,6 +1188,7 @@
       "DEFAULTREDIRECTURI_DESC": "Definiert, wohin der Benutzer umgeleitet wird, wenn die Anmeldung ohne App-Kontext gestartet wurde (z. B. von Mail)",
       "ERRORMSGPOPUP": "Fehler als Dialog Fenster",
       "DISABLEWATERMARK": "Wasserzeichen ausblenden",
+      "DISABLEWATERMARK_DESC": "Powered by ZITADEL Wasserzeichen in der Login-Oberfläche ausblenden",
       "PASSWORDCHECKLIFETIME": "Passwort Check Lifetime",
       "EXTERNALLOGINCHECKLIFETIME": "Externer Login Check Lifetime",
       "MFAINITSKIPLIFETIME": "Multifaktor Init Lifetime",

console/src/assets/i18n/en.json

@@ -1177,6 +1177,7 @@
       "HIDEPASSWORDRESET": "Hide Password reset",
       "HIDEPASSWORDRESET_DESC": "If the option is selected, the user can't reset his password in the login process.",
       "HIDELOGINNAMESUFFIX": "Hide Loginname suffix",
+      "HIDELOGINNAMESUFFIX_DESC": "Hides the login name suffix in the login interface",
       "IGNOREUNKNOWNUSERNAMES": "Ignore unknown usernames",
       "IGNOREUNKNOWNUSERNAMES_DESC": "If the option is selected, the password screen will be displayed in the login process even if the user was not found. The error on the password check will not disclose if the username or password was wrong.",
       "ALLOWDOMAINDISCOVERY": "Domain discovery allowed",
@@ -1187,6 +1188,7 @@
       "DEFAULTREDIRECTURI_DESC": "Defines where the user will be redirected to if the login has started without an app context (e.g. from mail)",
       "ERRORMSGPOPUP": "Show Error in Dialog",
       "DISABLEWATERMARK": "Hide Watermark",
+      "DISABLEWATERMARK_DESC": "Hide Powered by ZITADEL watermark in the login interface",
       "PASSWORDCHECKLIFETIME": "Password Check Lifetime",
       "EXTERNALLOGINCHECKLIFETIME": "External Login Check Lifetime",
       "MFAINITSKIPLIFETIME": "Multifactor Init Lifetime",

console/src/assets/i18n/fr.json

@@ -1177,6 +1177,7 @@
       "HIDEPASSWORDRESET": "Masquer la réinitialisation du mot de passe",
       "HIDEPASSWORDRESET_DESC": "Si l'option est sélectionnée, l'utilisateur ne peut pas réinitialiser son mot de passe lors du processus de connexion.",
       "HIDELOGINNAMESUFFIX": "Masquer le suffixe du nom de connexion",
+      "HIDELOGINNAMESUFFIX_DESC": "Masque le suffixe du nom de connexion dans l'interface de connexion",
       "IGNOREUNKNOWNUSERNAMES": "Ignorer les noms d'utilisateur inconnus",
       "IGNOREUNKNOWNUSERNAMES_DESC": "Si l'option est sélectionnée, l'écran du mot de passe sera affiché dans le processus de connexion même si l'utilisateur n'a pas été trouvé. L'erreur sur la vérification du mot de passe ne révélera pas si le nom d'utilisateur ou le mot de passe était erroné.",
       "ALLOWDOMAINDISCOVERY": "Découverte du domaine autorisée",
@@ -1187,6 +1188,7 @@
       "DEFAULTREDIRECTURI_DESC": "Définit l'endroit où l'utilisateur sera redirigé si la connexion a commencé sans contexte d'application (par exemple, à partir du courrier électronique).",
       "ERRORMSGPOPUP": "Afficher l'erreur dans la boîte de dialogue",
       "DISABLEWATERMARK": "Cacher le filigrane",
+      "DISABLEWATERMARK_DESC": "Masquer le filigrane Powered by ZITADEL dans l'interface de connexion",
       "PASSWORDCHECKLIFETIME": "Durée de vie de la vérification du mot de passe",
       "EXTERNALLOGINCHECKLIFETIME": "Durée de vie de la vérification de la connexion externe",
       "MFAINITSKIPLIFETIME": "Durée de vie de l'initialisation multifactorielle",

console/src/assets/i18n/it.json

@@ -1177,6 +1177,7 @@
       "HIDEPASSWORDRESET": "Nascondi ripristino della password",
       "HIDEPASSWORDRESET_DESC": "Se l'opzione \u00e8 selezionata, l'utente non pu\u00f2 resettare la sua password nel interfaccia login.",
       "HIDELOGINNAMESUFFIX": "Nascondi il suffisso del nome utente",
+      "HIDELOGINNAMESUFFIX_DESC": "Nasconde il suffisso del nome di accesso nell'interfaccia di accesso",
       "IGNOREUNKNOWNUSERNAMES": "Ignora un nome utente sconosciuto",
       "IGNOREUNKNOWNUSERNAMES_DESC": "Se l'opzione \u00e8 selezionata, l'inserimento della password viene mostrato anche se nessun utente è stato trovato. Nota che dopo il controllo della password, non viene mostrato se il nome utente o la password erano errati.",
       "ALLOWDOMAINDISCOVERY": "Scoperta del dominio consentita",
@@ -1187,6 +1188,7 @@
       "DEFAULTREDIRECTURI_DESC": "Definisce dove verrà reindirizzato l'utente se l'accesso è stato avviato senza un contesto dell'app (ad es. dall' email)",
       "ERRORMSGPOPUP": "Mostra l'errore nella finestra di dialogo",
       "DISABLEWATERMARK": "Nascondi la filigrana",
+      "DISABLEWATERMARK_DESC": "Nascondi filigrana Powered by ZITADEL nell'interfaccia di accesso",
       "PASSWORDCHECKLIFETIME": "Lifetime verificazione password",
       "EXTERNALLOGINCHECKLIFETIME": "Lifetime verificazione login esterno",
       "MFAINITSKIPLIFETIME": "Lifetime Initalizzazione Multifattore",

console/src/assets/i18n/zh.json

@@ -1176,6 +1176,7 @@
       "HIDEPASSWORDRESET": "隐藏密码重置按钮",
       "HIDEPASSWORDRESET_DESC": "如果选择该选项，则用户无法在登录过程中重置其密码。",
       "HIDELOGINNAMESUFFIX": "隐藏登录名后缀",
+      "HIDELOGINNAMESUFFIX_DESC": "在登录界面隐藏登录名后缀",
       "IGNOREUNKNOWNUSERNAMES": "忽略未知用户名",
       "IGNOREUNKNOWNUSERNAMES_DESC": "如果选择该选项，即使未找到用户，登录过程中也会显示密码屏幕。如果用户名或密码错误，密码检查的错误不会透露。",
       "ALLOWDOMAINDISCOVERY": "允许域名发现",
@@ -1186,6 +1187,7 @@
       "DEFAULTREDIRECTURI_DESC": "定义如果在没有应用程序上下文的情况下开始登录（例如来自邮件），用户将被重定向到哪里。",
       "ERRORMSGPOPUP": "在对话框中显示错误",
       "DISABLEWATERMARK": "隐藏水印",
+      "DISABLEWATERMARK_DESC": "登录界面隐藏 Powered by ZITADEL 水印",
       "PASSWORDCHECKLIFETIME": "密码登录状态有效期",
       "EXTERNALLOGINCHECKLIFETIME": "外部身份提供者登录状态有效期",
       "MFAINITSKIPLIFETIME": "多因素身份认证初始化有效期",