feat(console): show and clear admin views, fix iam member (#334)

* gen auth, get my user changes * iam view * use table for admin views * fix pagination for views * fix themeing transition * transition * lint
2025-02-28 22:27:23 +00:00 · 2020-07-02 17:16:47 +02:00 · 2020-07-02 17:16:47 +02:00 · c8e2db3287
commit c8e2db3287
parent 5b17b2641a
30 changed files with 1293 additions and 49 deletions
--- a/console/src/app/modules/changes/changes.component.ts
+++ b/console/src/app/modules/changes/changes.component.ts
@ -2,9 +2,11 @@ import { Component, Input, OnInit } from '@angular/core';
 import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, scan, take, tap } from 'rxjs/operators';
 import { Change, Changes } from 'src/app/proto/generated/management_pb';
+import { AuthUserService } from 'src/app/services/auth-user.service';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';

 export enum ChangeType {
+    MYUSER = 'myuser',
    USER = 'user',
    ORG = 'org',
    PROJECT = 'project',
@ -30,7 +32,7 @@ export class ChangesComponent implements OnInit {
    loading: Observable<boolean> = this._loading.asObservable();
    public data!: Observable<Change.AsObject[]>;
    public changes!: Changes.AsObject;
-    constructor(private mgmtUserService: MgmtUserService) { }
+    constructor(private mgmtUserService: MgmtUserService, private authUserService: AuthUserService) { }

    ngOnInit(): void {
        this.init();
@ -45,6 +47,8 @@ export class ChangesComponent implements OnInit {
    private init(): void {
        let first: Promise<Changes>;
        switch (this.changeType) {
+            case ChangeType.MYUSER: first = this.authUserService.GetMyUserChanges(10, 0);
+                break;
            case ChangeType.USER: first = this.mgmtUserService.UserChanges(this.id, 10, 0);
                break;
            case ChangeType.PROJECT: first = this.mgmtUserService.ProjectChanges(this.id, 20, 0);
@ -68,6 +72,8 @@ export class ChangesComponent implements OnInit {
        let more: Promise<Changes>;

        switch (this.changeType) {
+            case ChangeType.MYUSER: more = this.authUserService.GetMyUserChanges(10, cursor);
+                break;
            case ChangeType.USER: more = this.mgmtUserService.UserChanges(this.id, 10, cursor);
                break;
            case ChangeType.PROJECT: more = this.mgmtUserService.ProjectChanges(this.id, 10, cursor);
--- a/console/src/app/pages/iam/iam-members/iam-members.component.html
+++ b/console/src/app/pages/iam/iam-members/iam-members.component.html
@ -5,7 +5,7 @@
            <p class="desc">{{ 'IAM.MEMBER.DESCRIPTION' | translate }}</p>
        </div>

-        <div class="table-header-row" *ngIf="org">
+        <div class="table-header-row">
            <div class="col">
                <ng-container *ngIf="!selection.hasValue()">
                    <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
@ -17,13 +17,14 @@
                </ng-container>
            </div>
            <span class="fill-space"></span>
-            <ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
-                <button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
-                    class="icon-button" mat-icon-button *ngIf="selection.hasValue()">
+            <ng-template appHasRole [appHasRole]="['iam.member.delete']">
+                <button color="warn" (click)="removeProjectMemberSelection()"
+                    matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
+                    *ngIf="selection.hasValue()">
                    <i class="las la-trash"></i>
                </button>
            </ng-template>
-            <ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
+            <ng-template appHasRole [appHasRole]="['org.member.write']">
                <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/console/src/app/pages/iam/iam-members/iam-members.component.ts
+++ b/console/src/app/pages/iam/iam-members/iam-members.component.ts
@ -5,7 +5,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
 import { tap } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
-import { Org, ProjectMember, ProjectType, User } from 'src/app/proto/generated/management_pb';
+import { ProjectMember, ProjectType, User } from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ToastService } from 'src/app/services/toast.service';

@ -17,7 +17,6 @@ import { IamMembersDataSource } from './iam-members-datasource';
    styleUrls: ['./iam-members.component.scss'],
 })
 export class IamMembersComponent implements AfterViewInit {
-    public org!: Org.AsObject;
    public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
    public disabled: boolean = false;
    @ViewChild(MatPaginator) public paginator!: MatPaginator;
--- a/console/src/app/pages/iam/iam-members/iam-members.module.ts
+++ b/console/src/app/pages/iam/iam-members/iam-members.module.ts
@ -12,6 +12,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';

 import { IamMembersRoutingModule } from './iam-members-routing.module';
 import { IamMembersComponent } from './iam-members.component';
@ -24,6 +25,7 @@ import { IamMembersComponent } from './iam-members.component';
        CommonModule,
        MatAutocompleteModule,
        MatChipsModule,
+        HasRoleModule,
        MatButtonModule,
        MatCheckboxModule,
        MatIconModule,
--- a/console/src/app/pages/iam/iam-views/iam-views.component.html
+++ b/console/src/app/pages/iam/iam-views/iam-views.component.html
@ -0,0 +1,46 @@
+<div class="table-header-row">
+    <div class="col">
+        <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+        <span class="count">{{dataSource?.data?.length}}</span>
+    </div>
+    <span class="fill-space"></span>
+</div>
+
+<div class="table-wrapper">
+    <div class="spinner-container" *ngIf="loading$ | async">
+        <mat-spinner diameter="50"></mat-spinner>
+    </div>
+
+    <table *ngIf="dataSource" [dataSource]="dataSource" mat-table class="full-width-table background-style" matSort
+        aria-label="Elements">
+        <ng-container matColumnDef="viewName">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
+            <td mat-cell *matCellDef="let role"> {{role.viewName}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="database">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{ 'IAM.VIEWS.DATABASE' | translate }} </th>
+            <td mat-cell *matCellDef="let role"> {{role.database}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="sequence">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{ 'IAM.VIEWS.SEQUENCE' | translate }} </th>
+            <td mat-cell *matCellDef="let role">
+                <span class="role app-label">{{role.sequence}}</span>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef> {{ 'IAM.VIEWS.ACTIONS' | translate }} </th>
+            <td mat-cell *matCellDef="let role">
+                <button mat-icon-button matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
+                    (click)="cancelView(role.viewName, role.database)"><i class="las la-redo-alt"></i></button>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator class="background-style" #paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 100, 250]">
+    </mat-paginator>
+</div>
--- a/console/src/app/pages/iam/iam-views/iam-views.component.scss
+++ b/console/src/app/pages/iam/iam-views/iam-views.component.scss
@ -0,0 +1,60 @@
+
+.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;
+    }
+  }
+  
+  .table-wrapper {
+      overflow: auto;
+  
+      .spinner-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+      }
+  
+    table, mat-paginator {
+        width: 100%;
+  
+        td, th {
+            &:first-child {
+                padding-left: 0;
+                padding-right: 1rem;
+            }
+  
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+
+        .selection {
+          width: 50px;
+          max-width: 50px;
+        }
+    }
+  }
+  
+  .pointer {
+      outline: none;
+      cursor: pointer;
+  }
--- a/console/src/app/pages/iam/iam-views/iam-views.component.spec.ts
+++ b/console/src/app/pages/iam/iam-views/iam-views.component.spec.ts
@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IamViewsComponent } from './iam-views.component';
+
+describe('IamViewsComponent', () => {
+    let component: IamViewsComponent;
+    let fixture: ComponentFixture<IamViewsComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [IamViewsComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(IamViewsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
--- a/console/src/app/pages/iam/iam-views/iam-views.component.ts
+++ b/console/src/app/pages/iam/iam-views/iam-views.component.ts
@ -0,0 +1,48 @@
+import { Component, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
+import { BehaviorSubject, from, Observable, of } from 'rxjs';
+import { catchError, finalize, map } from 'rxjs/operators';
+import { View } from 'src/app/proto/generated/admin_pb';
+import { AdminService } from 'src/app/services/admin.service';
+
+@Component({
+    selector: 'app-iam-views',
+    templateUrl: './iam-views.component.html',
+    styleUrls: ['./iam-views.component.scss'],
+})
+export class IamViewsComponent {
+    public views: View.AsObject[] = [];
+
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(MatTable) public table!: MatTable<View.AsObject>;
+    @ViewChild(MatSort) public sort!: MatSort;
+    public dataSource!: MatTableDataSource<View.AsObject>;
+
+    public displayedColumns: string[] = ['viewName', 'database', 'sequence', 'actions'];
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    constructor(private adminService: AdminService) {
+        this.loadViews();
+    }
+
+    public loadViews(): void {
+        this.loadingSubject.next(true);
+        from(this.adminService.GetViews()).pipe(
+            map(resp => {
+                return resp.toObject().viewsList;
+            }),
+            catchError(() => of([])),
+            finalize(() => this.loadingSubject.next(false)),
+        ).subscribe(views => {
+            this.dataSource = new MatTableDataSource(views);
+            this.dataSource.paginator = this.paginator;
+        });
+    }
+
+    public cancelView(viewname: string, db: string): void {
+        this.adminService.ClearView(viewname, db);
+    }
+}
--- a/console/src/app/pages/iam/iam.component.html
+++ b/console/src/app/pages/iam/iam.component.html
@ -1,10 +1,10 @@
 <app-meta-layout>
    <div class="enlarged-container">
        <h1>{{'IAM.DETAIL.TITLE' | translate}}</h1>
-        <p class="sub">{{'IAM.DETAIL.DESCRIPTION' | translate}}
-        </p>
-        <app-card title="{{ 'ORG.DOMAINS.TITLE' | translate }}"
-            description="{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}">
+        <p class="sub">{{'IAM.DETAIL.DESCRIPTION' | translate}} </p>
+
+        <app-card title="{{ 'IAM.VIEWS.TITLE' | translate }}" description="{{ 'IAM.VIEWS.DESCRIPTION' | translate }}">
+            <app-iam-views></app-iam-views>
        </app-card>
    </div>

--- a/console/src/app/pages/iam/iam.module.ts
+++ b/console/src/app/pages/iam/iam.module.ts
@ -22,11 +22,12 @@ import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module
 import { IamContributorsModule } from './iam-contributors/iam-contributors.module';
 import { IamRoutingModule } from './iam-routing.module';
 import { IamComponent } from './iam.component';
+import { IamViewsComponent } from './iam-views/iam-views.component';



@NgModule({
-    declarations: [IamComponent],
+    declarations: [IamComponent, IamViewsComponent],
    imports: [
        CommonModule,
        IamRoutingModule,
--- a/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
+++ b/console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
@ -230,6 +230,6 @@
        </div>

        <!-- <p class="side-section">{{ 'CHANGES.USER.TITLE' | translate }}</p> -->
-        <app-changes [changeType]="ChangeType.USER" [id]="user.id"></app-changes>
+        <app-changes [changeType]="ChangeType.MYUSER" [id]="user.id"></app-changes>
    </metainfo>
 </app-meta-layout>
--- a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.html
+++ b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.html
@ -1,6 +1,6 @@
 <input type="checkbox" id="switch" (change)="change($event.target.checked)" [(checked)]="isDarkTheme">
-<div class="app">
-    <div class="content">
+<div class="theme-app">
+    <div class="theme-content">
        <div class="circle">
            <div class="crescent"></div>
        </div>
--- a/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
+++ b/console/src/app/pages/user-detail/theme-setting/theme-setting.component.scss
@ -1,14 +1,20 @@
 $dark-background: #2d2e30;

-.app {
-    position: relative;
+// * {
+//     transition: background-color .5s ease-in-out;
+// }
+
+:root {
+    transition: none;
 }

-.content {
+.theme-app {
+    position: relative;
+}
+.theme-content {
  display: flex;
  flex-direction: column;
  text-align: center;
-//   width: 300px;
 }
 .circle {
  position: relative;
@ -24,7 +30,7 @@ $dark-background: #2d2e30;
  right: 0;
  width: 4rem;
  height: 4rem;
-  background: white;
+  background: #fafafa;
  transform: scale(0);
  transform-origin: top right;
  transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
@ -58,9 +64,8 @@ label {
 }
 .toggle {
  position: absolute;
-  background-color: #fff;
+  background-color: #fafafa;
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
-  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .names {
  font-size: 90%;
@ -79,45 +84,33 @@ label {
  display: none;
 }
 /* Toggle */
-[type="checkbox"]:checked + .app .toggle{
+[type="checkbox"]:checked + .theme-app .toggle{
  transform: translateX(100%);
  background-color: $dark-background;
 }
-[type="checkbox"]:checked + .app .dark{
+[type="checkbox"]:checked + .theme-app .dark{
  opacity: 1;
 }
-[type="checkbox"]:checked + .app .light{
+[type="checkbox"]:checked + .theme-app .light{
  opacity: .5;
 }
 /* App */
-[type="checkbox"]:checked + .app{
+[type="checkbox"]:checked + .theme-app{
  background-color:  $dark-background;
-  color: white;
+  color: #fafafa;
 }
 /* Circle */
-[type="checkbox"]:checked + .app .crescent{
+[type="checkbox"]:checked + .theme-app .crescent{
  transform: scale(1);
  background: $dark-background;
 }
-[type="checkbox"]:checked + .app .circle{
+[type="checkbox"]:checked + .theme-app .circle{
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
 }
-[type="checkbox"]:checked + .app .main-circle{
+[type="checkbox"]:checked + .theme-app .main-circle{
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
 }
 /* Fab */
-[type="checkbox"]:checked + .app .fab{
+[type="checkbox"]:checked + .theme-app .fab{
  background-color: $dark-background;
 }
-[type="checkbox"]:checked + .app .arrow,
-[type="checkbox"]:checked + .app .mark,
-[type="checkbox"]:checked + .app .battery{
-  background-color: white;
-}
-[type="checkbox"]:checked + .app .network{
-  border-color: transparent transparent white transparent;
-}
-[type="checkbox"]:checked + .app .swipe{
-  background-color: $dark-background;
-  opacity: 1;
-}
--- a/console/src/app/proto/generated/auth_grpc_web_pb.d.ts
+++ b/console/src/app/proto/generated/auth_grpc_web_pb.d.ts
@ -9,6 +9,8 @@ import * as protoc$gen$swagger_options_annotations_pb from './protoc-gen-swagger
 import * as authoption_options_pb from './authoption/options_pb';

 import {
+  Changes,
+  ChangesRequest,
  MfaOtpResponse,
  MultiFactors,
  MyPermissions,
@ -152,6 +154,13 @@ export class AuthServiceClient {
               response: UserAddressView) => void
  ): grpcWeb.ClientReadableStream<UserAddressView>;

+  getMyUserChanges(
+    request: ChangesRequest,
+    metadata: grpcWeb.Metadata | undefined,
+    callback: (err: grpcWeb.Error,
+               response: Changes) => void
+  ): grpcWeb.ClientReadableStream<Changes>;
+
  updateMyUserAddress(
    request: UpdateUserAddressRequest,
    metadata: grpcWeb.Metadata | undefined,
@ -309,6 +318,11 @@ export class AuthServicePromiseClient {
    metadata?: grpcWeb.Metadata
  ): Promise<UserAddressView>;

+  getMyUserChanges(
+    request: ChangesRequest,
+    metadata?: grpcWeb.Metadata
+  ): Promise<Changes>;
+
  updateMyUserAddress(
    request: UpdateUserAddressRequest,
    metadata?: grpcWeb.Metadata
--- a/console/src/app/proto/generated/auth_grpc_web_pb.js
+++ b/console/src/app/proto/generated/auth_grpc_web_pb.js
@ -1364,6 +1364,86 @@ proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.getMyUserAddre
 };


+/**
+ * @const
+ * @type {!grpc.web.MethodDescriptor<
+ *   !proto.caos.zitadel.auth.api.v1.ChangesRequest,
+ *   !proto.caos.zitadel.auth.api.v1.Changes>}
+ */
+const methodDescriptor_AuthService_GetMyUserChanges = new grpc.web.MethodDescriptor(
+  '/caos.zitadel.auth.api.v1.AuthService/GetMyUserChanges',
+  grpc.web.MethodType.UNARY,
+  proto.caos.zitadel.auth.api.v1.ChangesRequest,
+  proto.caos.zitadel.auth.api.v1.Changes,
+  /**
+   * @param {!proto.caos.zitadel.auth.api.v1.ChangesRequest} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  proto.caos.zitadel.auth.api.v1.Changes.deserializeBinary
+);
+
+
+/**
+ * @const
+ * @type {!grpc.web.AbstractClientBase.MethodInfo<
+ *   !proto.caos.zitadel.auth.api.v1.ChangesRequest,
+ *   !proto.caos.zitadel.auth.api.v1.Changes>}
+ */
+const methodInfo_AuthService_GetMyUserChanges = new grpc.web.AbstractClientBase.MethodInfo(
+  proto.caos.zitadel.auth.api.v1.Changes,
+  /**
+   * @param {!proto.caos.zitadel.auth.api.v1.ChangesRequest} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  proto.caos.zitadel.auth.api.v1.Changes.deserializeBinary
+);
+
+
+/**
+ * @param {!proto.caos.zitadel.auth.api.v1.ChangesRequest} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @param {function(?grpc.web.Error, ?proto.caos.zitadel.auth.api.v1.Changes)}
+ *     callback The callback function(error, response)
+ * @return {!grpc.web.ClientReadableStream<!proto.caos.zitadel.auth.api.v1.Changes>|undefined}
+ *     The XHR Node Readable Stream
+ */
+proto.caos.zitadel.auth.api.v1.AuthServiceClient.prototype.getMyUserChanges =
+    function(request, metadata, callback) {
+  return this.client_.rpcCall(this.hostname_ +
+      '/caos.zitadel.auth.api.v1.AuthService/GetMyUserChanges',
+      request,
+      metadata || {},
+      methodDescriptor_AuthService_GetMyUserChanges,
+      callback);
+};
+
+
+/**
+ * @param {!proto.caos.zitadel.auth.api.v1.ChangesRequest} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @return {!Promise<!proto.caos.zitadel.auth.api.v1.Changes>}
+ *     A native promise that resolves to the response
+ */
+proto.caos.zitadel.auth.api.v1.AuthServicePromiseClient.prototype.getMyUserChanges =
+    function(request, metadata) {
+  return this.client_.unaryCall(this.hostname_ +
+      '/caos.zitadel.auth.api.v1.AuthService/GetMyUserChanges',
+      request,
+      metadata || {},
+      methodDescriptor_AuthService_GetMyUserChanges);
+};
+
+
 /**
 * @const
 * @type {!grpc.web.MethodDescriptor<
--- a/console/src/app/proto/generated/auth_pb.d.ts
+++ b/console/src/app/proto/generated/auth_pb.d.ts
@ -1206,6 +1206,102 @@ export namespace MyPermissions {
  }
 }

+export class ChangesRequest extends jspb.Message {
+  getLimit(): number;
+  setLimit(value: number): void;
+
+  getSequenceOffset(): number;
+  setSequenceOffset(value: number): void;
+
+  getAsc(): boolean;
+  setAsc(value: boolean): void;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): ChangesRequest.AsObject;
+  static toObject(includeInstance: boolean, msg: ChangesRequest): ChangesRequest.AsObject;
+  static serializeBinaryToWriter(message: ChangesRequest, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): ChangesRequest;
+  static deserializeBinaryFromReader(message: ChangesRequest, reader: jspb.BinaryReader): ChangesRequest;
+}
+
+export namespace ChangesRequest {
+  export type AsObject = {
+    limit: number,
+    sequenceOffset: number,
+    asc: boolean,
+  }
+}
+
+export class Changes extends jspb.Message {
+  getChangesList(): Array<Change>;
+  setChangesList(value: Array<Change>): void;
+  clearChangesList(): void;
+  addChanges(value?: Change, index?: number): Change;
+
+  getOffset(): number;
+  setOffset(value: number): void;
+
+  getLimit(): number;
+  setLimit(value: number): void;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): Changes.AsObject;
+  static toObject(includeInstance: boolean, msg: Changes): Changes.AsObject;
+  static serializeBinaryToWriter(message: Changes, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): Changes;
+  static deserializeBinaryFromReader(message: Changes, reader: jspb.BinaryReader): Changes;
+}
+
+export namespace Changes {
+  export type AsObject = {
+    changesList: Array<Change.AsObject>,
+    offset: number,
+    limit: number,
+  }
+}
+
+export class Change extends jspb.Message {
+  getChangeDate(): google_protobuf_timestamp_pb.Timestamp | undefined;
+  setChangeDate(value?: google_protobuf_timestamp_pb.Timestamp): void;
+  hasChangeDate(): boolean;
+  clearChangeDate(): void;
+
+  getEventType(): string;
+  setEventType(value: string): void;
+
+  getSequence(): number;
+  setSequence(value: number): void;
+
+  getEditorId(): string;
+  setEditorId(value: string): void;
+
+  getEditor(): string;
+  setEditor(value: string): void;
+
+  getData(): google_protobuf_struct_pb.Struct | undefined;
+  setData(value?: google_protobuf_struct_pb.Struct): void;
+  hasData(): boolean;
+  clearData(): void;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): Change.AsObject;
+  static toObject(includeInstance: boolean, msg: Change): Change.AsObject;
+  static serializeBinaryToWriter(message: Change, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): Change;
+  static deserializeBinaryFromReader(message: Change, reader: jspb.BinaryReader): Change;
+}
+
+export namespace Change {
+  export type AsObject = {
+    changeDate?: google_protobuf_timestamp_pb.Timestamp.AsObject,
+    eventType: string,
+    sequence: number,
+    editorId: string,
+    editor: string,
+    data?: google_protobuf_struct_pb.Struct.AsObject,
+  }
+}
+
 export enum UserSessionState { 
  USERSESSIONSTATE_UNSPECIFIED = 0,
  USERSESSIONSTATE_ACTIVE = 1,
--- a/console/src/app/proto/generated/auth_pb.js
+++ b/console/src/app/proto/generated/auth_pb.js
@ -25,6 +25,9 @@ var protoc$gen$swagger_options_annotations_pb = require('./protoc-gen-swagger/op
 goog.object.extend(proto, protoc$gen$swagger_options_annotations_pb);
 var authoption_options_pb = require('./authoption/options_pb.js');
 goog.object.extend(proto, authoption_options_pb);
+goog.exportSymbol('proto.caos.zitadel.auth.api.v1.Change', null, global);
+goog.exportSymbol('proto.caos.zitadel.auth.api.v1.Changes', null, global);
+goog.exportSymbol('proto.caos.zitadel.auth.api.v1.ChangesRequest', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.Gender', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.MFAState', null, global);
 goog.exportSymbol('proto.caos.zitadel.auth.api.v1.MfaOtpResponse', null, global);
@ -804,6 +807,69 @@ if (goog.DEBUG && !COMPILED) {
   */
  proto.caos.zitadel.auth.api.v1.MyPermissions.displayName = 'proto.caos.zitadel.auth.api.v1.MyPermissions';
 }
+/**
+ * Generated by JsPbCodeGenerator.
+ * @param {Array=} opt_data Optional initial data array, typically from a
+ * server response, or constructed directly in Javascript. The array is used
+ * in place and becomes part of the constructed object. It is not cloned.
+ * If no data is provided, the constructed object will be empty, but still
+ * valid.
+ * @extends {jspb.Message}
+ * @constructor
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest = function(opt_data) {
+  jspb.Message.initialize(this, opt_data, 0, -1, null, null);
+};
+goog.inherits(proto.caos.zitadel.auth.api.v1.ChangesRequest, jspb.Message);
+if (goog.DEBUG && !COMPILED) {
+  /**
+   * @public
+   * @override
+   */
+  proto.caos.zitadel.auth.api.v1.ChangesRequest.displayName = 'proto.caos.zitadel.auth.api.v1.ChangesRequest';
+}
+/**
+ * Generated by JsPbCodeGenerator.
+ * @param {Array=} opt_data Optional initial data array, typically from a
+ * server response, or constructed directly in Javascript. The array is used
+ * in place and becomes part of the constructed object. It is not cloned.
+ * If no data is provided, the constructed object will be empty, but still
+ * valid.
+ * @extends {jspb.Message}
+ * @constructor
+ */
+proto.caos.zitadel.auth.api.v1.Changes = function(opt_data) {
+  jspb.Message.initialize(this, opt_data, 0, -1, proto.caos.zitadel.auth.api.v1.Changes.repeatedFields_, null);
+};
+goog.inherits(proto.caos.zitadel.auth.api.v1.Changes, jspb.Message);
+if (goog.DEBUG && !COMPILED) {
+  /**
+   * @public
+   * @override
+   */
+  proto.caos.zitadel.auth.api.v1.Changes.displayName = 'proto.caos.zitadel.auth.api.v1.Changes';
+}
+/**
+ * Generated by JsPbCodeGenerator.
+ * @param {Array=} opt_data Optional initial data array, typically from a
+ * server response, or constructed directly in Javascript. The array is used
+ * in place and becomes part of the constructed object. It is not cloned.
+ * If no data is provided, the constructed object will be empty, but still
+ * valid.
+ * @extends {jspb.Message}
+ * @constructor
+ */
+proto.caos.zitadel.auth.api.v1.Change = function(opt_data) {
+  jspb.Message.initialize(this, opt_data, 0, -1, null, null);
+};
+goog.inherits(proto.caos.zitadel.auth.api.v1.Change, jspb.Message);
+if (goog.DEBUG && !COMPILED) {
+  /**
+   * @public
+   * @override
+   */
+  proto.caos.zitadel.auth.api.v1.Change.displayName = 'proto.caos.zitadel.auth.api.v1.Change';
+}

 /**
 * List of repeated fields within this message type.
@ -9294,6 +9360,695 @@ proto.caos.zitadel.auth.api.v1.MyPermissions.prototype.clearPermissionsList = fu
 };


+
+
+
+if (jspb.Message.GENERATE_TO_OBJECT) {
+/**
+ * Creates an object representation of this proto suitable for use in Soy templates.
+ * Field names that are reserved in JavaScript and will be renamed to pb_name.
+ * To access a reserved field use, foo.pb_<name>, eg, foo.pb_default.
+ * For the list of reserved names please see:
+ *     com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS.
+ * @param {boolean=} opt_includeInstance Whether to include the JSPB instance
+ *     for transitional soy proto support: http://goto/soy-param-migration
+ * @return {!Object}
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.toObject = function(opt_includeInstance) {
+  return proto.caos.zitadel.auth.api.v1.ChangesRequest.toObject(opt_includeInstance, this);
+};
+
+
+/**
+ * Static version of the {@see toObject} method.
+ * @param {boolean|undefined} includeInstance Whether to include the JSPB
+ *     instance for transitional soy proto support:
+ *     http://goto/soy-param-migration
+ * @param {!proto.caos.zitadel.auth.api.v1.ChangesRequest} msg The msg instance to transform.
+ * @return {!Object}
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.toObject = function(includeInstance, msg) {
+  var f, obj = {
+    limit: jspb.Message.getFieldWithDefault(msg, 1, 0),
+    sequenceOffset: jspb.Message.getFieldWithDefault(msg, 2, 0),
+    asc: jspb.Message.getFieldWithDefault(msg, 3, false)
+  };
+
+  if (includeInstance) {
+    obj.$jspbMessageInstance = msg;
+  }
+  return obj;
+};
+}
+
+
+/**
+ * Deserializes binary data (in protobuf wire format).
+ * @param {jspb.ByteSource} bytes The bytes to deserialize.
+ * @return {!proto.caos.zitadel.auth.api.v1.ChangesRequest}
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.deserializeBinary = function(bytes) {
+  var reader = new jspb.BinaryReader(bytes);
+  var msg = new proto.caos.zitadel.auth.api.v1.ChangesRequest;
+  return proto.caos.zitadel.auth.api.v1.ChangesRequest.deserializeBinaryFromReader(msg, reader);
+};
+
+
+/**
+ * Deserializes binary data (in protobuf wire format) from the
+ * given reader into the given message object.
+ * @param {!proto.caos.zitadel.auth.api.v1.ChangesRequest} msg The message object to deserialize into.
+ * @param {!jspb.BinaryReader} reader The BinaryReader to use.
+ * @return {!proto.caos.zitadel.auth.api.v1.ChangesRequest}
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.deserializeBinaryFromReader = function(msg, reader) {
+  while (reader.nextField()) {
+    if (reader.isEndGroup()) {
+      break;
+    }
+    var field = reader.getFieldNumber();
+    switch (field) {
+    case 1:
+      var value = /** @type {number} */ (reader.readUint64());
+      msg.setLimit(value);
+      break;
+    case 2:
+      var value = /** @type {number} */ (reader.readUint64());
+      msg.setSequenceOffset(value);
+      break;
+    case 3:
+      var value = /** @type {boolean} */ (reader.readBool());
+      msg.setAsc(value);
+      break;
+    default:
+      reader.skipField();
+      break;
+    }
+  }
+  return msg;
+};
+
+
+/**
+ * Serializes the message to binary data (in protobuf wire format).
+ * @return {!Uint8Array}
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.serializeBinary = function() {
+  var writer = new jspb.BinaryWriter();
+  proto.caos.zitadel.auth.api.v1.ChangesRequest.serializeBinaryToWriter(this, writer);
+  return writer.getResultBuffer();
+};
+
+
+/**
+ * Serializes the given message to binary data (in protobuf wire
+ * format), writing to the given BinaryWriter.
+ * @param {!proto.caos.zitadel.auth.api.v1.ChangesRequest} message
+ * @param {!jspb.BinaryWriter} writer
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.serializeBinaryToWriter = function(message, writer) {
+  var f = undefined;
+  f = message.getLimit();
+  if (f !== 0) {
+    writer.writeUint64(
+      1,
+      f
+    );
+  }
+  f = message.getSequenceOffset();
+  if (f !== 0) {
+    writer.writeUint64(
+      2,
+      f
+    );
+  }
+  f = message.getAsc();
+  if (f) {
+    writer.writeBool(
+      3,
+      f
+    );
+  }
+};
+
+
+/**
+ * optional uint64 limit = 1;
+ * @return {number}
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.getLimit = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 1, 0));
+};
+
+
+/** @param {number} value */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.setLimit = function(value) {
+  jspb.Message.setProto3IntField(this, 1, value);
+};
+
+
+/**
+ * optional uint64 sequence_offset = 2;
+ * @return {number}
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.getSequenceOffset = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 2, 0));
+};
+
+
+/** @param {number} value */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.setSequenceOffset = function(value) {
+  jspb.Message.setProto3IntField(this, 2, value);
+};
+
+
+/**
+ * optional bool asc = 3;
+ * Note that Boolean fields may be set to 0/1 when serialized from a Java server.
+ * You should avoid comparisons like {@code val === true/false} in those cases.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.getAsc = function() {
+  return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 3, false));
+};
+
+
+/** @param {boolean} value */
+proto.caos.zitadel.auth.api.v1.ChangesRequest.prototype.setAsc = function(value) {
+  jspb.Message.setProto3BooleanField(this, 3, value);
+};
+
+
+
+/**
+ * List of repeated fields within this message type.
+ * @private {!Array<number>}
+ * @const
+ */
+proto.caos.zitadel.auth.api.v1.Changes.repeatedFields_ = [1];
+
+
+
+if (jspb.Message.GENERATE_TO_OBJECT) {
+/**
+ * Creates an object representation of this proto suitable for use in Soy templates.
+ * Field names that are reserved in JavaScript and will be renamed to pb_name.
+ * To access a reserved field use, foo.pb_<name>, eg, foo.pb_default.
+ * For the list of reserved names please see:
+ *     com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS.
+ * @param {boolean=} opt_includeInstance Whether to include the JSPB instance
+ *     for transitional soy proto support: http://goto/soy-param-migration
+ * @return {!Object}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.toObject = function(opt_includeInstance) {
+  return proto.caos.zitadel.auth.api.v1.Changes.toObject(opt_includeInstance, this);
+};
+
+
+/**
+ * Static version of the {@see toObject} method.
+ * @param {boolean|undefined} includeInstance Whether to include the JSPB
+ *     instance for transitional soy proto support:
+ *     http://goto/soy-param-migration
+ * @param {!proto.caos.zitadel.auth.api.v1.Changes} msg The msg instance to transform.
+ * @return {!Object}
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.Changes.toObject = function(includeInstance, msg) {
+  var f, obj = {
+    changesList: jspb.Message.toObjectList(msg.getChangesList(),
+    proto.caos.zitadel.auth.api.v1.Change.toObject, includeInstance),
+    offset: jspb.Message.getFieldWithDefault(msg, 2, 0),
+    limit: jspb.Message.getFieldWithDefault(msg, 3, 0)
+  };
+
+  if (includeInstance) {
+    obj.$jspbMessageInstance = msg;
+  }
+  return obj;
+};
+}
+
+
+/**
+ * Deserializes binary data (in protobuf wire format).
+ * @param {jspb.ByteSource} bytes The bytes to deserialize.
+ * @return {!proto.caos.zitadel.auth.api.v1.Changes}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.deserializeBinary = function(bytes) {
+  var reader = new jspb.BinaryReader(bytes);
+  var msg = new proto.caos.zitadel.auth.api.v1.Changes;
+  return proto.caos.zitadel.auth.api.v1.Changes.deserializeBinaryFromReader(msg, reader);
+};
+
+
+/**
+ * Deserializes binary data (in protobuf wire format) from the
+ * given reader into the given message object.
+ * @param {!proto.caos.zitadel.auth.api.v1.Changes} msg The message object to deserialize into.
+ * @param {!jspb.BinaryReader} reader The BinaryReader to use.
+ * @return {!proto.caos.zitadel.auth.api.v1.Changes}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.deserializeBinaryFromReader = function(msg, reader) {
+  while (reader.nextField()) {
+    if (reader.isEndGroup()) {
+      break;
+    }
+    var field = reader.getFieldNumber();
+    switch (field) {
+    case 1:
+      var value = new proto.caos.zitadel.auth.api.v1.Change;
+      reader.readMessage(value,proto.caos.zitadel.auth.api.v1.Change.deserializeBinaryFromReader);
+      msg.addChanges(value);
+      break;
+    case 2:
+      var value = /** @type {number} */ (reader.readUint64());
+      msg.setOffset(value);
+      break;
+    case 3:
+      var value = /** @type {number} */ (reader.readUint64());
+      msg.setLimit(value);
+      break;
+    default:
+      reader.skipField();
+      break;
+    }
+  }
+  return msg;
+};
+
+
+/**
+ * Serializes the message to binary data (in protobuf wire format).
+ * @return {!Uint8Array}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.serializeBinary = function() {
+  var writer = new jspb.BinaryWriter();
+  proto.caos.zitadel.auth.api.v1.Changes.serializeBinaryToWriter(this, writer);
+  return writer.getResultBuffer();
+};
+
+
+/**
+ * Serializes the given message to binary data (in protobuf wire
+ * format), writing to the given BinaryWriter.
+ * @param {!proto.caos.zitadel.auth.api.v1.Changes} message
+ * @param {!jspb.BinaryWriter} writer
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.Changes.serializeBinaryToWriter = function(message, writer) {
+  var f = undefined;
+  f = message.getChangesList();
+  if (f.length > 0) {
+    writer.writeRepeatedMessage(
+      1,
+      f,
+      proto.caos.zitadel.auth.api.v1.Change.serializeBinaryToWriter
+    );
+  }
+  f = message.getOffset();
+  if (f !== 0) {
+    writer.writeUint64(
+      2,
+      f
+    );
+  }
+  f = message.getLimit();
+  if (f !== 0) {
+    writer.writeUint64(
+      3,
+      f
+    );
+  }
+};
+
+
+/**
+ * repeated Change changes = 1;
+ * @return {!Array<!proto.caos.zitadel.auth.api.v1.Change>}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.getChangesList = function() {
+  return /** @type{!Array<!proto.caos.zitadel.auth.api.v1.Change>} */ (
+    jspb.Message.getRepeatedWrapperField(this, proto.caos.zitadel.auth.api.v1.Change, 1));
+};
+
+
+/** @param {!Array<!proto.caos.zitadel.auth.api.v1.Change>} value */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.setChangesList = function(value) {
+  jspb.Message.setRepeatedWrapperField(this, 1, value);
+};
+
+
+/**
+ * @param {!proto.caos.zitadel.auth.api.v1.Change=} opt_value
+ * @param {number=} opt_index
+ * @return {!proto.caos.zitadel.auth.api.v1.Change}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.addChanges = function(opt_value, opt_index) {
+  return jspb.Message.addToRepeatedWrapperField(this, 1, opt_value, proto.caos.zitadel.auth.api.v1.Change, opt_index);
+};
+
+
+/**
+ * Clears the list making it empty but non-null.
+ */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.clearChangesList = function() {
+  this.setChangesList([]);
+};
+
+
+/**
+ * optional uint64 offset = 2;
+ * @return {number}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.getOffset = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 2, 0));
+};
+
+
+/** @param {number} value */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.setOffset = function(value) {
+  jspb.Message.setProto3IntField(this, 2, value);
+};
+
+
+/**
+ * optional uint64 limit = 3;
+ * @return {number}
+ */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.getLimit = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 3, 0));
+};
+
+
+/** @param {number} value */
+proto.caos.zitadel.auth.api.v1.Changes.prototype.setLimit = function(value) {
+  jspb.Message.setProto3IntField(this, 3, value);
+};
+
+
+
+
+
+if (jspb.Message.GENERATE_TO_OBJECT) {
+/**
+ * Creates an object representation of this proto suitable for use in Soy templates.
+ * Field names that are reserved in JavaScript and will be renamed to pb_name.
+ * To access a reserved field use, foo.pb_<name>, eg, foo.pb_default.
+ * For the list of reserved names please see:
+ *     com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS.
+ * @param {boolean=} opt_includeInstance Whether to include the JSPB instance
+ *     for transitional soy proto support: http://goto/soy-param-migration
+ * @return {!Object}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.toObject = function(opt_includeInstance) {
+  return proto.caos.zitadel.auth.api.v1.Change.toObject(opt_includeInstance, this);
+};
+
+
+/**
+ * Static version of the {@see toObject} method.
+ * @param {boolean|undefined} includeInstance Whether to include the JSPB
+ *     instance for transitional soy proto support:
+ *     http://goto/soy-param-migration
+ * @param {!proto.caos.zitadel.auth.api.v1.Change} msg The msg instance to transform.
+ * @return {!Object}
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.Change.toObject = function(includeInstance, msg) {
+  var f, obj = {
+    changeDate: (f = msg.getChangeDate()) && google_protobuf_timestamp_pb.Timestamp.toObject(includeInstance, f),
+    eventType: jspb.Message.getFieldWithDefault(msg, 2, ""),
+    sequence: jspb.Message.getFieldWithDefault(msg, 3, 0),
+    editorId: jspb.Message.getFieldWithDefault(msg, 4, ""),
+    editor: jspb.Message.getFieldWithDefault(msg, 5, ""),
+    data: (f = msg.getData()) && google_protobuf_struct_pb.Struct.toObject(includeInstance, f)
+  };
+
+  if (includeInstance) {
+    obj.$jspbMessageInstance = msg;
+  }
+  return obj;
+};
+}
+
+
+/**
+ * Deserializes binary data (in protobuf wire format).
+ * @param {jspb.ByteSource} bytes The bytes to deserialize.
+ * @return {!proto.caos.zitadel.auth.api.v1.Change}
+ */
+proto.caos.zitadel.auth.api.v1.Change.deserializeBinary = function(bytes) {
+  var reader = new jspb.BinaryReader(bytes);
+  var msg = new proto.caos.zitadel.auth.api.v1.Change;
+  return proto.caos.zitadel.auth.api.v1.Change.deserializeBinaryFromReader(msg, reader);
+};
+
+
+/**
+ * Deserializes binary data (in protobuf wire format) from the
+ * given reader into the given message object.
+ * @param {!proto.caos.zitadel.auth.api.v1.Change} msg The message object to deserialize into.
+ * @param {!jspb.BinaryReader} reader The BinaryReader to use.
+ * @return {!proto.caos.zitadel.auth.api.v1.Change}
+ */
+proto.caos.zitadel.auth.api.v1.Change.deserializeBinaryFromReader = function(msg, reader) {
+  while (reader.nextField()) {
+    if (reader.isEndGroup()) {
+      break;
+    }
+    var field = reader.getFieldNumber();
+    switch (field) {
+    case 1:
+      var value = new google_protobuf_timestamp_pb.Timestamp;
+      reader.readMessage(value,google_protobuf_timestamp_pb.Timestamp.deserializeBinaryFromReader);
+      msg.setChangeDate(value);
+      break;
+    case 2:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setEventType(value);
+      break;
+    case 3:
+      var value = /** @type {number} */ (reader.readUint64());
+      msg.setSequence(value);
+      break;
+    case 4:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setEditorId(value);
+      break;
+    case 5:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setEditor(value);
+      break;
+    case 6:
+      var value = new google_protobuf_struct_pb.Struct;
+      reader.readMessage(value,google_protobuf_struct_pb.Struct.deserializeBinaryFromReader);
+      msg.setData(value);
+      break;
+    default:
+      reader.skipField();
+      break;
+    }
+  }
+  return msg;
+};
+
+
+/**
+ * Serializes the message to binary data (in protobuf wire format).
+ * @return {!Uint8Array}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.serializeBinary = function() {
+  var writer = new jspb.BinaryWriter();
+  proto.caos.zitadel.auth.api.v1.Change.serializeBinaryToWriter(this, writer);
+  return writer.getResultBuffer();
+};
+
+
+/**
+ * Serializes the given message to binary data (in protobuf wire
+ * format), writing to the given BinaryWriter.
+ * @param {!proto.caos.zitadel.auth.api.v1.Change} message
+ * @param {!jspb.BinaryWriter} writer
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.caos.zitadel.auth.api.v1.Change.serializeBinaryToWriter = function(message, writer) {
+  var f = undefined;
+  f = message.getChangeDate();
+  if (f != null) {
+    writer.writeMessage(
+      1,
+      f,
+      google_protobuf_timestamp_pb.Timestamp.serializeBinaryToWriter
+    );
+  }
+  f = message.getEventType();
+  if (f.length > 0) {
+    writer.writeString(
+      2,
+      f
+    );
+  }
+  f = message.getSequence();
+  if (f !== 0) {
+    writer.writeUint64(
+      3,
+      f
+    );
+  }
+  f = message.getEditorId();
+  if (f.length > 0) {
+    writer.writeString(
+      4,
+      f
+    );
+  }
+  f = message.getEditor();
+  if (f.length > 0) {
+    writer.writeString(
+      5,
+      f
+    );
+  }
+  f = message.getData();
+  if (f != null) {
+    writer.writeMessage(
+      6,
+      f,
+      google_protobuf_struct_pb.Struct.serializeBinaryToWriter
+    );
+  }
+};
+
+
+/**
+ * optional google.protobuf.Timestamp change_date = 1;
+ * @return {?proto.google.protobuf.Timestamp}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.getChangeDate = function() {
+  return /** @type{?proto.google.protobuf.Timestamp} */ (
+    jspb.Message.getWrapperField(this, google_protobuf_timestamp_pb.Timestamp, 1));
+};
+
+
+/** @param {?proto.google.protobuf.Timestamp|undefined} value */
+proto.caos.zitadel.auth.api.v1.Change.prototype.setChangeDate = function(value) {
+  jspb.Message.setWrapperField(this, 1, value);
+};
+
+
+/**
+ * Clears the message field making it undefined.
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.clearChangeDate = function() {
+  this.setChangeDate(undefined);
+};
+
+
+/**
+ * Returns whether this field is set.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.hasChangeDate = function() {
+  return jspb.Message.getField(this, 1) != null;
+};
+
+
+/**
+ * optional string event_type = 2;
+ * @return {string}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.getEventType = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 2, ""));
+};
+
+
+/** @param {string} value */
+proto.caos.zitadel.auth.api.v1.Change.prototype.setEventType = function(value) {
+  jspb.Message.setProto3StringField(this, 2, value);
+};
+
+
+/**
+ * optional uint64 sequence = 3;
+ * @return {number}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.getSequence = function() {
+  return /** @type {number} */ (jspb.Message.getFieldWithDefault(this, 3, 0));
+};
+
+
+/** @param {number} value */
+proto.caos.zitadel.auth.api.v1.Change.prototype.setSequence = function(value) {
+  jspb.Message.setProto3IntField(this, 3, value);
+};
+
+
+/**
+ * optional string editor_id = 4;
+ * @return {string}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.getEditorId = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 4, ""));
+};
+
+
+/** @param {string} value */
+proto.caos.zitadel.auth.api.v1.Change.prototype.setEditorId = function(value) {
+  jspb.Message.setProto3StringField(this, 4, value);
+};
+
+
+/**
+ * optional string editor = 5;
+ * @return {string}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.getEditor = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 5, ""));
+};
+
+
+/** @param {string} value */
+proto.caos.zitadel.auth.api.v1.Change.prototype.setEditor = function(value) {
+  jspb.Message.setProto3StringField(this, 5, value);
+};
+
+
+/**
+ * optional google.protobuf.Struct data = 6;
+ * @return {?proto.google.protobuf.Struct}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.getData = function() {
+  return /** @type{?proto.google.protobuf.Struct} */ (
+    jspb.Message.getWrapperField(this, google_protobuf_struct_pb.Struct, 6));
+};
+
+
+/** @param {?proto.google.protobuf.Struct|undefined} value */
+proto.caos.zitadel.auth.api.v1.Change.prototype.setData = function(value) {
+  jspb.Message.setWrapperField(this, 6, value);
+};
+
+
+/**
+ * Clears the message field making it undefined.
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.clearData = function() {
+  this.setData(undefined);
+};
+
+
+/**
+ * Returns whether this field is set.
+ * @return {boolean}
+ */
+proto.caos.zitadel.auth.api.v1.Change.prototype.hasData = function() {
+  return jspb.Message.getField(this, 6) != null;
+};
+
+
 /**
 * @enum {number}
 */
--- a/console/src/app/proto/generated/management_pb.d.ts
+++ b/console/src/app/proto/generated/management_pb.d.ts
@ -4619,6 +4619,9 @@ export class UserGrantView extends jspb.Message {
  getResourceOwner(): string;
  setResourceOwner(value: string): void;

+  getDisplayName(): string;
+  setDisplayName(value: string): void;
+
  serializeBinary(): Uint8Array;
  toObject(includeInstance?: boolean): UserGrantView.AsObject;
  static toObject(includeInstance: boolean, msg: UserGrantView): UserGrantView.AsObject;
@ -4646,6 +4649,7 @@ export namespace UserGrantView {
    projectName: string,
    sequence: number,
    resourceOwner: string,
+    displayName: string,
  }
 }

--- a/console/src/app/proto/generated/management_pb.js
+++ b/console/src/app/proto/generated/management_pb.js
@ -35628,7 +35628,8 @@ proto.caos.zitadel.management.api.v1.UserGrantView.toObject = function(includeIn
    orgDomain: jspb.Message.getFieldWithDefault(msg, 14, ""),
    projectName: jspb.Message.getFieldWithDefault(msg, 15, ""),
    sequence: jspb.Message.getFieldWithDefault(msg, 16, 0),
-    resourceOwner: jspb.Message.getFieldWithDefault(msg, 17, "")
+    resourceOwner: jspb.Message.getFieldWithDefault(msg, 17, ""),
+    displayName: jspb.Message.getFieldWithDefault(msg, 18, "")
  };

  if (includeInstance) {
@ -35735,6 +35736,10 @@ proto.caos.zitadel.management.api.v1.UserGrantView.deserializeBinaryFromReader =
      var value = /** @type {string} */ (reader.readString());
      msg.setResourceOwner(value);
      break;
+    case 18:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setDisplayName(value);
+      break;
    default:
      reader.skipField();
      break;
@ -35885,6 +35890,13 @@ proto.caos.zitadel.management.api.v1.UserGrantView.serializeBinaryToWriter = fun
      f
    );
  }
+  f = message.getDisplayName();
+  if (f.length > 0) {
+    writer.writeString(
+      18,
+      f
+    );
+  }
 };


@ -36196,6 +36208,21 @@ proto.caos.zitadel.management.api.v1.UserGrantView.prototype.setResourceOwner =
 };


+/**
+ * optional string display_name = 18;
+ * @return {string}
+ */
+proto.caos.zitadel.management.api.v1.UserGrantView.prototype.getDisplayName = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 18, ""));
+};
+
+
+/** @param {string} value */
+proto.caos.zitadel.management.api.v1.UserGrantView.prototype.setDisplayName = function(value) {
+  jspb.Message.setProto3StringField(this, 18, value);
+};
+
+

 /**
 * List of repeated fields within this message type.
--- a/console/src/app/services/admin.service.ts
+++ b/console/src/app/services/admin.service.ts
@ -18,6 +18,8 @@ import {
    OrgSetUpRequest,
    OrgSetUpResponse,
    RemoveIamMemberRequest,
+    ViewID,
+    Views,
 } from '../proto/generated/admin_pb';
 import { GrpcBackendService } from './grpc-backend.service';
 import { GrpcService, RequestFactory, ResponseMapper } from './grpc.service';
@ -67,6 +69,25 @@ export class AdminService {
        );
    }

+    public async GetViews(): Promise<Views> {
+        return await this.request(
+            c => c.getViews,
+            new Empty(),
+            f => f,
+        );
+    }
+
+    public async ClearView(viewname: string, db: string): Promise<Empty> {
+        const req: ViewID = new ViewID();
+        req.setDatabase(db);
+        req.setViewName(viewname);
+        return await this.request(
+            c => c.clearView,
+            req,
+            f => f,
+        );
+    }
+
    public async SearchIamMembers(
        limit: number,
        offset: number,
--- a/console/src/app/services/auth-user.service.ts
+++ b/console/src/app/services/auth-user.service.ts
@ -6,6 +6,8 @@ import { switchMap } from 'rxjs/operators';

 import { AuthServicePromiseClient } from '../proto/generated/auth_grpc_web_pb';
 import {
+    Changes,
+    ChangesRequest,
    Gender,
    MfaOtpResponse,
    MultiFactors,
@ -281,6 +283,17 @@ export class AuthUserService {
        );
    }

+    public async GetMyUserChanges(limit: number, sequenceoffset: number): Promise<Changes> {
+        const req = new ChangesRequest();
+        req.setLimit(limit);
+        req.setSequenceOffset(sequenceoffset);
+        return await this.request(
+            c => c.getMyUserChanges,
+            req,
+            f => f,
+        );
+    }
+
    public isAllowed(roles: string[], each: boolean = false): Observable<boolean> {
        if (roles && roles.length > 0) {
            if (this._roleCache.length > 0) {
--- a/console/src/assets/i18n/de.json
+++ b/console/src/assets/i18n/de.json
@ -193,6 +193,15 @@
        }, 
        "MEMBER": {
            "TITLE":"IAM Members"
+        },
+        "VIEWS": {
+            "TITLE":"Views und Events",
+            "DESCRIPTION":"Diese Ansicht zeigt Ihre Zitadel Views, Sie können Sie zurücksetzen und fehlgeschlagene Events entfernen.",
+            "VIEWNAME":"Name",
+            "DATABASE":"Datenbank",
+            "SEQUENCE":"SEQUENZ",
+            "ACTIONS":"Aktionen",
+            "CLEAR":"Aufräumen"
        }
    },
    "ORG": {
--- a/console/src/assets/i18n/en.json
+++ b/console/src/assets/i18n/en.json
@ -194,6 +194,15 @@
        "MEMBER": {
            "TITLE":"Managers",
            "DESCRIPTION":"Managers can add and edit organizations and make changes to their corresponding projects and apps"
+        },
+        "VIEWS": {
+            "TITLE":"Views and Events",
+            "DESCRIPTION":"This Card shows your Zitadel Views, you can clear them and remove failed events.",
+            "VIEWNAME":"Name",
+            "DATABASE":"Database",
+            "SEQUENCE":"Sequence",
+            "ACTIONS":"Actions",
+            "CLEAR":"Clear"
        }
    },
    "ORG": {
--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@ -5,7 +5,7 @@
@import './styles/changes';
@import './styles/avatar';
@import './styles/meta';
-
+@import './styles/theme-card';

@mixin component-themes($theme) {
    @include avatar-theme($theme);
@ -15,4 +15,5 @@
    @include morph-card-theme($theme);
    @include changes-theme($theme);
    @include meta-theme($theme);
+    @include theme-card($theme);
 }
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@ -122,7 +122,8 @@ $custom-typography: mat-typography-config(
    color: #202124;

 	.crescent, .side, .main-container {
-		background-color: white;
+        background-color: white;
+        transition: background-color .5s ease-in-out;
    }
 }

@ -131,7 +132,8 @@ $custom-typography: mat-typography-config(
    @include angular-material-theme($dark-theme);

 	.crescent, .side, .main-container {
-		background-color: #212224;
+        background-color: #212224;
+        transition: background-color .5s ease-in-out;
    }
    
    .mat-dialog-container {
--- a/console/src/styles/card.scss
+++ b/console/src/styles/card.scss
@ -12,6 +12,7 @@

    .card {
        background-color: $primary-dark;
+        transition: background-color .5s ease-in-out;
        border: 1px solid rgba($border-color, .2);
        box-sizing: border-box;
        border-radius: .5rem;
--- a/console/src/styles/morph-card.scss
+++ b/console/src/styles/morph-card.scss
@ -18,7 +18,9 @@
        margin: 1rem;
        border-radius: 16px;
        border: 1px solid $accent-color;
-        background: $primary-dark;
+        background-color: $primary-dark;
+        transition: background-color .5s ease-in-out;
+

        &.add {
            background: $accent-color;
--- a/console/src/styles/sidenav-list.scss
+++ b/console/src/styles/sidenav-list.scss
@ -50,6 +50,7 @@
    .root-header {
        @include mat-elevation(3);
        background: $primary-dark !important;
+        transition: background .5s ease-in-out;
    }

    .admin-line {
--- a/console/src/styles/table.scss
+++ b/console/src/styles/table.scss
@ -9,6 +9,7 @@
    .mat-table,
    mat-paginator {
        background-color: $secondary-dark !important;
+        transition: background-color .5s ease-in-out;

        &.background-style {
            background-color: $primary-dark !important;
--- a/console/src/styles/theme-card.scss
+++ b/console/src/styles/theme-card.scss
@ -0,0 +1,27 @@
+@import '~@angular/material/theming';
+
+@mixin theme-card($theme) {
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $background-color: mat-color($background, card);
+    $primary: map-get($theme, primary);
+    $primary-color: mat-color($primary, 500);
+    $primary-dark: mat-color($primary, A800);
+    $border-color: mat-color($primary, A700);
+    $border-selected-color: mat-color($primary, A600);
+
+    .theme-conent {
+        background-color: $primary-dark;
+        transition: background-color .5s ease-in-out;
+    }
+
+    .theme-app {
+        background-color: $primary-dark;
+        transition: background-color .5s ease-in-out;
+    }
+
+    .crescent {
+        background-color: $primary-dark;
+        transition: background background-color .5s ease-in-out;
+    }
+}