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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
70 changed files with 831 additions and 132 deletions

View File

@ -36,6 +36,7 @@ import { AvatarModule } from './modules/avatar/avatar.module';
import { InputModule } from './modules/input/input.module';
import { WarnDialogModule } from './modules/warn-dialog/warn-dialog.module';
import { SignedoutComponent } from './pages/signedout/signedout.component';
import { HasFeaturePipeModule } from './pipes/has-feature-pipe/has-feature-pipe.module';
import { HasRolePipeModule } from './pipes/has-role-pipe/has-role-pipe.module';
import { GrpcAuthService } from './services/grpc-auth.service';
import { GrpcService } from './services/grpc.service';
@ -112,6 +113,7 @@ const authConfig: AuthConfig = {
OutsideClickModule,
InputModule,
HasRolePipeModule,
HasFeaturePipeModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatToolbarModule,

View File

@ -75,7 +75,6 @@ export class ChangesComponent implements OnInit, OnDestroy {
}
public scrollHandler(e: any): void {
console.log('bottom');
if (e === 'bottom') {
this.more();
}
@ -107,7 +106,6 @@ export class ChangesComponent implements OnInit, OnDestroy {
private more(): void {
const cursor = this.getCursor();
console.log('cursor' + cursor);
let more: Promise<ListChanges>;
@ -152,7 +150,6 @@ export class ChangesComponent implements OnInit, OnDestroy {
take(1),
tap((res: ListChanges) => {
const values = res.resultList;
console.log(values);
const mapped = this.mapChanges(values);
// update source with new values, done loading
// this._data.next(values);
@ -226,7 +223,6 @@ export class ChangesComponent implements OnInit, OnDestroy {
return parseFloat(b.key) - parseFloat(a.key);
});
// console.log(arr);
return arr;
}
@ -237,7 +233,6 @@ export class ChangesComponent implements OnInit, OnDestroy {
getTimestampIndex(date: any): number {
const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000 / 1000);
console.log(ts);
return ts.getTime();
}

View File

@ -36,14 +36,14 @@
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let key">
{{key.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
{{key.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
</td>
</ng-container>
<ng-container matColumnDef="expirationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let key">
{{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
{{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
</td>
</ng-container>

View File

@ -86,7 +86,6 @@ export class ClientKeysComponent implements OnInit {
if (resp.date as Moment) {
const ts = new Timestamp();
console.log(resp.date.toDate());
const milliseconds = resp.date.toDate().getTime();
const seconds = Math.abs(milliseconds / 1000);
const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;

View File

@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FeaturesComponent } from './features.component';
const routes: Routes = [
{
path: '',
component: FeaturesComponent,
data: {
animation: 'DetailPage',
},
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class FeaturesRoutingModule { }

View File

@ -0,0 +1,86 @@
<app-detail-layout [backRouterLink]="[ serviceType === FeatureServiceType.ADMIN ? '/iam/policies' : '/org']"
[title]="'FEATURES.TITLE' | translate" [description]="'FEATURES.DESCRIPTION' | translate">
<p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>
<ng-template appHasRole [appHasRole]="['iam.features.delete']">
<button *ngIf="serviceType === FeatureServiceType.MGMT && !isDefault"
matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="resetFeatures()" mat-stroked-button>
{{'POLICY.RESET' | translate}}
</button>
</ng-template>
<div class="content" *ngIf="features">
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.AUDITLOGRETENTION' | translate}}</span>
<span class="fill-space"></span>
<span>{{features.auditLogRetention | json }}</span>
</div>
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYUSERNAMELOGIN' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyUsernameLogin"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYREGISTRATION' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyRegistration"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYIDP' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyIdp"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYFACTORS' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyFactors"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDLESS' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyPasswordless"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYCOMPLEXITYPOLICY' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.passwordComplexityPolicy"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'FEATURES.DATA.LABELPOLICY' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicy"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
</div>
</div>
<div class="btn-container">
<button (click)="savePolicy()" [disabled]="(['iam.features.write'] | hasRole | async) == false" color="primary"
type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
}}</button>
</div>
</app-detail-layout>

View File

@ -0,0 +1,41 @@
.default {
color: var(--color-main);
margin-top: 0;
}
.content {
padding-top: 1rem;
display: flex;
flex-direction: column;
width: 100%;
.row {
display: flex;
align-items: center;
padding: .3rem 0;
.left-desc {
font-size: .9rem;
}
.fill-space {
flex: 1;
}
.length-wrapper {
display: flex;
align-items: center;
}
}
}
.btn-container {
display: flex;
justify-content: flex-end;
width: 100%;
button {
margin-top: 3rem;
display: block;
}
}

View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { FeaturesComponent } from './features.component';
describe('FeaturesComponent', () => {
let component: FeaturesComponent;
let fixture: ComponentFixture<FeaturesComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [FeaturesComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FeaturesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,144 @@
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import {
GetOrgFeaturesResponse,
SetDefaultFeaturesRequest,
SetOrgFeaturesRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import { Features } from 'src/app/proto/generated/zitadel/features_pb';
import { GetFeaturesResponse } from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
export enum FeatureServiceType {
MGMT,
ADMIN,
}
@Component({
selector: 'app-features',
templateUrl: './features.component.html',
styleUrls: ['./features.component.scss'],
})
export class FeaturesComponent implements OnDestroy {
private managementService!: ManagementService;
public serviceType!: FeatureServiceType;
public features!: Features.AsObject;
private sub: Subscription = new Subscription();
private org!: Org.AsObject;
public FeatureServiceType: any = FeatureServiceType;
constructor(
private route: ActivatedRoute,
private toast: ToastService,
private sessionStorage: StorageService,
private injector: Injector,
private adminService: AdminService,
) {
const temporg = this.sessionStorage.getItem('organization') as Org.AsObject;
if (temporg) {
this.org = temporg;
}
this.sub = this.route.data.pipe(switchMap(data => {
this.serviceType = data.serviceType;
if (this.serviceType === FeatureServiceType.MGMT) {
this.managementService = this.injector.get(ManagementService as Type<ManagementService>);
}
return this.route.params;
})).subscribe(_ => {
this.fetchData();
});
}
public ngOnDestroy(): void {
this.sub.unsubscribe();
}
public fetchData(): void {
this.getData().then(resp => {
if (resp?.features) {
this.features = resp.features;
}
});
}
private async getData(): Promise<GetFeaturesResponse.AsObject | GetOrgFeaturesResponse.AsObject | undefined> {
switch (this.serviceType) {
case FeatureServiceType.MGMT:
return this.managementService.getFeatures();
case FeatureServiceType.ADMIN:
if (this.org?.id) {
return this.adminService.getDefaultFeatures();
}
break;
}
}
public savePolicy(): void {
switch (this.serviceType) {
case FeatureServiceType.MGMT:
const req = new SetOrgFeaturesRequest();
req.setOrgId(this.org.id);
req.setLoginPolicyUsernameLogin(this.features.loginPolicyUsernameLogin);
req.setLoginPolicyRegistration(this.features.loginPolicyRegistration);
req.setLoginPolicyIdp(this.features.loginPolicyIdp);
req.setLoginPolicyFactors(this.features.loginPolicyFactors);
req.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
req.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
req.setLabelPolicy(this.features.labelPolicy);
this.adminService.setOrgFeatures(req).then(() => {
this.toast.showInfo('POLICY.TOAST.SET', true);
}).catch(error => {
this.toast.showError(error);
});
break;
case FeatureServiceType.ADMIN:
// update Default org iam policy?
const dreq = new SetDefaultFeaturesRequest();
dreq.setLoginPolicyUsernameLogin(this.features.loginPolicyUsernameLogin);
dreq.setLoginPolicyRegistration(this.features.loginPolicyRegistration);
dreq.setLoginPolicyIdp(this.features.loginPolicyIdp);
dreq.setLoginPolicyFactors(this.features.loginPolicyFactors);
dreq.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
dreq.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
dreq.setLabelPolicy(this.features.labelPolicy);
this.adminService.setDefaultFeatures(dreq).then(() => {
this.toast.showInfo('POLICY.TOAST.SET', true);
}).catch(error => {
this.toast.showError(error);
});
break;
}
}
public resetFeatures(): void {
if (this.serviceType === FeatureServiceType.MGMT) {
this.adminService.resetOrgFeatures(this.org.id).then(() => {
this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
setTimeout(() => {
this.fetchData();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}
}
public get isDefault(): boolean {
if (this.features && this.serviceType === FeatureServiceType.MGMT) {
return this.features.isDefault;
} else {
return false;
}
}
}

View File

@ -0,0 +1,42 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { FeaturesRoutingModule } from './features-routing.module';
import { FeaturesComponent } from './features.component';
@NgModule({
declarations: [
FeaturesComponent
],
imports: [
FeaturesRoutingModule,
CommonModule,
FormsModule,
InputModule,
MatButtonModule,
HasRoleModule,
MatSlideToggleModule,
MatIconModule,
HasRoleModule,
HasRolePipeModule,
MatTooltipModule,
InfoSectionModule,
TranslateModule,
DetailLayoutModule,
],
exports: [
FeaturesComponent,
]
})
export class FeaturesModule { }

View File

@ -80,7 +80,6 @@ export class CnslFormFieldComponent extends CnslFormFieldBase implements OnDestr
@HostListener('blur', ['false'])
_focusChanged(isFocused: boolean): void {
console.log('blur1');
if (isFocused !== this.focused && (!isFocused)) {
this.focused = isFocused;
this.stateChanges.next();

View File

@ -153,7 +153,6 @@ export class IdpTableComponent implements OnInit {
(this.service as ManagementService).listOrgIDPs(limit, offset).then(resp => {
this.idpResult = resp;
this.dataSource.data = resp.resultList;
console.log(resp.resultList);
this.loadingSubject.next(false);
}).catch(error => {
this.toast.showError(error);
@ -163,7 +162,6 @@ export class IdpTableComponent implements OnInit {
(this.service as AdminService).listIDPs(limit, offset).then(resp => {
this.idpResult = resp;
this.dataSource.data = resp.resultList;
console.log(resp.resultList);
this.loadingSubject.next(false);
}).catch(error => {

View File

@ -1,6 +1,6 @@
<div class="info-section-row" [ngClass]="{'info': type == 'INFO', 'warn': type == 'WARN'}">
<i *ngIf="type == 'INFO'" class="icon las la-info"></i>
<i *ngIf="type == 'WARN'" class="las la-exclamation"></i>
<i *ngIf="type == 'WARN'" class="icon las la-exclamation"></i>
<div class="info-section-content">
<ng-content></ng-content>

View File

@ -20,7 +20,6 @@
margin-left: .5rem;
}
.info-section-content {
flex: 1;
}
@ -37,6 +36,10 @@
&.warn {
background-color: if($is-dark-theme, #4f566b, #ffc1c1);
color: if($is-dark-theme, #ffc1c1, #620e0e);
.icon {
color: if($is-dark-theme, #ffc1c1, #620e0e);
}
}
}
}

View File

@ -36,14 +36,14 @@
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let key">
{{key.details?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
{{key.details?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
</td>
</ng-container>
<ng-container matColumnDef="expirationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let key">
{{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
{{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
</td>
</ng-container>

View File

@ -85,7 +85,6 @@ export class MachineKeysComponent implements OnInit {
if (resp.date as Moment) {
const ts = new Timestamp();
console.log(resp.date.toDate());
const milliseconds = resp.date.toDate().getTime();
const seconds = Math.abs(milliseconds / 1000);
const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
@ -123,7 +122,6 @@ export class MachineKeysComponent implements OnInit {
if (this.userId) {
this.mgmtService.listMachineKeys(this.userId, limit, offset).then(resp => {
this.keyResult = resp;
console.log(resp);
if (resp.resultList) {
this.dataSource.data = resp.resultList;
}

View File

@ -10,7 +10,7 @@
{{(componentType == LoginMethodComponentType.SecondFactor ? 'MFA.SECONDFACTORTYPES.':
LoginMethodComponentType.MultiFactor ? 'MFA.MULTIFACTORTYPES.': '')+mfa | translate}}
</div>
<div class="new-mfa" (click)="addMfa()" matRipple>
<div class="new-mfa" [ngClass]="{'disabled': disabled}" (click)="!disabled ? addMfa(): null" matRipple>
<mat-icon>add</mat-icon>
</div>
</div>

View File

@ -49,5 +49,10 @@
}
}
}
&.disabled {
opacity: .5;
cursor: not-allowed;
}
}
}

View File

@ -214,8 +214,6 @@ export class MfaTableComponent implements OnInit {
});
}
}
console.log(this.mfas);
}
public refreshPageAfterTimout(to: number): void {

View File

@ -63,7 +63,6 @@ export class AddIdpDialogComponent {
case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
this.adminService.listIDPs().then(resp => {
this.availableIdps = resp.resultList;
console.log(resp);
});
break;

View File

@ -37,9 +37,17 @@
[(ngModel)]="loginData.allowRegister">
{{'POLICY.DATA.ALLOWREGISTER' | translate}}
</mat-slide-toggle>
<cnsl-info-section class="info">
{{'POLICY.DATA.ALLOWREGISTER_DESC' | translate}}
</cnsl-info-section>
<ng-container *ngIf="(['login_policy.registration'] | hasFeature | async) == false; else regInfo">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.registration'})}}
</cnsl-info-section>
</ng-container>
<ng-template #regInfo>
<cnsl-info-section class="info">
{{'POLICY.DATA.ALLOWREGISTER_DESC' | translate}}
</cnsl-info-section>
</ng-template>
</div>
<div class="row">
<mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
@ -60,14 +68,21 @@
</cnsl-info-section>
</div>
<div class="row">
<cnsl-form-field class="form-field" label="Access Code" required="true">
<cnsl-label>{{'LOGINPOLICY.PASSWORDLESS' | translate}}</cnsl-label>
<mat-select [(ngModel)]="loginData.passwordlessType">
<mat-select [(ngModel)]="loginData.passwordlessType"
[disabled]="disabled || (['login_policy.passwordless'] | hasFeature | async) == false">
<mat-option *ngFor="let pt of passwordlessTypes" [value]="pt">
{{'LOGINPOLICY.PASSWORDLESSTYPE.'+pt | translate}}
</mat-option>
</mat-select>
</cnsl-form-field>
<ng-container *ngIf="(['login_policy.passwordless'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.passwordless'})}}
</cnsl-info-section>
</ng-container>
</div>
</div>
@ -79,24 +94,40 @@
<ng-container *ngIf="!isDefault">
<h3 class="subheader">{{ 'MFA.LIST.MULTIFACTORTITLE' | translate }}</h3>
<p class="subdesc">{{ 'MFA.LIST.MULTIFACTORDESCRIPTION' | translate }}</p>
<ng-container *ngIf="(['login_policy.factors'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})}}
</cnsl-info-section>
</ng-container>
<app-mfa-table [service]="service" [serviceType]="serviceType"
[componentType]="LoginMethodComponentType.MultiFactor"
[disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false">
[disabled]="(([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false) || ((['login_policy.factors'] | hasFeature | async) == false)">
</app-mfa-table>
<h3 class="subheader">{{ 'MFA.LIST.SECONDFACTORTITLE' | translate }}</h3>
<p class="subdesc">{{ 'MFA.LIST.SECONDFACTORDESCRIPTION' | translate }}</p>
<ng-container *ngIf="(['login_policy.factors'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})}}
</cnsl-info-section>
</ng-container>
<app-mfa-table [service]="service" [serviceType]="serviceType"
[componentType]="LoginMethodComponentType.SecondFactor"
[disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false">
[disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false || ((['login_policy.factors'] | hasFeature | async) == false)">
</app-mfa-table>
</ng-container>
<h3 class="subheader">{{'LOGINPOLICY.IDPS' | translate}}</h3>
<ng-container *ngIf="(['login_policy.idp'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.idp'})}}
</cnsl-info-section>
</ng-container>
<div class="idps">
<div class="idp" [ngClass]="{'disabled': disabled}" *ngFor="let idp of idps">
<button [disabled]="disabled" mat-icon-button (click)="removeIdp(idp)" class="rm">
<div class="idp" [ngClass]="{'disabled': disabled || (['login_policy.idp'] | hasFeature | async) == false}"
*ngFor="let idp of idps">
<button [disabled]="disabled || (['login_policy.idp'] | hasFeature | async) == false" mat-icon-button
(click)="removeIdp(idp)" class="rm">
<mat-icon matTooltip="{{'ACTIONS.REMOVE' | translate}}">
remove_circle</mat-icon>
</button>
@ -105,13 +136,15 @@
*ngIf="idp.stylingType == IDPStylingType.STYLING_TYPE_GOOGLE" alt="google" />
<div>
<span class="name">{{idp.name}}</span>
<span class="meta-info">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.OWNERTYPES.'+idp.idpType | translate
<span class="meta-info">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.OWNERTYPES.'+idp.idpType |
translate
}}</span>
<span class="meta-info">{{ 'IDP.ID' | translate }}: {{idp.idpId}}</span>
</div>
</div>
</div>
<div *ngIf="!disabled" class="new-idp" (click)="openDialog()" matRipple>
<div *ngIf="!disabled && (['login_policy.idp'] | hasFeature | async)" class="new-idp" (click)="openDialog()"
matRipple>
<mat-icon>add</mat-icon>
</div>
</div>
@ -127,7 +160,7 @@
<i class="lab la-gitlab"></i>
</div>
<app-idp-table [service]="service" [serviceType]="serviceType"
[disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false">
[disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false || (['login_policy.idp'] | hasFeature | async) == false">
</app-idp-table>
</app-card>
</ng-template>

View File

@ -11,12 +11,13 @@
padding-top: 1rem;
.row {
padding-bottom: 1.5rem;
.toggle {
margin: .3rem 0;
}
.info {
margin-bottom: 1rem;
display: block;
}
}

View File

@ -101,7 +101,6 @@ export class LoginPolicyComponent implements OnDestroy {
});
this.getIdps().then(resp => {
this.idps = resp;
console.log(resp);
});
}
@ -144,7 +143,6 @@ export class LoginPolicyComponent implements OnDestroy {
mgmtreq.setAllowUsernamePassword(this.loginData.allowUsernamePassword);
mgmtreq.setForceMfa(this.loginData.forceMfa);
mgmtreq.setPasswordlessType(this.loginData.passwordlessType);
// console.log(mgmtreq.toObject());
if ((this.loginData as LoginPolicy.AsObject).isDefault) {
return (this.service as ManagementService).addCustomLoginPolicy(mgmtreq);
} else {
@ -158,8 +156,6 @@ export class LoginPolicyComponent implements OnDestroy {
adminreq.setForceMfa(this.loginData.forceMfa);
adminreq.setPasswordlessType(this.loginData.passwordlessType);
// console.log(adminreq.toObject());
return (this.service as AdminService).updateLoginPolicy(adminreq);
}
}

View File

@ -15,10 +15,11 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
import { IdpTableModule } from 'src/app/modules/idp-table/idp-table.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { MfaTableModule } from 'src/app/modules/mfa-table/mfa-table.module';
import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { LinksModule } from '../../links/links.module';
import { AddIdpDialogModule } from './add-idp-dialog/add-idp-dialog.module';
import { LoginPolicyRoutingModule } from './login-policy-routing.module';
import { LoginPolicyComponent } from './login-policy.component';
@ -33,6 +34,7 @@ import { LoginPolicyComponent } from './login-policy.component';
CardModule,
InputModule,
MatButtonModule,
HasFeaturePipeModule,
MatSlideToggleModule,
MatIconModule,
HasRoleModule,

View File

@ -1,4 +1,4 @@
import { Component, Injector, Input, OnDestroy, Type } from '@angular/core';
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@ -10,6 +10,7 @@ import { AdminService } from 'src/app/services/admin.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { CnslLinks } from '../../links/links.component';
import {
IAM_COMPLEXITY_LINK,
@ -26,7 +27,6 @@ import { PolicyComponentServiceType } from '../policy-component-types.enum';
styleUrls: ['./org-iam-policy.component.scss'],
})
export class OrgIamPolicyComponent implements OnDestroy {
@Input() service!: AdminService;
private managementService!: ManagementService;
public serviceType!: PolicyComponentServiceType;

View File

@ -77,7 +77,6 @@ export class PasswordComplexityPolicyComponent implements OnDestroy {
this.getData().then(data => {
if (data.policy) {
this.complexityData = data.policy;
console.log(data.policy);
this.loading = false;
}
});

View File

@ -57,10 +57,16 @@
<p class="desc">
{{'POLICY.IAM_POLICY.DESCRIPTION' | translate}}</p>
<cnsl-info-section class="warn" *ngIf="(['password_complexity_policy'] | hasFeature | async) == false"
type="WARN">
{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'password_complexity_policy'})}}
</cnsl-info-section>
<span class="fill-space"></span>
<div class="btn-wrapper">
<ng-template appHasRole [appHasRole]="['iam.policy.write']">
<button
<button [disabled]="(['password_complexity_policy'] | hasFeature | async) == false"
[routerLink]="[type == PolicyGridType.IAM ? '/iam' : type == PolicyGridType.ORG ? '/org' : '','policy', PolicyComponentType.IAM ]"
mat-stroked-button>{{'POLICY.BTN_EDIT' | translate}}</button>
</ng-template>
@ -111,12 +117,18 @@
<p class="desc">
{{'POLICY.LABEL.DESCRIPTION' | translate}}</p>
<cnsl-info-section class="warn" *ngIf="(['label_policy'] | hasFeature | async) == false" type="WARN">
{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'label_policy'})}}
</cnsl-info-section>
<span class="fill-space"></span>
<div class="btn-wrapper">
<ng-template appHasRole [appHasRole]="['iam.policy.write']">
<button
[routerLink]="[type == PolicyGridType.IAM ? '/iam' : type == PolicyGridType.ORG ? '/org' : '','policy', PolicyComponentType.LABEL ]"
mat-stroked-button>{{'POLICY.BTN_EDIT' | translate}}</button>
mat-stroked-button [disabled]="(['label_policy'] | hasFeature | async) == false">
{{'POLICY.BTN_EDIT' | translate}}</button>
</ng-template>
</div>
</div>

View File

@ -6,6 +6,7 @@ h2 {
.top-desc {
color: var(--grey);
font-size: 14px;
}
.row-lyt {
@ -65,6 +66,10 @@ h2 {
color: var(--grey);
}
.warn {
margin-bottom: .5rem;
}
.icons {
margin-bottom: 1rem;
.icon {

View File

@ -6,8 +6,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { PolicyGridComponent } from './policy-grid.component';
@NgModule({
@ -21,6 +23,8 @@ import { PolicyGridComponent } from './policy-grid.component';
MatButtonModule,
MatIconModule,
MatTooltipModule,
InfoSectionModule,
HasFeaturePipeModule,
],
exports: [
PolicyGridComponent,

View File

@ -62,7 +62,6 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
} else if (this.target === UserTarget.SELF) {
this.getFilteredResults(); // new subscription
}
console.log(this.users);
}
public ngAfterContentChecked(): void {
@ -90,7 +89,6 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
}),
).subscribe((userresp: ListUsersResponse.AsObject | unknown) => {
this.isLoading = false;
console.log(userresp);
if (this.target === UserTarget.SELF && userresp) {
this.filteredUsers = (userresp as ListUsersResponse.AsObject).resultList;
}

View File

@ -128,7 +128,6 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(grants => {
console.log(grants);
this.grantsSubject.next(grants);
});
}

View File

@ -182,7 +182,6 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
}
private getGrantRoleOptions(id: string, projectId: string): void {
console.log(projectId, id);
this.mgmtService.getGrantedProjectByID(projectId, id).then(resp => {
if (resp.grantedProject) {
this.loadedId = id;

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;
}

View File

@ -0,0 +1,18 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HasFeaturePipe } from './has-feature.pipe';
@NgModule({
declarations: [
HasFeaturePipe,
],
imports: [
CommonModule,
],
exports: [
HasFeaturePipe,
],
})
export class HasFeaturePipeModule { }

View File

@ -0,0 +1,14 @@
import { Pipe, PipeTransform } from '@angular/core';
import { Observable } from 'rxjs';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@Pipe({
name: 'hasFeature',
})
export class HasFeaturePipe implements PipeTransform {
constructor(private authService: GrpcAuthService) { }
public transform(values: string[]): Observable<boolean> {
return this.authService.canUseFeature(values);
}
}

View File

@ -19,12 +19,16 @@ import {
DeactivateIDPResponse,
GetCustomOrgIAMPolicyRequest,
GetCustomOrgIAMPolicyResponse,
GetDefaultFeaturesRequest,
GetDefaultFeaturesResponse,
GetIDPByIDRequest,
GetIDPByIDResponse,
GetLabelPolicyRequest,
GetLabelPolicyResponse,
GetLoginPolicyRequest,
GetLoginPolicyResponse,
GetOrgFeaturesRequest,
GetOrgFeaturesResponse,
GetOrgIAMPolicyRequest,
GetOrgIAMPolicyResponse,
GetPasswordAgePolicyRequest,
@ -66,6 +70,12 @@ import {
RemoveSecondFactorFromLoginPolicyResponse,
ResetCustomOrgIAMPolicyToDefaultRequest,
ResetCustomOrgIAMPolicyToDefaultResponse,
ResetOrgFeaturesRequest,
ResetOrgFeaturesResponse,
SetDefaultFeaturesRequest,
SetDefaultFeaturesResponse,
SetOrgFeaturesRequest,
SetOrgFeaturesResponse,
SetUpOrgRequest,
SetUpOrgResponse,
UpdateCustomOrgIAMPolicyRequest,
@ -167,6 +177,33 @@ export class AdminService {
return this.grpcService.admin.removeFailedEvent(req, null).then(resp => resp.toObject());;
}
// Features
public getOrgFeatures(orgId: string): Promise<GetOrgFeaturesResponse.AsObject> {
const req = new GetOrgFeaturesRequest();
req.setOrgId(orgId);
return this.grpcService.admin.getOrgFeatures(req, null).then(resp => resp.toObject());
}
public setOrgFeatures(req: SetOrgFeaturesRequest): Promise<SetOrgFeaturesResponse.AsObject> {
return this.grpcService.admin.setOrgFeatures(req, null).then(resp => resp.toObject());
}
public resetOrgFeatures(orgId: string): Promise<ResetOrgFeaturesResponse.AsObject> {
const req = new ResetOrgFeaturesRequest();
req.setOrgId(orgId);
return this.grpcService.admin.resetOrgFeatures(req, null).then(resp => resp.toObject());
}
public getDefaultFeatures(): Promise<GetDefaultFeaturesResponse.AsObject> {
const req = new GetDefaultFeaturesRequest();
return this.grpcService.admin.getDefaultFeatures(req, null).then(resp => resp.toObject());
}
public setDefaultFeatures(req: SetDefaultFeaturesRequest): Promise<SetDefaultFeaturesResponse.AsObject> {
return this.grpcService.admin.setDefaultFeatures(req, null).then(resp => resp.toObject());
}
/* Policies */
/* complexity */

View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { BehaviorSubject, from, merge, Observable, of, Subject } from 'rxjs';
import { catchError, filter, finalize, first, map, mergeMap, switchMap, take, timeout } from 'rxjs/operators';
import { catchError, filter, finalize, map, mergeMap, switchMap, take, timeout } from 'rxjs/operators';
import {
AddMyAuthFactorOTPRequest,
@ -34,6 +34,8 @@ import {
ListMyUserGrantsResponse,
ListMyUserSessionsRequest,
ListMyUserSessionsResponse,
ListMyZitadelFeaturesRequest,
ListMyZitadelFeaturesResponse,
ListMyZitadelPermissionsRequest,
ListMyZitadelPermissionsResponse,
RemoveMyAuthFactorOTPRequest,
@ -81,7 +83,10 @@ export class GrpcAuthService {
private _activeOrgChanged: Subject<Org.AsObject> = new Subject();
public user!: Observable<User.AsObject | undefined>;
private zitadelPermissions: BehaviorSubject<string[]> = new BehaviorSubject(['user.resourceowner']);
private zitadelFeatures: BehaviorSubject<string[]> = new BehaviorSubject(['']);
public readonly fetchedZitadelPermissions: BehaviorSubject<boolean> = new BehaviorSubject(false as boolean);
public readonly fetchedZitadelFeatures: BehaviorSubject<boolean> = new BehaviorSubject(false as boolean);
private cachedOrgs: Org.AsObject[] = [];
@ -114,11 +119,13 @@ export class GrpcAuthService {
}),
finalize(() => {
this.loadPermissions();
this.loadFeatures();
}),
);
this.activeOrgChanged.subscribe(() => {
this.loadPermissions();
this.loadFeatures();
});
}
@ -164,12 +171,7 @@ export class GrpcAuthService {
}
private loadPermissions(): void {
merge([
// this.authenticationChanged,
this.activeOrgChanged.pipe(map(org => !!org)),
]).pipe(
first(),
switchMap(() => from(this.listMyZitadelPermissions())),
from(this.listMyZitadelPermissions()).pipe(
map(rolesResp => rolesResp.resultList),
catchError(_ => {
return of([]);
@ -182,6 +184,20 @@ export class GrpcAuthService {
});
}
private loadFeatures(): void {
from(this.listMyZitadelFeatures()).pipe(
map(featuresResp => featuresResp.resultList),
catchError(_ => {
return of([]);
}),
finalize(() => {
this.fetchedZitadelFeatures.next(true);
}),
).subscribe(features => {
this.zitadelFeatures.next(features);
});
}
/**
* returns true if user has one of the provided roles
* @param roles roles of the user
@ -207,6 +223,31 @@ export class GrpcAuthService {
}) > -1;
}
/**
* returns true if user has one of the provided features
* @param features regex of the user
*/
public canUseFeature(features: string[] | RegExp[]): Observable<boolean> {
if (features && features.length > 0) {
return this.zitadelPermissions.pipe(switchMap(zFeatures => of(this.hasFeature(zFeatures, features))));
} else {
return of(false);
}
}
/**
* returns true if user has one of the provided features
* @param userFeature features of the user
* @param requestedFeature required features for accessing the respective component
*/
public hasFeature(userFeatures: string[], requestedFeatures: string[] | RegExp[]): boolean {
return requestedFeatures.findIndex((regexp: any) => {
return userFeatures.findIndex(feature => {
return new RegExp(regexp).test(feature);
}) > -1;
}) > -1;
}
public getMyProfile(): Promise<GetMyProfileResponse.AsObject> {
return this.grpcService.auth.getMyProfile(new GetMyProfileRequest(), null).then(resp => resp.toObject());
}
@ -329,6 +370,12 @@ export class GrpcAuthService {
).then(resp => resp.toObject());
}
public listMyZitadelFeatures(): Promise<ListMyZitadelFeaturesResponse.AsObject> {
return this.grpcService.auth.listMyZitadelFeatures(
new ListMyZitadelFeaturesRequest(), null
).then(resp => resp.toObject());
}
public getMyPhone(): Promise<GetMyPhoneResponse.AsObject> {
return this.grpcService.auth.getMyPhone(
new GetMyPhoneRequest(), null

View File

@ -75,6 +75,8 @@ import {
GetAppByIDResponse,
GetDefaultPasswordComplexityPolicyRequest,
GetDefaultPasswordComplexityPolicyResponse,
GetFeaturesRequest,
GetFeaturesResponse,
GetGrantedProjectByIDRequest,
GetGrantedProjectByIDResponse,
GetHumanEmailRequest,
@ -701,6 +703,13 @@ export class ManagementService {
return this.grpcService.mgmt.listOrgMemberRoles(req, null).then(resp => resp.toObject());
}
// Features
public getFeatures(): Promise<GetFeaturesResponse.AsObject> {
const req = new GetFeaturesRequest();
return this.grpcService.mgmt.getFeatures(req, null).then(resp => resp.toObject());
}
// Policy
public getOrgIAMPolicy(): Promise<GetOrgIAMPolicyResponse.AsObject> {

View File

@ -3,5 +3,5 @@
"mgmtServiceUrl": "https://api.zitadel.io",
"adminServiceUrl":"https://api.zitadel.io",
"issuer": "https://issuer.zitadel.io",
"clientid": "100851239960569938@zitadel"
"clientid": "100992085175427532@zitadel"
}

View File

@ -440,10 +440,10 @@
"REMOVE":"Entfernen",
"TYPE":"Typ",
"TYPES":{
"0":"Unbekannt",
"1":"Organisation",
"2":"Projekt",
"3":"Berechtigtes Projekt"
"UNKNOWN":"Unbekannt",
"ORG":"Organisation",
"PROJECT":"Projekt",
"GRANTEDPROJECT":"Berechtigtes Projekt"
}
}
},
@ -568,6 +568,28 @@
"SETPRIMARY":"Primäre Domain gesetzt."
}
},
"FEATURES": {
"TITLE":"Features",
"DESCRIPTION":"Hier können Sie Funktionen von ZITADEL auf Basis von Ihrem Tier aktivieren sowie deaktivieren.",
"BTN-EDIT":"Featureset anpassen",
"DATA": {
"AUDITLOGRETENTION":"Audit Log retention",
"LOGINPOLICYUSERNAMELOGIN":"Login Policy - Username as login",
"LOGINPOLICYREGISTRATION":"Login Policy - Registration",
"LOGINPOLICYIDP":"Login Policy - Identity Providers",
"LOGINPOLICYFACTORS":"Login Policy - Factors",
"LOGINPOLICYPASSWORDLESS": "Login Policy - Passwordless Authentication",
"LOGINPOLICYCOMPLEXITYPOLICY":"Password Complexity Settings",
"LABELPOLICY":"Label Policy"
},
"TIERSTATES": {
"0":"Aktiv",
"1":"Aktion erforderlich",
"2":"Annuliert",
"3":"Besitzstandswahrend"
},
"NOTAVAILABLE":"Feature {{value}} ist auf Ihrer organisation nicht freigeschaltet!"
},
"POLICY": {
"TITLE":"Richtlinen entdecken",
"DESCRIPTION":"Vorgefertigte Richtlinien, die Dir Zeit sparen und die Sicherheit erhöhen.",

View File

@ -438,10 +438,10 @@
"REMOVE":"Remove",
"TYPE":"Type",
"TYPES":{
"0":"Unknown",
"1":"Organisation",
"2":"Project",
"3":"Granted Project"
"UNKNOWN":"Unknown",
"ORG":"Organisation",
"PROJECT":"Project",
"GRANTEDPROJECT":"Granted Project"
}
}
},
@ -566,6 +566,28 @@
"SETPRIMARY":"Primary domain set."
}
},
"FEATURES": {
"TITLE":"Features",
"DESCRIPTION":"here you can edit your ZITADEL Features based on your Tier",
"BTN-EDIT":"Edit Featureset",
"DATA": {
"AUDITLOGRETENTION":"Audit Log retention",
"LOGINPOLICYUSERNAMELOGIN":"Login Policy - Benutzername als Loginname",
"LOGINPOLICYREGISTRATION":"Login Policy - Registration",
"LOGINPOLICYIDP":"Login Policy - Identity Provider",
"LOGINPOLICYFACTORS":"Login Policy - Multifaktoren",
"LOGINPOLICYPASSWORDLESS": "Login Policy - Passwortlose Authentifizierung",
"LOGINPOLICYCOMPLEXITYPOLICY":"Password Komplexitätseinstellungen",
"LABELPOLICY":"Labelling Einstellungen"
},
"TIERSTATES": {
"0":"Active",
"1":"Action required",
"2":"Cancelled",
"3":"Grandfathered"
},
"NOTAVAILABLE":"Feature {{value}} is missing on your organization."
},
"POLICY": {
"TITLE":"Explore Policies",
"DESCRIPTION":"Pre-packaged policies that enhance your security.",