feat: console feature api (#1480)

This commit is contained in:
Max Peintner
2021-03-27 09:37:57 +01:00
committed by GitHub
parent c0b37924c8
commit 0a058a821e
70 changed files with 831 additions and 132 deletions

View File

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/guards/auth.guard';
import { RoleGuard } from 'src/app/guards/role.guard';
import { FeatureServiceType } from 'src/app/modules/features/features.component';
import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
import { EventstoreComponent } from './eventstore/eventstore.component';
@@ -32,6 +33,15 @@ const routes: Routes = [
roles: ['iam.member.read'],
},
},
{
path: 'features',
loadChildren: () => import('src/app/modules/features/features.module').then(m => m.FeaturesModule),
// canActivate: [RoleGuard],
data: {
roles: ['iam.features.read'],
serviceType: FeatureServiceType.ADMIN
},
},
{
path: 'idp',
children: [

View File

@@ -3,6 +3,22 @@
<h1 class="h1">{{'IAM.POLICIES.TITLE' | translate}}</h1>
<p class="sub">{{'IAM.POLICIES.DESCRIPTION' | translate}} </p>
<h2>{{'FEATURES.TITLE' | translate}}</h2>
<p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
<div *ngIf="features" class="tier">
<mat-icon>stars</mat-icon>
<div class="text" *ngIf="features.tier">
<p class="title"><strong>ZITADEL {{features.tier.name}}</strong></p>
<p>{{features.tier?.description}}</p>
<p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
<p>{{features.tier?.statusInfo}}</p>
</div>
<span class="fill-space"></span>
<a class="ext" href="https://zitadel.ch/pricing" target="_blank"><i
class="las la-external-link-alt"></i></a>
<button mat-raised-button [routerLink]="['/iam','features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
</div>
<app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
</div>

View File

@@ -6,3 +6,48 @@
color: var(--grey);
margin-bottom: 2rem;
}
.top-desc {
color: var(--grey);
font-size: 14px;
}
.tier {
display: flex;
flex-direction: row;
padding: 1rem;
border-radius: .5rem;
color: white;
background-color: rgb(245, 203, 99);
margin-bottom: .5rem;
.ext {
margin-right: .5rem;
align-self: center;
color: inherit;
}
mat-icon {
margin-right: 1rem;
font-size: 2rem;
}
.text {
display: flex;
flex-direction: column;
p {
margin: 0;
font-size: 14px;
}
.title {
font-size: 16px;
margin-bottom: .5rem;
}
}
.fill-space {
flex: 1;
}
}

View File

@@ -6,6 +6,7 @@ import { catchError, finalize, map } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { PolicyGridType } from 'src/app/modules/policy-grid/policy-grid.component';
import { Features } from 'src/app/proto/generated/zitadel/features_pb';
import { Member } from 'src/app/proto/generated/zitadel/member_pb';
import { User } from 'src/app/proto/generated/zitadel/user_pb';
import { AdminService } from 'src/app/services/admin.service';
@@ -25,10 +26,13 @@ export class IamComponent {
= new BehaviorSubject<Member.AsObject[]>([]);
public PolicyGridType: any = PolicyGridType;
public features!: Features.AsObject;
constructor(public adminService: AdminService, private dialog: MatDialog, private toast: ToastService,
private router: Router) {
this.loadMembers();
this.loadFeatures();
this.adminService.getDefaultFeatures();
}
public loadMembers(): void {
@@ -79,4 +83,13 @@ export class IamComponent {
public showDetail(): void {
this.router.navigate(['iam/members']);
}
public loadFeatures(): void {
this.loadingSubject.next(true);
this.adminService.getDefaultFeatures().then(resp => {
if (resp.features) {
this.features = resp.features;
}
});
}
}

View File

@@ -196,7 +196,6 @@ export class OrgCreateComponent {
name: ['', [Validators.required]],
});
console.log(this.orgForm);
} else {
this.createSteps = 2;

View File

@@ -28,6 +28,23 @@
</app-card>
</ng-container>
<h2>{{'FEATURES.TITLE' | translate}}</h2>
<p class="top-desc">{{'FEATURES.DESCRIPTION' | translate}}</p>
<div *ngIf="features" class="tier">
<mat-icon>stars</mat-icon>
<div class="text" *ngIf="features.tier">
<p class="title"><strong>ZITADEL {{features.tier.name}}</strong></p>
<p>{{features.tier?.description}}</p>
<p>{{'FEATURES.TIERSTATES.'+features.tier.state | translate}}</p>
<p>{{features.tier?.statusInfo}}</p>
</div>
<span class="fill-space"></span>
<a class="ext" href="https://zitadel.ch/pricing" target="_blank"><i
class="las la-external-link-alt"></i></a>
<button mat-raised-button [routerLink]="['features']">{{'FEATURES.BTN-EDIT' | translate}}</button>
</div>
<ng-template appHasRole [appHasRole]="['policy.read']">
<app-policy-grid [type]="PolicyGridType.ORG"></app-policy-grid>
</ng-template>

View File

@@ -2,11 +2,62 @@
margin-top: 0;
}
h2 {
font-size: 1.2rem;
letter-spacing: .05em;
text-transform: uppercase;
}
.top-desc {
color: var(--grey);
font-size: 14px;
}
.sub {
color: var(--grey);
margin-bottom: 2rem;
}
.tier {
display: flex;
flex-direction: row;
padding: 1rem;
border-radius: .5rem;
color: white;
background-color: rgb(245, 203, 99);
margin-bottom: .5rem;
.ext {
margin-right: .5rem;
align-self: center;
color: inherit;
}
mat-icon {
margin-right: 1rem;
font-size: 2rem;
}
.text {
display: flex;
flex-direction: column;
p {
margin: 0;
font-size: 14px;
}
.title {
font-size: 16px;
margin-bottom: .5rem;
}
}
.fill-space {
flex: 1;
}
}
.domain {
display: flex;
align-items: center;

View File

@@ -10,6 +10,7 @@ import { ChangeType } from 'src/app/modules/changes/changes.component';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { PolicyGridType } from 'src/app/modules/policy-grid/policy-grid.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Features } from 'src/app/proto/generated/zitadel/features_pb';
import { Member } from 'src/app/proto/generated/zitadel/member_pb';
import { Domain, Org, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
import { User } from 'src/app/proto/generated/zitadel/user_pb';
@@ -43,13 +44,17 @@ export class OrgDetailComponent implements OnInit {
= new BehaviorSubject<Member.AsObject[]>([]);
public PolicyGridType: any = PolicyGridType;
public features!: Features.AsObject;
constructor(
private dialog: MatDialog,
public translate: TranslateService,
public mgmtService: ManagementService,
private toast: ToastService,
private router: Router,
) { }
) {
}
public ngOnInit(): void {
this.getData();
@@ -65,12 +70,12 @@ export class OrgDetailComponent implements OnInit {
});
this.loadMembers();
this.loadDomains();
this.loadFeatures();
}
public loadDomains(): void {
this.mgmtService.listOrgDomains().then(result => {
this.domains = result.resultList;
console.log(this.domains);
this.primaryDomain = this.domains.find(domain => domain.isPrimary)?.domainName ?? '';
});
}
@@ -208,4 +213,13 @@ export class OrgDetailComponent implements OnInit {
this.membersSubject.next(members);
});
}
public loadFeatures(): void {
this.loadingSubject.next(true);
this.mgmtService.getFeatures().then(resp => {
if (resp.features) {
this.features = resp.features;
}
});
}
}

