fix(console): refresh tables, auto refresh emitter, avatar colors (#487)

* refreshtable component * project grant refresh table * project role refresh, user grant, i18n * lint * auth user mfa table * auth mfa table * rm unused 404 page, add mgmt mfa table * change light accent color * add actions to mfa table * user detail mfa table * clear selection on refresh, bind data length * member table * fix padding mfa table * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <florian@caos.ch> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <florian@caos.ch> * z-index, new colors * new senf color Co-authored-by: Florian Forster <florian@caos.ch>
2025-08-12 04:47:33 +00:00 · 2020-07-20 15:23:29 +02:00
parent 933193855a
commit 117a0d7b19
57 changed files with 789 additions and 711 deletions
--- a/console/angular.json
+++ b/console/angular.json
@@ -27,7 +27,6 @@
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
-              "src/404.html"
            ],
            "styles": [
              "src/styles.scss"
--- a/console/src/404.html
+++ b/console/src/404.html
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-
-  <title>caos console</title>
-
-  <script>
-    sessionStorage.redirect = location.href;
-  </script>
-
-  <meta http-equiv="refresh" content="0;URL='/'"></meta>
-</head>
-
-<body>
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-</body>
-
-
-</html>
--- a/console/src/app/app.component.html
+++ b/console/src/app/app.component.html
@@ -47,7 +47,6 @@
                </app-accounts-card>
            </div>
        </mat-toolbar>
-
        <mat-drawer-container class="main-container">
            <mat-drawer #drawer class="sidenav" [mode]="(isHandset$ | async) ? 'over' : 'side'"
                [opened]="!(isHandset$ | async)">
--- a/console/src/app/app.component.ts
+++ b/console/src/app/app.component.ts
@@ -1,7 +1,8 @@
 import { animate, group, query, style, transition, trigger } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
+import { ViewportScroller } from '@angular/common';
+import { Component, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { MatDrawer } from '@angular/material/sidenav';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -138,6 +139,8 @@ export class AppComponent implements OnDestroy {
    private orgSub: Subscription = new Subscription();

    constructor(
+        public viewPortScroller: ViewportScroller,
+        @Inject('windowObject') public window: Window,
        public translate: TranslateService,
        public authService: AuthService,
        private breakpointObserver: BreakpointObserver,
--- a/console/src/app/app.module.ts
+++ b/console/src/app/app.module.ts
@@ -150,6 +150,7 @@ const authConfig: AuthConfig = {
        GrpcService,
        AuthService,
        AuthUserService,
+        { provide: 'windowObject', useValue: window },
    ],
    bootstrap: [AppComponent],
 })
--- a/console/src/app/modules/avatar/avatar.component.html
+++ b/console/src/app/modules/avatar/avatar.component.html
@@ -1,5 +1,5 @@
 <div class="avatar-circle dontcloseonclick"
-    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px', 'background-color': color}"
+    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': (fontSize-1)+'px', 'background-color': color}"
    [ngClass]="{'active': active}">
    {{credentials}}
 </div>
--- a/console/src/app/modules/avatar/avatar.component.ts
+++ b/console/src/app/modules/avatar/avatar.component.ts
@@ -30,22 +30,22 @@ export class AvatarComponent implements OnInit {

    getColor(userName: string): string {
        const colors = [
-            '#e51c23',
-            '#e91e63',
-            '#9c27b0',
-            '#673ab7',
-            '#3f51b5',
-            '#5677fc',
-            '#03a9f4',
-            '#00bcd4',
-            '#009688',
-            '#259b24',
-            '#8bc34a',
-            '#afb42b',
-            '#ff9800',
-            '#ff5722',
-            '#795548',
-            '#607d8b',
+            '#B44D51',
+            '#B75073',
+            '#84498E',
+            '#705998',
+            '#5C6598',
+            '#7F90D3',
+            '#3E93B9',
+            '#3494A0',
+            '#25716A',
+            '#427E41',
+            '#89A568',
+            '#90924D',
+            '#E2B032',
+            '#C97358',
+            '#6D5B54',
+            '#6B7980',
        ];

        let hash = 0;
--- a/console/src/app/modules/project-contributors/project-contributors.component.html
+++ b/console/src/app/modules/project-contributors/project-contributors.component.html
@@ -4,8 +4,8 @@
    <div class="people">
        <div class="img-list">
            <ng-container *ngIf="totalResult < 10; else compact">
-                <ng-container *ngFor="let member of membersSubject | async">
-                    <div (click)="showDetail()" class="avatar-circle"
+                <ng-container *ngFor="let member of membersSubject | async; index as i">
+                    <div (click)="showDetail()" class="avatar-circle" [ngStyle]="{'z-index': 100 - i}"
                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
                        <app-avatar *ngIf="member && member.firstName && member.lastName; else thumbavatar"
                            class="avatar dontcloseonclick" [name]="member.firstName + ' '+ member.lastName"
--- a/console/src/app/modules/project-contributors/project-contributors.component.scss
+++ b/console/src/app/modules/project-contributors/project-contributors.component.scss
@@ -28,18 +28,18 @@
        margin-left: 1rem;
        display: flex;
        align-items: center;
+        transition: all .15s ease-in-out;
  
        .avatar-circle {
+            transition: all .3s ease-in-out;
            float: left;
            margin: 0 8px 0 -15px;
            height: 32px;
            width: 32px;
            border-radius: 50%;
-            &:not(:first-child) {
-                -webkit-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-                -moz-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-                box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-            }
+            -webkit-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
+            -moz-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
+            box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
        }

        .add-img {
--- a/console/src/app/modules/project-members/project-members.component.html
+++ b/console/src/app/modules/project-members/project-members.component.html
@@ -1,5 +1,4 @@
-<div class="max-width-container">
-    <div class="container">
+<div class="container">
    <div class="left">
        <a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
            <mat-icon class="icon">arrow_back</mat-icon>
@@ -11,19 +10,9 @@
            <p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
        </div>

-            <div class="table-header-row" *ngIf="project">
-                <div class="col">
-                    <ng-container *ngIf="!selection.hasValue()">
-                        <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-                        <span class="count">{{dataSource?.membersSubject.value.length}}</span>
-                    </ng-container>
-                    <ng-container *ngIf="selection.hasValue()">
-                        <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-                        <span class="count">{{selection?.selected?.length}}</span>
-                    </ng-container>
-                </div>
-                <span class="fill-space"></span>
-                <ng-template appHasRole
+        <app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
+            [selection]="selection">
+            <ng-template appHasRole actions
                [appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
                <button (click)="removeProjectMemberSelection()" color="warn"
                    matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
@@ -31,14 +20,13 @@
                    <i class="las la-trash"></i>
                </button>
            </ng-template>
-                <ng-template appHasRole
+            <ng-template appHasRole actions
                [appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
-                    <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
-                        color="primary" mat-raised-button>
+                <a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
+                    mat-raised-button>
                    <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
                </a>
            </ng-template>
-            </div>

            <div class="table-wrapper">
                <div class="spinner-container" *ngIf="dataSource?.loading$ | async">
@@ -118,6 +106,6 @@
                    (page)="changePage($event)">
                </mat-paginator>
            </div>
-        </div>
+        </app-refresh-table>
    </div>
 </div>
--- a/console/src/app/modules/project-members/project-members.component.scss
+++ b/console/src/app/modules/project-members/project-members.component.scss
@@ -16,6 +16,7 @@
    .right {
        flex: 1;
        padding-top: 1rem;
+        padding-right: 1rem;

        .head {
            display: flex;
@@ -42,33 +43,12 @@
    }
 }

-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-      display: flex;
-      flex-direction: column;
-      .desc {
-          font-size: .8rem;
-          color: #8795a1;
-      }
-      .count {
-          font-size: 2rem;
-      }
-  }
-
-  .fill-space {
-      flex: 1;
-  }
-
-  .icon-button {
+.icon-button {
    margin-right: .5rem;
-  }
+}

-  .add-button {
+.add-button {
    border-radius: .5rem;
-  }
 }

 .table-wrapper {
--- a/console/src/app/modules/project-members/project-members.component.ts
+++ b/console/src/app/modules/project-members/project-members.component.ts
@@ -170,7 +170,13 @@ export class ProjectMembersComponent {
        }
    }

-    public changePage(event: PageEvent): void {
-        this.dataSource.loadMembers(this.project.projectId, this.projectType, event.pageIndex, event.pageSize, this.grantId);
+    public changePage(event?: PageEvent): void {
+        this.dataSource.loadMembers(
+            this.project.projectId,
+            this.projectType,
+            event?.pageIndex ?? this.paginator.pageIndex,
+            event?.pageSize ?? this.paginator.pageSize,
+            this.grantId,
+        );
    }
 }
--- a/console/src/app/modules/project-members/project-members.module.ts
+++ b/console/src/app/modules/project-members/project-members.module.ts
@@ -5,6 +5,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -17,6 +18,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';

+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
 import { ProjectMembersRoutingModule } from './project-members-routing.module';
 import { ProjectMembersComponent } from './project-members.component';

@@ -43,6 +45,8 @@ import { ProjectMembersComponent } from './project-members.component';
        FormsModule,
        TranslateModule,
        HasRolePipeModule,
+        RefreshTableModule,
+        MatDialogModule,
    ],
 })
 export class ProjectMembersModule { }
--- a/console/src/app/modules/project-roles/project-roles.component.html
+++ b/console/src/app/modules/project-roles/project-roles.component.html
@@ -1,31 +1,20 @@
-<div class="table-header-row" *ngIf="projectId">
-    <div class="col">
-        <ng-container *ngIf="!selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-            <span class="count">{{dataSource?.rolesSubject.value.length}}</span>
-        </ng-container>
-        <ng-container *ngIf="selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-            <span class="count">{{selection?.selected?.length}}</span>
-        </ng-container>
-    </div>
-    <span class="fill-space"></span>
-    <ng-template appHasRole [appHasRole]="['project.role.delete']">
-        <button color="warn" [disabled]="disabled" matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}"
-            class="icon-button" (click)="deleteSelectedRoles()" mat-icon-button
+<app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
+    [selection]="selection">
+    <ng-template appHasRole [appHasRole]="['project.role.delete']" actions>
+        <button color="warn" class="icon-button" [disabled]="disabled"
+            matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}" (click)="deleteSelectedRoles()" mat-icon-button
            *ngIf="selection.hasValue() && actionsVisible">
            <i class="las la-trash"></i>
        </button>
    </ng-template>
-    <ng-template appHasRole [appHasRole]="['project.role.write:' + projectId, 'project.role.write']">
-        <a *ngIf="actionsVisible" [disabled]="disabled" class="add-button"
+    <ng-template appHasRole [appHasRole]="['project.role.write:' + projectId, 'project.role.write']" actions>
+        <a *ngIf="actionsVisible" [disabled]="disabled" class="rounded-button"
            [routerLink]="[ '/projects', projectId, 'roles', 'create']" color="primary" mat-raised-button>
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>
-</div>

-<div class="table-wrapper">
+    <div class="table-wrapper">
        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
            <mat-spinner diameter="50"></mat-spinner>
        </div>
@@ -74,6 +63,8 @@
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

-    <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+        <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50"
+            [pageSizeOptions]="[25, 50, 100, 250]">
        </mat-paginator>
-</div>
+    </div>
+</app-refresh-table>
--- a/console/src/app/modules/project-roles/project-roles.component.scss
+++ b/console/src/app/modules/project-roles/project-roles.component.scss
@@ -1,31 +1,10 @@

-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-      display: flex;
-      flex-direction: column;
-      .desc {
-          font-size: .8rem;
-          color: #8795a1;
-      }
-      .count {
-          font-size: 2rem;
-      }
-  }
-
-  .fill-space {
-      flex: 1;
-  }
-
-  .icon-button {
-      margin-right: .5rem;
-  }
-
-  .add-button {
+.rounded-button {
      border-radius: .5rem;
-  }
+}
+
+.icon-button {
+    margin-right: .5rem;
 }

 .table-wrapper {
--- a/console/src/app/modules/project-roles/project-roles.component.ts
+++ b/console/src/app/modules/project-roles/project-roles.component.ts
@@ -30,10 +30,11 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
    public displayedColumns: string[] = ['select', 'key', 'displayname', 'group', 'creationDate'];

-    constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) { }
+    constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) {
+        this.dataSource = new ProjectRolesDataSource(this.projectService);
+    }

    public ngOnInit(): void {
-        this.dataSource = new ProjectRolesDataSource(this.projectService);
        this.dataSource.loadRoles(this.projectId, 0, 25, 'asc');

        this.selection.changed.subscribe(() => {
@@ -119,4 +120,8 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
            width: '400px',
        });
    }
