From 32bfd25b283316908d0f5a052f41413890ad44ef Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Tue, 20 Apr 2021 10:27:58 +0200
Subject: [PATCH] fix(console): label policy setHideLoginNameSuffix (#1593)

* fix: label policy

* set primary, secondary color
---
 .../label-policy/label-policy.component.html  | 15 ++-
 .../label-policy/label-policy.component.scss  |  9 +-
 .../label-policy/label-policy.component.ts    | 94 ++++++++++---------
 .../label-policy/label-policy.module.ts       | 34 +++----
 4 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/console/src/app/modules/policies/label-policy/label-policy.component.html b/console/src/app/modules/policies/label-policy/label-policy.component.html
index 1033b9e401..457530803c 100644
--- a/console/src/app/modules/policies/label-policy/label-policy.component.html
+++ b/console/src/app/modules/policies/label-policy/label-policy.component.html
@@ -1,16 +1,13 @@
 <app-detail-layout [backRouterLink]="['/iam/policies']" [title]="'POLICY.LABEL.TITLE' | translate"
     [description]="'POLICY.LABEL.DESCRIPTION' | translate">
 
-    <div class="content" *ngIf="labelData">
-        <cnsl-form-field class="form-field" appearance="outline">
-            <cnsl-label>{{'POLICY.LABEL.PRIMARYCOLOR' | translate}}</cnsl-label>
-            <input cnslInput [(ngModel)]="labelData.primaryColor" />
-        </cnsl-form-field>
+    <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>
 
-        <cnsl-form-field class="form-field" appearance="outline">
-            <cnsl-label>{{'POLICY.LABEL.SECONDARYCOLOR' | translate}}</cnsl-label>
-            <input cnslInput [(ngModel)]="labelData.secondaryColor" />
-        </cnsl-form-field>
+    <div class="content" *ngIf="labelData">
+        <mat-slide-toggle class="toggle" color="primary" ngDefaultControl
+            [(ngModel)]="labelData.hideLoginNameSuffix">
+            {{'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate}}
+        </mat-slide-toggle>
     </div>
 
     <div class="btn-container">
diff --git a/console/src/app/modules/policies/label-policy/label-policy.component.scss b/console/src/app/modules/policies/label-policy/label-policy.component.scss
index 92da6b0de7..b7be222844 100644
--- a/console/src/app/modules/policies/label-policy/label-policy.component.scss
+++ b/console/src/app/modules/policies/label-policy/label-policy.component.scss
@@ -3,12 +3,11 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin: 0 -.5rem;
+}
 
-  .form-field {
-    flex: 1;
-    margin: 0 .5rem;
-  }
+.default {
+  color: var(--color-main);
+  margin-top: 0;
 }
 
 .btn-container {
diff --git a/console/src/app/modules/policies/label-policy/label-policy.component.ts b/console/src/app/modules/policies/label-policy/label-policy.component.ts
index 8135d0d3a4..ba8f3a307b 100644
--- a/console/src/app/modules/policies/label-policy/label-policy.component.ts
+++ b/console/src/app/modules/policies/label-policy/label-policy.component.ts
@@ -5,57 +5,67 @@ import { GetLabelPolicyResponse, UpdateLabelPolicyRequest } from 'src/app/proto/
 import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ToastService } from 'src/app/services/toast.service';
+
 import { CnslLinks } from '../../links/links.component';
 import { IAM_COMPLEXITY_LINK, IAM_LOGIN_POLICY_LINK, IAM_POLICY_LINK } from '../../policy-grid/policy-links';
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
 
 
 @Component({
-    selector: 'app-label-policy',
-    templateUrl: './label-policy.component.html',
-    styleUrls: ['./label-policy.component.scss'],
+  selector: 'app-label-policy',
+  templateUrl: './label-policy.component.html',
+  styleUrls: ['./label-policy.component.scss'],
 })
 export class LabelPolicyComponent implements OnDestroy {
-    public labelData!: LabelPolicy.AsObject;
+  public labelData!: LabelPolicy.AsObject;
 
-    private sub: Subscription = new Subscription();
+  private sub: Subscription = new Subscription();
 
-    public PolicyComponentServiceType: any = PolicyComponentServiceType;
-    public nextLinks: CnslLinks[] = [
-        IAM_COMPLEXITY_LINK,
-        IAM_POLICY_LINK,
-        IAM_LOGIN_POLICY_LINK,
-    ];
-    constructor(
-        private route: ActivatedRoute,
-        private toast: ToastService,
-        private adminService: AdminService,
-    ) {
-        this.route.params.subscribe(() => {
-            this.getData().then(data => {
-                if (data?.policy) {
-                    this.labelData = data.policy;
-                }
-            });
-        });
-    }
-
-    public ngOnDestroy(): void {
-        this.sub.unsubscribe();
-    }
-
-    private async getData(): Promise<GetLabelPolicyResponse.AsObject> {
-        return this.adminService.getLabelPolicy();
-    }
-
-    public savePolicy(): void {
-        const req = new UpdateLabelPolicyRequest();
-        req.setPrimaryColor(this.labelData.primaryColor);
-        req.setSecondaryColor(this.labelData.secondaryColor);
-        this.adminService.updateLabelPolicy(req).then(() => {
-            this.toast.showInfo('POLICY.TOAST.SET', true);
-        }).catch(error => {
-            this.toast.showError(error);
-        });
+  public PolicyComponentServiceType: any = PolicyComponentServiceType;
+  public nextLinks: CnslLinks[] = [
+    IAM_COMPLEXITY_LINK,
+    IAM_POLICY_LINK,
+    IAM_LOGIN_POLICY_LINK,
+  ];
+  constructor(
+    private route: ActivatedRoute,
+    private toast: ToastService,
+    private adminService: AdminService,
+  ) {
+    this.route.params.subscribe(() => {
+      this.getData().then(data => {
+        if (data?.policy) {
+          this.labelData = data.policy;
+        }
+      });
+    });
+  }
+
+  public ngOnDestroy(): void {
+    this.sub.unsubscribe();
+  }
+
+  private async getData(): Promise<GetLabelPolicyResponse.AsObject> {
+    return this.adminService.getLabelPolicy();
+  }
+
+  public savePolicy(): void {
+    const req = new UpdateLabelPolicyRequest();
+    req.setPrimaryColor(this.labelData.primaryColor);
+    req.setSecondaryColor(this.labelData.secondaryColor);
+    req.setHideLoginNameSuffix(this.labelData.hideLoginNameSuffix);
+    this.adminService.updateLabelPolicy(req).then(() => {
+      this.toast.showInfo('POLICY.TOAST.SET', true);
+    }).catch(error => {
+      this.toast.showError(error);
+    });
+  }
+
+  public get isDefault(): boolean {
+    if (this.labelData) {
+      return (this.labelData as LabelPolicy.AsObject).isDefault;
+    } else {
+      return false;
     }
+  }
 }
diff --git a/console/src/app/modules/policies/label-policy/label-policy.module.ts b/console/src/app/modules/policies/label-policy/label-policy.module.ts
index d024565ff2..b32c66df09 100644
--- a/console/src/app/modules/policies/label-policy/label-policy.module.ts
+++ b/console/src/app/modules/policies/label-policy/label-policy.module.ts
@@ -9,26 +9,28 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
 import { InputModule } from 'src/app/modules/input/input.module';
-import { LinksModule } from '../../links/links.module';
 
+import { InfoSectionModule } from '../../info-section/info-section.module';
+import { LinksModule } from '../../links/links.module';
 import { LabelPolicyRoutingModule } from './label-policy-routing.module';
 import { LabelPolicyComponent } from './label-policy.component';
 
 @NgModule({
-    declarations: [LabelPolicyComponent],
-    imports: [
-        LabelPolicyRoutingModule,
-        CommonModule,
-        FormsModule,
-        InputModule,
-        MatButtonModule,
-        MatSlideToggleModule,
-        MatIconModule,
-        HasRoleModule,
-        MatTooltipModule,
-        TranslateModule,
-        DetailLayoutModule,
-        LinksModule,
-    ],
+  declarations: [LabelPolicyComponent],
+  imports: [
+    LabelPolicyRoutingModule,
+    CommonModule,
+    FormsModule,
+    InputModule,
+    MatButtonModule,
+    MatSlideToggleModule,
+    MatIconModule,
+    HasRoleModule,
+    MatTooltipModule,
+    TranslateModule,
+    DetailLayoutModule,
+    LinksModule,
+    InfoSectionModule,
+  ],
 })
 export class LabelPolicyModule { }