fix(console): idp write access (#2258)

* fix: idp

* disable idp form in detail

* lint

* change list idp request

* fix external idp removal

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

@@ -86,16 +86,15 @@
                 <td mat-cell *matCellDef="let idp">
                     <button
                         [disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IDPOwnerType.IDP_OWNER_TYPE_ORG"
-                        mat-icon-button color="warn" matTooltip="{{'IAM.VIEWS.DELETE' | translate}}"
+                        mat-icon-button color="warn" matTooltip="{{'ACTIONS.REMOVE' | translate}}"
                         (click)="removeIdp(idp)">
-                        <i class="las la-trash"></i>
+                        <mat-icon>remove_circle</mat-icon>
                     </button>
                 </td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr class="highlight"
-                [ngClass]="{'disabled': serviceType==PolicyComponentServiceType.MGMT && row?.providerType == IDPOwnerType.IDP_OWNER_TYPE_SYSTEM}"
                 mat-row *matRowDef="let row; columns: displayedColumns;">
             </tr>
         </table>

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

@@ -40,10 +40,6 @@ td {
 tr {
   outline: none;
 
-  &.disabled * {
-    opacity: .8;
-  }
-
   button {
     visibility: hidden;
   }
@@ -53,6 +49,12 @@ tr {
       visibility: visible;
     }
   }
+
+  &.disabled,
+  &.disabled * {
+    opacity: .8;
+    cursor: default;
+  }
 }
 
 .avatar {

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

@@ -24,7 +24,7 @@
             </ng-container>
 
             <div class="btn-wrapper">
-                <button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid"
+                <button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid || (canWrite | async) === false"
                     type="submit">
                     {{ 'ACTIONS.SAVE' | translate }}
                 </button>
@@ -46,7 +46,7 @@
                             <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
                             <input cnslInput formControlName="clientId" />
                         </cnsl-form-field>
-                        <mat-checkbox class="desc" [(ngModel)]="showIdSecretSection"
+                        <mat-checkbox class="desc" [(ngModel)]="showIdSecretSection" [disabled]="(canWrite | async) === false"
                             [ngModelOptions]="{standalone: true}">
                             Update Client Secret
                         </mat-checkbox>
@@ -69,7 +69,7 @@
                         <cnsl-form-field appearance="outline" class="formfield fullwidth">
                             <mat-chip-list class="chip-list" #chipScopesList aria-label="scope selection">
                                 <mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false"
-                                    removable (removed)="removeScope(scope)">
+                                    removable (removed)="removeScope(scope)" [disabled]="(canWrite | async) === false">
                                     {{scope}} <mat-icon matChipRemove>cancel</mat-icon>
                                 </mat-chip>
                             </mat-chip-list>
@@ -96,7 +96,7 @@
 
                 <div class="btn-wrapper">
                     <button color="primary" mat-raised-button class="continue-button"
-                        [disabled]="oidcConfigForm.invalid" type="submit">
+                        [disabled]="oidcConfigForm.invalid || (canWrite | async) === false" type="submit">
                         {{ 'ACTIONS.SAVE' | translate }}
                     </button>
                 </div>

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

@@ -1,15 +1,16 @@
 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, OnDestroy, 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 { Observable, Subject } from 'rxjs';
-import { switchMap, take } from 'rxjs/operators';
+import { switchMap, take, takeUntil } from 'rxjs/operators';
 import { UpdateIDPOIDCConfigRequest, UpdateIDPRequest } from 'src/app/proto/generated/zitadel/admin_pb';
 import { IDPStylingType, OIDCMappingField } from 'src/app/proto/generated/zitadel/idp_pb';
 import { UpdateOrgIDPOIDCConfigRequest, UpdateOrgIDPRequest } from 'src/app/proto/generated/zitadel/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
 
@@ -20,7 +21,7 @@ import { PolicyComponentServiceType } from '../policies/policy-component-types.e
   templateUrl: './idp.component.html',
   styleUrls: ['./idp.component.scss'],
 })
-export class IdpComponent implements OnInit, OnDestroy {
+export class IdpComponent implements OnDestroy {
   public mappingFields: OIDCMappingField[] = [];
   public styleFields: IDPStylingType[] = [];
 
@@ -29,17 +30,22 @@ export class IdpComponent implements OnInit, OnDestroy {
   private service!: ManagementService | AdminService;
   public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
 
-  private subscription?: Subscription;
+  private destroy$: Subject<void> = new Subject();
   public projectId: string = '';
 
   public idpForm!: FormGroup;
   public oidcConfigForm!: FormGroup;
 
+  public canWrite: Observable<boolean> = this.authService.isAllowed([this.serviceType === PolicyComponentServiceType.ADMIN ?
+    'iam.idp.write' : this.serviceType === PolicyComponentServiceType.MGMT ?
+      'org.idp.write' : '']);
+
   constructor(
     private toast: ToastService,
     private injector: Injector,
     private route: ActivatedRoute,
     private _location: Location,
+    private authService: GrpcAuthService,
   ) {
     this.idpForm = new FormGroup({
       id: new FormControl({ disabled: true, value: '' }, [Validators.required]),
@@ -56,61 +62,75 @@ export class IdpComponent implements OnInit, OnDestroy {
       usernameMapping: new FormControl(0),
     });
 
-    this.route.data.pipe(switchMap(data => {
+    this.route.data.pipe(
-      this.serviceType = data.serviceType;
+      takeUntil(this.destroy$),
-      switch (this.serviceType) {
+      switchMap(data => {
-        case PolicyComponentServiceType.MGMT:
+        this.serviceType = data.serviceType;
-          this.service = this.injector.get(ManagementService as Type<ManagementService>);
+        switch (this.serviceType) {
+          case PolicyComponentServiceType.MGMT:
+            this.service = this.injector.get(ManagementService as Type<ManagementService>);
 
-          break;
+            break;
-        case PolicyComponentServiceType.ADMIN:
+          case PolicyComponentServiceType.ADMIN:
-          this.service = this.injector.get(AdminService as Type<AdminService>);
+            this.service = this.injector.get(AdminService as Type<AdminService>);
 
-          break;
+            break;
-      }
-
-      this.mappingFields = [
-        OIDCMappingField.OIDC_MAPPING_FIELD_PREFERRED_USERNAME,
-        OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL];
-      this.styleFields = [
-        IDPStylingType.STYLING_TYPE_UNSPECIFIED,
-        IDPStylingType.STYLING_TYPE_GOOGLE];
-
-      return this.route.params.pipe(take(1));
-    })).subscribe((params) => {
-      const { id } = params;
-      if (id) {
-        if (this.serviceType === PolicyComponentServiceType.MGMT) {
-          (this.service as ManagementService).getOrgIDPByID(id).then(resp => {
-            if (resp.idp) {
-              const idpObject = resp.idp;
-              this.idpForm.patchValue(idpObject);
-              if (idpObject.oidcConfig) {
-                this.oidcConfigForm.patchValue(idpObject.oidcConfig);
-              }
-            }
-          });
-        } else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
-          (this.service as AdminService).getIDPByID(id).then(resp => {
-            if (resp.idp) {
-              const idpObject = resp.idp;
-              this.idpForm.patchValue(idpObject);
-              if (idpObject.oidcConfig) {
-                this.oidcConfigForm.patchValue(idpObject.oidcConfig);
-              }
-            }
-          });
         }
+
+        this.mappingFields = [
+          OIDCMappingField.OIDC_MAPPING_FIELD_PREFERRED_USERNAME,
+          OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL];
+        this.styleFields = [
+          IDPStylingType.STYLING_TYPE_UNSPECIFIED,
+          IDPStylingType.STYLING_TYPE_GOOGLE];
+
+        return this.route.params.pipe(take(1));
+      })).subscribe((params) => {
+        const { id } = params;
+        if (id) {
+          this.checkWrite();
+
+          if (this.serviceType === PolicyComponentServiceType.MGMT) {
+
+            (this.service as ManagementService).getOrgIDPByID(id).then(resp => {
+              if (resp.idp) {
+                const idpObject = resp.idp;
+                this.idpForm.patchValue(idpObject);
+                if (idpObject.oidcConfig) {
+                  this.oidcConfigForm.patchValue(idpObject.oidcConfig);
+                }
+              }
+            });
+          } else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
+            (this.service as AdminService).getIDPByID(id).then(resp => {
+              if (resp.idp) {
+                const idpObject = resp.idp;
+                this.idpForm.patchValue(idpObject);
+                if (idpObject.oidcConfig) {
+                  this.oidcConfigForm.patchValue(idpObject.oidcConfig);
+                }
+              }
+            });
+          }
+        }
+      });
+  }
+
+  public checkWrite(): void {
+    this.canWrite.pipe(take(1)).subscribe(canWrite => {
+      if (canWrite) {
+        this.idpForm.enable();
+        this.oidcConfigForm.enable();
+      } else {
+        this.idpForm.disable();
+        this.oidcConfigForm.disable();
       }
     });
   }
 
-  public ngOnInit(): void {
-    this.subscription = this.route.params.subscribe(params => this.getData(params));
-  }
-
   public ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   private getData({ projectid }: Params): void {

console/src/app/modules/mfa-table/mfa-table.component.scss

@@ -1,4 +1,3 @@
-
 .t .sp_wrapper {
   display: block;
 }
@@ -22,7 +21,6 @@
     justify-content: center;
     margin: .5rem;
     padding: 10px;
-    cursor: pointer;
     position: relative;
     min-height: 70px;
     min-width: 150px;
@@ -43,6 +41,8 @@
     }
 
     &:not(.disabled) {
+      cursor: default;
+
       &:hover {
         .rm {
           display: block;
@@ -55,4 +55,8 @@
       cursor: not-allowed;
     }
   }
+
+  .new-mfa:not(.disabled) {
+    cursor: pointer;
+  }
 }

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

@@ -2,80 +2,98 @@ import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { IDP, IDPOwnerType, IDPOwnerTypeQuery } from 'src/app/proto/generated/zitadel/idp_pb';
 import { IDPQuery } from 'src/app/proto/generated/zitadel/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';
 
 import { PolicyComponentServiceType } from '../../policy-component-types.enum';
 
 @Component({
-    selector: 'app-add-idp-dialog',
+  selector: 'app-add-idp-dialog',
-    templateUrl: './add-idp-dialog.component.html',
+  templateUrl: './add-idp-dialog.component.html',
-    styleUrls: ['./add-idp-dialog.component.scss'],
+  styleUrls: ['./add-idp-dialog.component.scss'],
 })
 export class AddIdpDialogComponent {
-    public PolicyComponentServiceType: any = PolicyComponentServiceType;
+  public PolicyComponentServiceType: any = PolicyComponentServiceType;
-    public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
+  public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
 
-    public idpType!: IDPOwnerType;
+  public idpType!: IDPOwnerType;
-    public idpTypes: IDPOwnerType[] = [
+  public idpTypes: IDPOwnerType[] = [
-        IDPOwnerType.IDP_OWNER_TYPE_SYSTEM,
+    IDPOwnerType.IDP_OWNER_TYPE_SYSTEM,
-        IDPOwnerType.IDP_OWNER_TYPE_ORG,
+    IDPOwnerType.IDP_OWNER_TYPE_ORG,
-    ];
+  ];
 
-    public idp: IDP.AsObject | undefined = undefined;
+  public idp: IDP.AsObject | undefined = undefined;
-    public availableIdps: Array<IDP.AsObject[] | IDP.AsObject> | string[] = [];
+  public availableIdps: Array<IDP.AsObject[] | IDP.AsObject> | string[] = [];
 
-    constructor(
+  constructor(
-        private mgmtService: ManagementService,
+    private mgmtService: ManagementService,
-        private adminService: AdminService,
+    private toast: ToastService,
-        public dialogRef: MatDialogRef<AddIdpDialogComponent>,
+    public dialogRef: MatDialogRef<AddIdpDialogComponent>,
-        @Inject(MAT_DIALOG_DATA) public data: any,
+    @Inject(MAT_DIALOG_DATA) public data: any,
-    ) {
+  ) {
-        if (data.serviceType) {
+    if (data.serviceType) {
-            this.serviceType = data.serviceType;
+      this.serviceType = data.serviceType;
-            switch (this.serviceType) {
+      switch (this.serviceType) {
-                case PolicyComponentServiceType.MGMT:
+        case PolicyComponentServiceType.MGMT:
-                    this.idpType = IDPOwnerType.IDP_OWNER_TYPE_ORG;
+          this.idpType = IDPOwnerType.IDP_OWNER_TYPE_ORG;
-                    break;
+          break;
-                case PolicyComponentServiceType.ADMIN:
+        case PolicyComponentServiceType.ADMIN:
-                    this.idpType = IDPOwnerType.IDP_OWNER_TYPE_SYSTEM;
+          this.idpType = IDPOwnerType.IDP_OWNER_TYPE_SYSTEM;
-                    break;
+          break;
-            }
+      }
-        }
-
-        this.loadIdps();
     }
 
-    public loadIdps(): void {
+    this.loadIdps();
-        this.idp = undefined;
+  }
-        switch (this.idpType) {
-            case IDPOwnerType.IDP_OWNER_TYPE_ORG:
-                const query: IDPQuery = new IDPQuery();
-                const idpOTQ: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
-                idpOTQ.setOwnerType(this.idpType);
-                query.setOwnerTypeQuery(idpOTQ);
 
-                this.mgmtService.listOrgIDPs(undefined, undefined, [query]).then(resp => {
+  public loadIdps(): void {
-                    this.availableIdps = resp.resultList;
+    this.idp = undefined;
-                });
-                break;
-            case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
-                this.adminService.listIDPs().then(resp => {
-                    this.availableIdps = resp.resultList;
-                });
-                break;
 
-        }
-    }
 
-    public closeDialog(): void {
-        this.dialogRef.close(false);
-    }
 
-    public closeDialogWithSuccess(): void {
+    switch (this.idpType) {
-        this.dialogRef.close({
+      case IDPOwnerType.IDP_OWNER_TYPE_ORG:
-            idp: this.idp,
+        const query: IDPQuery = new IDPQuery();
-            type: this.idpType,
+        const idpOTQ: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
+        idpOTQ.setOwnerType(this.idpType);
+        query.setOwnerTypeQuery(idpOTQ);
+
+        const orgQuery = new IDPQuery();
+        const orgQ = new IDPOwnerTypeQuery();
+        orgQ.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_ORG);
+        orgQuery.setOwnerTypeQuery(orgQ);
+        this.mgmtService.listOrgIDPs(undefined, undefined, [orgQuery]).then(resp => {
+          this.availableIdps = resp.resultList;
+        }).catch(error => {
+          this.availableIdps = [];
+          this.toast.showError(error);
         });
+        break;
+      case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
+        const iamQuery = new IDPQuery();
+        const iamQ = new IDPOwnerTypeQuery();
+        iamQ.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_SYSTEM);
+        iamQuery.setOwnerTypeQuery(iamQ);
+
+        this.mgmtService.listOrgIDPs(undefined, undefined, [iamQuery]).then(resp => {
+          this.availableIdps = resp.resultList;
+        }).catch(error => {
+          this.availableIdps = [];
+          this.toast.showError(error);
+        });
+        break;
+
     }
+  }
+
+  public closeDialog(): void {
+    this.dialogRef.close(false);
+  }
+
+  public closeDialogWithSuccess(): void {
+    this.dialogRef.close({
+      idp: this.idp,
+      type: this.idpType,
+    });
+  }
 }

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

@@ -177,7 +177,7 @@
 
     <div class="idps">
         <div class="idp"
-            [ngClass]="{'disabled': disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false)}"
+            [ngClass]="{'disabled': (disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false))}"
             *ngFor="let idp of idps">
             <button
                 [disabled]="disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false)"
@@ -206,13 +206,7 @@
     <ng-template appHasRole [appHasRole]="['org.idp.read']">
         <app-card title="{{ 'IDP.LIST.TITLE' | translate }}" description="{{ 'IDP.LIST.DESCRIPTION' | translate }}"
             [expanded]="false">
-            <div card-actions>
+
-                <i class="lab la-google"></i>
-                <i class="lab la-facebook"></i>
-                <i class="lab la-apple"></i>
-                <i class="lab la-github"></i>
-                <i class="lab la-gitlab"></i>
-            </div>
             <app-idp-table [service]="service" [serviceType]="serviceType"
                 [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false || ((serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false))">
             </app-idp-table>

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

@@ -77,7 +77,6 @@
     padding: 10px;
     border: 1px solid var(--grey);
     border-radius: .5rem;
-    cursor: pointer;
     position: relative;
     min-height: 70px;
     min-width: 150px;
@@ -106,6 +105,8 @@
     }
 
     &:not(.disabled) {
+      cursor: default;
+
       &:hover {
         .rm {
           display: block;
@@ -119,6 +120,10 @@
       object-fit: scale-down;
     }
   }
+
+  .new-idp:not(.disabled) {
+    cursor: pointer;
+  }
 }
 
 .divider {

console/src/app/pages/orgs/orgs-routing.module.ts

@@ -34,7 +34,7 @@ const routes: Routes = [
         loadChildren: () => import('src/app/modules/idp/idp.module').then(m => m.IdpModule),
         canActivate: [RoleGuard],
         data: {
-          roles: ['iam.idp.read'],
+          roles: ['org.idp.read'],
           serviceType: PolicyComponentServiceType.MGMT,
         },
       },

console/src/app/pages/users/user-detail/external-idps/external-idps.component.ts

@@ -102,10 +102,10 @@ export class ExternalIdpsComponent implements OnInit {
         let promise;
         if (this.service instanceof ManagementService) {
           promise = (this.service as ManagementService)
-            .removeHumanLinkedIDP(idp.providedUserId, idp.idpId, idp.userId);
+            .removeHumanLinkedIDP(idp.idpId, idp.providedUserId, idp.userId);
         } else if (this.service instanceof GrpcAuthService) {
           promise = (this.service as GrpcAuthService)
-            .removeMyLinkedIDP(idp.providedUserId, idp.idpId);
+            .removeMyLinkedIDP(idp.idpId, idp.providedUserId);
         }
 
         if (promise) {

console/src/app/services/grpc-auth.service.ts

@@ -429,11 +429,11 @@ export class GrpcAuthService {
   }
 
   public removeMyLinkedIDP(
-    externalUserId: string,
     idpId: string,
+    linkedUserId: string,
   ): Promise<RemoveMyLinkedIDPResponse.AsObject> {
     const req = new RemoveMyLinkedIDPRequest();
-    req.setLinkedUserId(externalUserId);
+    req.setLinkedUserId(linkedUserId);
     req.setIdpId(idpId);
     return this.grpcService.auth.removeMyLinkedIDP(req, null).then(resp => resp.toObject());
   }

console/src/app/services/mgmt.service.ts

@@ -839,7 +839,6 @@ export class ManagementService {
     linkedUserId: string,
   ): Promise<RemoveHumanLinkedIDPResponse.AsObject> {
     const req = new RemoveHumanLinkedIDPRequest();
-    req.setUserId(userId);
     req.setIdpId(idpId);
     req.setUserId(userId);
     req.setLinkedUserId(linkedUserId);