+
+    public refreshPage(): void {
+        this.dataSource.loadRoles(this.projectId, this.paginator.pageIndex, this.paginator.pageSize);
+    }
 }
--- a/console/src/app/modules/project-roles/project-roles.module.ts
+++ b/console/src/app/modules/project-roles/project-roles.module.ts
@@ -18,6 +18,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';

+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
 import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
 import { ProjectRolesComponent } from './project-roles.component';

@@ -44,6 +45,7 @@ import { ProjectRolesComponent } from './project-roles.component';
        TranslateModule,
        MatMenuModule,
        TimestampToDatePipeModule,
+        RefreshTableModule,
    ],
    exports: [
        ProjectRolesComponent,
--- a/console/src/app/modules/refresh-table/refresh-table.component.html
+++ b/console/src/app/modules/refresh-table/refresh-table.component.html
@@ -0,0 +1,18 @@
+<div class="table-header-row">
+    <div class="col">
+        <ng-container *ngIf="!selection.hasValue()">
+            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+            <span class="count">{{dataSize}}</span>
+        </ng-container>
+        <ng-container *ngIf="selection.hasValue()">
+            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
+            <span class="count">{{selection?.selected?.length}}</span>
+        </ng-container>
+    </div>
+    <span class="fill-space"></span>
+    <button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+        <mat-icon>refresh</mat-icon>
+    </button>
+    <ng-content select="[actions]"></ng-content>
+</div>
+<ng-content></ng-content>
--- a/console/src/app/modules/refresh-table/refresh-table.component.scss
+++ b/console/src/app/modules/refresh-table/refresh-table.component.scss
@@ -0,0 +1,26 @@
+
+.table-header-row {
+    display: flex;
+    align-items: center;
+
+    .col {
+        display: flex;
+        flex-direction: column;
+
+        .desc {
+            font-size: .8rem;
+            color: #8795a1;
+        }
+        .count {
+            font-size: 2rem;
+        }
+    }
+
+    .fill-space {
+        flex: 1;
+    }
+
+    .icon-button {
+        margin-right: .5rem;
+    }
+}
--- a/console/src/app/modules/refresh-table/refresh-table.component.spec.ts
+++ b/console/src/app/modules/refresh-table/refresh-table.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RefreshTableComponent } from './refresh-table.component';
+
+describe('RefreshTableComponent', () => {
+    let component: RefreshTableComponent;
+    let fixture: ComponentFixture<RefreshTableComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [RefreshTableComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RefreshTableComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
--- a/console/src/app/modules/refresh-table/refresh-table.component.ts
+++ b/console/src/app/modules/refresh-table/refresh-table.component.ts
@@ -0,0 +1,46 @@
+import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+const rotate = animation([
+    animate(
+        '{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+        keyframes([
+            style({
+                transform: 'rotate(0deg)',
+            }),
+            style({
+                transform: 'rotate(360deg)',
+            }),
+        ]),
+    ),
+]);
+@Component({
+    selector: 'app-refresh-table',
+    templateUrl: './refresh-table.component.html',
+    styleUrls: ['./refresh-table.component.scss'],
+    animations: [
+        trigger('rotate', [
+            transition('* => *', [useAnimation(rotate, { params: { time: '1s' } })]),
+        ]),
+    ],
+})
+export class RefreshTableComponent implements OnInit {
+    @Input() public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
+    @Input() public dataSize: number = 0;
+    @Input() public emitRefreshAfterTimeoutInMs: number = 0;
+    @Output() public refreshed: EventEmitter<void> = new EventEmitter();
+
+    ngOnInit(): void {
+        if (this.emitRefreshAfterTimeoutInMs) {
+            setTimeout(() => {
+                this.emitRefresh();
+            }, this.emitRefreshAfterTimeoutInMs);
+        }
+    }
+
+    emitRefresh(): void {
+        this.selection.clear();
+        return this.refreshed.emit();
+    }
+}
--- a/console/src/app/modules/refresh-table/refresh-table.module.ts
+++ b/console/src/app/modules/refresh-table/refresh-table.module.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { RefreshTableComponent } from './refresh-table.component';
+
+
+
+@NgModule({
+    declarations: [RefreshTableComponent],
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        TranslateModule,
+        FormsModule,
+        MatTooltipModule,
+    ],
+    exports: [
+        RefreshTableComponent,
+    ],
+})
+export class RefreshTableModule { }
--- a/console/src/app/modules/user-grants/user-grants.component.html
+++ b/console/src/app/modules/user-grants/user-grants.component.html
@@ -1,26 +1,14 @@
-<div class="table-header-row">
-    <div class="col">
-        <ng-container *ngIf="!selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-            <span class="count">{{dataSource.grantsSubject.value.length}}</span>
-        </ng-container>
-        <ng-container *ngIf="selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-            <span class="count">{{selection?.selected?.length}}</span>
-        </ng-container>
-    </div>
-    <span class="fill-space"></span>
-    <button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button
+<app-refresh-table (refreshed)="changePage()" [dataSize]="dataSource.totalResult" [selection]="selection">
+    <button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button actions
        (click)="deleteGrantSelection()" *ngIf="selection.hasValue() && allowDelete">
        <i class="las la-trash"></i>
    </button>
