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/policies/login-policy/login-policy.component.html

@@ -1,4 +1,4 @@
-<app-detail-layout [backRouterLink]="[ '/org']" [title]="'ORG.POLICY.LOGIN_POLICY.TITLECREATE' | translate"
+<app-detail-layout [backRouterLink]="backroutes" [title]="'ORG.POLICY.LOGIN_POLICY.TITLECREATE' | translate"
     [description]="'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATE' | translate">
     <ng-container *ngIf="(['policy.delete'] | hasRole | async) && serviceType == PolicyComponentServiceType.MGMT">
         <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
@@ -35,9 +35,9 @@
     <div class="idps">
         <div class="idp" *ngFor="let idp of idps">
             <mat-icon (click)="removeIdp(idp)" class="rm">remove_circle</mat-icon>
-            <p>{{idp.name}}</p>
-            <span>{{idp.type}}</span>
-            <span>{{idp.configId}}</span>
+            <span>{{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()">
             <mat-icon>add</mat-icon>
@@ -48,4 +48,13 @@
         <button (click)="savePolicy()" color="primary" type="submit"
             mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
     </div>
-</app-detail-layout>
+
+
+    <ng-template appHasRole [appHasRole]="['org.idp.read']">
+      <app-card title="{{ 'IDP.LIST.TITLE' | translate }}" description="{{ 'IDP.LIST.DESCRIPTION' | translate }}">
+        <app-idp-table [service]="service" [serviceType]="serviceType"
+                       [disabled]="(['iam.idp.write'] | hasRole | async) == false">
+        </app-idp-table>
+      </app-card>
+    </ng-template>
+</app-detail-layout>

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

@@ -53,17 +53,24 @@ button {
 
   .idp,
   .new-idp {
-    display: flex;
+    display: grid;
     align-items: center;
     justify-content: center;
     margin: .5rem;
-    height: 50px;
-    width: 50px;
+    padding: 10px;
     border: 1px solid #8795a1;
     border-radius: .5rem;
     cursor: pointer;
     position: relative;
 
+    span {
+      padding: 2px;
+    }
+
+    .meta {
+      font-size: 12px;
+    }
+
     .rm {
       position: absolute;
       top: 0;

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

@@ -11,11 +11,11 @@ import {
     IdpView as AdminIdpView,
 } from 'src/app/proto/generated/admin_pb';
 import {
-    IdpProviderType,
-    IdpProviderView as MgmtIdpProviderView,
-    IdpView as MgmtIdpView,
-    LoginPolicy,
-    LoginPolicyView,
+  IdpProviderType,
+  IdpProviderView as MgmtIdpProviderView,
+  IdpView as MgmtIdpView,
+  LoginPolicy,
+  LoginPolicyView, OrgDomainView,
 } from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -30,10 +30,10 @@ import { AddIdpDialogComponent } from './add-idp-dialog/add-idp-dialog.component
     styleUrls: ['./login-policy.component.scss'],
 })
 export class LoginPolicyComponent implements OnDestroy {
-    public loginData!: LoginPolicy.AsObject | DefaultLoginPolicy.AsObject;
+    public loginData!: LoginPolicyView.AsObject | DefaultLoginPolicyView.AsObject;
 
     private sub: Subscription = new Subscription();
-    private service!: ManagementService | AdminService;
+    public service!: ManagementService | AdminService;
     PolicyComponentServiceType: any = PolicyComponentServiceType;
     public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
     public idps: MgmtIdpProviderView.AsObject[] | AdminIdpProviderView.AsObject[] = [];
@@ -166,14 +166,26 @@ export class LoginPolicyComponent implements OnDestroy {
         }
     }
 
-    public removeIdp(idp: AdminIdpView.AsObject | MgmtIdpView.AsObject): void {
+    public removeIdp(idp: AdminIdpProviderView.AsObject | MgmtIdpProviderView.AsObject): void {
         switch (this.serviceType) {
             case PolicyComponentServiceType.MGMT:
-                (this.service as ManagementService).RemoveIdpProviderFromLoginPolicy(idp.id);
+                (this.service as ManagementService).RemoveIdpProviderFromLoginPolicy(idp.idpConfigId);
                 break;
             case PolicyComponentServiceType.ADMIN:
-                (this.service as AdminService).RemoveIdpProviderFromDefaultLoginPolicy(idp.id);
+                (this.service as AdminService).RemoveIdpProviderFromDefaultLoginPolicy(idp.idpConfigId);
                 break;
         }
     }
+
+  public get backroutes(): string[] {
+    switch (this.serviceType) {
+      case PolicyComponentServiceType.MGMT:
+        return  ['/org'];
+      case PolicyComponentServiceType.ADMIN:
+        return  ['/iam'];
+        break;
+    }
+    return [];
+  }
+
 }

console/src/app/modules/policies/login-policy/login-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 { CardModule } from 'src/app/modules/card/card.module';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -14,6 +15,8 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 import { AddIdpDialogModule } from './add-idp-dialog/add-idp-dialog.module';
 import { LoginPolicyRoutingModule } from './login-policy-routing.module';
 import { LoginPolicyComponent } from './login-policy.component';
+import { IdpTableModule } from 'src/app/modules/idp-table/idp-table.module';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 
 @NgModule({
     declarations: [LoginPolicyComponent],
@@ -21,16 +24,19 @@ import { LoginPolicyComponent } from './login-policy.component';
         LoginPolicyRoutingModule,
         CommonModule,
         FormsModule,
+        CardModule,
         MatInputModule,
         MatFormFieldModule,
         MatButtonModule,
         MatSlideToggleModule,
         MatIconModule,
+        HasRoleModule,
         HasRolePipeModule,
         MatTooltipModule,
         TranslateModule,
         DetailLayoutModule,
         AddIdpDialogModule,
+        IdpTableModule,
     ],
 })
 export class LoginPolicyModule { }