View File

@@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RoleGuard } from 'src/app/guards/role.guard';
import { FeatureServiceType } from 'src/app/modules/features/features.component';
import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
import { OrgCreateComponent } from './org-create/org-create.component';
@@ -39,6 +40,15 @@ const routes: Routes = [
},
],
},
{
path: 'features',
loadChildren: () => import('src/app/modules/features/features.module').then(m => m.FeaturesModule),
canActivate: [RoleGuard],
data: {
roles: ['features.read'],
serviceType: FeatureServiceType.MGMT,
},
},
{
path: 'policy',
children: [

View File

@@ -15,6 +15,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
import { CardModule } from 'src/app/modules/card/card.module';
import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
import { FeaturesModule } from 'src/app/modules/features/features.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
@@ -57,6 +58,7 @@ import { OrgsRoutingModule } from './orgs-routing.module';
ContributorsModule,
CopyToClipboardModule,
PolicyGridModule,
FeaturesModule,
],
})
export class OrgsModule { }

View File

@@ -273,7 +273,6 @@ export class AppCreateComponent implements OnInit, OnDestroy {
private async getData({ projectid }: Params): Promise<void> {
this.projectId = projectid;
console.log(this.projectId);
this.oidcAppRequest.projectId = projectid;
this.apiAppRequest.projectId = projectid;
}

View File

@@ -39,13 +39,13 @@
<form *ngIf="app && editState" [formGroup]="appNameForm">
<div class="name-content">
<mat-button-toggle-group formControlName="state" class="toggle" (change)="changeState($event)">
<mat-button-toggle [value]="AppState.APPSTATE_INACTIVE"
<mat-button-toggle [value]="AppState.APP_STATE_INACTIVE"
matTooltip="{{ 'ACTIONS.DEACTIVATE' | translate}}">
{{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_INACTIVE | translate}}
{{'APP.PAGES.DETAIL.STATE.'+AppState.APP_STATE_INACTIVE | translate}}
</mat-button-toggle>
<mat-button-toggle [value]="AppState.APPSTATE_ACTIVE"
matTooltip="{{ 'ACTIONS.REACTIVATE' | translate}}">
{{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_ACTIVE | translate}}
{{'APP.PAGES.DETAIL.STATE.'+AppState.APP_STATE_ACTIVE | translate}}
</mat-button-toggle>
</mat-button-toggle-group>

View File

@@ -211,7 +211,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.mgmtService.getAppByID(projectid, id).then(app => {
if (app.app) {
this.app = app.app;
console.log(this.app);
this.appNameForm.patchValue(this.app);
if (this.app.oidcConfig) {
@@ -301,7 +300,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
const snackRef = this.snackbar.open(message, action, { duration: 5000, verticalPosition: 'top' });
snackRef.onAction().subscribe(() => {
console.log(this.app);
if (this.app.oidcConfig) {
this.saveOIDCApp();
} else if (this.app.apiConfig) {

View File

@@ -29,7 +29,7 @@
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="projectId" class="second">{{ projectId }}</span>
<span *ngIf="projectId" class="second">{{ project?.grantId }}</span>
</div>
<div class="meta-row">
<span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>

View File

@@ -91,7 +91,6 @@ export class GrantedProjectListComponent implements OnInit, OnDestroy {
this.loadingSubject.next(true);
this.mgmtService.listGrantedProjects(limit, offset).then(resp => {
this.grantedProjectList = resp.resultList;
console.log(this.grantedProjectList);
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;
}

View File

@@ -27,13 +27,11 @@ export class ApplicationGridComponent implements OnInit {
public loadApps(): void {
from(this.mgmtService.listApps(this.projectId, 100, 0)).pipe(
map(resp => {
console.log(resp.resultList);
return resp.resultList;
}),
// catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe((apps) => {
console.log(apps);
this.appsSubject.next(apps as App.AsObject[]);
});
}

View File

@@ -109,7 +109,6 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
private async getData(limit?: number, offset?: number): Promise<void> {
this.loadingSubject.next(true);
this.mgmtService.listProjects(limit, offset).then(resp => {
console.log(resp.resultList);
this.ownedProjectList = resp.resultList;
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;

View File

@@ -95,10 +95,6 @@ export class UserGrantCreateComponent implements OnDestroy {
public addGrant(): void {
switch (this.context) {
case UserGrantContext.OWNED_PROJECT:
console.log('owned', this.userId,
this.rolesList,
this.projectId,
this.grantId);
this.userService.addUserGrant(
this.userId,
this.rolesList,
@@ -111,11 +107,6 @@ export class UserGrantCreateComponent implements OnDestroy {
});
break;
case UserGrantContext.GRANTED_PROJECT:
console.log('granted', this.userId,
this.rolesList,
this.projectId,
this.grantId);
this.userService.addUserGrant(
this.userId,
this.rolesList,
@@ -135,11 +126,6 @@ export class UserGrantCreateComponent implements OnDestroy {
grantId = (this.project as GrantedProject.AsObject).grantId;
}
console.log(this.userId,
this.rolesList,
this.projectId,
grantId);
this.userService.addUserGrant(
this.userId,
this.rolesList,

View File

@@ -10,24 +10,6 @@ import { Gender } from 'src/app/proto/generated/zitadel/user_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
function noEmailValidator(c: AbstractControl): any {
const EMAIL_REGEXP: RegExp = /^((?!@).)*$/gm;
if (!c.parent || !c) {
return;
}
const username = c.parent.get('userName');
if (!username) {
return;
}
return EMAIL_REGEXP.test(username.value) ? null : {
noEmailValidator: {
valid: false,
},
};
}
@Component({
selector: 'app-user-create',
templateUrl: './user-create.component.html',
@@ -88,7 +70,6 @@ export class UserCreateComponent implements OnDestroy {
[
Validators.required,
Validators.minLength(2),
this.userLoginMustBeDomain ? noEmailValidator : Validators.email,
],
],
firstName: ['', Validators.required],

View File

@@ -56,7 +56,6 @@ export class AuthFactorDialogComponent {
const credOptions: CredentialCreationOptions = JSON.parse(atob(u2fresp.key?.publicKey as string));
if (credOptions.publicKey?.challenge) {
console.log(credOptions.publicKey);
credOptions.publicKey.challenge = _base64ToArrayBuffer(credOptions.publicKey.challenge as any);
credOptions.publicKey.user.id = _base64ToArrayBuffer(credOptions.publicKey.user.id as any);
if (credOptions.publicKey.excludeCredentials) {
@@ -93,13 +92,12 @@ export class AuthFactorDialogComponent {
public submitU2F(): void {
if (this.u2fname && this.u2fCredentialOptions.publicKey) {
// this.data.credOptions.publicKey.rp.id = 'localhost';
navigator.credentials.create(this.data.credOptions).then((resp) => {
navigator.credentials.create(this.u2fCredentialOptions).then((resp) => {
if (resp &&
(resp as any).response.attestationObject &&
(resp as any).response.clientDataJSON &&
(resp as any).rawId) {
console.log(resp);
const attestationObject = (resp as any).response.attestationObject;
const clientDataJSON = (resp as any).response.clientDataJSON;
const rawId = (resp as any).rawId;

View File

@@ -53,7 +53,6 @@ export class AuthPasswordlessComponent implements OnInit, OnDestroy {
public addPasswordless(): void {
this.service.addMyPasswordless().then((resp) => {
if (resp.key) {
console.log(resp.key);
const credOptions: CredentialCreationOptions = JSON.parse(atob(resp.key.publicKey as string));
if (credOptions.publicKey?.challenge) {

View File

@@ -44,9 +44,8 @@
<mat-icon>refresh</mat-icon>
</button>
<app-contact *ngIf="user?.human" [human]="user.human" [state]="user.state" canWrite="true"
[userStateEnum]="UserState" (editType)="openEditDialog($event)"
(enteredPhoneCode)="enteredPhoneCode($event)" (deletedPhone)="deletePhone()"
(resendEmailVerification)="resendEmailVerification()"
(editType)="openEditDialog($event)" (enteredPhoneCode)="enteredPhoneCode($event)"
(deletedPhone)="deletePhone()" (resendEmailVerification)="resendEmailVerification()"
(resendPhoneVerification)="resendPhoneVerification()">
</app-contact>
</app-card>

View File

@@ -182,7 +182,6 @@ export class AuthUserDetailComponent implements OnDestroy {
});
break;
case EditDialogType.EMAIL:
console.log('email');
const dialogRefEmail = this.dialog.open(EditDialogComponent, {
data: {
confirmKey: 'ACTIONS.SAVE',

View File

@@ -72,7 +72,6 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
public getMFAs(): void {
this.service.listMyMultiFactors().then(mfas => {
const list = mfas.resultList;
console.log(list);
this.dataSource = new MatTableDataSource(list);
this.dataSource.sort = this.sort;

View File

@@ -25,7 +25,6 @@ export class EditDialogComponent {
}
this.valueControl.valueChanges.subscribe(value => {
console.log(value);
if (value && value.length > 1) {
this.changeValue(value);
}

View File

@@ -25,8 +25,7 @@
<span class="contact-state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
<ng-container *ngIf="human?.email">
<a *ngIf="canWrite && state != userStateEnum?.USERSTATE_INITIAL" class="verify"
matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
<a *ngIf="canWrite" class="verify" matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
(click)="emitEmailVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</div>
@@ -35,7 +34,8 @@
</div>
<div class="right">
<button matTooltip="{{'ACTIONS.EDIT' | translate}}" [disabled]="!canWrite"
<button matTooltip="{{'ACTIONS.EDIT' | translate}}"
[disabled]="!canWrite || state == UserState.USER_STATE_INITIAL"
(click)="openEditDialog(EditDialogType.EMAIL)" mat-icon-button>
<i class="las la-edit"></i>
</button>

View File

@@ -21,7 +21,7 @@ export class ContactComponent {
@Output() resendPhoneVerification: EventEmitter<void> = new EventEmitter();
@Output() enteredPhoneCode: EventEmitter<string> = new EventEmitter();
@Output() deletedPhone: EventEmitter<void> = new EventEmitter();
@Input() public userStateEnum: any;
public UserState: any = UserState;
public EditDialogType: any = EditDialogType;
constructor(private dialog: MatDialog) { }

View File

@@ -27,7 +27,10 @@
<ng-container matColumnDef="memberType">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.TYPE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{'USER.MEMBERSHIPS.TYPES.' + member.memberType | translate }} </td>
<span *ngIf="member.orgId && !member.projectGrantId && !member.projectId"> {{'USER.MEMBERSHIPS.TYPES.ORG' | translate }}</span>
<span *ngIf="member.projectId && !member.projectGrantId"> {{'USER.MEMBERSHIPS.TYPES.PROJECT' | translate }}</span>
<span *ngIf="member.projectId && member.projectGrantId"> {{'USER.MEMBERSHIPS.TYPES.GRANTEDPROJECT' | translate }}</span>
</td>
</ng-container>
<ng-container matColumnDef="displayName">
@@ -39,13 +42,13 @@
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.CREATIONDATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{member.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}} </td>
{{member.details?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}} </td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MEMBERSHIPS.CHANGEDATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
{{member.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
{{member.details?.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
</td>
</ng-container>

View File

@@ -52,7 +52,6 @@ export class UserDetailComponent implements OnInit {
this.mgmtUserService.getUserByID(id).then(resp => {
if (resp.user) {
this.user = resp.user;
console.log(this.user);
}
}).catch(err => {
console.error(err);
@@ -83,7 +82,6 @@ export class UserDetailComponent implements OnInit {
}
public saveProfile(profileData: Profile.AsObject): void {
console.log(profileData);
if (this.user.human) {
this.user.human.profile = profileData;
this.mgmtUserService
@@ -159,7 +157,6 @@ export class UserDetailComponent implements OnInit {
this.mgmtUserService.updateHumanEmail(this.user.id, email).then(() => {
this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
if (this.user.state == UserState.USER_STATE_INITIAL) {
console.log('init');
this.mgmtUserService.resendHumanInitialization(this.user.id, email ?? '').then(() => {
this.toast.showInfo('USER.TOAST.INITEMAILSENT', true);
this.refreshChanges$.emit();

View File

@@ -180,8 +180,6 @@ export class UserTableComponent implements OnInit {
}
this.userService.listUsers(limit, offset, [query]).then(resp => {
console.log(resp);
if (resp.details?.totalResult) {
this.totalResult = resp.details?.totalResult;
}