-    <a *ngIf="allowCreate && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}"
+    <a *ngIf="allowCreate && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
        color="primary" class="add-button" color="primary" mat-raised-button [routerLink]="routerLink">
        <mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
    </a>
-</div>

-<div class="table-wrapper">
+    <div class="table-wrapper">
        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
            <mat-spinner diameter="50"></mat-spinner>
        </div>
@@ -36,7 +24,8 @@
                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                        <app-avatar *ngIf="row && (row?.displayName || (row.firstName && row.lastName))" class="avatar"
-                        [name]="row.displayName ? row.displayName : (row.firstName + ' '+ row.lastName)" [size]="32">
+                            [name]="row.displayName ? row.displayName : (row.firstName + ' '+ row.lastName)"
+                            [size]="32">
                        </app-avatar>
                    </mat-checkbox>
                </td>
@@ -71,7 +60,6 @@
                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
                <td class="pointer" mat-cell *matCellDef="let grant">
                    {{grant.changeDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
-
            </ng-container>

            <ng-container matColumnDef="roleNamesList">
@@ -84,25 +72,6 @@
                            *ngFor="let role of grant.roleKeysList">{{ (role.length>8)? (role | slice:0:8)+'..':(role) }}</span>
                    </ng-container>

-                <!-- <ng-container *ngIf="context === UserGrantContext.USER">
-                    <ng-container *ngIf="loadedGrantId !== grant.grantId">
-                        <span class="role app-label" *ngFor="let role of grant.roleKeysList">{{role}}</span>
-                        <button mat-icon-button (click)="getGrantRoleOptions(grant.grantId, grant.projectId)"
-                            matTooltip="{{'ACTIONS.CHANGE' | translate}}">
-                            <i class="las la-edit"></i>
-                        </button>
-                    </ng-container>
-                    <mat-form-field class="form-field" appearance="outline" *ngIf="loadedGrantId === grant.grantId">
-                        <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
-                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
-                            (selectionChange)="updateRoles(grant, $event)">
-                            <mat-option *ngFor="let role of grantRoleOptions" [value]="role">
-                                {{role}}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </ng-container> -->
-
                    <ng-container *ngIf="context === UserGrantContext.OWNED_PROJECT">
                        <ng-container *ngIf="loadedProjectId !== grant.projectId">
                            <span class="role app-label"
@@ -112,7 +81,8 @@
                                <i class="las la-edit"></i>
                            </button>
                        </ng-container>
-                    <mat-form-field class="form-field" appearance="outline" *ngIf="loadedProjectId === grant.projectId">
+                        <mat-form-field class="form-field" appearance="outline"
+                            *ngIf="loadedProjectId === grant.projectId">
                            <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
                            <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
                                (selectionChange)="updateRoles(grant, $event)">
@@ -145,4 +115,5 @@
        <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50" [length]="dataSource.totalResult"
            [pageSizeOptions]="[2, 3, 25, 50, 100, 250]" (page)="changePage($event)">
        </mat-paginator>
-</div>
+    </div>
+</app-refresh-table>
--- a/console/src/app/modules/user-grants/user-grants.component.scss
+++ b/console/src/app/modules/user-grants/user-grants.component.scss
@@ -1,31 +1,6 @@

-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-      display: flex;
-      flex-direction: column;
-      .desc {
-          font-size: .8rem;
-          color: #8795a1;
-      }
-      .count {
-          font-size: 2rem;
-      }
-  }
-
-  .fill-space {
-      flex: 1;
-  }
-
-  .icon-button {
-      margin-right: .5rem;
-  }
-
-  .add-button {
+.add-button {
    border-radius: .5rem;
-  }
 }

 .table-wrapper {
--- a/console/src/app/modules/user-grants/user-grants.component.ts
+++ b/console/src/app/modules/user-grants/user-grants.component.ts
@@ -176,11 +176,16 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
        });
    }

