mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-21 15:04:25 +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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user