fix(console): Idp settings, settings reset warn dialog, Accept-Language header interceptor, i18n (#3727)

* fix idp table, settings reset warn dialog, fix i18n interceptor, i18n

* fix label policy on org change

* fallback

* fix preview button styles

* footer, login-policy null check

* org create btn alignment

* show error with toast

* error toast

console/src/app/modules/policies/domain-policy/domain-policy.component.ts

@@ -1,4 +1,5 @@
 import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import {
     AddCustomDomainPolicyRequest,
@@ -13,6 +14,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
 import { StorageLocation, StorageService } from 'src/app/services/storage.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 
 @Component({
@@ -33,6 +35,7 @@ export class DomainPolicyComponent implements OnInit, OnDestroy {
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
 
   constructor(
+    private dialog: MatDialog,
     private toast: ToastService,
     private injector: Injector,
     private adminService: AdminService,
@@ -138,17 +141,31 @@ export class DomainPolicyComponent implements OnInit, OnDestroy {
 
   public removePolicy(): void {
     if (this.serviceType === PolicyComponentServiceType.MGMT) {
-      this.adminService
-        .resetCustomDomainPolicyToDefault(this.org.id)
-        .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.adminService
+            .resetCustomDomainPolicyToDefault(this.org.id)
+            .then(() => {
+              this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
+              setTimeout(() => {
+                this.fetchData();
+              }, 1000);
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      });
     }
   }
 

console/src/app/modules/policies/domain-policy/domain-policy.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -14,6 +15,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
 
 import { CardModule } from '../../card/card.module';
 import { InfoSectionModule } from '../../info-section/info-section.module';
+import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
 import { DomainPolicyComponent } from './domain-policy.component';
 
 @NgModule({
@@ -22,8 +24,10 @@ import { DomainPolicyComponent } from './domain-policy.component';
     CommonModule,
     FormsModule,
     CardModule,
+    WarnDialogModule,
     InputModule,
     MatButtonModule,
+    MatDialogModule,
     HasRolePipeModule,
     MatIconModule,
     HasRoleModule,

console/src/app/modules/policies/idp-settings/idp-settings.component.html

@@ -1,3 +1,5 @@
 <h2>{{ 'IDP.LIST.TITLE' | translate }}</h2>
 <p class="cnsl-secondary-text">{{ 'IDP.LIST.DESCRIPTION' | translate }}</p>
-<cnsl-idp-table [service]="service" [serviceType]="serviceType"> </cnsl-idp-table>
+<div class="cnsl-idp-table-wrapper">
+  <cnsl-idp-table [service]="service" [serviceType]="serviceType"></cnsl-idp-table>
+</div>

console/src/app/modules/policies/idp-settings/idp-settings.component.scss

@@ -0,0 +1,3 @@
+.cnsl-idp-table-wrapper {
+  display: block;
+}

console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts

@@ -68,33 +68,53 @@ export class FactorTableComponent {
           if (this.componentType === LoginMethodComponentType.MultiFactor) {
             const req = new MgmtRemoveMultiFactorFromLoginPolicyRequest();
             req.setType(type as MultiFactorType);
-            (this.service as ManagementService).removeMultiFactorFromLoginPolicy(req).then(() => {
-              this.toast.showInfo('MFA.TOAST.DELETED', true);
-              this.listChanged.emit();
-            });
+            (this.service as ManagementService)
+              .removeMultiFactorFromLoginPolicy(req)
+              .then(() => {
+                this.toast.showInfo('MFA.TOAST.DELETED', true);
+                this.listChanged.emit();
+              })
+              .catch((error) => {
+                this.toast.showError(error);
+              });
           } else if (this.componentType === LoginMethodComponentType.SecondFactor) {
             const req = new MgmtRemoveSecondFactorFromLoginPolicyRequest();
             req.setType(type as SecondFactorType);
-            (this.service as ManagementService).removeSecondFactorFromLoginPolicy(req).then(() => {
-              this.toast.showInfo('MFA.TOAST.DELETED', true);
-              this.listChanged.emit();
-            });
+            (this.service as ManagementService)
+              .removeSecondFactorFromLoginPolicy(req)
+              .then(() => {
+                this.toast.showInfo('MFA.TOAST.DELETED', true);
+                this.listChanged.emit();
+              })
+              .catch((error) => {
+                this.toast.showError(error);
+              });
           }
         } else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
           if (this.componentType === LoginMethodComponentType.MultiFactor) {
             const req = new AdminRemoveMultiFactorFromLoginPolicyRequest();
             req.setType(type as MultiFactorType);
-            (this.service as AdminService).removeMultiFactorFromLoginPolicy(req).then(() => {
-              this.toast.showInfo('MFA.TOAST.DELETED', true);
-              this.listChanged.emit();
-            });
+            (this.service as AdminService)
+              .removeMultiFactorFromLoginPolicy(req)
+              .then(() => {
+                this.toast.showInfo('MFA.TOAST.DELETED', true);
+                this.listChanged.emit();
+              })
+              .catch((error) => {
+                this.toast.showError(error);
+              });
           } else if (this.componentType === LoginMethodComponentType.SecondFactor) {
             const req = new AdminRemoveSecondFactorFromLoginPolicyRequest();
             req.setType(type as SecondFactorType);
-            (this.service as AdminService).removeSecondFactorFromLoginPolicy(req).then(() => {
-              this.toast.showInfo('MFA.TOAST.DELETED', true);
-              this.listChanged.emit();
-            });
+            (this.service as AdminService)
+              .removeSecondFactorFromLoginPolicy(req)
+              .then(() => {
+                this.toast.showInfo('MFA.TOAST.DELETED', true);
+                this.listChanged.emit();
+              })
+              .catch((error) => {
+                this.toast.showError(error);
+              });
           }
         }
       }

console/src/app/modules/policies/login-policy/login-policy.component.html

@@ -50,7 +50,7 @@
   </cnsl-form-field>
 </div>
 
-<cnsl-card class="max-card-width">
+<cnsl-card class="max-card-width" *ngIf="loginData">
   <cnsl-factor-table
     [service]="service"
     [serviceType]="serviceType"
@@ -100,7 +100,7 @@
     {{ 'POLICY.DATA.FORCEMFA' | translate }}
   </mat-checkbox>
 </div>
-<cnsl-card class="max-card-width">
+<cnsl-card class="max-card-width" *ngIf="loginData">
   <cnsl-factor-table
     [service]="service"
     [serviceType]="serviceType"

console/src/app/modules/policies/login-policy/login-policy.component.ts

@@ -1,5 +1,6 @@
 import { Component, Injector, Input, OnInit, Type } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
 import { take } from 'rxjs';
 import {
@@ -18,6 +19,7 @@ import { ManagementService } from 'src/app/services/mgmt.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';
 import { LoginMethodComponentType } from './factor-table/factor-table.component';
 
@@ -47,6 +49,7 @@ export class LoginPolicyComponent implements OnInit {
     private injector: Injector,
     private fb: FormBuilder,
     private authService: GrpcAuthService,
+    private dialog: MatDialog,
   ) {
     this.lifetimeForm = this.fb.group({
       passwordCheckLifetime: [{ disabled: true, value: 240 }, [Validators.required]],
@@ -223,18 +226,33 @@ export class LoginPolicyComponent implements OnInit {
 
   public removePolicy(): void {
     if (this.serviceType === PolicyComponentServiceType.MGMT) {
-      (this.service as ManagementService)
-        .resetLoginPolicyToDefault()
-        .then(() => {
-          this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
-          this.loading = true;
-          setTimeout(() => {
-            this.fetchData();
-          }, 2000);
-        })
-        .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',
+          warnSectionKey: 'SETTING.DIALOG.RESET.LOGINPOLICY_DESCRIPTION',
+        },
+        width: '400px',
+      });
+
+      dialogRef.afterClosed().subscribe((resp) => {
+        if (resp) {
+          (this.service as ManagementService)
+            .resetLoginPolicyToDefault()
+            .then(() => {
+              this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
+              this.loading = true;
+              setTimeout(() => {
+                this.fetchData();
+              }, 2000);
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      });
     }
   }
 

console/src/app/modules/policies/login-policy/login-policy.module.ts

@@ -18,6 +18,7 @@ import { InputModule } from 'src/app/modules/input/input.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
 import { InfoSectionModule } from '../../info-section/info-section.module';
+import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
 import { DialogAddTypeComponent } from './factor-table/dialog-add-type/dialog-add-type.component';
 import { FactorTableComponent } from './factor-table/factor-table.component';
 import { LoginPolicyRoutingModule } from './login-policy-routing.module';
@@ -36,6 +37,7 @@ import { LoginPolicyComponent } from './login-policy.component';
     MatIconModule,
     MatButtonModule,
     MatSlideToggleModule,
+    WarnDialogModule,
     HasRoleModule,
     MatDialogModule,
     HasRolePipeModule,

console/src/app/modules/policies/notification-settings/notification-settings.component.ts

@@ -126,7 +126,9 @@ export class NotificationSettingsComponent implements OnInit {
     req.setTls(this.tls?.value ?? false);
     req.setUser(this.user?.value ?? '');
 
-    return this.service.updateSMTPConfig(req).catch(this.toast.showError);
+    return this.service.updateSMTPConfig(req).catch((error) => {
+      this.toast.showError(error);
+    });
   }
 
   public savePolicy(): void {

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.ts

@@ -1,4 +1,5 @@
 import { Component, Injector, Input, OnInit, Type } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import {
     GetPasswordComplexityPolicyResponse as AdminGetPasswordComplexityPolicyResponse,
 } from 'src/app/proto/generated/zitadel/admin_pb';
@@ -11,6 +12,7 @@ import { ManagementService } from 'src/app/services/mgmt.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';
 
 @Component({
@@ -29,7 +31,7 @@ export class PasswordComplexityPolicyComponent implements OnInit {
   public loading: boolean = false;
   public InfoSectionType: any = InfoSectionType;
 
-  constructor(private toast: ToastService, private injector: Injector) {}
+  constructor(private toast: ToastService, private injector: Injector, private dialog: MatDialog) {}
 
   public ngOnInit(): void {
     switch (this.serviceType) {
@@ -67,17 +69,31 @@ export class PasswordComplexityPolicyComponent implements OnInit {
 
   public removePolicy(): void {
     if (this.service instanceof ManagementService) {
-      this.service
-        .resetPasswordComplexityPolicyToDefault()
-        .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)
+            .resetPasswordComplexityPolicyToDefault()
+            .then(() => {
+              this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
+              setTimeout(() => {
+                this.fetchData();
+              }, 1000);
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      });
     }
   }
 

console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -14,6 +15,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
 
 import { CardModule } from '../../card/card.module';
 import { InfoSectionModule } from '../../info-section/info-section.module';
+import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
 import { PasswordComplexityPolicyRoutingModule } from './password-complexity-policy-routing.module';
 import { PasswordComplexityPolicyComponent } from './password-complexity-policy.component';
 
@@ -27,10 +29,12 @@ import { PasswordComplexityPolicyComponent } from './password-complexity-policy.
     MatButtonModule,
     MatIconModule,
     HasRoleModule,
+    MatDialogModule,
     MatTooltipModule,
     MatCheckboxModule,
     HasRolePipeModule,
     TranslateModule,
+    WarnDialogModule,
     DetailLayoutModule,
     CardModule,
     MatProgressSpinnerModule,

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.ts

@@ -1,5 +1,6 @@
 import { Component, Injector, Input, OnInit, Type } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 import { GetLockoutPolicyResponse as AdminGetPasswordLockoutPolicyResponse } from 'src/app/proto/generated/zitadel/admin_pb';
 import {
     GetLockoutPolicyResponse as MgmtGetPasswordLockoutPolicyResponse,
@@ -7,10 +8,10 @@ import {
 import { LockoutPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
-import { StorageService } from 'src/app/services/storage.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';
 
 @Component({
@@ -27,7 +28,7 @@ export class PasswordLockoutPolicyComponent implements OnInit {
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
   public InfoSectionType: any = InfoSectionType;
 
-  constructor(private toast: ToastService, private injector: Injector, private storageService: StorageService) {}
+  constructor(private toast: ToastService, private injector: Injector, private dialog: MatDialog) {}
 
   public ngOnInit(): void {
     switch (this.serviceType) {
@@ -62,15 +63,29 @@ export class PasswordLockoutPolicyComponent implements OnInit {
 
   public resetPolicy(): void {
     if (this.service instanceof ManagementService) {
-      this.service
-        .resetLockoutPolicyToDefault()
-        .then(() => {
-          this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
-          this.fetchData();
-        })
-        .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)
+            .resetLockoutPolicyToDefault()
+            .then(() => {
+              this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
+              this.fetchData();
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      });
     }
   }
 

console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -13,6 +14,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
 
 import { CardModule } from '../../card/card.module';
 import { InfoSectionModule } from '../../info-section/info-section.module';
+import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
 import { PasswordLockoutPolicyRoutingModule } from './password-lockout-policy-routing.module';
 import { PasswordLockoutPolicyComponent } from './password-lockout-policy.component';
 
@@ -26,6 +28,8 @@ import { PasswordLockoutPolicyComponent } from './password-lockout-policy.compon
     MatButtonModule,
     MatSlideToggleModule,
     HasRolePipeModule,
+    MatDialogModule,
+    WarnDialogModule,
     MatIconModule,
     HasRoleModule,
     MatTooltipModule,

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

@@ -1,39 +1,63 @@
 <div class="preview" *ngIf="policy">
-  <div class="dashed" [ngClass]="{'dark': theme === Theme.DARK, 'light': theme === Theme.LIGHT}"
-    [style.background]="theme === Theme.DARK ? policy.backgroundColorDark : policy.backgroundColor">
+  <div
+    class="dashed"
+    [ngClass]="{ dark: theme === Theme.DARK, light: theme === Theme.LIGHT }"
+    [style.background]="theme === Theme.DARK ? policy.backgroundColorDark : policy.backgroundColor"
+  >
     <div class="login-wrapper" [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
       <img *ngIf="policy.logoUrl && theme === Theme.LIGHT" [src]="policy.logoUrl" alt="logo-mock" />
       <img *ngIf="policy.logoUrlDark && theme === Theme.DARK" [src]="policy.logoUrlDark" alt="logo-mock" />
 
       <h1 [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
-        {{'POLICY.PRIVATELABELING.PREVIEW.TITLE' | translate}}</h1>
+        {{ 'POLICY.PRIVATELABELING.PREVIEW.TITLE' | translate }}
+      </h1>
       <p [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor" class="desc-text">
-        {{'POLICY.PRIVATELABELING.PREVIEW.SECOND' | translate}}</p>
+        {{ 'POLICY.PRIVATELABELING.PREVIEW.SECOND' | translate }}
+      </p>
       <cnsl-form-field class="formfield">
         <cnsl-label>Loginname</cnsl-label>
-        <input cnslInput [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
-          value="road.runner" />
+        <input
+          cnslInput
+          [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
+          value="road.runner"
+        />
       </cnsl-form-field>
 
       <div class="error-msg" [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">
-        <i class="las la-exclamation-circle"
-          [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor"></i>
-        <span
-          [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">{{'POLICY.PRIVATELABELING.PREVIEW.ERROR'
-          | translate}}</span>
+        <i
+          class="las la-exclamation-circle"
+          [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor"
+        ></i>
+        <span [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">{{
+          'POLICY.PRIVATELABELING.PREVIEW.ERROR' | translate
+        }}</span>
       </div>
 
       <div class="btn-wrapper">
-        <button mat-stroked-button
-          [style.color]="theme === Theme.DARK ? policy.primaryColorDark : policy.primaryColor">{{'POLICY.PRIVATELABELING.PREVIEW.SECONDARYBUTTON'
-          | translate}}</button>
-        <button *ngIf="theme === Theme.DARK" mat-raised-button [style.background]="policy.primaryColorDark"
-          [style.color]="contrastTextColor">{{'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON'
-          | translate}}</button>
-        <button *ngIf="theme === Theme.LIGHT" mat-raised-button [style.background]="policy.primaryColor"
-          [style.color]="contrastTextColor">{{'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON'
-          | translate}}</button>
+        <button
+          mat-stroked-button
+          [style.borderColor]="theme === Theme.DARK ? '#ffffff1f' : '#0000001f'"
+          [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
+        >
+          {{ 'POLICY.PRIVATELABELING.PREVIEW.SECONDARYBUTTON' | translate }}
+        </button>
+        <button
+          *ngIf="theme === Theme.DARK"
+          mat-raised-button
+          [style.background]="policy.primaryColorDark"
+          [style.color]="contrastTextColor"
+        >
+          {{ 'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate }}
+        </button>
+        <button
+          *ngIf="theme === Theme.LIGHT"
+          mat-raised-button
+          [style.background]="policy.primaryColor"
+          [style.color]="contrastTextColor"
+        >
+          {{ 'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate }}
+        </button>
       </div>
     </div>
   </div>
-</div>
+</div>

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

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,