fix(console): hide domains settings for unauthorized users (#6602)

fix: hide domains settings for unauthorized users

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/modules/settings-list/settings-list.component.html

@@ -18,7 +18,7 @@
   <ng-container *ngIf="currentSetting === 'login'">
     <cnsl-login-policy [serviceType]="serviceType"></cnsl-login-policy>
   </ng-container>
-  <ng-container *ngIf="currentSetting === 'domain'">
+  <ng-container *ngIf="currentSetting === 'domain' && (['iam.policy.write'] | hasRole | async) === true">
     <cnsl-domain-policy [serviceType]="serviceType"></cnsl-domain-policy>
   </ng-container>
   <ng-container *ngIf="currentSetting === 'idp'">

console/src/app/modules/settings-list/settings.ts

@@ -48,8 +48,8 @@ export const DOMAIN: SidenavSetting = {
   i18nKey: 'SETTINGS.LIST.DOMAIN',
   groupI18nKey: 'SETTINGS.GROUPS.DOMAIN',
   requiredRoles: {
-    [PolicyComponentServiceType.MGMT]: ['policy.read'],
+    [PolicyComponentServiceType.MGMT]: ['iam.policy.write'],
-    [PolicyComponentServiceType.ADMIN]: ['iam.policy.read'],
+    [PolicyComponentServiceType.ADMIN]: ['iam.policy.write'],
   },
 };
 

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

@@ -28,11 +28,6 @@
 
           <button
             (click)="value = setting.id"
-            *ngIf="
-              !setting.requiredRoles ||
-              (setting.requiredRoles.mgmt && (setting.requiredRoles.mgmt | hasRole | async)) ||
-              (setting.requiredRoles.admin && (setting.requiredRoles.admin | hasRole | async))
-            "
             class="sidenav-setting-list-element hide-on-mobile"
             [ngClass]="{ active: currentSetting === setting.id, show: currentSetting === undefined }"
             [attr.data-e2e]="'sidenav-element-' + setting.id"

console/src/app/pages/instance-settings/instance-settings.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subject, takeUntil } from 'rxjs';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import {
   BRANDING,
   COMPLEXITY,
@@ -21,16 +22,17 @@ import {
   SECRETS,
   SECURITY,
 } from '../../modules/settings-list/settings';
+import { checkSettingsPermissions } from '../org-settings/org-settings.component';
 
 @Component({
   selector: 'cnsl-instance-settings',
   templateUrl: './instance-settings.component.html',
   styleUrls: ['./instance-settings.component.scss'],
 })
-export class InstanceSettingsComponent implements OnDestroy {
+export class InstanceSettingsComponent implements OnInit, OnDestroy {
   public id: string = '';
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
-  public settingsList: SidenavSetting[] = [
+  public defaultSettingsList: SidenavSetting[] = [
     GENERAL,
     // notifications
     // { showWarn: true, ...NOTIFICATIONS },
@@ -53,8 +55,10 @@ export class InstanceSettingsComponent implements OnDestroy {
     SECURITY,
   ];
 
+  public settingsList: SidenavSetting[] = [];
+
   private destroy$: Subject<void> = new Subject();
-  constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute) {
+  constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute, public authService: GrpcAuthService) {
     const breadcrumbs = [
       new Breadcrumb({
         type: BreadcrumbType.INSTANCE,
@@ -72,6 +76,16 @@ export class InstanceSettingsComponent implements OnDestroy {
     });
   }
 
+  ngOnInit(): void {
+    checkSettingsPermissions(this.defaultSettingsList, PolicyComponentServiceType.ADMIN, this.authService).subscribe(
+      (allowed) => {
+        this.settingsList = this.defaultSettingsList.filter((setting, index) => {
+          return allowed[index];
+        });
+      },
+    );
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next();
     this.destroy$.complete();

console/src/app/pages/org-settings/org-settings.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
-import { take } from 'rxjs';
+import { forkJoin, of, take } from 'rxjs';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 
+import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import {
   BRANDING,
   COMPLEXITY,
@@ -23,10 +24,11 @@ import {
   templateUrl: './org-settings.component.html',
   styleUrls: ['./org-settings.component.scss'],
 })
-export class OrgSettingsComponent {
+export class OrgSettingsComponent implements OnInit {
   public id: string = '';
   public PolicyComponentServiceType: any = PolicyComponentServiceType;
-  public settingsList: SidenavSetting[] = [
+
+  private defaultSettingsList: SidenavSetting[] = [
     LOGIN,
     IDP,
     COMPLEXITY,
@@ -39,7 +41,9 @@ export class OrgSettingsComponent {
     PRIVACYPOLICY,
   ];
 
-  constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute) {
+  public settingsList: SidenavSetting[] = [];
+
+  constructor(breadcrumbService: BreadcrumbService, activatedRoute: ActivatedRoute, public authService: GrpcAuthService) {
     const breadcrumbs = [
       new Breadcrumb({
         type: BreadcrumbType.ORG,
@@ -55,4 +59,42 @@ export class OrgSettingsComponent {
       }
     });
   }
+
+  ngOnInit(): void {
+    checkSettingsPermissions(this.defaultSettingsList, PolicyComponentServiceType.MGMT, this.authService).subscribe(
+      (allowed) => {
+        this.settingsList = this.defaultSettingsList.filter((setting, index) => {
+          return allowed[index];
+        });
+      },
+    );
+  }
+}
+
+// Return a Observables<boolean>[] that will wait till all service calls are finished to then check if user is allowed to see a setting
+export function checkSettingsPermissions(settings: SidenavSetting[], serviceType: string, authService: GrpcAuthService) {
+  return forkJoin(
+    settings
+      .filter((setting) => {
+        if (serviceType === PolicyComponentServiceType.ADMIN) {
+          return setting.requiredRoles && setting.requiredRoles.admin;
+        } else {
+          return setting.requiredRoles && setting.requiredRoles.mgmt;
+        }
+      })
+      .map((setting) => {
+        if (!setting.requiredRoles) {
+          return of(true);
+        }
+
+        if (!setting.requiredRoles.mgmt) {
+          return of(true);
+        }
+
+        if (setting.requiredRoles.mgmt) {
+          return authService.isAllowed(setting.requiredRoles.mgmt).pipe(take(1));
+        }
+        return of(false);
+      }),
+  );
 }