mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-04 13:22:16 +00:00
feat: rehauled console (#3525)
* new console * move npm ci to angular build * rel path for assets * local grpc copy * login policy, rm clear views, features rel path * lock Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Amstutz
Livio Amstutz
parent
00f7dbe875
commit
08ae39ae19
@@ -6,8 +6,8 @@ import { RouterLink } from '@angular/router';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { ListIDPsResponse } from 'src/app/proto/generated/zitadel/admin_pb';
|
||||
import { IDP, IDPOwnerType, IDPOwnerTypeQuery, IDPState, IDPStylingType } from 'src/app/proto/generated/zitadel/idp_pb';
|
||||
import { IDPQuery, ListOrgIDPsResponse } from 'src/app/proto/generated/zitadel/management_pb';
|
||||
import { IDP, IDPLoginPolicyLink, IDPOwnerType, IDPState, IDPStylingType } from 'src/app/proto/generated/zitadel/idp_pb';
|
||||
import { ListOrgIDPsResponse } from 'src/app/proto/generated/zitadel/management_pb';
|
||||
import { AdminService } from 'src/app/services/admin.service';
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
@@ -26,21 +26,19 @@ export class IdpTableComponent implements OnInit {
|
||||
@Input() service!: AdminService | ManagementService;
|
||||
@Input() disabled: boolean = false;
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
public dataSource: MatTableDataSource<IDP.AsObject>
|
||||
= new MatTableDataSource<IDP.AsObject>();
|
||||
public selection: SelectionModel<IDP.AsObject>
|
||||
= new SelectionModel<IDP.AsObject>(true, []);
|
||||
public dataSource: MatTableDataSource<IDP.AsObject> = new MatTableDataSource<IDP.AsObject>();
|
||||
public selection: SelectionModel<IDP.AsObject> = new SelectionModel<IDP.AsObject>(true, []);
|
||||
public idpResult!: ListIDPsResponse.AsObject | ListOrgIDPsResponse.AsObject;
|
||||
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
|
||||
public PolicyComponentServiceType: any = PolicyComponentServiceType;
|
||||
public IDPOwnerType: any = IDPOwnerType;
|
||||
public IDPState: any = IDPState;
|
||||
public IDPSTYLINGTYPE: any = IDPStylingType;
|
||||
@Input() public displayedColumns: string[] = ['select', 'name', 'dates', 'state'];
|
||||
public displayedColumns: string[] = ['availability', 'name', 'type', 'creationDate', 'changeDate', 'state'];
|
||||
@Output() public changedSelection: EventEmitter<Array<IDP.AsObject>> = new EventEmitter();
|
||||
|
||||
@Output() public changedSelection: EventEmitter<Array<IDP.AsObject>>
|
||||
= new EventEmitter();
|
||||
public idps: IDPLoginPolicyLink.AsObject[] = [];
|
||||
public IDPStylingType: any = IDPStylingType;
|
||||
|
||||
constructor(public translate: TranslateService, private toast: ToastService, private dialog: MatDialog) {
|
||||
this.selection.changed.subscribe(() => {
|
||||
@@ -50,8 +48,12 @@ export class IdpTableComponent implements OnInit {
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getData(10, 0);
|
||||
this.getIdps().then((resp) => {
|
||||
this.idps = resp;
|
||||
});
|
||||
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
this.displayedColumns = ['select', 'name', 'dates', 'state', 'owner'];
|
||||
this.displayedColumns = ['availability', 'name', 'type', 'owner', 'creationDate', 'changeDate', 'state'];
|
||||
}
|
||||
|
||||
if (!this.disabled) {
|
||||
@@ -66,51 +68,52 @@ export class IdpTableComponent implements OnInit {
|
||||
}
|
||||
|
||||
public masterToggle(): void {
|
||||
this.isAllSelected() ?
|
||||
this.selection.clear() :
|
||||
this.dataSource.data.forEach(row => this.selection.select(row));
|
||||
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 deactivateSelectedIdps(): void {
|
||||
const map: Promise<any>[] = this.selection.selected.map(value => {
|
||||
const map: Promise<any>[] = this.selection.selected.map((value) => {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
return (this.service as ManagementService).deactivateOrgIDP(value.id);
|
||||
} else {
|
||||
return (this.service as AdminService).deactivateIDP(value.id);
|
||||
}
|
||||
});
|
||||
Promise.all(map).then(() => {
|
||||
this.selection.clear();
|
||||
this.toast.showInfo('IDP.TOAST.SELECTEDDEACTIVATED', true);
|
||||
this.refreshPage();
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
Promise.all(map)
|
||||
.then(() => {
|
||||
this.selection.clear();
|
||||
this.toast.showInfo('IDP.TOAST.SELECTEDDEACTIVATED', true);
|
||||
this.refreshPage();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
public reactivateSelectedIdps(): void {
|
||||
const map: Promise<any>[] = this.selection.selected.map(value => {
|
||||
const map: Promise<any>[] = this.selection.selected.map((value) => {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
return (this.service as ManagementService).reactivateOrgIDP(value.id);
|
||||
} else {
|
||||
return (this.service as AdminService).reactivateIDP(value.id);
|
||||
}
|
||||
});
|
||||
Promise.all(map).then(() => {
|
||||
this.selection.clear();
|
||||
this.toast.showInfo('IDP.TOAST.SELECTEDREACTIVATED', true);
|
||||
this.refreshPage();
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
Promise.all(map)
|
||||
.then(() => {
|
||||
this.selection.clear();
|
||||
this.toast.showInfo('IDP.TOAST.SELECTEDREACTIVATED', true);
|
||||
this.refreshPage();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
public removeIdp(idp: IDP.AsObject): void {
|
||||
public deleteIdp(idp: IDP.AsObject): void {
|
||||
const dialogRef = this.dialog.open(WarnDialogComponent, {
|
||||
data: {
|
||||
confirmKey: 'ACTIONS.DELETE',
|
||||
@@ -121,26 +124,32 @@ export class IdpTableComponent implements OnInit {
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
dialogRef.afterClosed().subscribe((resp) => {
|
||||
if (resp) {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
(this.service as ManagementService).removeOrgIDP(idp.id).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
setTimeout(() => {
|
||||
this.refreshPage();
|
||||
}, 1000);
|
||||
}, error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as ManagementService).removeOrgIDP(idp.id).then(
|
||||
() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
setTimeout(() => {
|
||||
this.refreshPage();
|
||||
}, 1000);
|
||||
},
|
||||
(error) => {
|
||||
this.toast.showError(error);
|
||||
},
|
||||
);
|
||||
} else {
|
||||
(this.service as AdminService).removeIDP(idp.id).then(() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
setTimeout(() => {
|
||||
this.refreshPage();
|
||||
}, 1000);
|
||||
}, error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
(this.service as AdminService).removeIDP(idp.id).then(
|
||||
() => {
|
||||
this.toast.showInfo('IDP.TOAST.DELETED', true);
|
||||
setTimeout(() => {
|
||||
this.refreshPage();
|
||||
}, 1000);
|
||||
},
|
||||
(error) => {
|
||||
this.toast.showError(error);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -150,29 +159,34 @@ export class IdpTableComponent implements OnInit {
|
||||
this.loadingSubject.next(true);
|
||||
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const query: IDPQuery = new IDPQuery();
|
||||
const otQuery: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
|
||||
otQuery.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_ORG);
|
||||
query.setOwnerTypeQuery(otQuery);
|
||||
(this.service as ManagementService).listOrgIDPs(limit, offset, [query]).then(resp => {
|
||||
this.idpResult = resp;
|
||||
this.dataSource.data = resp.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
// const query: IDPQuery = new IDPQuery();
|
||||
// const otQuery: IDPOwnerTypeQuery = new IDPOwnerTypeQuery();
|
||||
// otQuery.setOwnerType(IDPOwnerType.IDP_OWNER_TYPE_ORG);
|
||||
// query.setOwnerTypeQuery(otQuery);
|
||||
(this.service as ManagementService)
|
||||
.listOrgIDPs(limit, offset)
|
||||
.then((resp) => {
|
||||
this.idpResult = resp;
|
||||
this.dataSource.data = resp.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
} else {
|
||||
(this.service as AdminService).listIDPs(limit, offset).then(resp => {
|
||||
this.idpResult = resp;
|
||||
this.dataSource.data = resp.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
(this.service as AdminService)
|
||||
.listIDPs(limit, offset)
|
||||
.then((resp) => {
|
||||
this.idpResult = resp;
|
||||
this.dataSource.data = resp.resultList;
|
||||
this.loadingSubject.next(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
this.loadingSubject.next(false);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public refreshPage(): void {
|
||||
@@ -181,7 +195,7 @@ export class IdpTableComponent implements OnInit {
|
||||
|
||||
public get createRouterLink(): RouterLink | any {
|
||||
if (this.service instanceof AdminService) {
|
||||
return ['/iam', 'idp', 'create'];
|
||||
return ['/system', 'idp', 'create'];
|
||||
} else if (this.service instanceof ManagementService) {
|
||||
return ['/org', 'idp', 'create'];
|
||||
}
|
||||
@@ -193,14 +207,86 @@ export class IdpTableComponent implements OnInit {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
switch (row.owner) {
|
||||
case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
|
||||
return ['/iam', 'idp', row.id];
|
||||
return ['/system', 'idp', row.id];
|
||||
case IDPOwnerType.IDP_OWNER_TYPE_ORG:
|
||||
return ['/org', 'idp', row.id];
|
||||
}
|
||||
break;
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return ['/iam', 'idp', row.id];
|
||||
return ['/system', 'idp', row.id];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async getIdps(): Promise<IDPLoginPolicyLink.AsObject[]> {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return (this.service as ManagementService).listLoginPolicyIDPs().then((resp) => {
|
||||
return resp.resultList;
|
||||
});
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return (this.service as AdminService).listLoginPolicyIDPs().then((providers) => {
|
||||
return providers.resultList;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public addIdp(idp: IDP.AsObject | IDP.AsObject): Promise<any> {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return (this.service as ManagementService).addIDPToLoginPolicy(idp.id, idp.owner).then(() => {
|
||||
this.getIdps()
|
||||
.then((resp) => {
|
||||
this.idps = resp;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
});
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return (this.service as AdminService)
|
||||
.addIDPToLoginPolicy(idp.id)
|
||||
.then(() => {
|
||||
this.getIdps().then((resp) => {
|
||||
this.idps = resp;
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public removeIdp(idp: IDP.AsObject): void {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
(this.service as ManagementService).removeIDPFromLoginPolicy(idp.id).then(
|
||||
() => {
|
||||
this.getIdps().then((resp) => {
|
||||
this.idps = resp;
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
this.toast.showError(error);
|
||||
},
|
||||
);
|
||||
break;
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
(this.service as AdminService).removeIDPFromLoginPolicy(idp.id).then(
|
||||
() => {
|
||||
this.getIdps().then((resp) => {
|
||||
this.idps = resp;
|
||||
});
|
||||
},
|
||||
(error) => {
|
||||
this.toast.showError(error);
|
||||
},
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
public isEnabled(idp: IDP.AsObject): boolean {
|
||||
return this.idps.findIndex((i) => i.idpId === idp.id) > -1;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user