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 <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * z-index, new colors * new senf color Co-authored-by: Florian Forster <[email protected]>
2026-11-12 00:55:12 +00:00 · 2020-07-20 15:23:29 +02:00
parent 933193855a
commit 117a0d7b19
57 changed files with 789 additions and 711 deletions
@@ -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"
@@ -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 {
@@ -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)"
@@ -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 {
@@ -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'];

@@ -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 { }
@@ -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([])),
@@ -1,91 +1,84 @@
-<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="spinner-container" *ngIf="dataSource.loading$ | async">
-        <mat-spinner diameter="50"></mat-spinner>
+    <div class="table-wrapper">
+        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
+            <mat-spinner diameter="50"></mat-spinner>
+        </div>
+        <table mat-table multiTemplateDataRows class="full-width-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"
+                        [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()"
+                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="grantedOrgName">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
+                <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
+                    *matCellDef="let grant">
+                    {{grant.grantedOrgName}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="creationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
+                <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
+                    *matCellDef="let grant">
+                    {{grant.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="changeDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
+                <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
+                    *matCellDef="let grant">
+                    {{grant.changeDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
+
+            </ng-container>
+
+            <ng-container matColumnDef="roleNamesList">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
+                <td class="pointer" mat-cell *matCellDef="let grant">
+                    <mat-form-field class="form-field" appearance="outline" *ngIf="grant.roleKeysList">
+                        <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
+                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="disabled"
+                            (selectionChange)="updateRoles(grant, $event)">
+                            <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
+                                {{role.key}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
+            </tr>
+        </table>
+
+        <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"
+            [length]="dataSource.totalResult" (page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
+        </mat-paginator>
    </div>
-    <table mat-table multiTemplateDataRows class="full-width-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"
-                    [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()"
-                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                </mat-checkbox>
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="grantedOrgName">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
-            <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
-                *matCellDef="let grant">
-                {{grant.grantedOrgName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="creationDate">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
-            <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
-                *matCellDef="let grant">
-                {{grant.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="changeDate">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
-            <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
-                *matCellDef="let grant">
-                {{grant.changeDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
-
-        </ng-container>
-
-        <ng-container matColumnDef="roleNamesList">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
-            <td class="pointer" mat-cell *matCellDef="let grant">
-                <mat-form-field class="form-field" appearance="outline" *ngIf="grant.roleKeysList">
-                    <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
-                    <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="disabled"
-                        (selectionChange)="updateRoles(grant, $event)">
-                        <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
-                            {{role.key}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
-        </tr>
-    </table>
-
-    <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-    </mat-paginator>
-</div>
+</app-refresh-table>
@@ -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 {
-      border-radius: .5rem;
-  }
+.rounded-button {
+    border-radius: .5rem;
 }

 .table-wrapper {
@@ -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,
        );
    }

@@ -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>

@@ -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>
@@ -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"
-                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}}">
-                <i class="las la-trash"></i>
-            </button>
-        </div>
-        <p class="row" *ngIf="error">{{error}}</p>
-    </div>
+    <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>
+
+            <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>
+                </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}}">
@@ -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;
+        }
+    }
  }
@@ -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 => {
@@ -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 { }
@@ -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>
@@ -15,4 +15,29 @@
            flex: 1;
        }
    }
+}
+
+.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;
+        }
+    }
 }
@@ -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;
        });
    }
@@ -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,60 +16,61 @@
                <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>
+
+        <div class="table-wrapper">
+            <div class="spinner-container" *ngIf="loading$ | async">
+                <mat-spinner diameter="50"></mat-spinner>
+            </div>
+            <table class="background-style" mat-table [dataSource]="dataSource">
+                <ng-container matColumnDef="select">
+                    <th mat-header-cell *matHeaderCellDef>
+                        <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                            [checked]="selection.hasValue() && isAllSelected()"
+                            [indeterminate]="selection.hasValue() && !isAllSelected()">
+                        </mat-checkbox>
+                    </th>
+                    <td mat-cell *matCellDef="let user">
+                        <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                            (change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
+                            <app-avatar *ngIf="user && user.displayName" class="avatar" [name]="user.displayName"
+                                [size]="32">
+                            </app-avatar>
+                        </mat-checkbox>
+                    </td>
+                </ng-container>
+
+                <ng-container matColumnDef="firstname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="lastname">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="username">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
+                </ng-container>
+
+                <ng-container matColumnDef="email">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.EMAIL' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{user.email}} </td>
+                </ng-container>
+                <ng-container matColumnDef="state">
+                    <th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
+                    <td mat-cell *matCellDef="let user"> {{ 'USER.DATA.STATE'+user.state | translate }} </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>
+            <mat-paginator #paginator class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
+                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
        </div>
-        <table class="background-style" mat-table [dataSource]="dataSource">
-            <ng-container matColumnDef="select">
-                <th mat-header-cell *matHeaderCellDef>
-                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
-                    </mat-checkbox>
-                </th>
-                <td mat-cell *matCellDef="let user">
-                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(user) : null" [checked]="selection.isSelected(user)">
-                        <app-avatar *ngIf="user && user.displayName" class="avatar" [name]="user.displayName"
-                            [size]="32">
-                        </app-avatar>
-                    </mat-checkbox>
-                </td>
-            </ng-container>
-
-            <ng-container matColumnDef="firstname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.FIRSTNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="lastname">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.LASTNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.lastName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="username">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.PROFILE.USERNAME' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.userName}} </td>
-            </ng-container>
-
-            <ng-container matColumnDef="email">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.EMAIL' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{user.email}} </td>
-            </ng-container>
-            <ng-container matColumnDef="state">
-                <th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
-                <td mat-cell *matCellDef="let user"> {{ 'USER.DATA.STATE'+user.state | translate }} </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>
-        <mat-paginator class="background-style" [length]="userResult?.totalResult || 0" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
-    </div>
+    </app-refresh-table>
 </div>
@@ -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 {
-        border-radius: .5rem;
-    }
+.add-button {
+    border-radius: .5rem;
 }

 .table-wrapper {
@@ -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);
+    }
 }
@@ -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,