mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-31 03:22:15 +00:00
fix(console): add model for api keys, fix toast, binding (#1757)
* fix: add model for api keys, fix toast, binding * show api clientid
This commit is contained in:
Max Peintner
@@ -16,128 +16,128 @@ import { ToastService } from 'src/app/services/toast.service';
|
||||
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-client-keys',
|
||||
templateUrl: './client-keys.component.html',
|
||||
styleUrls: ['./client-keys.component.scss'],
|
||||
selector: 'app-client-keys',
|
||||
templateUrl: './client-keys.component.html',
|
||||
styleUrls: ['./client-keys.component.scss'],
|
||||
})
|
||||
export class ClientKeysComponent implements OnInit {
|
||||
@Input() projectId!: string;
|
||||
@Input() appId!: string;
|
||||
@Input() projectId!: string;
|
||||
@Input() appId!: string;
|
||||
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
public dataSource: MatTableDataSource<Key.AsObject> = new MatTableDataSource<Key.AsObject>();
|
||||
public selection: SelectionModel<Key.AsObject> = new SelectionModel<Key.AsObject>(true, []);
|
||||
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', 'actions'];
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
public dataSource: MatTableDataSource<Key.AsObject> = new MatTableDataSource<Key.AsObject>();
|
||||
public selection: SelectionModel<Key.AsObject> = new SelectionModel<Key.AsObject>(true, []);
|
||||
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', 'actions'];
|
||||
|
||||
@Output() public changedSelection: EventEmitter<Array<Key.AsObject>> = new EventEmitter();
|
||||
@Output() public changedSelection: EventEmitter<Array<Key.AsObject>> = new EventEmitter();
|
||||
|
||||
constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
|
||||
private toast: ToastService) {
|
||||
this.selection.changed.subscribe(() => {
|
||||
this.changedSelection.emit(this.selection.selected);
|
||||
});
|
||||
}
|
||||
constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
|
||||
private toast: ToastService) {
|
||||
this.selection.changed.subscribe(() => {
|
||||
this.changedSelection.emit(this.selection.selected);
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.getData(10, 0);
|
||||
}
|
||||
public ngOnInit(): void {
|
||||
this.getData(10, 0);
|
||||
}
|
||||
|
||||
|
||||
public isAllSelected(): boolean {
|
||||
const numSelected = this.selection.selected.length;
|
||||
const numRows = this.dataSource.data.length;
|
||||
return numSelected === numRows;
|
||||
}
|
||||
public isAllSelected(): boolean {
|
||||
const numSelected = this.selection.selected.length;
|
||||
const numRows = this.dataSource.data.length;
|
||||
return numSelected === numRows;
|
||||
}
|
||||
|
||||
public masterToggle(): void {
|
||||
this.isAllSelected() ?
|
||||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
}
|
||||
public masterToggle(): void {
|
||||
this.isAllSelected() ?
|
||||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
}
|
||||
|
||||
|
||||
public changePage(event: PageEvent): void {
|
||||
this.getData(event.pageSize, event.pageIndex * event.pageSize);
|
||||
}
|
||||
public changePage(event: PageEvent): void {
|
||||
this.getData(event.pageSize, event.pageIndex * event.pageSize);
|
||||
}
|
||||
|
||||
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);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
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);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
public openAddKey(): void {
|
||||
const dialogRef = this.dialog.open(AddKeyDialogComponent, {
|
||||
data: {},
|
||||
width: '400px',
|
||||
});
|
||||
public openAddKey(): void {
|
||||
const dialogRef = this.dialog.open(AddKeyDialogComponent, {
|
||||
data: {},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
if (resp) {
|
||||
const type: KeyType = resp.type;
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
if (resp) {
|
||||
const type: KeyType = resp.type;
|
||||
|
||||
let date: Timestamp | undefined;
|
||||
let date: Timestamp | undefined;
|
||||
|
||||
if (resp.date as Moment) {
|
||||
const ts = new Timestamp();
|
||||
const milliseconds = resp.date.toDate().getTime();
|
||||
const seconds = Math.abs(milliseconds / 1000);
|
||||
const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
|
||||
ts.setSeconds(seconds);
|
||||
ts.setNanos(nanos);
|
||||
date = ts;
|
||||
}
|
||||
|
||||
if (type) {
|
||||
return this.mgmtService.addAppKey(
|
||||
this.projectId,
|
||||
this.appId,
|
||||
type,
|
||||
date ? date : undefined,
|
||||
).then((response) => {
|
||||
if (response) {
|
||||
setTimeout(() => {
|
||||
this.refreshPage();
|
||||
}, 1000);
|
||||
|
||||
this.dialog.open(ShowKeyDialogComponent, {
|
||||
data: {
|
||||
key: response,
|
||||
type: AddKeyDialogType.AUTHNKEY,
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
}
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private async getData(limit: number, offset: number): Promise<void> {
|
||||
this.loadingSubject.next(true);
|
||||
if (this.projectId && this.appId) {
|
||||
this.mgmtService.listAppKeys(this.projectId, this.appId, limit, offset).then(resp => {
|
||||
this.keyResult = resp;
|
||||
this.dataSource.data = this.keyResult.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
if (resp.date as Moment) {
|
||||
const ts = new Timestamp();
|
||||
const milliseconds = resp.date.toDate().getTime();
|
||||
const seconds = Math.abs(milliseconds / 1000);
|
||||
const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
|
||||
ts.setSeconds(seconds);
|
||||
ts.setNanos(nanos);
|
||||
date = ts;
|
||||
}
|
||||
}
|
||||
|
||||
public refreshPage(): void {
|
||||
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
|
||||
if (type) {
|
||||
return this.mgmtService.addAppKey(
|
||||
this.projectId,
|
||||
this.appId,
|
||||
type,
|
||||
date ? date : undefined,
|
||||
).then((response) => {
|
||||
if (response) {
|
||||
setTimeout(() => {
|
||||
this.refreshPage();
|
||||
}, 1000);
|
||||
|
||||
this.dialog.open(ShowKeyDialogComponent, {
|
||||
data: {
|
||||
key: response,
|
||||
type: AddKeyDialogType.AUTHNKEY,
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
}
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private async getData(limit: number, offset: number): Promise<void> {
|
||||
this.loadingSubject.next(true);
|
||||
if (this.projectId && this.appId) {
|
||||
this.mgmtService.listAppKeys(this.projectId, this.appId, limit, offset).then(resp => {
|
||||
this.keyResult = resp;
|
||||
this.dataSource.data = this.keyResult.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
}).catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public refreshPage(): void {
|
||||
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
<ng-container *ngIf="keyResponse">
|
||||
<div class="row">
|
||||
<p class="left">{{'USER.MACHINE.ID' | translate}}</p>
|
||||
<p class="right">{{keyResponse?.keyId}}</p>
|
||||
<p class="right">{{$any(keyResponse)?.id}}</p>
|
||||
<p class="right">{{$any(keyResponse)?.keyId}}</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
@@ -1,30 +1,33 @@
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { saveAs } from 'file-saver';
|
||||
import { AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/management_pb';
|
||||
import { AddAppKeyResponse, AddMachineKeyResponse } from 'src/app/proto/generated/zitadel/management_pb';
|
||||
|
||||
@Component({
|
||||
selector: 'app-show-key-dialog',
|
||||
templateUrl: './show-key-dialog.component.html',
|
||||
styleUrls: ['./show-key-dialog.component.scss'],
|
||||
selector: 'app-show-key-dialog',
|
||||
templateUrl: './show-key-dialog.component.html',
|
||||
styleUrls: ['./show-key-dialog.component.scss'],
|
||||
})
|
||||
export class ShowKeyDialogComponent {
|
||||
public keyResponse!: AddMachineKeyResponse.AsObject;
|
||||
public keyResponse!: AddMachineKeyResponse.AsObject | AddAppKeyResponse.AsObject;
|
||||
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
) {
|
||||
this.keyResponse = data.key;
|
||||
}
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<ShowKeyDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
) {
|
||||
this.keyResponse = data.key;
|
||||
}
|
||||
|
||||
public saveFile(): void {
|
||||
const json = atob(this.keyResponse.keyDetails.toString());
|
||||
const blob = new Blob([json], { type: 'text/plain;charset=utf-8' });
|
||||
saveAs(blob, `${this.keyResponse.keyId}.json`);
|
||||
}
|
||||
public saveFile(): void {
|
||||
const json = atob(this.keyResponse.keyDetails.toString());
|
||||
const blob = new Blob([json], { type: 'text/plain;charset=utf-8' });
|
||||
const name = (this.keyResponse as AddMachineKeyResponse.AsObject).keyId ?
|
||||
(this.keyResponse as AddMachineKeyResponse.AsObject).keyId :
|
||||
(this.keyResponse as AddAppKeyResponse.AsObject).id;
|
||||
saveAs(blob, `${name}.json`);
|
||||
}
|
||||
|
||||
public closeDialog(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
public closeDialog(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user