andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-04 13:22:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: console v2 (#1454)

Browse Source 
* some issues

* passwordless, mfa

* mfa, project fixes, login policy

* user table, auth service, interceptor
This commit is contained in:
Max Peintner
2021-03-23 09:50:58 +01:00
committed by GitHub
parent d5f0c2375a
commit 7768759906
40 changed files with 261 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
+6 -3
View File
@@ -97,9 +97,12 @@ export class MemberCreateDialogComponent {
}
public selectProject(project: Project.AsObject | GrantedProject.AsObject | any): void {
this.projectId = project.projectId;
if (project.id) {
this.grantId = project.id;
if (project.projectId && project.grantId) {
this.projectId = project.projectId;
this.grantId = project.grantId;
}
else if (project.id) {
this.projectId = project.id;
}
}
console/src/app/modules/mfa-table/dialog-add-type/dialog-add-type.component.html
+5 -4
View File
@@ -2,14 +2,15 @@
<div mat-dialog-content>
<p class="desc">{{data.desc | translate}}</p>
<!-- <cnsl-form-field class="form-field" label="Access Code" required="true">
<cnsl-form-field class="form-field" label="Access Code" required="true">
<cnsl-label>{{'MFA.TYPE' | translate}}</cnsl-label>
<mat-select [(ngModel)]="newMfaType">
<mat-option *ngFor="let mfa of []" [value]="mfa">
{{(data.componentType == LoginMethodComponentType.SecondFactor ? 'MFA.SECONDFACTORTYPES.': LoginMethodComponentType.MultiFactor ? 'MFA.MULTIFACTORTYPES.': '')+mfa | translate}}
<mat-option *ngFor="let mfa of availableMfaTypes" [value]="mfa">
{{(data.componentType == LoginMethodComponentType.SecondFactor ? 'MFA.SECONDFACTORTYPES.':
LoginMethodComponentType.MultiFactor ? 'MFA.MULTIFACTORTYPES.': '')+mfa | translate}}
</mat-option>
</mat-select>
</cnsl-form-field> -->
</cnsl-form-field>
</div>
<div mat-dialog-actions class="action">
<button mat-button (click)="closeDialog()"><span>{{'ACTIONS.CLOSE' | translate}}</span></button>
console/src/app/modules/mfa-table/dialog-add-type/dialog-add-type.component.ts
+5 -3
View File
@@ -1,5 +1,6 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MultiFactorType, SecondFactorType } from 'src/app/proto/generated/zitadel/policy_pb';
enum LoginMethodComponentType {
MultiFactor = 1,
@@ -13,10 +14,11 @@ enum LoginMethodComponentType {
})
export class DialogAddTypeComponent {
public LoginMethodComponentType: any = LoginMethodComponentType;
// public availableMfaTypes: Array<AdminMultiFactorType | MgmtMultiFactorType> = [];
public availableMfaTypes: Array<MultiFactorType | SecondFactorType> = [];
public newMfaType!: MultiFactorType | SecondFactorType;
constructor(public dialogRef: MatDialogRef<DialogAddTypeComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
// this.availableMfaTypes = data.types;
this.availableMfaTypes = data.types;
}
public closeDialog(): void {
@@ -24,6 +26,6 @@ export class DialogAddTypeComponent {
}
public closeDialogWithCode(): void {
// this.dialogRef.close(this.newMfaType);
this.dialogRef.close(this.newMfaType);
}
}
console/src/app/modules/mfa-table/mfa-table.component.ts
+55 -50
View File
@@ -4,10 +4,14 @@ import { MatPaginator } from '@angular/material/paginator';
import { TranslateService } from '@ngx-translate/core';
import { BehaviorSubject, Observable } from 'rxjs';
import {
AddMultiFactorToLoginPolicyRequest as AdminAddMultiFactorToLoginPolicyRequest,
AddSecondFactorToLoginPolicyRequest as AdminAddSecondFactorToLoginPolicyRequest,
RemoveMultiFactorFromLoginPolicyRequest as AdminRemoveMultiFactorFromLoginPolicyRequest,
RemoveSecondFactorFromLoginPolicyRequest as AdminRemoveSecondFactorFromLoginPolicyRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import {
AddMultiFactorToLoginPolicyRequest as MgmtAddMultiFactorToLoginPolicyRequest,
AddSecondFactorToLoginPolicyRequest as MgmtAddSecondFactorToLoginPolicyRequest,
RemoveMultiFactorFromLoginPolicyRequest as MgmtRemoveMultiFactorFromLoginPolicyRequest,
RemoveSecondFactorFromLoginPolicyRequest as MgmtRemoveSecondFactorFromLoginPolicyRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
@@ -18,6 +22,7 @@ import { ToastService } from 'src/app/services/toast.service';
import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
import { DialogAddTypeComponent } from './dialog-add-type/dialog-add-type.component';
export enum LoginMethodComponentType {
MultiFactor = 1,
@@ -116,57 +121,57 @@ export class MfaTableComponent implements OnInit {
}
});
// const dialogRef = this.dialog.open(DialogAddTypeComponent, {
// data: {
// title: 'MFA.CREATE.TITLE',
// desc: 'MFA.CREATE.DESCRIPTION',
// componentType: this.componentType,
// types: selection,
// },
// width: '400px',
// });
const dialogRef = this.dialog.open(DialogAddTypeComponent, {
data: {
title: 'MFA.CREATE.TITLE',
desc: 'MFA.CREATE.DESCRIPTION',
componentType: this.componentType,
types: selection,
},
width: '400px',
});
// dialogRef.afterClosed().subscribe((mfaType: ) => {
// if (mfaType) {
// if (this.serviceType === PolicyComponentServiceType.MGMT) {
// if (this.componentType === LoginMethodComponentType.MultiFactor) {
// const req = new MgmtAddMultiFactorToLoginPolicyRequest();
// req.setType(mfaType as MultiFactorType);
// (this.service as ManagementService).addMultiFactorToLoginPolicy(req).then(() => {
// this.refreshPageAfterTimout(2000);
// }).catch(error => {
// this.toast.showError(error);
// });
// } else if (this.componentType === LoginMethodComponentType.SecondFactor) {
// const req = new MgmtAddSecondFactorToLoginPolicyRequest();
// req.setType(mfaType as SecondFactorType);
// (this.service as ManagementService).addSecondFactorToLoginPolicy(req).then(() => {
// this.refreshPageAfterTimout(2000);
// }).catch(error => {
// this.toast.showError(error);
// });
// }
// } else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
// if (this.componentType === LoginMethodComponentType.MultiFactor) {
// const req = new AdminAddMultiFactorToLoginPolicyRequest();
// req.setType(mfaType as MultiFactorType);
// (this.service as AdminService).addMultiFactorToLoginPolicy(req).then(() => {
// this.refreshPageAfterTimout(2000);
// }).catch(error => {
// this.toast.showError(error);
// });
// } else if (this.componentType === LoginMethodComponentType.SecondFactor) {
// const req = new AdminAddSecondFactorToLoginPolicyRequest();
// req.setType(mfaType as SecondFactorType);
// (this.service as AdminService).addSecondFactorToLoginPolicy(req).then(() => {
// this.refreshPageAfterTimout(2000);
// }).catch(error => {
// this.toast.showError(error);
// });
// }
// }
// }
// });
dialogRef.afterClosed().subscribe((mfaType: MultiFactorType | SecondFactorType) => {
if (mfaType) {
if (this.serviceType === PolicyComponentServiceType.MGMT) {
if (this.componentType === LoginMethodComponentType.MultiFactor) {
const req = new MgmtAddMultiFactorToLoginPolicyRequest();
req.setType(mfaType as MultiFactorType);
(this.service as ManagementService).addMultiFactorToLoginPolicy(req).then(() => {
this.refreshPageAfterTimout(2000);
}).catch(error => {
this.toast.showError(error);
});
} else if (this.componentType === LoginMethodComponentType.SecondFactor) {
const req = new MgmtAddSecondFactorToLoginPolicyRequest();
req.setType(mfaType as SecondFactorType);
(this.service as ManagementService).addSecondFactorToLoginPolicy(req).then(() => {
this.refreshPageAfterTimout(2000);
}).catch(error => {
this.toast.showError(error);
});
}
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
if (this.componentType === LoginMethodComponentType.MultiFactor) {
const req = new AdminAddMultiFactorToLoginPolicyRequest();
req.setType(mfaType as MultiFactorType);
(this.service as AdminService).addMultiFactorToLoginPolicy(req).then(() => {
this.refreshPageAfterTimout(2000);
}).catch(error => {
this.toast.showError(error);
});
} else if (this.componentType === LoginMethodComponentType.SecondFactor) {
const req = new AdminAddSecondFactorToLoginPolicyRequest();
req.setType(mfaType as SecondFactorType);
(this.service as AdminService).addSecondFactorToLoginPolicy(req).then(() => {
this.refreshPageAfterTimout(2000);
}).catch(error => {
this.toast.showError(error);
});
}
}
}
});
}
private async getData(): Promise<void> {
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
+1 -1
View File
@@ -8,7 +8,7 @@
<mat-chip-list *ngIf="!singleOutput" #chipList aria-label="loginname selection">
<mat-chip class="chip" *ngFor="let selecteduser of users" [selectable]="selectable" [removable]="removable"
(removed)="remove(selecteduser)">
{{ selecteduser?.human ? (selecteduser.human.firstName + ' ' + selecteduser.human.lastName) :
{{ selecteduser?.human?.profile ? (selecteduser.human.profile.displayName) :
selecteduser?.machine?.name}}
| <small>
{{selecteduser.preferredLoginName}}</small>
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
+1
View File
@@ -62,6 +62,7 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
} else if (this.target === UserTarget.SELF) {
this.getFilteredResults(); // new subscription
}
console.log(this.users);
}
public ngAfterContentChecked(): void {
console/src/app/modules/user-grants/user-grants-datasource.ts
+1
View File
@@ -128,6 +128,7 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(grants => {
console.log(grants);
this.grantsSubject.next(grants);
});
}
console/src/app/modules/user-grants/user-grants.component.html
+8 -8
View File
@@ -67,13 +67,13 @@
<ng-container matColumnDef="dates">
<th mat-header-cell *matHeaderCellDef> DATES </th>
<td mat-cell *matCellDef="let grant">
<div class="date-block">
<div class="date-block" *ngIf="grant.details?.creationDate">
<span class="date-sub">{{ 'PROJECT.GRANT.CREATIONDATE' | translate }}:</span>
<span>{{grant.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
<span>{{grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</div>
<div class="date-block">
<div class="date-block" *ngIf="grant.details?.changeDate">
<span class="date-sub">{{ 'PROJECT.GRANT.CHANGEDATE' | translate }}</span>
<span>{{grant.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
<span>{{grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</div>
</td>
</ng-container>
@@ -86,14 +86,14 @@
</th>
<td mat-cell *matCellDef="let grant; let i = index" class="role-data">
<ng-container
*ngIf="(context === UserGrantContext.USER || context === UserGrantContext.NONE) && (grant.grantId && grantToEdit !== grant.id) || (grantToEdit !== grant.id)">
*ngIf="(context === UserGrantContext.USER || context === UserGrantContext.NONE) && (grant.grantId && grantToEdit !== grant.grantId) || (grantToEdit !== grant.grantId)">
<div class="flex-row">
<div class="role">
<span *ngFor="let role of grant.roleKeysList">{{ role }}</span>
</div>
<span class="fill-space"></span>
<button mat-stroked-button
*ngIf="grant.grantId ? grantToEdit !== grant.id : grantToEdit !== grant.id"
*ngIf="grant.grantId ? grantToEdit !== grant.grantId : grantToEdit !== grant.grantId"
[disabled]="disableWrite || !((['user.grant.write$'] | hasRole | async) || ((context === UserGrantContext.OWNED_PROJECT ? ['user.grant.write:' + grant?.projectId] : context === UserGrantContext.GRANTED_PROJECT ? ['user.grant.write:' + grant?.grantId] : []) | hasRole | async))"
(click)="loadGrantOptions(grant)" matTooltip="{{'ACTIONS.CHANGE' | translate}}">
<i class="las la-edit"></i>
@@ -104,7 +104,7 @@
<div class="row-form">
<ng-container
*ngIf="(context === UserGrantContext.OWNED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE) && grantToEdit == grant.id && loadedProjectId && loadedProjectId === grant.projectId">
*ngIf="(context === UserGrantContext.OWNED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE) && grantToEdit == grant.grantId && loadedProjectId && loadedProjectId === grant.projectId">
<cnsl-form-field class="form-field" appearance="outline">
<!-- <cnsl-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</cnsl-label> -->
<mat-select [(ngModel)]="grant.roleKeysList" multiple
@@ -123,7 +123,7 @@
</ng-container>
<ng-container
*ngIf="(context === UserGrantContext.GRANTED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE) && loadedGrantId && loadedGrantId === grant.grantId && grantToEdit == grant.id">
*ngIf="(context === UserGrantContext.GRANTED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE) && loadedGrantId && loadedGrantId === grant.grantId && grantToEdit == grant.grantId">
<cnsl-form-field class="form-field" appearance="outline">
<!-- <cnsl-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</cnsl-label> -->
<mat-select [(ngModel)]="grant.roleKeysList" multiple
console/src/app/modules/user-grants/user-grants.component.ts
+2
View File
@@ -182,12 +182,14 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
}
private getGrantRoleOptions(grantId: string, projectId: string): void {
console.log(projectId, grantId);
this.mgmtService.getGrantedProjectByID(projectId, grantId).then(resp => {
if (resp.grantedProject) {
this.loadedGrantId = grantId;
this.grantRoleOptions = resp.grantedProject?.grantedRoleKeysList;
}
}).catch(error => {
this.grantToEdit = '';
this.toast.showError(error);
});
}