fix(console): login policy, idp type filter (#875)

* cleanup login policy

* detail layout

* disable if no custom

* fix login policy filter

* add styletype to idp

* stylelint

* lint

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

@@ -6,7 +6,7 @@
 <div mat-dialog-content>
     <mat-form-field *ngIf="serviceType == PolicyComponentServiceType.MGMT" class="full-width" appearance="outline">
         <mat-label>{{ 'IDP.TYPE' | translate }}</mat-label>
-        <mat-select [(ngModel)]="idpType" (selectionChange)="loadIdps()" (selectionChange)="loadIdps()">
+        <mat-select [(ngModel)]="idpType" (selectionChange)="loadIdps()">
             <mat-option *ngFor="let type of idpTypes" [value]="type">
                 {{ 'IDP.TYPES.'+type | translate}}
             </mat-option>

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

@@ -61,7 +61,9 @@ export class AddIdpDialogComponent {
             query.setKey(IdpSearchKey.IDPSEARCHKEY_PROVIDER_TYPE);
             query.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
             query.setValue(this.idpType.toString());
-            this.mgmtService.SearchIdps().then(idps => {
+            console.log(this.idpType);
+            console.log(query.toObject());
+            this.mgmtService.SearchIdps(undefined, undefined, [query]).then(idps => {
                 this.availableIdps = idps.toObject().resultList;
             });
         } else if (this.serviceType === PolicyComponentServiceType.ADMIN) {

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

@@ -1,69 +1,76 @@
 <app-detail-layout [backRouterLink]="[ serviceType === PolicyComponentServiceType.ADMIN ? '/iam' : '/org']"
     [title]="'ORG.POLICY.LOGIN_POLICY.TITLECREATE' | translate"
     [description]="(serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '') | translate">
-
     <p class="default" *ngIf="isDefault"> {{'ORG.POLICY.DEFAULTLABEL' | translate}}</p>
 
     <div class="spinner-wr">
         <mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
     </div>
-    <ng-template appHasRole [appHasRole]="['policy.delete']">
-        <button *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
-            matTooltip="{{'ORG.POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()" mat-stroked-button>
-            {{'ORG.POLICY.RESET' | translate}}
-        </button>
-    </ng-template>
+    <ng-container *ngIf="serviceType === PolicyComponentServiceType.MGMT">
+        <ng-template appHasRole [appHasRole]="['policy.delete']">
+            <button *ngIf="!isDefault" matTooltip="{{'ORG.POLICY.RESET' | translate}}" color="warn"
+                (click)="removePolicy()" mat-stroked-button>
+                {{'ORG.POLICY.RESET' | translate}}
+            </button>
+        </ng-template>
+
+        <ng-template appHasRole [appHasRole]="['policy.write']">
+            <button *ngIf="isDefault" matTooltip="{{'ORG.POLICY.CREATECUSTOM' | translate}}" (click)="savePolicy()"
+                mat-raised-button>
+                {{'ORG.POLICY.CREATECUSTOM' | translate}}
+            </button>
+        </ng-template>
+    </ng-container>
 
     <div class="content" *ngIf="loginData">
         <div class="row">
-            <span class="left-desc">{{'ORG.POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate}}</span>
-            <span class="fill-space"></span>
-            <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
+            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                 [(ngModel)]="loginData.allowUsernamePassword">
+                {{'ORG.POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate}}
             </mat-slide-toggle>
+            <p>{{'ORG.POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate}}</p>
         </div>
         <div class="row">
-            <span class="left-desc">{{'ORG.POLICY.DATA.ALLOWREGISTER' | translate}}</span>
-            <span class="fill-space"></span>
-            <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="loginData.allowRegister">
+            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
+                [(ngModel)]="loginData.allowRegister">
+                {{'ORG.POLICY.DATA.ALLOWREGISTER' | translate}}
             </mat-slide-toggle>
+            <p> {{'ORG.POLICY.DATA.ALLOWREGISTER_DESC' | translate}} </p>
         </div>
         <div class="row">
-            <span class="left-desc">{{'ORG.POLICY.DATA.ALLOWEXTERNALIDP' | translate}}</span>
-            <span class="fill-space"></span>
-            <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
+            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                 [(ngModel)]="loginData.allowExternalIdp">
+                {{'ORG.POLICY.DATA.ALLOWEXTERNALIDP' | translate}}
             </mat-slide-toggle>
+            <p> {{'ORG.POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}} </p>
         </div>
     </div>
 
     <h3 class="subheader">{{'LOGINPOLICY.IDPS' | translate}}</h3>
 
     <div class="idps">
-        <div class="idp" *ngFor="let idp of idps">
-            <mat-icon (click)="removeIdp(idp)" class="rm">
-                remove_circle</mat-icon>
-            <span>{{idp.name}}</span>
+        <div class="idp" [ngClass]="{'disabled': disabled}" *ngFor="let idp of idps">
+            <button [disabled]="disabled" mat-icon-button (click)="removeIdp(idp)" class="rm">
+                <mat-icon matTooltip="{{'ACTIONS.REMOVE' | translate}}">
+                    remove_circle</mat-icon>
+            </button>
+            <span class="name">{{idp.name}}</span>
             <span class="meta">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.TYPES.'+idp.type | translate }}</span>
             <span class="meta">{{ 'IDP.ID' | translate }}: {{idp.idpConfigId}}</span>
         </div>
-        <div class="new-idp" (click)="openDialog()">
+        <div *ngIf="!disabled" class="new-idp" (click)="openDialog()">
             <mat-icon>add</mat-icon>
         </div>
     </div>
 
-    <div class="btn-container">
-        <button (click)="savePolicy()" color="primary" type="submit"
-            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
-    </div>
-
+    <button [disabled]="disabled" class="save-button" (click)="savePolicy()" color="primary" type="submit"
+        mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
 
     <ng-template appHasRole [appHasRole]="['org.idp.read']">
-        <app-card class="idp-table-card" title="{{ 'IDP.LIST.TITLE' | translate }}"
-            description="{{ 'IDP.LIST.DESCRIPTION' | translate }}">
-            <app-idp-table [service]="service" [serviceType]="serviceType"
-                [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false">
-            </app-idp-table>
-        </app-card>
+        <h2>{{ 'IDP.LIST.TITLE' | translate }}</h2>
+        <p>{{ 'IDP.LIST.DESCRIPTION' | translate }}</p>
+        <app-idp-table [service]="service" [serviceType]="serviceType"
+            [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false">
+        </app-idp-table>
     </ng-template>
 </app-detail-layout>

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

@@ -9,35 +9,24 @@
 
 .content {
   padding-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
 
   .row {
-    display: flex;
-    align-items: center;
-    padding: .3rem 0;
-
-    .left-desc {
-      font-size: .9rem;
+    .toggle {
+      margin: .3rem 0;
     }
 
-    .fill-space {
-      flex: 1;
+    p {
+      margin-top: .5rem;
+      font-size: 14px;
+      color: var(--grey);
     }
   }
 }
 
-.btn-container {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-
-  button {
-    margin-top: 3rem;
-    display: block;
-    padding: .5rem 4rem;
-  }
+.save-button {
+  margin-top: 3rem;
+  display: block;
+  padding: .5rem 4rem;
 }
 
 .idp-table-card {
@@ -63,6 +52,12 @@
     border-radius: .5rem;
     cursor: pointer;
     position: relative;
+    min-height: 70px;
+    min-width: 150px;
+
+    .name {
+      font-weight: 700;
+    }
 
     span {
       padding: 2px;
@@ -70,6 +65,7 @@
 
     .meta {
       font-size: 12px;
+      color: var(--grey);
     }
 
     .rm {
@@ -78,10 +74,16 @@
       left: 0;
       transform: translateX(-50%) translateY(-50%);
       cursor: pointer;
+
+      &[disabled] {
+        display: none;
+      }
     }
 
-    &:hover {
-      background-color: #ffffff10;
+    &:not(.disabled) {
+      &:hover {
+        background-color: #ffffff10;
+      }
     }
 
     img {

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

@@ -38,6 +38,7 @@ export class LoginPolicyComponent implements OnDestroy {
     public idps: MgmtIdpProviderView.AsObject[] | AdminIdpProviderView.AsObject[] = [];
 
     public loading: boolean = false;
+    public disabled: boolean = true;
     constructor(
         private route: ActivatedRoute,
         private toast: ToastService,
@@ -66,6 +67,7 @@ export class LoginPolicyComponent implements OnDestroy {
             if (data) {
                 this.loginData = data.toObject();
                 this.loading = false;
+                this.disabled = ((this.loginData as LoginPolicyView.AsObject)?.pb_default) ?? false;
             }
         });
         this.getIdps().then(idps => {