From 010a5815f4c4aba06ebd6c427e53e7a4f002dfd2 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Fri, 9 Oct 2020 11:37:05 +0200
Subject: [PATCH] fix(console): permission regex, account switcher null check,
 restrict app and member create access (#821)

* fix member table disable, gerneal regexp

* fix user session card, app disable

* memberships max count

* fix policy permissions

* permission check for member add dialog

* lint

* rm accounts log

* rm id regex
---
 console/src/app/app.component.html            |  2 +-
 .../accounts-card/accounts-card.component.ts  |  4 +-
 .../member-create-dialog.component.html       |  5 +-
 .../member-create-dialog.component.ts         | 19 ++--
 .../members-table.component.html              |  6 +-
 .../members-table/members-table.component.ts  |  2 +-
 .../login-policy/login-policy.component.html  | 10 +--
 .../password-complexity-policy.component.html |  2 +-
 .../project-members.component.html            |  3 +-
 .../project-roles.component.html              |  4 +-
 .../iam-members/iam-members.component.html    |  3 +-
 .../orgs/org-detail/org-detail.component.html |  2 +-
 .../org-members/org-members.component.html    |  4 +-
 .../policy-grid/policy-grid.component.html    | 42 ++++-----
 .../apps/app-detail/app-detail.component.html |  8 +-
 .../apps/app-detail/app-detail.component.scss |  5 ++
 .../apps/app-detail/app-detail.component.ts   | 88 +++++++++----------
 .../granted-project-detail.component.html     |  6 +-
 .../owned-project-detail.component.html       | 14 +--
 .../project-grants.component.html             |  4 +-
 .../memberships/memberships.component.html    |  7 +-
 .../user-detail/user-detail.component.html    |  6 +-
 .../users/user-list/user-list.component.html  |  4 +-
 .../user-table/user-table.component.html      |  4 +-
 24 files changed, 134 insertions(+), 120 deletions(-)

diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html
index 36c104ab87..ced4b37c8a 100644
--- a/console/src/app/app.component.html
+++ b/console/src/app/app.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="(authService.user | async) || {} as user">
-    <ng-container *ngIf="((['iam.read','iam.write'] | hasRole)) as iamuser$">
+    <ng-container *ngIf="((['iam.read$','iam.write$'] | hasRole)) as iamuser$">
         <mat-toolbar class="root-header">
             <button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
                 <i class="icon las la-bars"></i>
diff --git a/console/src/app/modules/accounts-card/accounts-card.component.ts b/console/src/app/modules/accounts-card/accounts-card.component.ts
index 932625e4ea..eb5728de5c 100644
--- a/console/src/app/modules/accounts-card/accounts-card.component.ts
+++ b/console/src/app/modules/accounts-card/accounts-card.component.ts
@@ -21,7 +21,9 @@ export class AccountsCardComponent implements OnInit {
         this.userService.getMyUserSessions().then(sessions => {
             this.users = sessions.toObject().userSessionsList;
             const index = this.users.findIndex(user => user.loginName === this.profile.preferredLoginName);
-            this.users.splice(index, 1);
+            if (index > -1) {
+                this.users.splice(index, 1);
+            }
 
             this.loadingUsers = false;
         }).catch(() => {
diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.html b/console/src/app/modules/add-member-dialog/member-create-dialog.component.html
index 78af0e6e34..6a53607b27 100644
--- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.html
+++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.html
@@ -9,8 +9,9 @@
         <mat-form-field class="full-width" appearance="outline">
             <mat-label>{{ 'MEMBER.CREATIONTYPE' | translate }}</mat-label>
             <mat-select [(ngModel)]="creationType" (selectionChange)="loadRoles()">
-                <mat-option *ngFor="let type of creationTypes" [value]="type">
-                    {{ 'MEMBER.CREATIONTYPES.'+type | translate}}
+                <mat-option *ngFor="let type of creationTypes" [value]="type.type"
+                    [disabled]="(type.disabled$ | async) == false">
+                    {{ 'MEMBER.CREATIONTYPES.'+type.type | translate}}
                 </mat-option>
             </mat-select>
         </mat-form-field>
diff --git a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
index 615358307d..5d41429284 100644
--- a/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
+++ b/console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
@@ -1,7 +1,9 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
 import { ProjectGrantView, ProjectRole, ProjectView, UserView } from 'src/app/proto/generated/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';
 
@@ -24,11 +26,17 @@ export class MemberCreateDialogComponent {
     public preselectedUsers: Array<UserView.AsObject> = [];
 
     public creationType!: CreationType;
-    public creationTypes: CreationType[] = [
-        CreationType.IAM,
-        CreationType.ORG,
-        CreationType.PROJECT_OWNED,
-        CreationType.PROJECT_GRANTED,
+
+    /**
+     *  Specifies options for creating members,
+     *  without ending $, to enable write event permission even if user is allowed
+     *  to create members for only one specific project.
+     */
+    public creationTypes: Array<{ type: CreationType, disabled$: Observable<boolean>; }> = [
+        { type: CreationType.IAM, disabled$: this.authService.isAllowed(['iam.member.write$']) },
+        { type: CreationType.ORG, disabled$: this.authService.isAllowed(['org.member.write$']) },
+        { type: CreationType.PROJECT_OWNED, disabled$: this.authService.isAllowed(['project.member.write']) },
+        { type: CreationType.PROJECT_GRANTED, disabled$: this.authService.isAllowed(['project.grant.member.write']) },
     ];
     public users: Array<UserView.AsObject> = [];
     public roles: Array<ProjectRole.AsObject> | string[] = [];
@@ -40,6 +48,7 @@ export class MemberCreateDialogComponent {
     constructor(
         private mgmtService: ManagementService,
         private adminService: AdminService,
+        private authService: GrpcAuthService,
         public dialogRef: MatDialogRef<MemberCreateDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data: any,
         private toastService: ToastService,
diff --git a/console/src/app/modules/members-table/members-table.component.html b/console/src/app/modules/members-table/members-table.component.html
index e371dd64a2..cd85a13f20 100644
--- a/console/src/app/modules/members-table/members-table.component.html
+++ b/console/src/app/modules/members-table/members-table.component.html
@@ -13,13 +13,13 @@
         <table mat-table class="table" aria-label="Elements" [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                    <mat-checkbox [disabled]="!canWrite" color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
                 <td class="selection" mat-cell *matCellDef="let row">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    <mat-checkbox [disabled]="!canWrite" color="primary" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                         <app-avatar *ngIf="row?.displayName && row.firstName && row.lastName; else cog" class="avatar"
                             [name]="row.displayName" [size]="32">
@@ -77,7 +77,7 @@
                 <td mat-cell *matCellDef="let member">
                     <mat-form-field class="form-field" appearance="outline">
                         <mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
-                        <mat-select [(ngModel)]="member.rolesList" multiple [disabled]="disableWrite"
+                        <mat-select [(ngModel)]="member.rolesList" multiple [disabled]="!canWrite"
                             (selectionChange)="updateRoles.emit({member: member, change: $event})">
                             <mat-option *ngFor="let role of memberRoleOptions" [value]="role">
                                 {{ role }}
diff --git a/console/src/app/modules/members-table/members-table.component.ts b/console/src/app/modules/members-table/members-table.component.ts
index 5d61d82b42..1e70dd3a0f 100644
--- a/console/src/app/modules/members-table/members-table.component.ts
+++ b/console/src/app/modules/members-table/members-table.component.ts
@@ -22,8 +22,8 @@ type MemberDatasource = OrgMembersDataSource | ProjectMembersDataSource | IamMem
 })
 export class MembersTableComponent implements OnInit, OnDestroy {
     public INITIALPAGESIZE: number = 25;
-    @Input() public disableWrite: boolean = false;
     @Input() public canDelete: boolean = false;
+    @Input() public canWrite: boolean = false;
     @ViewChild(MatPaginator) public paginator!: MatPaginator;
     @ViewChild(MatTable) public table!: MatTable<View>;
     @Input() public dataSource!: MemberDatasource;
diff --git a/console/src/app/modules/policies/login-policy/login-policy.component.html b/console/src/app/modules/policies/login-policy/login-policy.component.html
index fc1a780ee5..245b8f18e6 100644
--- a/console/src/app/modules/policies/login-policy/login-policy.component.html
+++ b/console/src/app/modules/policies/login-policy/login-policy.component.html
@@ -1,11 +1,11 @@
 <app-detail-layout [backRouterLink]="backroutes" [title]="'ORG.POLICY.LOGIN_POLICY.TITLECREATE' | translate"
     [description]="(serviceType==PolicyComponentServiceType.MGMT ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'ORG.POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '') | translate">
-    <ng-container *ngIf="(['policy.delete'] | hasRole | async) && serviceType == PolicyComponentServiceType.MGMT">
-        <!--<button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
+    <!--<ng-container *ngIf="(['policy.delete'] | hasRole | async) && serviceType == PolicyComponentServiceType.MGMT">
+        <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
             mat-stroked-button>
             {{'ORG.POLICY.DELETE' | translate}}
-        </button>-->
-    </ng-container>
+        </button>
+    </ng-container>-->
 
     <div class="content" *ngIf="loginData">
         <div class="row">
@@ -56,7 +56,7 @@
     <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">
+                [disabled]="(['iam.idp.write$'] | hasRole | async) == false">
             </app-idp-table>
         </app-card>
     </ng-template>
diff --git a/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html b/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html
index 8402e9ec17..598788a46c 100644
--- a/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html
+++ b/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html
@@ -1,6 +1,6 @@
 <app-detail-layout [backRouterLink]="[ '/org']" [title]="title ? (title | translate) : ''"
     [description]="desc ? (desc | translate) : ''">
-    <ng-template appHasRole [appHasRole]="['iam.policy.write']">
+    <ng-template appHasRole [appHasRole]="['policy.write$']">
         <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
             mat-stroked-button>
             {{'ORG.POLICY.DELETE' | translate}}
diff --git a/console/src/app/modules/project-members/project-members.component.html b/console/src/app/modules/project-members/project-members.component.html
index 5f8cce98b6..7d845b04fb 100644
--- a/console/src/app/modules/project-members/project-members.component.html
+++ b/console/src/app/modules/project-members/project-members.component.html
@@ -4,7 +4,8 @@
     <app-members-table *ngIf="project" [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
         (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
         (changedSelection)="selection = $event" [refreshTrigger]="changePage"
-        [canDelete]="['project.member.delete', 'project.member.delete:'+project.projectId] | hasRole | async"
+        [canWrite]="['project.member.write$', 'project.member.write:'+ project.projectId] | hasRole | async"
+        [canDelete]="['project.member.delete$', 'project.member.delete:'+project.projectId] | hasRole | async"
         (deleteMember)="removeProjectMember($event)">
         <ng-template appHasRole selectactions
             [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
diff --git a/console/src/app/modules/project-roles/project-roles.component.html b/console/src/app/modules/project-roles/project-roles.component.html
index 922aa5fc0c..c1209de9cf 100644
--- a/console/src/app/modules/project-roles/project-roles.component.html
+++ b/console/src/app/modules/project-roles/project-roles.component.html
@@ -19,13 +19,13 @@
         <table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                    <mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
                 <td class="selection" mat-cell *matCellDef="let row">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    <mat-checkbox color="primary" [disabled]="disabled" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                     </mat-checkbox>
                 </td>
diff --git a/console/src/app/pages/iam/iam-members/iam-members.component.html b/console/src/app/pages/iam/iam-members/iam-members.component.html
index 55b46e1a69..8fb9535bcf 100644
--- a/console/src/app/pages/iam/iam-members/iam-members.component.html
+++ b/console/src/app/pages/iam/iam-members/iam-members.component.html
@@ -4,7 +4,8 @@
         <app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
             (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
             (changedSelection)="selection = $event" [refreshTrigger]="changePage"
-            [canDelete]="['iam.member.delete'] | hasRole | async" (deleteMember)="removeMember($event)">
+            [canWrite]="['iam.member.write$'] | hasRole | async" [canDelete]="['iam.member.delete$'] | hasRole | async"
+            (deleteMember)="removeMember($event)">
 
             <ng-template appHasRole selectactions [appHasRole]="['iam.member.delete']">
                 <button color="warn" (click)="removeMemberSelection()"
diff --git a/console/src/app/pages/orgs/org-detail/org-detail.component.html b/console/src/app/pages/orgs/org-detail/org-detail.component.html
index 71fb04d229..55d54897ea 100644
--- a/console/src/app/pages/orgs/org-detail/org-detail.component.html
+++ b/console/src/app/pages/orgs/org-detail/org-detail.component.html
@@ -2,7 +2,7 @@
     <div class="enlarged-container">
         <h1 class="h1">{{org?.name}}</h1>
         <p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}</p>
-        <ng-container *ngIf="(['org.write'] | hasRole) as canwrite$">
+        <ng-container *ngIf="(['org.write$'] | hasRole) as canwrite$">
             <app-card title="{{ 'ORG.DOMAINS.TITLE' | translate }}"
                 description="{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}">
 
diff --git a/console/src/app/pages/orgs/org-members/org-members.component.html b/console/src/app/pages/orgs/org-members/org-members.component.html
index 921ea9f0b0..8086cfafa8 100644
--- a/console/src/app/pages/orgs/org-members/org-members.component.html
+++ b/console/src/app/pages/orgs/org-members/org-members.component.html
@@ -3,8 +3,8 @@
     <app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
         (updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
         (changedSelection)="selection = $event" [refreshTrigger]="changePage"
-        [canDelete]="['org.member.delete:'+org?.id,'org.member.delete'] | hasRole | async"
-        (deleteMember)="removeOrgMember($event)">
+        [canDelete]="['org.member.delete:'+org?.id,'org.member.delete$'] | hasRole | async"
+        [canWrite]="['org.member.write$'] | hasRole | async" (deleteMember)="removeOrgMember($event)">
         <ng-template appHasRole selectactions [appHasRole]="['org.member.delete:'+org?.id,'org.member.delete']">
             <button (click)="removeOrgMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
                 class="del-button" mat-raised-button color="warn">
diff --git a/console/src/app/pages/orgs/policy-grid/policy-grid.component.html b/console/src/app/pages/orgs/policy-grid/policy-grid.component.html
index 72533ea2ff..94daf05770 100644
--- a/console/src/app/pages/orgs/policy-grid/policy-grid.component.html
+++ b/console/src/app/pages/orgs/policy-grid/policy-grid.component.html
@@ -22,11 +22,12 @@
         </ng-template>
 
         <span class="fill-space"></span>
-        <div class="btn-wrapper">
-            <button [disabled]="complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY,'create' ]"
-                color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
-            <button [disabled]="!complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]"
-                mat-stroked-button
+        <div class="btn-wrapper" *ngIf="(['policy.write'] | hasRole) as writePolicy$">
+            <button [disabled]="complexityPolicy || (writePolicy$ | async) == false"
+                [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY,'create' ]" color="primary"
+                mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
+            <button [disabled]="!complexityPolicy || (writePolicy$ | async) == false"
+                [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]" mat-stroked-button
                 [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
         </div>
     </div>
@@ -51,14 +52,14 @@
             </ng-template>
 
             <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
-                    <button [disabled]="iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM,'create' ]"
-                        color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
-                    <button [disabled]="!iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM ]"
-                        mat-stroked-button
-                        [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-                </ng-template>
+
+            <div class="btn-wrapper" *ngIf="(['iam.policy.write$'] | hasRole) as iamWritePolicy$">
+                <button [disabled]="iamPolicy || (iamWritePolicy$ | async) == false"
+                    [routerLink]="[ 'policy', PolicyComponentType.IAM,'create' ]" color="primary"
+                    mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
+                <button [disabled]="!iamPolicy || (iamWritePolicy$ | async) == false"
+                    [routerLink]="[ 'policy', PolicyComponentType.IAM ]" mat-stroked-button
+                    [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
             </div>
         </div>
     </ng-template>
@@ -81,14 +82,13 @@
             </ng-template>
 
             <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <ng-template appHasRole [appHasRole]="['policy.write']">
-                    <button [disabled]="loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN,'create' ]"
-                        color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
-                    <button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
-                        mat-stroked-button
-                        [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-                </ng-template>
+            <div class="btn-wrapper" *ngIf="(['policy.write'] | hasRole) as writePolicy$">
+                <button [disabled]="loginPolicy || (writePolicy$ | async) == false"
+                    [routerLink]="[ 'policy', PolicyComponentType.LOGIN,'create' ]" color="primary"
+                    mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
+                <button [disabled]="!loginPolicy || (writePolicy$ | async) == false"
+                    [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]" mat-stroked-button
+                    [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
             </div>
         </div>
     </ng-template>
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
index 49645bbeef..9225d22d13 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.html
@@ -43,7 +43,7 @@
 
     <app-card title="{{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig">
         <div card-actions *ngIf="app?.oidcConfig?.authMethodType !== OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE">
-            <button mat-stroked-button
+            <button [disabled]="!canWrite" mat-stroked-button
                 (click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
         </div>
 
@@ -109,7 +109,7 @@
 
                 <mat-form-field class="formfield full-width" appearance="outline">
                     <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
-                    <mat-chip-list #chipRedirectList>
+                    <mat-chip-list [disabled]="!canWrite" #chipRedirectList>
                         <mat-chip class="chip" *ngFor="let redirect of redirectUrisList" selected
                             [matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
                             [color]="!redirect.startsWith('https://') ? 'warn': 'green'"
@@ -128,7 +128,7 @@
 
                 <mat-form-field class="formfield full-width" appearance="outline">
                     <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
-                    <mat-chip-list #chipPostRedirectList>
+                    <mat-chip-list [disabled]="!canWrite" #chipPostRedirectList>
                         <mat-chip class="chip" *ngFor="let redirect of postLogoutRedirectUrisList" selected
                             (removed)="remove(redirect, RedirectType.POSTREDIRECT)"
                             [matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
@@ -148,7 +148,7 @@
             </div>
             <div class="btn-container">
 
-                <button class="submit-button" type="submit" color="primary" [disabled]="appForm.invalid"
+                <button class="submit-button" type="submit" color="primary" [disabled]="appForm.invalid || !canWrite"
                     mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
             </div>
         </form>
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
index cf49e13705..4c9e10687d 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
@@ -86,11 +86,16 @@
   }
 
   .toggle {
+    outline: none;
     align-self: flex-start;
     margin-bottom: 1rem;
     margin-right: 1rem;
     border-radius: .5rem;
 
+    * {
+      outline: none;
+    }
+
     i {
       margin-right: 1rem;
     }
diff --git a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
index a8cf22ce6f..fc91c387a8 100644
--- a/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+++ b/console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
@@ -1,13 +1,14 @@
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { Location } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 import {
     Application,
     AppState,
@@ -18,6 +19,7 @@ import {
     OIDCResponseType,
     ZitadelDocs,
 } from 'src/app/proto/generated/management_pb';
+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';
 
@@ -34,6 +36,7 @@ enum RedirectType {
     styleUrls: ['./app-detail.component.scss'],
 })
 export class AppDetailComponent implements OnInit, OnDestroy {
+    public canWrite: boolean = false;
     public errorMessage: string = '';
     public removable: boolean = true;
     public addOnBlur: boolean = true;
@@ -78,8 +81,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
     public OIDCApplicationType: any = OIDCApplicationType;
     public OIDCAuthMethodType: any = OIDCAuthMethodType;
 
-    public redirectControl: FormControl = new FormControl('');
-    public postRedirectControl: FormControl = new FormControl('');
+    public redirectControl: FormControl = new FormControl({ value: '', disabled: true });
+    public postRedirectControl: FormControl = new FormControl({ value: '', disabled: true });
 
 
     constructor(
@@ -90,18 +93,19 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         private _location: Location,
         private dialog: MatDialog,
         private mgmtService: ManagementService,
+        private authService: GrpcAuthService,
     ) {
         this.appNameForm = this.fb.group({
-            state: ['', []],
-            name: ['', [Validators.required]],
+            state: [{ value: '', disabled: true }, []],
+            name: [{ value: '', disabled: true }, [Validators.required]],
         });
         this.appForm = this.fb.group({
-            devMode: [false, []],
+            devMode: [{ value: false, disabled: true }, []],
             clientId: [{ value: '', disabled: true }],
-            responseTypesList: [],
-            grantTypesList: [],
-            applicationType: [],
-            authMethodType: [],
+            responseTypesList: [{ value: [], disabled: true }],
+            grantTypesList: [{ value: [], disabled: true }],
+            applicationType: [{ value: '', disabled: true }],
+            authMethodType: [{ value: '', disabled: true }],
         });
     }
 
@@ -118,36 +122,35 @@ export class AppDetailComponent implements OnInit, OnDestroy {
         this.mgmtService.GetIam().then(iam => {
             this.isZitadel = iam.toObject().iamProjectId === this.projectId;
         });
+        this.authService.isAllowed(['project.app.write$', 'project.app.write:' + id]).pipe(take(1)).subscribe((allowed) => {
+            this.canWrite = allowed;
+            this.mgmtService.GetApplicationById(projectid, id).then(app => {
+                this.app = app.toObject();
+                this.appNameForm.patchValue(this.app);
+                if (allowed) {
+                    this.appNameForm.enable();
+                    this.appForm.enable();
+                    this.redirectControl.enable();
+                    this.postRedirectControl.enable();
+                }
 
-        this.mgmtService.GetApplicationById(projectid, id).then(app => {
-            this.app = app.toObject();
-            this.appNameForm.patchValue(this.app);
-
-            if (this.app.state !== AppState.APPSTATE_ACTIVE) {
-                this.appNameForm.controls['name'].disable();
-                this.appForm.disable();
-            } else {
-                this.appNameForm.controls['name'].enable();
-                this.appForm.enable();
-            }
-            if (this.app.oidcConfig?.redirectUrisList) {
-                this.redirectUrisList = this.app.oidcConfig.redirectUrisList;
-
-                // this.redirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
-            }
-            if (this.app.oidcConfig?.postLogoutRedirectUrisList) {
-                this.postLogoutRedirectUrisList = this.app.oidcConfig.postLogoutRedirectUrisList;
-                // this.postRedirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
-            }
-            if (this.app.oidcConfig) {
-                this.appForm.patchValue(this.app.oidcConfig);
-            }
-        }).catch(error => {
-            console.error(error);
-            this.toast.showError(error);
-            this.errorMessage = error.message;
+                if (this.app.oidcConfig?.redirectUrisList) {
+                    this.redirectUrisList = this.app.oidcConfig.redirectUrisList;
+                }
+                if (this.app.oidcConfig?.postLogoutRedirectUrisList) {
+                    this.postLogoutRedirectUrisList = this.app.oidcConfig.postLogoutRedirectUrisList;
+                }
+                if (this.app.oidcConfig) {
+                    this.appForm.patchValue(this.app.oidcConfig);
+                }
+            }).catch(error => {
+                console.error(error);
+                this.toast.showError(error);
+                this.errorMessage = error.message;
+            });
         });
 
+
         this.docs = (await this.mgmtService.GetZitadelDocs()).toObject();
     }
 
@@ -160,20 +163,11 @@ export class AppDetailComponent implements OnInit, OnDestroy {
             });
         } else if (event.value === AppState.APPSTATE_INACTIVE) {
             this.mgmtService.DeactivateApplication(this.projectId, this.app.id).then(() => {
-                this.toast.showInfo('APP.TOAST.REACTIVATED', true);
+                this.toast.showInfo('APP.TOAST.DEACTIVATED', true);
             }).catch((error: any) => {
                 this.toast.showError(error);
             });
         }
-
-        if (event.value !== AppState.APPSTATE_ACTIVE) {
-            this.appNameForm.controls['name'].disable();
-            this.appForm.disable();
-        } else {
-            this.appNameForm.controls['name'].enable();
-            this.appForm.enable();
-            this.clientId?.disable();
-        }
     }
 
     public add(event: MatChipInputEvent, target: RedirectType): void {
diff --git a/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html b/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
index fd4cc345ef..f35cf23bbb 100644
--- a/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
+++ b/console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
@@ -18,8 +18,8 @@
                 <app-user-grants *ngIf="projectId && grantId" [context]="UserGrantContext.GRANTED_PROJECT"
                     [projectId]="projectId" [grantId]="grantId"
                     [displayedColumns]="['select','user', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
-                    [allowWrite]="['user.grant.write','user.grant.write:'+grantId] | hasRole | async"
-                    [allowDelete]="['user.grant.delete','user.grant.delete:'+grantId] | hasRole | async"
+                    [allowWrite]="['user.grant.write$','user.grant.write:'+grantId] | hasRole | async"
+                    [allowDelete]="['user.grant.delete$','user.grant.delete:'+grantId] | hasRole | async"
                     refreshOnPreviousRoute="/grant-create/project/{{projectId}}/grant/{{grantId}}">
                 </app-user-grants>
             </app-card>
@@ -40,7 +40,7 @@
                     [membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
                     description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"
                     (showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()"
-                    [disabled]="(['project.grant.member.write', 'project.grant.member.write:'+ project.projectId]| hasRole | async) == false">
+                    [disabled]="(['project.grant.member.write$', 'project.grant.member.write:'+ project.projectId]| hasRole | async) == false">
                 </app-contributors>
             </mat-tab>
             <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
index 9c5e88fc88..aa406f0fbd 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
@@ -22,11 +22,11 @@
             <span class="fill-space"></span>
 
             <button mat-stroked-button color="warn"
-                [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
+                [disabled]="isZitadel || (['project.write$', 'project.write:'+ project.projectId]| hasRole | async) == false"
                 *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE"
                 (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
             <button mat-stroked-button color="warn"
-                [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
+                [disabled]="isZitadel || (['project.write$', 'project.write:'+ project.projectId]| hasRole | async) == false"
                 *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE"
                 (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
 
@@ -69,7 +69,7 @@
                     <app-card title="{{ 'PROJECT.GRANT.TITLE' | translate }}"
                         description="{{ 'PROJECT.GRANT.DESCRIPTION' | translate }}">
                         <app-project-grants refreshOnPreviousRoute="/projects/{{projectId}}/grants/create"
-                            [disabled]="((['project.grant.write', 'project.grant.write:'+ project.projectId]| hasRole | async) && (['org.global.read']| hasRole | async))== false"
+                            [disabled]="((['project.grant.write$', 'project.grant.write:'+ project.projectId]| hasRole | async))== false"
                             [projectId]="projectId">
                         </app-project-grants>
                     </app-card>
@@ -79,7 +79,7 @@
                     <app-card title="{{ 'PROJECT.ROLE.TITLE' | translate }}"
                         description="{{ 'PROJECT.ROLE.DESCRIPTION' | translate }}">
                         <app-project-roles
-                            [disabled]="(['project.role.write', 'project.role.write:'+ project.projectId]| hasRole | async) == false"
+                            [disabled]="(['project.role.write$', 'project.role.write:'+ project.projectId]| hasRole | async) == false"
                             [actionsVisible]="true" [projectId]="projectId">
                         </app-project-roles>
                     </app-card>
@@ -90,8 +90,8 @@
                         description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
                         <app-user-grants [context]="UserGrantContext.OWNED_PROJECT" [projectId]="projectId"
                             refreshOnPreviousRoute="/grant-create/project/{{projectId}}"
-                            [allowWrite]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
-                            [allowDelete]="(['user.grant.delete','user.grant.delete:'+projectId] | hasRole) | async">
+                            [allowWrite]="(['user.grant.write$', 'user.grant.write:'+projectId] | hasRole) | async"
+                            [allowDelete]="(['user.grant.delete$','user.grant.delete:'+projectId] | hasRole) | async">
                         </app-user-grants>
                     </app-card>
                 </ng-template>
@@ -113,7 +113,7 @@
                     [membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
                     description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"
                     (showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()"
-                    [disabled]="(['project.member.write', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
+                    [disabled]="(['project.member.write$', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
                 </app-contributors>
             </mat-tab>
             <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
index 496ec019c3..1c111641aa 100644
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
@@ -21,13 +21,13 @@
 
             <ng-container matColumnDef="select">
                 <th class="selection" mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                    <mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
                 <td class="selection" mat-cell *matCellDef="let row">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    <mat-checkbox [disabled]="disabled" color="primary" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                     </mat-checkbox>
                 </td>
diff --git a/console/src/app/pages/users/user-detail/memberships/memberships.component.html b/console/src/app/pages/users/user-detail/memberships/memberships.component.html
index 31a3c666bb..095f4cca09 100644
--- a/console/src/app/pages/users/user-detail/memberships/memberships.component.html
+++ b/console/src/app/pages/users/user-detail/memberships/memberships.component.html
@@ -3,8 +3,7 @@
     <div class="people" *ngIf="memberships">
         <div class="img-list" [@cardAnimation]="memberships.totalResult">
             <mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
-
-            <ng-container *ngIf="memberships.totalResult < 10; else compact">
+            <ng-container *ngIf="memberships.totalResult < 8; else compact">
                 <ng-container *ngFor="let membership of memberships.resultList; index as i">
                     <div @animate class="avatar-circle" (click)="navigateToObject()"
                         matTooltip="{{ membership.displayName }} | {{membership.rolesList?.join(' ')}}"
@@ -25,7 +24,9 @@
             </ng-container>
             <ng-template #compact>
                 <div class="avatar-circle" matTooltip="Click to show detail">
-                    <span>{{memberships.totalResult}}</span>
+                    <div class="membership-avatar">
+                        <span style="font-size: 16px;">{{memberships.totalResult}}</span>
+                    </div>
                 </div>
             </ng-template>
             <button [disabled]="disabled" class="add-img" (click)="addMember()" mat-icon-button
diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
index 10c8455d3e..d61e6af45d 100644
--- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
+++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
@@ -1,4 +1,4 @@
-<app-meta-layout *ngIf="user && (['user.write','user.write:' + user.id] | hasRole) as canWrite$">
+<app-meta-layout *ngIf="user && (['user.write$','user.write:' + user.id] | hasRole) as canWrite$">
     <div class="max-width-container">
         <div class="head">
             <a (click)="navigateBack()" mat-icon-button>
@@ -55,7 +55,7 @@
 
             <app-card *ngIf="user.machine" title="{{ 'USER.MACHINE.TITLE' | translate }}">
                 <app-detail-form-machine
-                    [disabled]="(['user.write:' + user?.id, 'user.write'] | hasRole | async) == false"
+                    [disabled]="(['user.write:' + user?.id, 'user.write$'] | hasRole | async) == false"
                     [username]="user.userName" [user]="user.machine" (submitData)="saveMachine($event)">
                 </app-detail-form-machine>
             </app-card>
@@ -70,7 +70,7 @@
             description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
 
             <app-contact disablePhoneCode="true"
-                [canWrite]="(['user.write:' + user?.id, 'user.write'] | hasRole | async)" *ngIf="user?.human"
+                [canWrite]="(['user.write:' + user?.id, 'user.write$'] | hasRole | async)" *ngIf="user?.human"
                 [human]="user.human" (savedPhone)="savePhone($event)" (savedEmail)="saveEmail($event)"
                 (deletedPhone)="deletePhone()" (resendEmailVerification)="resendEmailVerification()"
                 (resendPhoneVerification)="resendPhoneVerification()">
diff --git a/console/src/app/pages/users/user-list/user-list.component.html b/console/src/app/pages/users/user-list/user-list.component.html
index d8e2f77a77..4565cf8af0 100644
--- a/console/src/app/pages/users/user-list/user-list.component.html
+++ b/console/src/app/pages/users/user-list/user-list.component.html
@@ -3,7 +3,7 @@
         <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
         <p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
 
-        <app-user-table [userType]="UserType.HUMAN" [disabled]="(['user.write'] | hasRole | async) == false">
+        <app-user-table [userType]="UserType.HUMAN" [disabled]="(['user.write$'] | hasRole | async) == false">
         </app-user-table>
     </ng-container>
 
@@ -13,7 +13,7 @@
 
         <app-user-table [userType]="UserType.MACHINE"
             [displayedColumns]="['select','name', 'username', 'description','state', 'actions']"
-            [disabled]="(['user.write'] | hasRole | async) == false">
+            [disabled]="(['user.write$'] | hasRole | async) == false">
         </app-user-table>
     </ng-container>
 </div>
\ No newline at end of file
diff --git a/console/src/app/pages/users/user-list/user-table/user-table.component.html b/console/src/app/pages/users/user-list/user-table/user-table.component.html
index f07927cd33..4a0572e96f 100644
--- a/console/src/app/pages/users/user-list/user-table/user-table.component.html
+++ b/console/src/app/pages/users/user-list/user-table/user-table.component.html
@@ -26,13 +26,13 @@
         <table class="table" mat-table [dataSource]="dataSource">
             <ng-container matColumnDef="select">
                 <th mat-header-cell *matHeaderCellDef class="selection">
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                    <mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
                         [checked]="selection.hasValue() && isAllSelected()"
                         [indeterminate]="selection.hasValue() && !isAllSelected()">
                     </mat-checkbox>
                 </th>
                 <td mat-cell *matCellDef="let user" class="selection">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                    <mat-checkbox [disabled]="disabled" color="primary" (click)="$event.stopPropagation()"
                         (change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
                         <app-avatar
                             *ngIf="user[userType] && user[userType].displayName && user[userType]?.firstName && user[userType]?.lastName; else cog"