fix: add prompt on oidc rp, fix idp and login policy in console (#769)

* fix: add prompt on oidc rp

* fix: add prompt on oidc rp

* fix: translation

* fix: translation

* fix: not existing login policy

* fix: login policy

* fix: identity provider detail

* fix: idp update

* fix: idps in login policy

* fix: lint

* fix: scss

* fix: external idps on auth user detail

* fix: idp create mapping fields

* fix: remove idp provider

* fix: angular lint

* fix: login policy view

* fix: translations

console/src/app/modules/idp/idp.component.html

@@ -1,18 +1,8 @@
-<div class="container">
-    <div class="abort-container">
-        <button (click)="close()" mat-icon-button>
-            <mat-icon>close</mat-icon>
-        </button>
-        <span class="abort">{{ 'IDP.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
-            {{ currentCreateStep }} of
-            {{ createSteps }}</span>
-    </div>
-
-    <h1>{{'IDP.CREATE.TITLE' | translate}}</h1>
-    <p>{{'IDP.CREATE.DESCRIPTION' | translate}}</p>
-
+<app-detail-layout [backRouterLink]="backroutes" [title]="'IDP.DETAIL.TITLE' | translate"
+                   [description]="'IDP.DETAIL.DESCRIPTION' | translate">
+  <div class="container">
     <form (ngSubmit)="updateIdp()">
-        <ng-container [formGroup]="formGroup">
+        <ng-container [formGroup]="idpForm">
             <div class="content">
                 <mat-form-field appearance="outline" class="formfield">
                     <mat-label>{{ 'IDP.ID' | translate }}</mat-label>
@@ -22,47 +12,80 @@
                     <mat-label>{{ 'IDP.NAME' | translate }}</mat-label>
                     <input matInput formControlName="name" />
                 </mat-form-field>
-                <mat-form-field appearance="outline" class="formfield">
+                <!--<mat-form-field appearance="outline" class="formfield">
                     <mat-label>{{ 'IDP.LOGOSRC' | translate }}</mat-label>
                     <input matInput formControlName="logoSrc" />
-                </mat-form-field>
-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'IDP.ISSUER' | translate }}</mat-label>
-                    <input matInput formControlName="issuer" />
-                </mat-form-field>
-            </div>
-            <div class="content">
-                <mat-checkbox class="desc" [(ngModel)]="showIdSecretSection" [ngModelOptions]="{standalone: true}">
-                    Update Client Id / Client Secret
-                </mat-checkbox>
-                <ng-container *ngIf="showIdSecretSection">
-                    <mat-form-field appearance="outline" class="formfield">
-                        <mat-label>{{ 'IDP.CLIENTID' | translate }}</mat-label>
-                        <input matInput formControlName="clientId" />
-                    </mat-form-field>
-                    <mat-form-field appearance="outline" class="formfield">
-                        <mat-label>{{ 'IDP.CLIENTSECRET' | translate }}</mat-label>
-                        <input matInput formControlName="clientSecret" />
-                    </mat-form-field>
-                </ng-container>
-            </div>
-            <div class="content">
-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'IDP.SCOPESLIST' | translate }}</mat-label>
-                    <mat-chip-list #chipScopesList aria-label="scope selection" *ngIf="scopesList">
-                        <mat-chip class="chip" *ngFor="let scope of scopesList.value" selectable="false" removable
-                            (removed)="removeScope(scope)">
-                            {{scope}} <mat-icon matChipRemove>cancel</mat-icon>
-                        </mat-chip>
-                        <input [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                            [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
-                    </mat-chip-list>
-                </mat-form-field>
+                </mat-form-field>-->
             </div>
         </ng-container>
 
-        <button color="primary" mat-raised-button class="continue-button" [disabled]="formGroup.invalid" type="submit">
+        <button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid" type="submit">
             {{ 'ACTIONS.SAVE' | translate }}
         </button>
     </form>
-</div>
+
+    <h2 *ngIf="oidcConfigForm">{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
+
+    <form (ngSubmit)="updateOidcConfig()" *ngIf="oidcConfigForm">
+        <ng-container [formGroup]="oidcConfigForm">
+            <div class="content">
+              <mat-form-field appearance="outline" class="formfield">
+                <mat-label>{{ 'IDP.ISSUER' | translate }}</mat-label>
+                <input matInput formControlName="issuer" />
+              </mat-form-field>
+            </div>
+            <div class="content">
+              <mat-form-field appearance="outline" class="formfield">
+                <mat-label>{{ 'IDP.CLIENTID' | translate }}</mat-label>
+                <input matInput formControlName="clientId" />
+              </mat-form-field>
+            </div>
+            <div class="content">
+              <mat-checkbox class="desc" [(ngModel)]="showIdSecretSection" [ngModelOptions]="{standalone: true}">
+                Update Client Secret
+              </mat-checkbox>
+              <mat-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
+                <mat-label>{{ 'IDP.CLIENTSECRET' | translate }}</mat-label>
+                <input matInput formControlName="clientSecret" />
+              </mat-form-field>
+            </div>
+            <div class="content">
+              <mat-form-field appearance="outline" class="formfield">
+                <mat-label>{{ 'IDP.SCOPESLIST' | translate }}</mat-label>
+                <mat-chip-list #chipScopesList aria-label="scope selection" >
+                  <mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false" removable
+                            (removed)="removeScope(scope)">
+                    {{scope}} <mat-icon matChipRemove>cancel</mat-icon>
+                  </mat-chip>
+                  <input [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                         [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
+                </mat-chip-list>
+              </mat-form-field>
+            </div>
+            <div class="content">
+              <mat-form-field class="formfield" appearance="outline">
+                <mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
+                <mat-select formControlName="idpDisplayNameMapping">
+                  <mat-option *ngFor="let field of mappingFields" [value]="field">
+                    {{ 'IDP.MAPPINTFIELD.'+field | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field class="formfield" appearance="outline">
+                <mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
+                <mat-select formControlName="usernameMapping">
+                  <mat-option *ngFor="let field of mappingFields" [value]="field">
+                    {{ 'IDP.MAPPINTFIELD.'+field | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+        </ng-container>
+
+        <button color="primary" mat-raised-button class="continue-button" [disabled]="oidcConfigForm.invalid" type="submit">
+          {{ 'ACTIONS.SAVE' | translate }}
+        </button>
+    </form>
+</div>
+
+</app-detail-layout>

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

@@ -1,32 +1,10 @@
 
 .container {
-  padding: 4rem 4rem 2rem 4rem;
+  width: 100%;
 
   @media only screen and (max-width: 450px) {
     padding: 4rem 1rem 2rem 1rem;
   }
-
-  .abort-container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 2rem;
-
-    .abort {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-    }
-
-    .abort-2 {
-      font-size: 1.2rem;
-      margin-left: 2rem;
-      white-space: nowrap;
-    }
-  }
-
-  .add-line-btn {
-    margin-bottom: 1rem;
-    border-radius: .5rem;
-  }
 }
 
 .content {
@@ -52,7 +30,7 @@
 }
 
 .continue-button {
-  margin-top: 3rem;
+  margin-bottom: 4rem;
   display: block;
   padding: .5rem 4rem;
   border-radius: .5rem;

console/src/app/modules/idp/idp.component.ts

@@ -1,13 +1,21 @@
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
-import { Component, Injector, OnDestroy, OnInit, Type } from '@angular/core';
+import {Component, Injector, Input, OnDestroy, OnInit, Type} from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { switchMap, take } from 'rxjs/operators';
-import { OidcIdpConfigUpdate as AdminOidcIdpConfigUpdate } from 'src/app/proto/generated/admin_pb';
-import { OidcIdpConfigUpdate as MgmtOidcIdpConfigUpdate } from 'src/app/proto/generated/management_pb';
+import {
+  OIDCMappingField as authMappingFields,
+  OidcIdpConfigUpdate as AdminOidcIdpConfigUpdate,
+  IdpUpdate as AdminIdpConfigUpdate,
+} from 'src/app/proto/generated/admin_pb';
+import {
+  OIDCMappingField as mgmtMappingFields,
+  OidcIdpConfigUpdate as MgmtOidcIdpConfigUpdate,
+  IdpUpdate as MgmtIdpConfigUpdate,
+} from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -20,6 +28,7 @@ import { PolicyComponentServiceType } from '../policies/policy-component-types.e
     styleUrls: ['./idp.component.scss'],
 })
 export class IdpComponent implements OnInit, OnDestroy {
+    public mappingFields: mgmtMappingFields[] | authMappingFields[] = [];
     public showIdSecretSection: boolean = false;
     public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
     private service!: ManagementService | AdminService;
@@ -28,9 +37,8 @@ export class IdpComponent implements OnInit, OnDestroy {
     private subscription?: Subscription;
     public projectId: string = '';
 
-    public formGroup!: FormGroup;
-    public createSteps: number = 1;
-    public currentCreateStep: number = 1;
+    public idpForm!: FormGroup;
+    public oidcConfigForm!: FormGroup;
 
     constructor(
         // private router: Router,
@@ -39,14 +47,19 @@ export class IdpComponent implements OnInit, OnDestroy {
         private route: ActivatedRoute,
         private _location: Location,
     ) {
-        this.formGroup = new FormGroup({
+        this.idpForm = new FormGroup({
             id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
-            name: new FormControl({ disabled: true, value: '' }, [Validators.required]),
+            name: new FormControl('', [Validators.required]),
             logoSrc: new FormControl({ disabled: true, value: '' }, [Validators.required]),
-            clientId: new FormControl('', [Validators.required]),
-            clientSecret: new FormControl('', [Validators.required]),
-            issuer: new FormControl('', [Validators.required]),
-            scopesList: new FormControl([], []),
+        });
+
+        this.oidcConfigForm = new FormGroup({
+          clientId: new FormControl('', [Validators.required]),
+          clientSecret: new FormControl(''),
+          issuer: new FormControl('', [Validators.required]),
+          scopesList: new FormControl([], []),
+          idpDisplayNameMapping: new FormControl(0),
+          usernameMapping: new FormControl(0),
         });
 
         this.route.data.pipe(switchMap(data => {
@@ -55,9 +68,15 @@ export class IdpComponent implements OnInit, OnDestroy {
             switch (this.serviceType) {
                 case PolicyComponentServiceType.MGMT:
                     this.service = this.injector.get(ManagementService as Type<ManagementService>);
+                    this.mappingFields = [
+                      mgmtMappingFields.OIDCMAPPINGFIELD_PREFERRED_USERNAME,
+                      mgmtMappingFields.OIDCMAPPINGFIELD_EMAIL];
                     break;
                 case PolicyComponentServiceType.ADMIN:
                     this.service = this.injector.get(AdminService as Type<AdminService>);
+                    this.mappingFields = [
+                      authMappingFields.OIDCMAPPINGFIELD_PREFERRED_USERNAME,
+                      authMappingFields.OIDCMAPPINGFIELD_EMAIL];
                     break;
             }
 
@@ -66,7 +85,11 @@ export class IdpComponent implements OnInit, OnDestroy {
             const { id } = params;
             if (id) {
                 this.service.IdpByID(id).then(idp => {
-                    this.formGroup.patchValue(idp.toObject());
+                  const idpObject = idp.toObject();
+                  this.idpForm.patchValue(idpObject);
+                  if (idpObject.oidcConfig) {
+                    this.oidcConfigForm.patchValue(idpObject.oidcConfig);
+                  }
                 });
             }
         });
@@ -85,29 +108,57 @@ export class IdpComponent implements OnInit, OnDestroy {
     }
 
     public updateIdp(): void {
-        let req: AdminOidcIdpConfigUpdate | MgmtOidcIdpConfigUpdate;
+        let req: AdminIdpConfigUpdate | MgmtIdpConfigUpdate;
 
         switch (this.serviceType) {
             case PolicyComponentServiceType.MGMT:
-                req = new MgmtOidcIdpConfigUpdate();
+                req = new MgmtIdpConfigUpdate();
                 break;
             case PolicyComponentServiceType.ADMIN:
-                req = new AdminOidcIdpConfigUpdate();
+                req = new AdminIdpConfigUpdate();
                 break;
         }
 
-        req.setClientId(this.clientId?.value);
-        req.setClientSecret(this.clientSecret?.value);
-        req.setIssuer(this.issuer?.value);
-        req.setScopesList(this.scopesList?.value);
+        req.setId(this.id?.value);
+        req.setName(this.name?.value);
+        req.setLogoSrc(this.logoSrc?.value);
 
-        this.service.UpdateOidcIdpConfig(req).then((idp) => {
+        this.service.UpdateIdp(req).then((idp) => {
+          this.toast.showInfo('IDP.TOAST.SAVED', true);
             // this.router.navigate(['idp', ]);
         }).catch(error => {
             this.toast.showError(error);
         });
     }
 
+    public updateOidcConfig(): void {
+      let req: AdminOidcIdpConfigUpdate | MgmtOidcIdpConfigUpdate;
+
+      switch (this.serviceType) {
+        case PolicyComponentServiceType.MGMT:
+          req = new MgmtOidcIdpConfigUpdate();
+          break;
+        case PolicyComponentServiceType.ADMIN:
+          req = new AdminOidcIdpConfigUpdate();
+          break;
+      }
+
+      req.setIdpId(this.id?.value);
+      req.setClientId(this.clientId?.value);
+      req.setClientSecret(this.clientSecret?.value);
+      req.setIssuer(this.issuer?.value);
+      req.setScopesList(this.scopesList?.value);
+      req.setUsernameMapping(this.usernameMapping?.value);
+      req.setIdpDisplayNameMapping(this.idpDisplayNameMapping?.value);
+
+      this.service.UpdateOidcIdpConfig(req).then((oidcConfig) => {
+        this.toast.showInfo('IDP.TOAST.SAVED', true);
+        // this.router.navigate(['idp', ]);
+      }).catch(error => {
+        this.toast.showError(error);
+      });
+    }
+
     public close(): void {
         this._location.back();
     }
@@ -128,39 +179,58 @@ export class IdpComponent implements OnInit, OnDestroy {
 
     public removeScope(uri: string): void {
         if (this.scopesList?.value) {
-            const index = this.scopesList.value.indexOf(uri);
+            const index = this.scopesList?.value.indexOf(uri);
 
             if (index !== undefined && index >= 0) {
-                this.scopesList.value.splice(index, 1);
+                this.scopesList?.value.splice(index, 1);
             }
         }
     }
 
+    public get backroutes(): string[] {
+        switch (this.serviceType) {
+            case PolicyComponentServiceType.MGMT:
+                return  ['/org', 'policy', 'login'];
+            case PolicyComponentServiceType.ADMIN:
+              return  ['/iam', 'policy', 'login'];
+              break;
+        }
+        return [];
+    }
+
     public get id(): AbstractControl | null {
-        return this.formGroup.get('id');
+        return this.idpForm.get('id');
     }
 
     public get name(): AbstractControl | null {
-        return this.formGroup.get('name');
-    }
-
-    public get clientId(): AbstractControl | null {
-        return this.formGroup.get('clientId');
-    }
-
-    public get clientSecret(): AbstractControl | null {
-        return this.formGroup.get('clientSecret');
+        return this.idpForm.get('name');
     }
 
     public get logoSrc(): AbstractControl | null {
-        return this.formGroup.get('logoSrc');
+      return this.idpForm.get('logoSrc');
+    }
+
+    public get clientId(): AbstractControl | null {
+        return this.oidcConfigForm.get('clientId');
+    }
+
+    public get clientSecret(): AbstractControl | null {
+        return this.oidcConfigForm.get('clientSecret');
     }
 
     public get issuer(): AbstractControl | null {
-        return this.formGroup.get('issuer');
+        return this.oidcConfigForm.get('issuer');
     }
 
     public get scopesList(): AbstractControl | null {
-        return this.formGroup.get('scopesList');
+        return this.oidcConfigForm.get('scopesList');
+    }
+
+    public get idpDisplayNameMapping(): AbstractControl | null {
+      return this.oidcConfigForm.get('idpDisplayNameMapping');
+    }
+
+    public get usernameMapping(): AbstractControl | null {
+      return this.oidcConfigForm.get('usernameMapping');
     }
 }

console/src/app/modules/idp/idp.module.ts

@@ -12,6 +12,8 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { IdpRoutingModule } from './idp-routing.module';
 import { IdpComponent } from './idp.component';
+import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { MatSelectModule } from '@angular/material/select';
 
 @NgModule({
     declarations: [IdpComponent],
@@ -25,9 +27,11 @@ import { IdpComponent } from './idp.component';
         MatButtonModule,
         MatIconModule,
         MatTooltipModule,
+        MatSelectModule,
         TranslateModule,
         MatCheckboxModule,
         MatChipsModule,
+        DetailLayoutModule,
     ],
 })
 export class IdpModule { }