-    public changePage(event: PageEvent): void {
-        this.dataSource.loadGrants(this.context, event.pageIndex, event.pageSize, {
+    public changePage(event?: PageEvent): void {
+        this.dataSource.loadGrants(
+            this.context,
+            event?.pageIndex ?? this.paginator.pageIndex,
+            event?.pageSize ?? this.paginator.pageSize,
+            {
                projectId: this.projectId,
                grantId: this.grantId,
                userId: this.userId,
-        });
+            },
+        );
    }
 }
--- a/console/src/app/modules/user-grants/user-grants.module.ts
+++ b/console/src/app/modules/user-grants/user-grants.module.ts
@@ -17,6 +17,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module';

 import { AvatarModule } from '../avatar/avatar.module';
+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
 import { UserGrantsComponent } from './user-grants.component';


@@ -41,6 +42,7 @@ import { UserGrantsComponent } from './user-grants.component';
        TranslateModule,
        HasRolePipeModule,
        TimestampToDatePipeModule,
+        RefreshTableModule,
    ],
    exports: [
        UserGrantsComponent,
--- a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html
+++ b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html
@@ -4,8 +4,8 @@
    <div class="people">
        <div class="img-list">
            <ng-container *ngIf="totalResult < 10; else compact">
-                <ng-container *ngFor="let member of membersSubject | async">
-                    <div (click)="showDetail()" class="avatar-circle"
+                <ng-container *ngFor="let member of membersSubject | async; index as i">
+                    <div (click)="showDetail()" class="avatar-circle" [ngStyle]="{'z-index': 100 - i}"
                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
                            class="avatar dontcloseonclick"
--- a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss
+++ b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss
@@ -35,11 +35,9 @@
            height: 32px;
            width: 32px;
            border-radius: 50%;
-            &:not(:first-child) {
-                -webkit-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-                -moz-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-                box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-            }
+            -webkit-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
+            -moz-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
+            box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
        }

        .add-img {
--- a/console/src/app/pages/orgs/org-contributors/org-contributors.component.html
+++ b/console/src/app/pages/orgs/org-contributors/org-contributors.component.html
@@ -4,9 +4,10 @@
    <div class="people">
        <div class="img-list">
            <ng-container *ngIf="totalResult < 10; else compact">
-                <ng-container *ngFor="let member of membersSubject | async">
+                <ng-container *ngFor="let member of membersSubject | async; index as i">
                    <div (click)="showDetail()" class="avatar-circle"
-                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
+                        matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}"
+                        [ngStyle]="{'z-index': 100 - i}">
                        <app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
                            class="avatar dontcloseonclick"
                            [name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
--- a/console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
+++ b/console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
@@ -29,17 +29,15 @@
        display: flex;
        align-items: center;
  
-        .avatar-img, .avatar-circle {
+        .avatar-circle {
          float: left;
          margin: 0 8px 0 -15px;
          height: 32px;
          width: 32px;
          border-radius: 50%;
-          &:not(:first-child) {
-            -webkit-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-            -moz-box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-            box-shadow: -9px 0px 20px -6px rgba(0,0,0,0.75);
-            }
+          -webkit-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
+          -moz-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
+          box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
        }

        .add-img {
--- a/console/src/app/pages/orgs/org-contributors/org-contributors.component.ts
+++ b/console/src/app/pages/orgs/org-contributors/org-contributors.component.ts
@@ -5,7 +5,7 @@ import { MatTable } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
-import { Org, OrgMember, OrgMemberView, OrgState, User } from 'src/app/proto/generated/management_pb';
+import { Org, OrgMemberView, OrgState, User } from 'src/app/proto/generated/management_pb';
 import { OrgService } from 'src/app/services/org.service';
 import { ToastService } from 'src/app/services/toast.service';

@@ -23,7 +23,7 @@ export class OrgContributorsComponent implements OnInit {
    @Input() public org!: Org.AsObject;
    @Input() public disabled: boolean = false;
    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<OrgMember.AsObject>;
+    @ViewChild(MatTable) public table!: MatTable<OrgMemberView.AsObject>;
    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
    public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];

--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts
@@ -17,6 +17,7 @@ import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { ProjectContributorsModule } from 'src/app/modules/project-contributors/project-contributors.module';
 import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@@ -59,6 +60,7 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
        MatProgressSpinnerModule,
        ChangesModule,
        MetaLayoutModule,
+        RefreshTableModule,
    ],
 })
 export class OwnedProjectDetailModule { }
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts
@@ -10,6 +10,7 @@ import { ProjectService } from 'src/app/services/project.service';
 * (including sorting, pagination, and filtering).
 */
 export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
