fix: console for neweventstore (#1457)

* some issues * passwordless, mfa * mfa, project fixes, login policy * user table, auth service, interceptor * keys, machine edit, grants, passwordless * remove asdf
2026-11-01 20:02:15 +00:00 · 2021-03-24 10:50:15 +01:00
parent bacfc3b099
commit 08b066b3a2
25 changed files with 142 additions and 85 deletions
@@ -21,10 +21,13 @@
 }

@mixin changes-theme($theme) {
+    $is-dark-theme: map-get($theme, is-dark);
+
    .scroll-container {
        max-height: 50vh;
        overflow-y: scroll;
-        border-bottom: 1px solid #ffffff20;
+        border-bottom: 1px solid if($is-dark-theme, #303131, #e3e8ee);
+        /* stylelint-enable */
        margin-bottom: 0.5rem;

        .date {
@@ -1,12 +1,6 @@
 <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
    [timestamp]="keyResult?.details?.viewTimestamp" [selection]="selection">
    <div actions>
-        <button color="warn"
-            [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) == false"
-            (click)="deleteSelectedKeys()" matTooltip="{{'ACTIONS.DELETE' | translate}}" class="icon-button"
-            mat-icon-button *ngIf="selection.hasValue()">
-            <i class="las la-trash"></i>
-        </button>
        <a [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) == false"
            color="primary" mat-raised-button (click)="openAddKey()">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
@@ -42,7 +36,7 @@
            <ng-container matColumnDef="creationDate">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
                <td mat-cell *matCellDef="let key">
-                    {{key.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                    {{key.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
                </td>
            </ng-container>

@@ -53,6 +47,17 @@
                </td>
            </ng-container>

+            <ng-container matColumnDef="actions" stickyEnd>
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let key">
+                    <button
+                        [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) == false"
+                        mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}"
+                        (click)="deleteKey(key)">
+                        <i class="las la-trash"></i>
+                    </button>
+                </td>
+            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns;"
@@ -24,4 +24,14 @@

 tr {
  outline: none;
+
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
 }
@@ -29,7 +29,7 @@ export class ClientKeysComponent implements OnInit {
    public keyResult!: ListAppKeysResponse.AsObject;
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate'];
+    @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate', 'actions'];

    @Output() public changedSelection: EventEmitter<Array<Key.AsObject>> = new EventEmitter();

@@ -62,11 +62,8 @@ export class ClientKeysComponent implements OnInit {
        this.getData(event.pageSize, event.pageIndex * event.pageSize);
    }

-    public deleteSelectedKeys(): void {
-        const mappedDeletions = this.selection.selected.map(value => {
-            return this.mgmtService.removeAppKey(this.projectId, this.appId, value.id);
-        });
-        Promise.all(mappedDeletions).then(() => {
+    public deleteKey(key: Key.AsObject): void {
+        this.mgmtService.removeAppKey(this.projectId, this.appId, key.id).then(() => {
            this.selection.clear();
            this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
            this.getData(10, 0);
@@ -1,6 +1,7 @@
 import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { Member } from 'src/app/proto/generated/zitadel/member_pb';

@Component({
    selector: 'app-contributors',
@@ -29,7 +30,7 @@ export class ContributorsComponent {
    @Input() disabled: boolean = false;
    @Input() totalResult: number = 0;
    @Input() loading: boolean = false;
-    @Input() membersSubject!: BehaviorSubject<any[]>;
+    @Input() membersSubject!: BehaviorSubject<Member.AsObject[]>;
    @Output() addClicked: EventEmitter<void> = new EventEmitter();
    @Output() showDetailClicked: EventEmitter<void> = new EventEmitter();
    @Output() refreshClicked: EventEmitter<void> = new EventEmitter();
@@ -69,19 +69,19 @@
                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
                    <div class="date-block">
                        <span class="date-sub">{{ 'IDP.CREATIONDATE' | translate }}:</span>
-                        <span>{{idp.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+                        <span>{{idp.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
                    </div>
                    <div class="date-block">
                        <span class="date-sub">{{ 'IDP.CHANGEDATE' | translate }}</span>
-                        <span>{{idp.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
+                        <span>{{idp.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
                    </div>
                </td>
            </ng-container>

-            <ng-container matColumnDef="type">
+            <ng-container matColumnDef="owner">
                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.TYPE' | translate }} </th>
                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
-                    {{'IDP.TYPES.'+idp.providerType | translate }} </td>
+                    {{'IDP.OWNERTYPES.'+idp.owner | translate }} </td>
            </ng-container>

            <ng-container matColumnDef="actions" stickyEnd>
@@ -89,7 +89,7 @@
                <td mat-cell *matCellDef="let idp">
                    <button
                        [disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IDPOwnerType.IDP_OWNER_TYPE_ORG"
-                        mat-icon-button color="warn" matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
+                        mat-icon-button color="warn" matTooltip="{{'IAM.VIEWS.DELETE' | translate}}"
                        (click)="removeIdp(idp)">
                        <i class="las la-trash"></i>
                    </button>
@@ -51,7 +51,7 @@ export class IdpTableComponent implements OnInit {
    ngOnInit(): void {
        this.getData(10, 0);
        if (this.serviceType === PolicyComponentServiceType.MGMT) {
-            this.displayedColumns = ['select', 'name', 'config', 'dates', 'state', 'type'];
+            this.displayedColumns = ['select', 'name', 'config', 'dates', 'state', 'owner'];
        }

        if (!this.disabled) {
@@ -1,11 +1,6 @@
 <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
    [timestamp]="keyResult?.details?.viewTimestamp" [selection]="selection">
    <div actions>
-        <button color="warn" [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
-            (click)="deleteSelectedKeys()" matTooltip="{{'ACTIONS.DELETE' | translate}}" class="icon-button"
-            mat-icon-button *ngIf="selection.hasValue()">
-            <i class="las la-trash"></i>
-        </button>
        <a [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false" color="primary"
            mat-raised-button (click)="openAddKey()">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
@@ -52,6 +47,17 @@
                </td>
            </ng-container>

+            <ng-container matColumnDef="actions" stickyEnd>
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let key">
+                    <button [disabled]="([('user.write:' + userId), 'user.write'] | hasRole | async) == false"
+                        mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}"
+                        (click)="deleteKey(key)">
+                        <i class="las la-trash"></i>
+                    </button>
+                </td>
+            </ng-container>
+

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
@@ -24,4 +24,14 @@

 tr {
  outline: none;
+
+  button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    button {
+      visibility: visible;
+    }
+  }
 }
@@ -28,7 +28,7 @@ export class MachineKeysComponent implements OnInit {
    public keyResult!: ListMachineKeysResponse.AsObject;
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate'];
+    @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate', 'actions'];

    @Output() public changedSelection: EventEmitter<Array<Key.AsObject>> = new EventEmitter();

@@ -61,11 +61,8 @@ export class MachineKeysComponent implements OnInit {
        this.getData(event.pageSize, event.pageIndex * event.pageSize);
    }

-    public deleteSelectedKeys(): void {
-        const mappedDeletions = this.selection.selected.map(value => {
-            return this.mgmtService.removeMachineKey(value.id, this.userId);
-        });
-        Promise.all(mappedDeletions).then(() => {
+    public deleteKey(key: Key.AsObject): void {
+        this.mgmtService.removeMachineKey(key.id, this.userId).then(() => {
            this.selection.clear();
            this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
            this.getData(10, 0);
@@ -51,10 +51,10 @@
                    {{member.lastName}} </td>
            </ng-container>

-            <ng-container matColumnDef="username">
-                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
+            <ng-container matColumnDef="loginname">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LOGINNAME' | translate }} </th>
                <td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
-                    {{member.userName}} </td>
+                    {{member.preferredloginname}} </td>
            </ng-container>

            <ng-container matColumnDef="email">
@@ -23,20 +23,20 @@ export class MembersTableComponent implements OnInit, OnDestroy {
    @Input() public canDelete: boolean = false;
    @Input() public canWrite: boolean = false;
    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatTable) public table!: MatTable<Member>;
+    @ViewChild(MatTable) public table!: MatTable<Member.AsObject>;
    @Input() public dataSource!: MemberDatasource;
    public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
    @Input() public memberRoleOptions: string[] = [];
    @Input() public factoryLoadFunc!: Function;
    @Input() public refreshTrigger!: Observable<void>;
-    @Output() public updateRoles: EventEmitter<{ member: Member, change: MatSelectChange; }> = new EventEmitter();
+    @Output() public updateRoles: EventEmitter<{ member: Member.AsObject, change: MatSelectChange; }> = new EventEmitter();
    @Output() public changedSelection: EventEmitter<any[]> = new EventEmitter();
-    @Output() public deleteMember: EventEmitter<Member> = new EventEmitter();
+    @Output() public deleteMember: EventEmitter<Member.AsObject> = new EventEmitter();

    private destroyed: Subject<void> = new Subject();

    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-    public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
+    public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'loginname', 'email', 'roles'];

    constructor() {
        this.selection.changed.pipe(takeUntil(this.destroyed)).subscribe(_ => {
@@ -214,6 +214,8 @@ export class MfaTableComponent implements OnInit {
                });
            }
        }
+
+        console.log(this.mfas);
    }

    public refreshPageAfterTimout(to: number): void {
@@ -49,19 +49,24 @@ export class AddIdpDialogComponent {

    public loadIdps(): void {
        this.idp = undefined;
-        if (this.serviceType === PolicyComponentServiceType.MGMT) {
-            const query: IDPQuery = new IDPQuery();
-            const idpOTQ: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
-            idpOTQ.setOwnerType(this.idpType);
-            query.setOwnerTypeQuery(idpOTQ);
+        switch (this.idpType) {
+            case IDPOwnerType.IDP_OWNER_TYPE_ORG:
+                const query: IDPQuery = new IDPQuery();
+                const idpOTQ: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
+                idpOTQ.setOwnerType(this.idpType);
+                query.setOwnerTypeQuery(idpOTQ);
+
+                this.mgmtService.listOrgIDPs(undefined, undefined, [query]).then(resp => {
+                    this.availableIdps = resp.resultList;
+                });
+                break;
+            case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
+                this.adminService.listIDPs().then(resp => {
+                    this.availableIdps = resp.resultList;
+                    console.log(resp);
+                });
+                break;

-            this.mgmtService.listOrgIDPs(undefined, undefined, [query]).then(resp => {
-                this.availableIdps = resp.resultList;
-            });
-        } else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
-            this.adminService.listIDPs().then(resp => {
-                this.availableIdps = resp.resultList;
-            });
        }
    }