+    public totalResult: number = 0;
    public grantsSubject: BehaviorSubject<ProjectGrant.AsObject[]> = new BehaviorSubject<ProjectGrant.AsObject[]>([]);
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -24,6 +25,7 @@ export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
        this.loadingSubject.next(true);
        from(this.projectService.SearchProjectGrants(projectId, pageSize, offset)).pipe(
            map(resp => {
+                this.totalResult = resp.toObject().totalResult;
                return resp.toObject().resultList;
            }),
            catchError(() => of([])),
--- 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
@@ -1,30 +1,21 @@
-<div class="table-header-row" *ngIf="projectId">
-    <div class="col">
-        <ng-container *ngIf="!selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-            <span class="count">{{dataSource.grantsSubject.value.length}}</span>
-        </ng-container>
-        <ng-container *ngIf="selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-            <span class="count">{{selection?.selected?.length}}</span>
-        </ng-container>
-    </div>
-    <span class="fill-space"></span>
-    <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']">
-        <button (click)="deleteSelectedGrants()" [disabled]="disabled" class="icon-button" mat-icon-button
-            *ngIf="selection.hasValue()" color="warn">
+<app-refresh-table *ngIf="projectId" (refreshed)="loadGrantsPage()" [dataSize]="dataSource.totalResult"
+    [selection]="selection">
+    <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']"
+        actions>
+        <button (click)="deleteSelectedGrants()" [disabled]="disabled" mat-icon-button *ngIf="selection.hasValue()"
+            color="warn">
            <i class="las la-trash"></i>
        </button>
    </ng-template>
-    <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']">
-        <a [disabled]="disabled" color="primary" class="add-button" color="primary" mat-raised-button
+    <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
+        actions>
+        <a [disabled]="disabled" color="primary" class="rounded-button" color="primary" mat-raised-button
            [routerLink]="[ '/projects', projectId, 'grants', 'create']">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>
-</div>

-<div class="table-wrapper">
+    <div class="table-wrapper">
        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
            <mat-spinner diameter="50"></mat-spinner>
        </div>
@@ -86,6 +77,8 @@
            </tr>
        </table>

-    <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+        <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"
+            [length]="dataSource.totalResult" (page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
        </mat-paginator>
-</div>
+    </div>
+</app-refresh-table>
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss
@@ -1,30 +1,5 @@
-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-      display: flex;
-      flex-direction: column;
-      .desc {
-          font-size: .8rem;
-          color: #8795a1;
-      }
-      .count {
-          font-size: 2rem;
-      }
-  }
-
-  .fill-space {
-      flex: 1;
-  }
-
-  .icon-button {
-      margin-right: .5rem;
-  }
-
-  .add-button {
+.rounded-button {
    border-radius: .5rem;
-  }
 }

 .table-wrapper {
--- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.ts
+++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.ts
@@ -52,11 +52,11 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {

    }

-    private loadGrantsPage(): void {
+    public loadGrantsPage(pageIndex?: number, pageSize?: number): void {
        this.dataSource.loadGrants(
            this.projectId,
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
+            pageIndex ?? this.paginator.pageIndex,
+            pageSize ?? this.paginator.pageSize,
        );
    }

--- a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
+++ b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
@@ -29,7 +29,7 @@
        </div>
        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
            mat-icon-button>
-            <mat-icon>push_pin_outline</mat-icon>
+            <mat-icon>push_pin</mat-icon>
        </button>
    </div>

@@ -57,7 +57,7 @@
        </div>
        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
            mat-icon-button>
-            <mat-icon>push_pin_outline</mat-icon>
+            <mat-icon>push_pin</mat-icon>
        </button>
    </div>

--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
@@ -126,7 +126,7 @@
            </div>
        </app-card>

-        <app-auth-user-mfa *ngIf="user"></app-auth-user-mfa>
+        <app-auth-user-mfa *ngIf="user" #mfaComponent></app-auth-user-mfa>
    </div>

    <div *ngIf="user" class="side" metainfo>
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
@@ -1,19 +1,37 @@
 <app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
-    <div class="col">
-        <div class="row" *ngFor="let mfa of mfaSubject | async">
-            <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
-            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}" *ngIf="mfa.state === MFAState.MFASTATE_READY"
+    <app-refresh-table (refreshed)="getOTP()" [dataSize]="dataSource?.data?.length">
+        <table class="background-style" mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="type">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa"> {{'USER.MFA.TYPE.'+ mfa.type | translate}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="state">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLESTATE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa"><span class="centered">
+                        {{'USER.MFA.STATE.'+ mfa.state | translate}}
+                        <i matTooltip="verified" *ngIf="mfa.state === MFAState.MFASTATE_READY"
                            class="verified las la-check-circle"></i>
-            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}"
-                *ngIf="mfa.state === MFAState.MFASTATE_NOT_READY || mfa.state === MFAState.MFASTATE_REMOVED"
-                class="primary las la-ban"></i>
-            <button mat-icon-button (click)="deleteMFA(mfa.type)" color="warn"
-                matTooltip="{{'ACTIONS.DELETE' | translate}}">
+                    </span>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLEACTIONS' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa">
+                    <button matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" mat-icon-button
+                        (click)="deleteMFA(mfa.type)">
                        <i class="las la-trash"></i>
                    </button>
-        </div>
-        <p class="row" *ngIf="error">{{error}}</p>
-    </div>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                [routerLink]="['/users', row.id]">
+            </tr>
+        </table>
+    </app-refresh-table>
    <div class="add-row">
        <button *ngIf="otpAvailable" (click)="addOTP()" mat-stroked-button color="primary"
            matTooltip="{{'ACTIONS.NEW' | translate}}">
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
@@ -1,22 +1,4 @@

-.col {
-    display: flex;
-    flex-direction: column;
-    border-bottom: 1px solid #ffffff20;
-    margin-bottom: 1rem;
-
-    .row {
-        display: flex;
-        justify-content: space-between;
-        padding: .5rem 0;
-        align-items: center;
-
-        span {
-            flex: 1;
-        }
-    }
-}
-
  .add-row {
      display: flex;
      margin: -.5rem;
@@ -24,9 +6,35 @@
      button {
          border-radius: .5rem;
          margin: .5rem;
+          margin-top: 1rem;

          mat-icon {
              margin-right: .5rem;
          }
      }
  }
+
+  .centered {
+      display: flex;
+      align-items: center;
+
+      i {
+          margin-left: 1rem;
+          color: #5282c1;
+      }
+  }
+
+  table {
+    width: 100%;
+
+    td, th {
+        &:first-child {
+            padding-left: 0;
+            padding-right: 1rem;
+        }
+
+        &:last-child {
+            padding-right: 0;
+        }
+    }
+  }
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
@@ -1,5 +1,7 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { MfaOtpResponse, MFAState, MfaType, MultiFactor } from 'src/app/proto/generated/auth_pb';
 import { AuthUserService } from 'src/app/services/auth-user.service';
@@ -13,28 +15,31 @@ import { DialogOtpComponent } from '../dialog-otp/dialog-otp.component';
    styleUrls: ['./auth-user-mfa.component.scss'],
 })
 export class AuthUserMfaComponent implements OnInit, OnDestroy {
-    public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
+    public displayedColumns: string[] = ['type', 'state', 'actions'];
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();

+    @ViewChild(MatTable) public table!: MatTable<MultiFactor.AsObject>;
+    @ViewChild(MatSort) public sort!: MatSort;
+    public dataSource!: MatTableDataSource<MultiFactor.AsObject>;
+
    public MfaType: any = MfaType;
    public MFAState: any = MFAState;

    public error: string = '';
    public otpAvailable: boolean = false;
-    constructor(private userService: AuthUserService, private toast: ToastService, private dialog: MatDialog) { }
+    constructor(private service: AuthUserService, private toast: ToastService, private dialog: MatDialog) { }

    public ngOnInit(): void {
        this.getOTP();
    }

    public ngOnDestroy(): void {
-        this.mfaSubject.complete();
        this.loadingSubject.complete();
    }

    public addOTP(): void {
-        this.userService.AddMfaOTP().then((otpresp) => {
+        this.service.AddMfaOTP().then((otpresp) => {
            const otp: MfaOtpResponse.AsObject = otpresp.toObject();
            const dialogRef = this.dialog.open(DialogOtpComponent, {
                data: otp.url,
@@ -43,7 +48,7 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {

            dialogRef.afterClosed().subscribe((code) => {
                if (code) {
-                    this.userService.VerifyMfaOTP(code).then((res) => {
+                    (this.service as AuthUserService).VerifyMfaOTP(code).then(() => {
                        // TODO: show state
                    });
                }
@@ -54,28 +59,28 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
    }

    public getOTP(): void {
-        this.userService.GetMyMfas().then(mfas => {
-            this.mfaSubject.next(mfas.toObject().mfasList);
+        this.service.GetMyMfas().then(mfas => {
+            console.log(mfas.toObject().mfasList);
+            this.dataSource = new MatTableDataSource(mfas.toObject().mfasList);
+            this.dataSource.sort = this.sort;
+
            const index = mfas.toObject().mfasList.findIndex(mfa => mfa.type === MfaType.MFATYPE_OTP);
            if (index === -1) {
                this.otpAvailable = true;
            }
        }).catch(error => {
-            console.error(error);
            this.error = error.message;
        });
    }

    public deleteMFA(type: MfaType): void {
        if (type === MfaType.MFATYPE_OTP) {
-            this.userService.RemoveMfaOTP().then(() => {
+            this.service.RemoveMfaOTP().then(() => {
                this.toast.showInfo('USER.TOAST.OTPREMOVED', true);

-                const index = this.mfaSubject.value.findIndex(mfa => mfa.type === type);
+                const index = this.dataSource.data.findIndex(mfa => mfa.type === type);
                if (index > -1) {
-                    const newValues = this.mfaSubject.value;
-                    newValues.splice(index, 1);
-                    this.mfaSubject.next(newValues);
+                    this.dataSource.data.splice(index, 1);
                }

            }).catch(error => {
--- a/console/src/app/pages/users/user-detail/user-detail.module.ts
+++ b/console/src/app/pages/users/user-detail/user-detail.module.ts
@@ -17,6 +17,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@@ -68,6 +69,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
        MatTableModule,
        MatPaginatorModule,
        SharedModule,
+        RefreshTableModule,
    ],
 })
 export class UserDetailModule { }
--- a/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html
+++ b/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html
@@ -1,12 +1,28 @@
-<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}"
-    *ngIf="mfaSubject && (mfaSubject | async)?.length > 0">
-    <div class="col">
-        <div class="row" *ngFor="let mfa of mfaSubject | async">
-            <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
-            <span>{{'USER.MFA.STATE.'+ mfa.state | translate}}</span>
-        </div>
-        <p class="row" *ngIf="error">{{error}}</p>
-    </div>
+<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
+    <app-refresh-table (refreshed)="getOTP()" [dataSize]="dataSource?.data?.length">
+        <table class="background-style" mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="type">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa"> {{'USER.MFA.TYPE.'+ mfa.type | translate}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="state">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLESTATE' | translate }} </th>
+                <td mat-cell *matCellDef="let mfa">
+                    <span class="centered">
+                        {{'USER.MFA.STATE.'+ mfa.state | translate}}
+                        <i matTooltip="verified" *ngIf="mfa.state === MFAState.MFASTATE_READY"
+                            class="verified las la-check-circle"></i>
+                    </span>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
+                [routerLink]="['/users', row.id]">
+            </tr>
+        </table>
+    </app-refresh-table>
    <div class="table-wrapper">
        <div class="spinner-container" *ngIf="loading$ | async">
            <mat-spinner diameter="50"></mat-spinner>
--- a/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.scss
+++ b/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.scss
@@ -16,3 +16,28 @@
        }
    }
 }
+
+.centered {
+    display: flex;
+    align-items: center;
+
+    i {
+        margin-left: 1rem;
+        color: #5282c1;
+    }
+}
+
+table {
+    width: 100%;
+
+    td, th {
+        &:first-child {
+            padding-left: 0;
+            padding-right: 1rem;
+        }
+
+        &:last-child {
+            padding-right: 0;
+        }
+    }
+}
--- a/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts
+++ b/console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.ts
@@ -1,4 +1,6 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { MFAState, MfaType, MultiFactor, UserView } from 'src/app/proto/generated/management_pb';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
@@ -15,11 +17,16 @@ export interface MFAItem {
    styleUrls: ['./user-mfa.component.scss'],
 })
 export class UserMfaComponent implements OnInit, OnDestroy {
+    public displayedColumns: string[] = ['type', 'state'];
    @Input() private user!: UserView.AsObject;
    public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();

+    @ViewChild(MatTable) public table!: MatTable<MultiFactor.AsObject>;
+    @ViewChild(MatSort) public sort!: MatSort;
+    public dataSource!: MatTableDataSource<MultiFactor.AsObject>;
+
    public MfaType: any = MfaType;
    public MFAState: any = MFAState;

@@ -37,10 +44,10 @@ export class UserMfaComponent implements OnInit, OnDestroy {

    public getOTP(): void {
        this.mgmtUserService.getUserMfas(this.user.id).then(mfas => {
-            this.mfaSubject.next(mfas.toObject().mfasList);
-            this.error = '';
+            console.log(mfas.toObject().mfasList);
+            this.dataSource = new MatTableDataSource(mfas.toObject().mfasList);
+            this.dataSource.sort = this.sort;
        }).catch(error => {
-            console.error(error);
            this.error = error.message;
        });
    }
--- a/console/src/app/pages/users/user-list/user-list.component.html
+++ b/console/src/app/pages/users/user-list/user-list.component.html
@@ -2,19 +2,8 @@
    <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
    <p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>

-    <div class="table-header-row">
-        <div class="col">
-            <ng-container *ngIf="!selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-                <span class="count">{{dataSource?.data?.length}}</span>
-            </ng-container>
-            <ng-container *ngIf="selection.hasValue()">
-                <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-                <span class="count">{{selection?.selected?.length}}</span>
-            </ng-container>
-        </div>
-        <span class="fill-space"></span>
-        <ng-template appHasRole [appHasRole]="['user.write']">
+    <app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.data.length">
+        <ng-template appHasRole [appHasRole]="['user.write']" actions>
            <button (click)="deactivateSelectedUsers()" matTooltip="{{'ORG_DETAIL.TABLE.DEACTIVATE' | translate}}"
                class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
                <mat-icon svgIcon="mdi_account_cancel"></mat-icon>
@@ -27,7 +16,7 @@
                <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
            </a>
        </ng-template>
-    </div>
+
        <div class="table-wrapper">
            <div class="spinner-container" *ngIf="loading$ | async">
                <mat-spinner diameter="50"></mat-spinner>
@@ -80,7 +69,8 @@
                </tr>

            </table>
-        <mat-paginator class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
+            <mat-paginator #paginator class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
        </div>
+    </app-refresh-table>
 </div>
--- a/console/src/app/pages/users/user-list/user-list.component.scss
+++ b/console/src/app/pages/users/user-list/user-list.component.scss
@@ -7,34 +7,8 @@ h1 {
    margin-bottom: 2rem;
 }

-.table-header-row {
-    display: flex;
-    align-items: center;
-
-    .col {
-        display: flex;
-        flex-direction: column;
-
-        .desc {
-            font-size: .8rem;
-            color: #8795a1;
-        }
-        .count {
-            font-size: 2rem;
-        }
-    }
-
-    .fill-space {
-        flex: 1;
-    }
-
-    .icon-button {
-        margin-right: .5rem;
-    }
-
-    .add-button {
+.add-button {
    border-radius: .5rem;
-    }
 }

 .table-wrapper {
--- a/console/src/app/pages/users/user-list/user-list.component.ts
+++ b/console/src/app/pages/users/user-list/user-list.component.ts
@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { PageEvent } from '@angular/material/paginator';
+import { Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -15,6 +15,7 @@ import { ToastService } from 'src/app/services/toast.service';
    styleUrls: ['./user-list.component.scss'],
 })
 export class UserListComponent implements OnDestroy {
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
    public dataSource: MatTableDataSource<User.AsObject> = new MatTableDataSource<User.AsObject>();
    public userResult!: UserSearchResponse.AsObject;
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
@@ -83,4 +84,8 @@ export class UserListComponent implements OnDestroy {
            this.loadingSubject.next(false);
        });
    }
+
+    public refreshPage(): void {
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
 }
--- a/console/src/app/pages/users/user-list/user-list.module.ts
+++ b/console/src/app/pages/users/user-list/user-list.module.ts
@@ -13,13 +13,13 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { CardModule } from 'src/app/modules/card/card.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';

 import { UserListRoutingModule } from './user-list-routing.module';
 import { UserListComponent } from './user-list.component';


-
@NgModule({
    declarations: [
        UserListComponent,
@@ -41,6 +41,7 @@ import { UserListComponent } from './user-list.component';
        MatTooltipModule,
        TranslateModule,
        SharedModule,
+        RefreshTableModule,
    ],
    exports: [
        UserListComponent,
--- a/console/src/app/services/grpc.service.ts
+++ b/console/src/app/services/grpc.service.ts
@@ -1,6 +1,6 @@
+import { PlatformLocation } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { PlatformLocation } from '@angular/common';

 import { AdminServicePromiseClient } from '../proto/generated/admin_grpc_web_pb';
 import { AuthServicePromiseClient } from '../proto/generated/auth_grpc_web_pb';
@@ -28,7 +28,10 @@ export class GrpcService {
    public async loadAppEnvironment(): Promise<any> {
        return this.http.get('./assets/environment.json')
            .toPromise().then((data: any) => {
+                console.log('init grpc');
+
                if (data && data.authServiceUrl && data.mgmtServiceUrl && data.issuer) {
+                    console.log('init grpc promiseclients');
                    this.auth = new AuthServicePromiseClient(data.authServiceUrl);
                    this.mgmt = new ManagementServicePromiseClient(data.mgmtServiceUrl);
                    this.admin = new AdminServicePromiseClient(data.adminServiceUrl);
--- a/console/src/app/services/mgmt-user.service.ts
+++ b/console/src/app/services/mgmt-user.service.ts
@@ -217,23 +217,6 @@ export class MgmtUserService {
        );
    }

-    // public async CreateUserGrant(
-    //     projectId: string,
-    //     userId: string,
-    //     roleNamesList: string[],
-    // ): Promise<UserGrant> {
-    //     const req = new UserGrantCreate();
-    //     req.setProjectId(projectId);
-    //     req.setUserId(userId);
-    //     req.setRoleKeysList(roleNamesList);
-
-    //     return await this.request(
-    //         c => c.createUserGrant,
-    //         req,
-    //         f => f,
-    //     );
-    // }
-
    public async CreateProjectUserGrant(
        projectId: string,
        userId: string,
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@@ -50,7 +50,8 @@
        "FINISH":"Abschliessen",
        "CHANGE":"Ändern",
        "REACTIVATE":"Aktivieren",
-        "DEACTIVATE":"Deaktivieren"
+        "DEACTIVATE":"Deaktivieren",
+        "REFRESH":"Aktualisieren"
    },
    "ERRORS": {
        "REQUIRED": "Bitte fülle alle benötigten Felder aus!"
@@ -74,6 +75,9 @@
            "DEACTIVATE":"Deaktivieren"
        },
        "MFA": {
+            "TABLETYPE":"Typ",
+            "TABLESTATE":"Status",
+            "TABLEACTIONS":"Aktionen",
            "TITLE": "Multifaktor-Authentifizierung",
            "DESCRIPTION": "Füge einen zusätzlichen Faktor hinzu, um deinen Account optimal zu schützen.",
            "MANAGE_DESCRIPTION": "Verwalte die Multifaktor Merkmale deiner Benutzer.",
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@@ -49,8 +49,9 @@
        "VERIFY":"Verify",
        "FINISH":"Finish",
        "CHANGE":"Change",
-        "REACTIVATE":"Aktivieren",
-        "DEACTIVATE":"Deaktivieren"
+        "REACTIVATE":"Reactivate",
+        "DEACTIVATE":"Deactivate",
+        "REFRESH":"Refresh"
    },
    "ERRORS": {
        "REQUIRED": "Some required fields are missing!"
@@ -74,6 +75,9 @@
            "DEACTIVATE":"Deactivate"
        },
        "MFA": {
+            "TABLETYPE":"Type",
+            "TABLESTATE":"Status",
+            "TABLEACTIONS":"Actions",
            "TITLE": "Multifactor Authentication",
            "DESCRIPTION": "Add a second factor to ensure optimal security for your account.",
            "MANAGE_DESCRIPTION": "Manage the second factor methods of your users.",
--- a/console/src/index.html
+++ b/console/src/index.html
@@ -9,7 +9,7 @@
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Manjari|Roboto+Slab&amp;display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <link rel="stylesheet"
        href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@@ -91,16 +91,49 @@ $caos-light-brand: (
        A700: white,
    )
 );
+
+$caos-accent-color: (
+    50: #ebf4f2,
+    100: #cce3de,
+    200: #abd1c9,
+    300: #89bfb3,
+    400: #6fb1a2,
+    500: #56a392,
+    600: #4f9b8a,
+    700: #45917f,
+    800: #3c8875,
+    900: #2b7763,
+    A100: #beffed,
+    A200: #8bffde,
+    A400: #58ffd0,
+    A700: #3effc9,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: white,
+        600: white,
+        700: white,
+        800: white,
+        900: white,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: $black-87-opacity,
+        A700: white,
+    )
+);
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/

 $light-primary: mat-palette($caos-light-brand);
-$light-accent: mat-palette($mat-pink);
+$light-accent:mat-palette($caos-accent-color);
 $light-warn: mat-palette($mat-red);

 $dark-primary: mat-palette($caos-dark-brand);
-$dark-accent: mat-palette($mat-pink, 500, 700, A700);
+$dark-accent: mat-palette($mat-pink);
 $dark-warn: mat-palette($mat-red);

 $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
@@ -140,8 +173,9 @@ $custom-typography: mat-typography-config(
    }

    ::-webkit-scrollbar-thumb {
-        background-color: #5282c1;
+        background-color: #737C8850;
        border-radius: 8px;
+        cursor: pointer;
    }
 }

@@ -172,8 +206,9 @@ $custom-typography: mat-typography-config(
    }

    ::-webkit-scrollbar-thumb {
-        background-color: #5282c1;
+        background-color: #737C8870;
        border-radius: 8px;
+        cursor: pointer;
    }
 }

--- a/console/src/styles/sidenav-list.scss
+++ b/console/src/styles/sidenav-list.scss
@@ -48,9 +48,9 @@
    }

    .root-header {
-        @include mat-elevation(3);
-        background: $primary-dark !important;
-        transition: background .5s ease-in-out;
+        box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+        background-color: $primary-dark !important;
+        transition: background-color .5s ease-in-out;
    }

    .admin-line {