TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-13 17:02:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(console): resolve warnings due to dependency update (#4270)

Browse Source 
* cli, core

* material cdk

* schematics

* chore(deps): bump ngx-color from 7.3.3 to 8.0.2 in /console (#4228)

Bumps [ngx-color](https://github.com/scttcper/ngx-color) from 7.3.3 to 8.0.2.
- [Release notes](https://github.com/scttcper/ngx-color/releases)
- [Commits](https://github.com/scttcper/ngx-color/compare/v7.3.3...v8.0.2)

---
updated-dependencies:
- dependency-name: ngx-color
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* eslint-plugin

* chore(deps): bump moment from 2.29.3 to 2.29.4 in /console (#3926)

Bumps [moment](https://github.com/moment/moment) from 2.29.3 to 2.29.4.
- [Release notes](https://github.com/moment/moment/releases)
- [Changelog](https://github.com/moment/moment/blob/develop/CHANGELOG.md)
- [Commits](https://github.com/moment/moment/compare/2.29.3...2.29.4)

---
updated-dependencies:
- dependency-name: moment
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump codemirror from 5.65.6 to 6.0.1 in /console (#3928)

Bumps [codemirror](https://github.com/codemirror/basic-setup) from 5.65.6 to 6.0.1.
- [Release notes](https://github.com/codemirror/basic-setup/releases)
- [Changelog](https://github.com/codemirror/basic-setup/blob/main/CHANGELOG.md)
- [Commits](https://github.com/codemirror/basic-setup/commits/6.0.1)

---
updated-dependencies:
- dependency-name: codemirror
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* lock

* use codemirror 5

* remove redundant null undefined checks

* i18n, undefined checks

* remove redundant null and undefined checks

* checks

* fix: resolve null check warnings

* commonjs deps

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-09-01 09:44:39 +02:00
committed by GitHub
parent 2f647ce9a2
commit 861464598a
62 changed files with 927 additions and 780 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
console/src/app/pages/actions/action-table/action-table.component.html
View File

@@ -2,7 +2,7 @@
[hideRefresh]="true"
[loading]="loading$ | async"
(refreshed)="refreshPage()"
[dataSize]="dataSource?.data?.length ?? 0"
[dataSize]="dataSource.data.length"
[timestamp]="actionsResult?.details?.viewTimestamp"
[selection]="selection"
>

12
console/src/app/pages/actions/action-table/action-table.component.ts
View File

@@ -10,9 +10,9 @@ import { PaginatorComponent } from 'src/app/modules/paginator/paginator.componen
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Action, ActionState } from 'src/app/proto/generated/zitadel/action_pb';
import {
CreateActionRequest,
ListActionsResponse,
UpdateActionRequest,
CreateActionRequest,
ListActionsResponse,
UpdateActionRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -28,7 +28,7 @@ export class ActionTableComponent implements OnInit {
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
public dataSource: MatTableDataSource<Action.AsObject> = new MatTableDataSource<Action.AsObject>();
public selection: SelectionModel<Action.AsObject> = new SelectionModel<Action.AsObject>(true, []);
public actionsResult!: ListActionsResponse.AsObject;
public actionsResult?: ListActionsResponse.AsObject;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@Input() public displayedColumns: string[] = ['select', 'name', 'state', 'timeout', 'allowedToFail', 'actions'];
@@ -50,7 +50,7 @@ export class ActionTableComponent implements OnInit {
}
ngOnInit(): void {
this.getData(10, 0);
this.getData(20, 0);
}
public isAllSelected(): boolean {
@@ -84,7 +84,7 @@ export class ActionTableComponent implements OnInit {
.deleteAction(action.id)
.then(() => {
this.toast.showInfo('FLOWS.DIALOG.DELETEACTION.DELETE_SUCCESS', true);
this.getData(10, 0);
this.getData(20, 0);
})
.catch((error: any) => {
this.toast.showError(error);

16
console/src/app/pages/domains/domain-verification/domain-verification.component.html
View File

@@ -1,4 +1,4 @@
<span class="title" mat-dialog-title>{{ 'ORG.PAGES.ORGDOMAIN.TITLE' | translate }} {{ domain.domainName }}</span>
<span class="title" mat-dialog-title>{{ 'ORG.PAGES.ORGDOMAIN.TITLE' | translate }} {{ domain?.domainName }}</span>
<div mat-dialog-content>
<p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION' | translate }}</p>
@@ -7,17 +7,17 @@
}}</cnsl-info-section>
<p
*ngIf="domain.validationType !== DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED && !(dns || http)"
*ngIf="domain?.validationType !== DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED && !(dns || http)"
class="desc"
>
{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING' | translate: domain }}
{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING_TYPE' | translate }}
{{ 'ORG.PAGES.ORGDOMAIN.TYPES.' + domain.validationType | translate }}
{{ 'ORG.PAGES.ORGDOMAIN.TYPES.' + domain?.validationType | translate }}
</p>
<div class="btn-container">
<button
[disabled]="domain.validationType === DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED"
[disabled]="domain?.validationType === DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED"
color="primary"
type="submit"
mat-raised-button
@@ -44,7 +44,7 @@
<div *ngIf="http">
<p>HTTP TOKEN</p>
<p class="entry">{{ http?.url }}.txt</p>
<p class="entry">{{ http.url }}.txt</p>
<div class="btn-container">
<button mat-stroked-button (click)="saveFile()" color="primary">{{ 'ORG.PAGES.DOWNLOAD_FILE' | translate }}</button>
@@ -57,8 +57,8 @@
<div *ngIf="dns">
<p>DNS TOKEN</p>
<div class="domain-line" *ngIf="dns?.token">
<p class="entry">{{ dns?.token }}</p>
<div class="domain-line" *ngIf="dns.token">
<p class="entry">{{ dns.token }}</p>
<button
color="primary"
[disabled]="copied === data.clientSecret"
@@ -76,7 +76,7 @@
</button>
<mat-spinner class="spinner" *ngIf="validating" diameter="20" mode="indeterminate"></mat-spinner>
</div>
<p class="entry">{{ dns?.url }}</p>
<p class="entry">{{ dns.url }}</p>
</div>
</ng-container>
</div>

63
console/src/app/pages/domains/domain-verification/domain-verification.component.ts
View File

@@ -13,12 +13,12 @@ import { ToastService } from 'src/app/services/toast.service';
styleUrls: ['./domain-verification.component.scss'],
})
export class DomainVerificationComponent {
public domain!: Domain.AsObject;
public domain?: Domain.AsObject;
public DomainValidationType: any = DomainValidationType;
public http!: GenerateOrgDomainValidationResponse.AsObject;
public dns!: GenerateOrgDomainValidationResponse.AsObject;
public http?: GenerateOrgDomainValidationResponse.AsObject;
public dns?: GenerateOrgDomainValidationResponse.AsObject;
public copied: string = '';
@@ -34,25 +34,30 @@ export class DomainVerificationComponent {
private mgmtService: ManagementService,
) {
this.domain = data.domain;
if (this.domain.validationType === DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED) {
if (this.domain?.validationType === DomainValidationType.DOMAIN_VALIDATION_TYPE_UNSPECIFIED) {
this.showNew = true;
}
}
async loadHttpToken(): Promise<void> {
this.mgmtService
.generateOrgDomainValidation(this.domain.domainName, DomainValidationType.DOMAIN_VALIDATION_TYPE_HTTP)
.then((http) => {
this.http = http;
});
if (this.domain) {
this.mgmtService
.generateOrgDomainValidation(this.domain.domainName, DomainValidationType.DOMAIN_VALIDATION_TYPE_HTTP)
.then((http) => {
this.http = http;
});
}
}
async loadDnsToken(): Promise<void> {
this.mgmtService
.generateOrgDomainValidation(this.domain.domainName, DomainValidationType.DOMAIN_VALIDATION_TYPE_DNS)
.then((dns) => {
this.dns = dns;
});
if (this.domain) {
this.mgmtService
.generateOrgDomainValidation(this.domain.domainName, DomainValidationType.DOMAIN_VALIDATION_TYPE_DNS)
.then((dns) => {
this.dns = dns;
});
}
}
public closeDialog(): void {
@@ -61,21 +66,25 @@ export class DomainVerificationComponent {
public validate(): void {
this.validating = true;
this.mgmtService
.validateOrgDomain(this.domain.domainName)
.then(() => {
this.dialogRef.close(true);
this.toast.showInfo('ORG.PAGES.ORGDOMAIN.VERIFICATION_SUCCESSFUL', true);
this.validating = false;
})
.catch((error) => {
this.toast.showError(error);
this.validating = false;
});
if (this.domain) {
this.mgmtService
.validateOrgDomain(this.domain.domainName)
.then(() => {
this.dialogRef.close(true);
this.toast.showInfo('ORG.PAGES.ORGDOMAIN.VERIFICATION_SUCCESSFUL', true);
this.validating = false;
})
.catch((error) => {
this.toast.showError(error);
this.validating = false;
});
}
}
public saveFile(): void {
const blob = new Blob([this.http.token], { type: 'text/plain;charset=utf-8' });
saveAs(blob, this.http.token + '.txt');
if (this.http) {
const blob = new Blob([this.http.token], { type: 'text/plain;charset=utf-8' });
saveAs(blob, this.http.token + '.txt');
}
}
}

2
console/src/app/pages/instance/instance.component.ts
View File

@@ -18,7 +18,7 @@ import { ToastService } from 'src/app/services/toast.service';
styleUrls: ['./instance.component.scss'],
})
export class InstanceComponent {
public instance!: InstanceDetail.AsObject;
public instance?: InstanceDetail.AsObject;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();

11
console/src/app/pages/org-create/org-create.component.html
View File

@@ -51,7 +51,7 @@
<h1>{{ 'ORG.PAGES.ORGDETAILUSER_TITLE' | translate }}</h1>
<div class="user">
<form [formGroup]="userForm" class="form">
<form [formGroup]="userForm" *ngIf="userForm" class="form">
<div class="content">
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<cnsl-form-field class="formfield">
@@ -136,7 +136,12 @@
<ng-container *ngIf="usePassword && pwdForm">
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
<cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
<cnsl-password-complexity-view
*ngIf="policy"
class="complexity-view"
[policy]="policy"
[password]="password"
>
</cnsl-password-complexity-view>
<form [formGroup]="pwdForm" class="pwd-form">
@@ -177,7 +182,7 @@
color="primary"
class="big-button"
(click)="finish()"
[disabled]="orgForm.invalid || userForm.invalid || (usePassword && pwdForm ? pwdForm?.invalid : false)"
[disabled]="orgForm.invalid || userForm.invalid || (usePassword && pwdForm ? pwdForm.invalid : false)"
mat-raised-button
>
{{ 'ACTIONS.FINISH' | translate }}

55
console/src/app/pages/org-create/org-create.component.ts
View File

@@ -50,14 +50,18 @@ function passwordConfirmValidator(c: AbstractControl): any {
],
})
export class OrgCreateComponent {
public orgForm!: UntypedFormGroup;
public userForm!: UntypedFormGroup;
public pwdForm!: UntypedFormGroup;
public orgForm: UntypedFormGroup = this.fb.group({
name: ['', [Validators.required]],
domain: [''],
});
public userForm?: UntypedFormGroup;
public pwdForm?: UntypedFormGroup;
public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
public languages: string[] = ['de', 'en'];
public languages: string[] = ['de', 'en', 'it', 'fr'];
public policy!: PasswordComplexityPolicy.AsObject;
public policy?: PasswordComplexityPolicy.AsObject;
public usePassword: boolean = false;
public forSelf: boolean = true;
@@ -70,7 +74,7 @@ export class OrgCreateComponent {
private fb: UntypedFormBuilder,
private mgmtService: ManagementService,
private authService: GrpcAuthService,
private breadcrumbService: BreadcrumbService,
breadcrumbService: BreadcrumbService,
) {
const instanceBread = new Breadcrumb({
type: BreadcrumbType.INSTANCE,
@@ -89,12 +93,11 @@ export class OrgCreateComponent {
}
});
this.orgForm = this.fb.group({
name: ['', [Validators.required]],
domain: [''],
});
this.initForm();
this.adminService.getSupportedLanguages().then((supportedResp) => {
this.languages = supportedResp.languagesList;
});
}
public createSteps: number = 2;
@@ -125,16 +128,8 @@ export class OrgCreateComponent {
this.adminService
.SetUpOrg(createOrgRequest, humanRequest)
.then((resp) => {
.then(() => {
this.router.navigate(['/orgs']);
// const orgResp = org.getOrg();
// if (orgResp) {
// this.authService.setActiveOrg(orgResp.toObject());
// this.router.navigate(['/org']);
// } else {
// this.router.navigate(['/org', 'overview']);
// }
})
.catch((error) => {
this.toast.showError(error);
@@ -241,43 +236,43 @@ export class OrgCreateComponent {
}
public get userName(): AbstractControl | null {
return this.userForm.get('userName');
return this.userForm?.get('userName') ?? null;
}
public get firstName(): AbstractControl | null {
return this.userForm.get('firstName');
return this.userForm?.get('firstName') ?? null;
}
public get lastName(): AbstractControl | null {
return this.userForm.get('lastName');
return this.userForm?.get('lastName') ?? null;
}
public get email(): AbstractControl | null {
return this.userForm.get('email');
return this.userForm?.get('email') ?? null;
}
public get isVerified(): AbstractControl | null {
return this.userForm.get('isVerified');
return this.userForm?.get('isVerified') ?? null;
}
public get nickName(): AbstractControl | null {
return this.userForm.get('nickName');
return this.userForm?.get('nickName') ?? null;
}
public get preferredLanguage(): AbstractControl | null {
return this.userForm.get('preferredLanguage');
return this.userForm?.get('preferredLanguage') ?? null;
}
public get gender(): AbstractControl | null {
return this.userForm.get('gender');
return this.userForm?.get('gender') ?? null;
}
public get password(): AbstractControl | null {
return this.pwdForm.get('password');
return this.pwdForm?.get('password') ?? null;
}
public get confirmPassword(): AbstractControl | null {
return this.pwdForm.get('confirmPassword');
return this.pwdForm?.get('confirmPassword') ?? null;
}
public close(): void {

6
console/src/app/pages/orgs/org-detail/org-detail.component.ts
View File

@@ -21,7 +21,7 @@ import { ToastService } from 'src/app/services/toast.service';
styleUrls: ['./org-detail.component.scss'],
})
export class OrgDetailComponent implements OnInit, OnDestroy {
public org!: Org.AsObject;
public org?: Org.AsObject;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public OrgState: any = OrgState;
@@ -80,7 +80,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
.reactivateOrg()
.then(() => {
this.toast.showInfo('ORG.TOAST.REACTIVATED', true);
this.org.state = OrgState.ORG_STATE_ACTIVE;
this.org!.state = OrgState.ORG_STATE_ACTIVE;
})
.catch((error) => {
this.toast.showError(error);
@@ -103,7 +103,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
.deactivateOrg()
.then(() => {
this.toast.showInfo('ORG.TOAST.DEACTIVATED', true);
this.org.state = OrgState.ORG_STATE_INACTIVE;
this.org!.state = OrgState.ORG_STATE_INACTIVE;
})
.catch((error) => {
this.toast.showError(error);

2
console/src/app/pages/orgs/org-members/org-members.component.ts
View File

@@ -19,7 +19,7 @@ import { OrgMembersDataSource } from './org-members-datasource';
})
export class OrgMembersComponent {
public INITIALPAGESIZE: number = 25;
public org!: Org.AsObject;
public org?: Org.AsObject;
public disableWrite: boolean = false;
public dataSource!: OrgMembersDataSource;

4
console/src/app/pages/projects/apps/app-create/app-create.component.html
View File

@@ -186,7 +186,7 @@
</span>
<span class="right">
<span>
{{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest?.authMethodType | translate }}
{{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest.authMethodType | translate }}
</span>
</span>
</div>
@@ -226,7 +226,7 @@
</span>
<span class="right">
<span>
{{ 'APP.API.AUTHMETHOD.' + apiAppRequest?.authMethodType | translate }}
{{ 'APP.API.AUTHMETHOD.' + apiAppRequest.authMethodType | translate }}
</span>
</span>
</div>

34
console/src/app/pages/projects/apps/app-create/app-create.component.ts
View File

@@ -9,17 +9,17 @@ import { Subject, Subscription } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import {
APIAuthMethodType,
OIDCAppType,
OIDCAuthMethodType,
OIDCGrantType,
OIDCResponseType,
APIAuthMethodType,
OIDCAppType,
OIDCAuthMethodType,
OIDCGrantType,
OIDCResponseType,
} from 'src/app/proto/generated/zitadel/app_pb';
import {
AddAPIAppRequest,
AddAPIAppResponse,
AddOIDCAppRequest,
AddOIDCAppResponse,
AddAPIAppRequest,
AddAPIAppResponse,
AddOIDCAppRequest,
AddOIDCAppResponse,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
@@ -27,13 +27,13 @@ import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import {
BASIC_AUTH_METHOD,
CODE_METHOD,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
BASIC_AUTH_METHOD,
CODE_METHOD,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
} from '../authmethods';
import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE, WEB_TYPE } from '../authtypes';
@@ -43,7 +43,7 @@ import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE
styleUrls: ['./app-create.component.scss'],
})
export class AppCreateComponent implements OnInit, OnDestroy {
private subscription?: Subscription;
private subscription: Subscription = new Subscription();
private destroyed$: Subject<void> = new Subject();
public devmode: boolean = false;
public projectId: string = '';

7
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
View File

@@ -57,7 +57,10 @@
</cnsl-top-view>
<div class="max-width-container">
<div class="compliance" *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
<div
class="compliance"
*ngIf="app && app.oidcConfig && app.oidcConfig.complianceProblemsList && app.oidcConfig.complianceProblemsList?.length"
>
<h2 class="compliance-title">{{ 'APP.COMPLIANCE' | translate }}</h2>
<cnsl-info-section class="problem" [type]="InfoSectionType.ALERT">
<ul style="margin: 0">
@@ -355,7 +358,7 @@
<ng-container *ngIf="currentSetting === 'configuration'">
<cnsl-card
*ngIf="initialAuthMethod === 'PK_JWT' && projectId && app?.id"
*ngIf="initialAuthMethod === 'PK_JWT' && projectId && app && app.id"
title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}"
description="{{ 'USER.MACHINE.KEYSDESC' | translate }}"
>

159
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
View File

@@ -17,21 +17,21 @@ import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.com
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import {
APIAuthMethodType,
APIConfig,
App,
AppState,
OIDCAppType,
OIDCAuthMethodType,
OIDCConfig,
OIDCGrantType,
OIDCResponseType,
OIDCTokenType,
APIAuthMethodType,
APIConfig,
App,
AppState,
OIDCAppType,
OIDCAuthMethodType,
OIDCConfig,
OIDCGrantType,
OIDCResponseType,
OIDCTokenType,
} from 'src/app/proto/generated/zitadel/app_pb';
import {
GetOIDCInformationResponse,
UpdateAPIAppConfigRequest,
UpdateOIDCAppConfigRequest,
GetOIDCInformationResponse,
UpdateAPIAppConfigRequest,
UpdateOIDCAppConfigRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@@ -40,15 +40,15 @@ import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import {
BASIC_AUTH_METHOD,
CODE_METHOD,
CUSTOM_METHOD,
getAuthMethodFromPartialConfig,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
BASIC_AUTH_METHOD,
CODE_METHOD,
CUSTOM_METHOD,
getAuthMethodFromPartialConfig,
getPartialConfigFromAuthMethod,
IMPLICIT_METHOD,
PK_JWT_METHOD,
PKCE_METHOD,
POST_METHOD,
} from '../authmethods';
import { AuthMethodDialogComponent } from './auth-method-dialog/auth-method-dialog.component';
@@ -71,7 +71,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public authMethods: RadioItemAuthType[] = [];
private subscription?: Subscription;
public projectId: string = '';
public app!: App.AsObject;
public app?: App.AsObject;
public environmentMap: { [key: string]: string } = {};
@@ -183,7 +183,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public openNameDialog(): void {
const dialogRef = this.dialog.open(NameDialogComponent, {
data: {
name: this.app.name,
name: this.app?.name,
titleKey: 'APP.NAMEDIALOG.TITLE',
descKey: 'APP.NAMEDIALOG.DESCRIPTION',
labelKey: 'APP.NAMEDIALOG.NAME',
@@ -193,7 +193,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
dialogRef.afterClosed().subscribe((name) => {
if (name) {
this.app.name = name;
this.app!.name = name;
this.saveApp();
}
});
@@ -344,7 +344,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
})
.catch((error) => {
console.error(error);
this.toast.showError(error);
this.errorMessage = error.message;
});
@@ -354,7 +353,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private getAuthMethodOptions(type: string): void {
if (type === 'OIDC') {
switch (this.app.oidcConfig?.appType) {
switch (this.app?.oidcConfig?.appType) {
case OIDCAppType.OIDC_APP_TYPE_NATIVE:
this.authMethods = [PKCE_METHOD, CUSTOM_METHOD];
break;
@@ -378,17 +377,17 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public setPartialConfigFromAuthMethod(authMethod: string): void {
const partialConfig = getPartialConfigFromAuthMethod(authMethod);
if (partialConfig && partialConfig.oidc && this.app.oidcConfig) {
this.app.oidcConfig.responseTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).responseTypesList ?? [];
if (partialConfig && partialConfig.oidc && this.app?.oidcConfig) {
this.app!.oidcConfig.responseTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).responseTypesList ?? [];
this.app.oidcConfig.grantTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).grantTypesList ?? [];
this.app!.oidcConfig.grantTypesList = (partialConfig.oidc as Partial<OIDCConfig.AsObject>).grantTypesList ?? [];
this.app.oidcConfig.authMethodType =
this.app!.oidcConfig.authMethodType =
(partialConfig.oidc as Partial<OIDCConfig.AsObject>).authMethodType ?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
this.oidcForm.patchValue(this.app.oidcConfig);
this.oidcTokenForm.patchValue(this.app.oidcConfig);
} else if (partialConfig && partialConfig.api && this.app.apiConfig) {
} else if (partialConfig && partialConfig.api && this.app?.apiConfig) {
this.app.apiConfig.authMethodType =
(partialConfig.api as Partial<APIConfig.AsObject>).authMethodType ?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC;
@@ -408,7 +407,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
});
dialogRef.afterClosed().subscribe((resp) => {
if (resp && this.projectId && this.app.id) {
if (resp && this.projectId && this.app?.id) {
this.mgmtService
.removeApp(this.projectId, this.app.id)
.then(() => {
@@ -424,21 +423,21 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public changeState(state: AppState): void {
if (state === AppState.APP_STATE_ACTIVE) {
if (state === AppState.APP_STATE_ACTIVE && this.app) {
this.mgmtService
.reactivateApp(this.projectId, this.app.id)
.then(() => {
this.app.state = state;
this.app!.state = state;
this.toast.showInfo('APP.TOAST.REACTIVATED', true);
})
.catch((error: any) => {
this.toast.showError(error);
});
} else if (state === AppState.APP_STATE_INACTIVE) {
} else if (state === AppState.APP_STATE_INACTIVE && this.app) {
this.mgmtService
.deactivateApp(this.projectId, this.app.id)
.then(() => {
this.app.state = state;
this.app!.state = state;
this.toast.showInfo('APP.TOAST.DEACTIVATED', true);
})
.catch((error: any) => {
@@ -448,15 +447,17 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public saveApp(): void {
this.mgmtService
.updateApp(this.projectId, this.app.id, this.app.name)
.then(() => {
this.toast.showInfo('APP.TOAST.UPDATED', true);
this.editState = false;
})
.catch((error) => {
this.toast.showError(error);
});
if (this.app) {
this.mgmtService
.updateApp(this.projectId, this.app.id, this.app.name)
.then(() => {
this.toast.showInfo('APP.TOAST.UPDATED', true);
this.editState = false;
})
.catch((error) => {
this.toast.showError(error);
});
}
}
public toggleRefreshToken(event: MatCheckboxChange): void {
@@ -481,7 +482,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public saveOIDCApp(): void {
this.requestRedirectValuesSubject$.next();
if (this.oidcForm.valid) {
if (this.app.oidcConfig) {
if (this.app?.oidcConfig) {
// configuration
this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
this.app.oidcConfig.grantTypesList = this.grantTypesList?.value;
@@ -532,7 +533,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.mgmtService
.updateOIDCAppConfig(req)
.then(() => {
if (this.app.oidcConfig) {
if (this.app?.oidcConfig) {
const config = { oidc: this.app.oidcConfig };
this.currentAuthMethod = this.authMethodFromPartialConfig(config);
}
@@ -546,7 +547,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public saveAPIApp(): void {
if (this.apiForm.valid && this.app.apiConfig) {
if (this.apiForm.valid && this.app?.apiConfig) {
this.app.apiConfig.authMethodType = this.apiAuthMethodType?.value;
const req = new UpdateAPIAppConfigRequest();
@@ -557,7 +558,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.mgmtService
.updateAPIAppConfig(req)
.then(() => {
if (this.app.apiConfig) {
if (this.app?.apiConfig) {
const config = { api: this.app.apiConfig };
this.currentAuthMethod = this.authMethodFromPartialConfig(config);
@@ -581,21 +582,23 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public regenerateOIDCClientSecret(): void {
this.mgmtService
.regenerateOIDCClientSecret(this.app.id, this.projectId)
.then((resp) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
data: {
// clientId: data.toObject() as ClientSecret.AsObject.clientId,
clientSecret: resp.clientSecret,
},
width: '400px',
if (this.app) {
this.mgmtService
.regenerateOIDCClientSecret(this.app.id, this.projectId)
.then((resp) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
data: {
// clientId: data.toObject() as ClientSecret.AsObject.clientId,
clientSecret: resp.clientSecret,
},
width: '400px',
});
})
.catch((error) => {
this.toast.showError(error);
});
})
.catch((error) => {
this.toast.showError(error);
});
}
}
public changeAuthMethod(): void {
@@ -617,20 +620,22 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public regenerateAPIClientSecret(): void {
this.mgmtService
.regenerateAPIClientSecret(this.app.id, this.projectId)
.then((resp) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
data: {
clientSecret: resp.clientSecret,
},
width: '400px',
if (this.app) {
this.mgmtService
.regenerateAPIClientSecret(this.app.id, this.projectId)
.then((resp) => {
this.toast.showInfo('APP.TOAST.CLIENTSECRETREGENERATED', true);
this.dialog.open(AppSecretDialogComponent, {
data: {
clientSecret: resp.clientSecret,
},
width: '400px',
});
})
.catch((error) => {
this.toast.showError(error);
});
})
.catch((error) => {
this.toast.showError(error);
});
}
}
public get currentRadioItemAuthType(): RadioItemAuthType | undefined {

7
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
View File

@@ -54,7 +54,12 @@
</ng-template>
<div metainfo>
<cnsl-changes *ngIf="project" [changeType]="ChangeType.PROJECT_GRANT" [id]="project.projectId" [secId]="project.grantId"></cnsl-changes>
<cnsl-changes
*ngIf="project"
[changeType]="ChangeType.PROJECT_GRANT"
[id]="project.projectId"
[secId]="project.grantId"
></cnsl-changes>
</div>
</cnsl-meta-layout>
</div>

16
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts
View File

@@ -23,16 +23,12 @@ import { ToastService } from 'src/app/services/toast.service';
export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
public projectId: string = '';
public grantId: string = '';
public project!: GrantedProject.AsObject;
public project?: GrantedProject.AsObject;
public ProjectGrantState: any = ProjectGrantState;
public ChangeType: any = ChangeType;
private subscription?: Subscription;
public isZitadel: boolean = false;
UserGrantContext: any = UserGrantContext;
public UserGrantContext: any = UserGrantContext;
private subscription: Subscription = new Subscription();
// members
public totalMemberResult: number = 0;
@@ -56,7 +52,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
this.subscription.unsubscribe();
}
private async getData({ id, grantId }: Params): Promise<void> {
@@ -155,6 +151,8 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
}
public showDetail(): void {
this.router.navigate(['granted-projects', this.project.projectId, 'grant', this.grantId, 'members']);
if (this.project) {
this.router.navigate(['granted-projects', this.project.projectId, 'grant', this.grantId, 'members']);
}
}
}

87
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
View File

@@ -1,8 +1,12 @@
<cnsl-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
[dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
<cnsl-refresh-table
[loading]="dataSource.loading$ | async"
[selection]="selection"
(refreshed)="refreshPage()"
[dataSize]="dataSource.totalResult"
[timestamp]="dataSource.viewTimestamp"
>
<ng-template cnslHasRole [hasRole]="['project.app.write']" actions>
<a [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']" color="primary"
mat-raised-button>
<a [disabled]="disabled" [routerLink]="['/projects', projectId, 'apps', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
@@ -11,66 +15,87 @@
<table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
<mat-checkbox
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
<mat-checkbox
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'APP.NAME' | translate }} </th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
{{app.name}} </td>
<th mat-header-cell *matHeaderCellDef>{{ 'APP.NAME' | translate }}</th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
{{ app.name }}
</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'APP.TYPE' | translate }} </th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
<th mat-header-cell *matHeaderCellDef>{{ 'APP.TYPE' | translate }}</th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
<span *ngIf="app?.oidcConfig?.appType !== undefined && app?.oidcConfig?.appType !== null">
{{'APP.OIDC.APPTYPE.'+app?.oidcConfig?.appType | translate}}
{{ 'APP.OIDC.APPTYPE.' + app?.oidcConfig?.appType | translate }}
</span>
<span *ngIf="app.apiConfig">API</span>
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.DATA.STATE' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let app" [routerLink]="['/projects', projectId, 'apps', app.id ]">
<span class="state"
[ngClass]="{'active': app.state === AppState.APP_STATE_ACTIVE, 'inactive': app.state === AppState.APP_STATE_INACTIVE}">
{{('APP.PAGES.DETAIL.STATE.'+app?.state) | translate}}
<th mat-header-cell *matHeaderCellDef>{{ 'USER.DATA.STATE' | translate }}</th>
<td class="pointer" mat-cell *matCellDef="let app" [routerLink]="['/projects', projectId, 'apps', app.id]">
<span
class="state"
[ngClass]="{
active: app.state === AppState.APP_STATE_ACTIVE,
inactive: app.state === AppState.APP_STATE_INACTIVE
}"
>
{{ 'APP.PAGES.DETAIL.STATE.' + app?.state | translate }}
</span>
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
<span *ngIf="app?.details?.creationDate">{{app.details.creationDate | timestampToDate |
localizedDate: 'dd. MMM, HH:mm' }}</span>
<th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CREATIONDATE' | translate }}</th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
<span *ngIf="app?.details?.creationDate">{{
app.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CHANGEDATE' | translate }} </th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id ]" mat-cell *matCellDef="let app">
<span *ngIf="app?.details?.changeDate">{{app.details.changeDate | timestampToDate |
localizedDate: 'dd. MMM, HH:mm' }}</span>
<th mat-header-cell *matHeaderCellDef>{{ 'PROJECT.ROLE.CHANGEDATE' | translate }}</th>
<td class="pointer" [routerLink]="['/projects', projectId, 'apps', app.id]" mat-cell *matCellDef="let app">
<span *ngIf="app?.details?.changeDate">{{
app.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm'
}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>
<cnsl-paginator class="paginator" #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult"
[pageSize]="25" [pageSizeOptions]="[25, 50, 100, 250]">
<cnsl-paginator
class="paginator"
#paginator
[timestamp]="dataSource.viewTimestamp"
[length]="dataSource.totalResult"
[pageSize]="25"
[pageSizeOptions]="[25, 50, 100, 250]"
>
</cnsl-paginator>
</cnsl-refresh-table>
</cnsl-refresh-table>

3
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.ts
View File

@@ -19,7 +19,7 @@ export class ApplicationsComponent implements AfterViewInit, OnInit {
@Input() public disabled: boolean = false;
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@ViewChild(MatTable) public table!: MatTable<App.AsObject>;
public dataSource!: ProjectApplicationsDataSource;
public dataSource: ProjectApplicationsDataSource = new ProjectApplicationsDataSource(this.mgmtService);
public selection: SelectionModel<App.AsObject> = new SelectionModel<App.AsObject>(true, []);
public displayedColumns: string[] = ['name', 'type', 'state', 'creationDate', 'changeDate'];
@@ -27,7 +27,6 @@ export class ApplicationsComponent implements AfterViewInit, OnInit {
constructor(private mgmtService: ManagementService) {}
ngOnInit(): void {
this.dataSource = new ProjectApplicationsDataSource(this.mgmtService);
this.dataSource.loadApps(this.projectId, 0, 25);
}

4
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
View File

@@ -15,7 +15,7 @@
<button
mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
[disabled]="isZitadel || (['project.write$', 'project.write:' + project?.id] | hasRole | async) === false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_ACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_INACTIVE)"
>
@@ -24,7 +24,7 @@
<button
mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:' + project.id] | hasRole | async) === false"
[disabled]="isZitadel || (['project.write$', 'project.write:' + project?.id] | hasRole | async) === false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_INACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_ACTIVE)"
>

60
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts
View File

@@ -8,9 +8,7 @@ import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map, take } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
ProjectPrivateLabelingDialogComponent,
} from 'src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component';
import { ProjectPrivateLabelingDialogComponent } from 'src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component';
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
@@ -39,7 +37,7 @@ const GRANTS: SidenavSetting = { id: 'grants', i18nKey: 'MENU.GRANTS' };
})
export class OwnedProjectDetailComponent implements OnInit {
public projectId: string = '';
public project!: Project.AsObject;
public project?: Project.AsObject;
public pageSizeApps: number = 10;
public appsDataSource: MatTableDataSource<App.AsObject> = new MatTableDataSource<App.AsObject>();
@@ -95,7 +93,7 @@ export class OwnedProjectDetailComponent implements OnInit {
public openNameDialog(): void {
const dialogRef = this.dialog.open(NameDialogComponent, {
data: {
name: this.project.name,
name: this.project?.name,
titleKey: 'PROJECT.NAMEDIALOG.TITLE',
descKey: 'PROJECT.NAMEDIALOG.DESCRIPTION',
labelKey: 'PROJECT.NAMEDIALOG.NAME',
@@ -105,7 +103,7 @@ export class OwnedProjectDetailComponent implements OnInit {
dialogRef.afterClosed().subscribe((name) => {
if (name) {
this.project.name = name;
this.project!.name = name;
this.updateName();
}
});
@@ -114,14 +112,14 @@ export class OwnedProjectDetailComponent implements OnInit {
public openPrivateLabelingDialog(): void {
const dialogRef = this.dialog.open(ProjectPrivateLabelingDialogComponent, {
data: {
setting: this.project.privateLabelingSetting,
setting: this.project?.privateLabelingSetting,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((resp: PrivateLabelingSetting) => {
if (resp !== undefined) {
this.project.privateLabelingSetting = resp;
this.project!.privateLabelingSetting = resp;
}
});
}
@@ -143,7 +141,7 @@ export class OwnedProjectDetailComponent implements OnInit {
}),
new Breadcrumb({
type: BreadcrumbType.PROJECT,
name: this.project.name,
name: this.project?.name,
param: { key: ROUTEPARAM, value: projectId },
routerLink: ['/projects', projectId],
isZitadel: this.isZitadel,
@@ -198,7 +196,7 @@ export class OwnedProjectDetailComponent implements OnInit {
.reactivateProject(this.projectId)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
this.project.state = ProjectState.PROJECT_STATE_ACTIVE;
this.project!.state = ProjectState.PROJECT_STATE_ACTIVE;
this.refreshChanges$.emit();
})
.catch((error) => {
@@ -222,7 +220,7 @@ export class OwnedProjectDetailComponent implements OnInit {
.deactivateProject(this.projectId)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
this.project.state = ProjectState.PROJECT_STATE_INACTIVE;
this.project!.state = ProjectState.PROJECT_STATE_INACTIVE;
this.refreshChanges$.emit();
})
.catch((error) => {
@@ -262,23 +260,25 @@ export class OwnedProjectDetailComponent implements OnInit {
}
public saveProject(): void {
const req = new UpdateProjectRequest();
req.setId(this.project.id);
req.setName(this.project.name);
req.setProjectRoleAssertion(this.project.projectRoleAssertion);
req.setProjectRoleCheck(this.project.projectRoleCheck);
req.setHasProjectCheck(this.project.hasProjectCheck);
req.setPrivateLabelingSetting(this.project.privateLabelingSetting);
if (this.project) {
const req = new UpdateProjectRequest();
req.setId(this.project.id);
req.setName(this.project.name);
req.setProjectRoleAssertion(this.project.projectRoleAssertion);
req.setProjectRoleCheck(this.project.projectRoleCheck);
req.setHasProjectCheck(this.project.hasProjectCheck);
req.setPrivateLabelingSetting(this.project.privateLabelingSetting);
this.mgmtService
.updateProject(req)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.UPDATED', true);
this.refreshChanges$.emit();
})
.catch((error) => {
this.toast.showError(error);
});
this.mgmtService
.updateProject(req)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.UPDATED', true);
this.refreshChanges$.emit();
})
.catch((error) => {
this.toast.showError(error);
});
}
}
public navigateBack(): void {
@@ -293,7 +293,7 @@ export class OwnedProjectDetailComponent implements OnInit {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_OWNED,
projectId: this.project.id,
projectId: this.project?.id,
},
width: '400px',
});
@@ -323,6 +323,8 @@ export class OwnedProjectDetailComponent implements OnInit {
}
public showDetail(): void {
this.router.navigate(['projects', this.project.id, 'members']);
if (this.project) {
this.router.navigate(['projects', this.project.id, 'members']);
}
}
}

2
console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.html
View File

@@ -19,7 +19,7 @@
</button>
</form>
<span *ngIf="org"> {{ 'PROJECT.GRANT.CREATE.FOR_ORG' | translate }} {{ org?.name }} </span>
<span *ngIf="org"> {{ 'PROJECT.GRANT.CREATE.FOR_ORG' | translate }} {{ org.name }} </span>
</ng-container>
<ng-container *ngIf="currentCreateStep === 2">

20
console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.ts
View File

@@ -16,7 +16,7 @@ const ROUTEPARAM = 'projectid';
styleUrls: ['./project-grant-create.component.scss'],
})
export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
public org!: Org.AsObject;
public org?: Org.AsObject;
public projectId: string = '';
public grantId: string = '';
public rolesKeyList: string[] = [];
@@ -77,14 +77,16 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
}
public addGrant(): void {
this.mgmtService
.addProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
.then(() => {
this.close();
})
.catch((error) => {
this.toast.showError(error);
});
if (this.org) {
this.mgmtService
.addProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
.then(() => {
this.close();
})
.catch((error) => {
this.toast.showError(error);
});
}
}
public selectRoles(roles: Role.AsObject[]): void {

6
console/src/app/pages/projects/owned-projects/project-grants/project-grants.component.html
View File

@@ -2,12 +2,12 @@
<div class="project-grants-wrapper">
<div class="project-grants">
<cnsl-refresh-table
[loading]="dataSource?.loading$ | async"
[loading]="dataSource.loading$ | async"
*ngIf="projectId"
(refreshed)="loadGrantsPage()"
[dataSize]="dataSource.totalResult"
[selection]="selection"
[timestamp]="dataSource?.viewTimestamp"
[timestamp]="dataSource.viewTimestamp"
(refreshed)="getRoleOptions(projectId)"
>
<div actions>
@@ -149,7 +149,7 @@
class="paginator"
#paginator
[pageSize]="50"
[timestamp]="dataSource?.viewTimestamp"
[timestamp]="dataSource.viewTimestamp"
[pageSizeOptions]="[25, 50, 100, 250]"
[length]="dataSource.totalResult"
(page)="loadGrantsPage($event.pageIndex, $event.pageSize)"

5
console/src/app/pages/projects/owned-projects/project-grants/project-grants.component.ts
View File

@@ -32,12 +32,12 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
@Input() public projectId: string = '';
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@ViewChild(MatTable) public table!: MatTable<GrantedProject.AsObject>;
public dataSource!: ProjectGrantsDataSource;
public dataSource: ProjectGrantsDataSource = new ProjectGrantsDataSource(this.mgmtService, this.toast);
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
public memberRoleOptions: Role.AsObject[] = [];
public displayedColumns: string[] = ['grantedOrgName', 'state', 'creationDate', 'changeDate', 'roleNamesList', 'actions'];
ProjectGrantState: any = ProjectGrantState;
public ProjectGrantState: any = ProjectGrantState;
constructor(
private mgmtService: ManagementService,
@@ -51,7 +51,6 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
}
public ngOnInit(): void {
this.dataSource = new ProjectGrantsDataSource(this.mgmtService, this.toast);
this.dataSource.loadGrants(this.projectId, 0, 25, 'asc');
this.getRoleOptions(this.projectId);
}

4
console/src/app/pages/user-grant-create/user-grant-create.component.html
View File

@@ -40,7 +40,9 @@
<cnsl-project-roles-table
[displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
(changedSelection)="selectRoles($event)"
[projectId]="project?.id ? project.id : grantedProject?.projectId ? grantedProject.projectId : ''"
[projectId]="
project && project.id ? project.id : grantedProject && grantedProject.projectId ? grantedProject.projectId : ''
"
[grantId]="$any(grantedProject)?.grantId ? $any(grantedProject)?.grantId : ''"
>
</cnsl-project-roles-table>

12
console/src/app/pages/user-grant-create/user-grant-create.component.ts
View File

@@ -21,11 +21,11 @@ import { ToastService } from 'src/app/services/toast.service';
export class UserGrantCreateComponent implements OnDestroy {
public context!: UserGrantContext;
public org!: Org.AsObject;
public org?: Org.AsObject;
public userIds: string[] = [];
public project!: Project.AsObject;
public grantedProject!: GrantedProject.AsObject;
public project?: Project.AsObject;
public grantedProject?: GrantedProject.AsObject;
public rolesList: string[] = [];
@@ -34,7 +34,7 @@ export class UserGrantCreateComponent implements OnDestroy {
public UserGrantContext: any = UserGrantContext;
public user!: User.AsObject;
public user?: User.AsObject;
public UserTarget: any = UserTarget;
public editState: boolean = false;
@@ -114,7 +114,7 @@ export class UserGrantCreateComponent implements OnDestroy {
public addGrant(): void {
switch (this.context) {
case UserGrantContext.OWNED_PROJECT:
const prom = this.userIds.map((id) => this.userService.addUserGrant(id, this.rolesList, this.project.id));
const prom = this.userIds.map((id) => this.userService.addUserGrant(id, this.rolesList, this.project?.id));
Promise.all(prom)
.then(() => {
this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
@@ -127,7 +127,7 @@ export class UserGrantCreateComponent implements OnDestroy {
break;
case UserGrantContext.GRANTED_PROJECT:
const promp = this.userIds.map((id) =>
this.userService.addUserGrant(id, this.rolesList, this.grantedProject.projectId, this.grantedProject.grantId),
this.userService.addUserGrant(id, this.rolesList, this.grantedProject?.projectId, this.grantedProject?.grantId),
);
Promise.all(promp)
.then(() => {

71
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.html
View File

@@ -1,31 +1,55 @@
<cnsl-card title="{{'USER.PASSWORDLESS.TITLE' | translate}}"
description="{{'USER.PASSWORDLESS.DESCRIPTION' | translate}}">
<button card-actions mat-icon-button (click)="getPasswordless()" class="icon-button"
matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<cnsl-card
title="{{ 'USER.PASSWORDLESS.TITLE' | translate }}"
description="{{ 'USER.PASSWORDLESS.DESCRIPTION' | translate }}"
>
<button
card-actions
mat-icon-button
(click)="getPasswordless()"
class="icon-button"
matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
>
<mat-icon class="icon">refresh</mat-icon>
</button>
<cnsl-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getPasswordless()"
[dataSize]="dataSource?.data?.length ?? 0">
<button actions class="cnsl-action-button button" (click)="addPasswordless()" mat-raised-button color="primary"
matTooltip="{{'ACTIONS.NEW' | translate}}">
<cnsl-refresh-table
[hideRefresh]="true"
[loading]="loading$ | async"
(refreshed)="getPasswordless()"
[dataSize]="dataSource.data.length"
>
<button
actions
class="cnsl-action-button button"
(click)="addPasswordless()"
mat-raised-button
color="primary"
matTooltip="{{ 'ACTIONS.NEW' | translate }}"
>
<i class="icon las la-fingerprint"></i>
{{'USER.PASSWORDLESS.U2F' | translate}}
{{ 'USER.PASSWORDLESS.U2F' | translate }}
</button>
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PASSWORDLESS.NAME' | translate }} </th>
<td mat-cell *matCellDef="let mfa"><span *ngIf="mfa?.name" class="centered">
<th mat-header-cell *matHeaderCellDef>{{ 'USER.PASSWORDLESS.NAME' | translate }}</th>
<td mat-cell *matCellDef="let mfa">
<span *ngIf="mfa?.name" class="centered">
{{ mfa?.name }}
</span>
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.PASSWORDLESS.TABLESTATE' | translate }} </th>
<td mat-cell *matCellDef="let mfa"><span class="centered">
<span class="state"
[ngClass]="{'active': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY, 'inactive': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY }">{{'USER.PASSWORDLESS.STATE.'+
mfa.state | translate}}</span>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.PASSWORDLESS.TABLESTATE' | translate }}</th>
<td mat-cell *matCellDef="let mfa">
<span class="centered">
<span
class="state"
[ngClass]="{
active: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY,
inactive: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY
}"
>{{ 'USER.PASSWORDLESS.STATE.' + mfa.state | translate }}</span
>
</span>
</td>
</ng-container>
@@ -34,8 +58,13 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let mfa">
<cnsl-table-actions>
<button actions matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" mat-icon-button
(click)="deletePasswordless(mfa.id)">
<button
actions
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
color="warn"
mat-icon-button
(click)="deletePasswordless(mfa.id)"
>
<i class="las la-trash"></i>
</button>
</cnsl-table-actions>
@@ -43,11 +72,11 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
<i class="las la-exclamation"></i>
<span>{{'USER.PASSWORDLESS.EMPTY' | translate}}</span>
<span>{{ 'USER.PASSWORDLESS.EMPTY' | translate }}</span>
</div>
</cnsl-refresh-table>
<div class="table-wrapper">
@@ -55,4 +84,4 @@
<mat-spinner diameter="50"></mat-spinner>
</div>
</div>
</cnsl-card>
</cnsl-card>

2
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.ts
View File

@@ -34,7 +34,7 @@ export class AuthPasswordlessComponent implements OnInit, OnDestroy {
@ViewChild(MatTable) public table!: MatTable<WebAuthNToken.AsObject>;
@ViewChild(MatSort) public sort!: MatSort;
public dataSource!: MatTableDataSource<WebAuthNToken.AsObject>;
public dataSource: MatTableDataSource<WebAuthNToken.AsObject> = new MatTableDataSource<WebAuthNToken.AsObject>([]);
public AuthFactorState: any = AuthFactorState;
public error: string = '';

6
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
View File

@@ -1,5 +1,5 @@
<cnsl-top-view
title="{{ user?.human ? user.human?.profile?.displayName : user?.machine?.name }}"
title="{{ user && user.human ? user.human.profile?.displayName : user?.machine?.name }}"
sub="{{ user?.preferredLoginName }}"
[isActive]="user?.state === UserState.USER_STATE_ACTIVE"
[isInactive]="user?.state === UserState.USER_STATE_INACTIVE"
@@ -95,7 +95,7 @@
<ng-container *ngIf="currentSetting === 'grants'">
<cnsl-card
*ngIf="user?.id"
*ngIf="user && user.id"
title="{{ 'GRANTS.USER.TITLE' | translate }}"
description="{{ 'GRANTS.USER.DESCRIPTION' | translate }}"
>
@@ -130,7 +130,7 @@
</ng-container>
<ng-container *ngIf="currentSetting === 'metadata'">
<cnsl-metadata *ngIf="user?.id" [userId]="user.id"></cnsl-metadata>
<cnsl-metadata *ngIf="user && user.id" [userId]="user.id"></cnsl-metadata>
</ng-container>
</cnsl-sidenav>

20
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
View File

@@ -23,7 +23,7 @@ import { EditDialogComponent, EditDialogType } from './edit-dialog/edit-dialog.c
styleUrls: ['./auth-user-detail.component.scss'],
})
export class AuthUserDetailComponent implements OnDestroy {
public user!: User.AsObject;
public user?: User.AsObject;
public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
public languages: string[] = ['de', 'en', 'it'];
@@ -132,13 +132,13 @@ export class AuthUserDetailComponent implements OnDestroy {
labelKey: 'ACTIONS.NEWVALUE',
titleKey: 'USER.PROFILE.CHANGEUSERNAME_TITLE',
descriptionKey: 'USER.PROFILE.CHANGEUSERNAME_DESC',
value: this.user.userName,
value: this.user?.userName,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((resp: { value: string }) => {
if (resp && resp.value && resp.value !== this.user.userName) {
if (resp && resp.value && resp.value !== this.user?.userName) {
this.userService
.updateMyUserName(resp.value)
.then(() => {
@@ -153,7 +153,7 @@ export class AuthUserDetailComponent implements OnDestroy {
}
public saveProfile(profileData: Profile.AsObject): void {
if (this.user.human) {
if (this.user?.human) {
this.user.human.profile = profileData;
this.userService
@@ -180,7 +180,7 @@ export class AuthUserDetailComponent implements OnDestroy {
.setMyEmail(email)
.then(() => {
this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
if (this.user.human) {
if (this.user?.human) {
const mailToSet = new Email();
mailToSet.setEmail(email);
this.user.human.email = mailToSet.toObject();
@@ -237,7 +237,7 @@ export class AuthUserDetailComponent implements OnDestroy {
.removeMyPhone()
.then(() => {
this.toast.showInfo('USER.TOAST.PHONEREMOVED', true);
if (this.user.human?.phone) {
if (this.user?.human?.phone) {
const phone = new Phone();
this.user.human.phone = phone.toObject();
this.refreshUser();
@@ -249,12 +249,12 @@ export class AuthUserDetailComponent implements OnDestroy {
}
public savePhone(phone: string): void {
if (this.user.human) {
if (this.user?.human) {
this.userService
.setMyPhone(phone)
.then(() => {
this.toast.showInfo('USER.TOAST.PHONESAVED', true);
if (this.user.human) {
if (this.user?.human) {
const phoneToSet = new Phone();
phoneToSet.setPhone(phone);
this.user.human.phone = phoneToSet.toObject();
@@ -277,7 +277,7 @@ export class AuthUserDetailComponent implements OnDestroy {
labelKey: 'USER.LOGINMETHODS.PHONE.EDITVALUE',
titleKey: 'USER.LOGINMETHODS.PHONE.EDITTITLE',
descriptionKey: 'USER.LOGINMETHODS.PHONE.EDITDESC',
value: this.user.human?.phone?.phone,
value: this.user?.human?.phone?.phone,
type: type,
},
width: '400px',
@@ -297,7 +297,7 @@ export class AuthUserDetailComponent implements OnDestroy {
labelKey: 'ACTIONS.NEWVALUE',
titleKey: 'USER.LOGINMETHODS.EMAIL.EDITTITLE',
descriptionKey: 'USER.LOGINMETHODS.EMAIL.EDITDESC',
value: this.user.human?.email?.email,
value: this.user?.human?.email?.email,
type: type,
},
width: '400px',

66
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
View File

@@ -1,20 +1,35 @@
<cnsl-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
<button card-actions mat-icon-button (click)="getMFAs()" class="icon-button"
matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<cnsl-card title="{{ 'USER.MFA.TITLE' | translate }}" description="{{ 'USER.MFA.DESCRIPTION' | translate }}">
<button
card-actions
mat-icon-button
(click)="getMFAs()"
class="icon-button"
matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
>
<mat-icon class="icon">refresh</mat-icon>
</button>
<cnsl-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getMFAs()"
[dataSize]="dataSource?.data?.length ?? 0">
<button actions class="button cnsl-action-button" (click)="addAuthFactor()" mat-raised-button color="primary"
matTooltip="{{'ACTIONS.NEW' | translate}}">
<cnsl-refresh-table
[hideRefresh]="true"
[loading]="loading$ | async"
(refreshed)="getMFAs()"
[dataSize]="dataSource.data.length"
>
<button
actions
class="button cnsl-action-button"
(click)="addAuthFactor()"
mat-raised-button
color="primary"
matTooltip="{{ 'ACTIONS.NEW' | translate }}"
>
<mat-icon class="icon">add</mat-icon>
<span>{{'USER.MFA.ADD' | translate}}</span>
<span>{{ 'USER.MFA.ADD' | translate }}</span>
</button>
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.TABLETYPE' | translate }}</th>
<td mat-cell *matCellDef="let mfa">
<span *ngIf="mfa.otp !== undefined">OTP (One-Time Password)</span>
<span *ngIf="mfa.u2f !== undefined">U2F (Universal 2nd Factor)</span>
@@ -22,7 +37,7 @@
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.NAME' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.NAME' | translate }}</th>
<td mat-cell *matCellDef="let mfa">
<span *ngIf="mfa?.u2f?.name" class="centered">
{{ mfa.u2f.name }}
@@ -31,11 +46,17 @@
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLESTATE' | translate }} </th>
<td mat-cell *matCellDef="let mfa"><span class="centered">
<span class="state"
[ngClass]="{'active': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY, 'inactive': mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY}">{{'USER.MFA.STATE.'+
mfa.state | translate}}</span>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.MFA.TABLESTATE' | translate }}</th>
<td mat-cell *matCellDef="let mfa">
<span class="centered">
<span
class="state"
[ngClass]="{
active: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_READY,
inactive: mfa.state === AuthFactorState.AUTH_FACTOR_STATE_NOT_READY
}"
>{{ 'USER.MFA.STATE.' + mfa.state | translate }}</span
>
</span>
</td>
</ng-container>
@@ -44,8 +65,13 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let mfa">
<cnsl-table-actions>
<button actions matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" mat-icon-button
(click)="deleteMFA(mfa)">
<button
actions
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
color="warn"
mat-icon-button
(click)="deleteMFA(mfa)"
>
<i class="las la-trash"></i>
</button>
</cnsl-table-actions>
@@ -53,12 +79,12 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
<i class="las la-exclamation"></i>
<span>{{'USER.MFA.EMPTY' | translate}}</span>
<span>{{ 'USER.MFA.EMPTY' | translate }}</span>
</div>
</cnsl-refresh-table>
<div class="table-wrapper">
@@ -66,4 +92,4 @@
<mat-spinner diameter="50"></mat-spinner>
</div>
</div>
</cnsl-card>
</cnsl-card>

2
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.ts
View File

@@ -32,7 +32,7 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
@ViewChild(MatTable) public table!: MatTable<AuthFactor.AsObject>;
@ViewChild(MatSort) public sort!: MatSort;
public dataSource!: MatTableDataSource<AuthFactor.AsObject>;
public dataSource: MatTableDataSource<AuthFactor.AsObject> = new MatTableDataSource<AuthFactor.AsObject>([]);
public AuthFactorState: any = AuthFactorState;

166
console/src/app/pages/users/user-detail/contact/contact.component.html
View File

@@ -1,79 +1,105 @@
<div class="contact-method-col">
<div class="contact-method-row">
<div class="left">
<span class="label cnsl-secondary-text">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
<span class="name">*********</span>
<div class="contact-method-col" *ngIf="human">
<div class="contact-method-row">
<div class="left">
<span class="label cnsl-secondary-text">{{ 'USER.PROFILE.PASSWORD' | translate }}</span>
<span class="name">*********</span>
<ng-content select="[pwdAction]"></ng-content>
</div>
<div class="right">
<a matTooltip="{{'USER.PASSWORD.SET' | translate}}" [disabled]="!canWrite" [routerLink]="['password']"
mat-icon-button>
<i class="las la-pen"></i>
</a>
</div>
<ng-content select="[pwdAction]"></ng-content>
</div>
<div class="contact-method-row">
<div class="left">
<span class="label cnsl-secondary-text">{{ 'USER.EMAIL' | translate }}</span>
<span class="name">{{human?.email?.email}}</span>
<span *ngIf="human?.email?.isEmailVerified" class="contact-state verified">{{'USER.EMAILVERIFIED' |
translate}}</span>
<div *ngIf="!human?.email?.isEmailVerified" class="block">
<span class="contact-state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
<div class="right">
<a
matTooltip="{{ 'USER.PASSWORD.SET' | translate }}"
[disabled]="!canWrite"
[routerLink]="['password']"
mat-icon-button
>
<i class="las la-pen"></i>
</a>
</div>
</div>
<ng-container *ngIf="human?.email">
<a *ngIf="canWrite" class="verify cnsl-secondary-text"
matTooltip="{{'USER.LOGINMETHODS.EMAIL.RESEND' | translate}}"
(click)="emitEmailVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</div>
<div class="contact-method-row">
<div class="left">
<span class="label cnsl-secondary-text">{{ 'USER.EMAIL' | translate }}</span>
<span class="name">{{ human.email?.email }}</span>
<span *ngIf="human.email?.isEmailVerified" class="contact-state verified">{{ 'USER.EMAILVERIFIED' | translate }}</span>
<div *ngIf="!human.email?.isEmailVerified" class="block">
<span class="contact-state notverified">{{ 'USER.NOTVERIFIED' | translate }}</span>
<ng-content select="[emailAction]"></ng-content>
</div>
<ng-container *ngIf="human.email">
<a
*ngIf="canWrite"
class="verify cnsl-secondary-text"
matTooltip="{{ 'USER.LOGINMETHODS.EMAIL.RESEND' | translate }}"
(click)="emitEmailVerification()"
>{{ 'USER.LOGINMETHODS.RESENDCODE' | translate }}</a
>
</ng-container>
</div>
<div class="right">
<button matTooltip="{{'ACTIONS.EDIT' | translate}}"
[disabled]="!canWrite || state === UserState.USER_STATE_INITIAL"
(click)="openEditDialog(EditDialogType.EMAIL)" mat-icon-button>
<i class="las la-pen"></i>
</button>
</div>
<ng-content select="[emailAction]"></ng-content>
</div>
<div class="contact-method-row">
<div class="left">
<span class="label cnsl-secondary-text">{{ 'USER.PHONE' | translate }}</span>
<span class="name">{{human?.phone?.phone ? human.phone?.phone : ('USER.PHONEEMPTY' | translate)}}</span>
<span *ngIf="human?.phone?.isPhoneVerified" class="contact-state verified">{{'USER.PHONEVERIFIED' |
translate}}</span>
<div *ngIf="human.phone?.phone && !human?.phone?.isPhoneVerified" class="block">
<span class="contact-state notverified">{{'USER.NOTVERIFIED' | translate}}</span>
<ng-container *ngIf="human?.phone?.phone">
<a *ngIf="!disablePhoneCode && canWrite" class="verify cnsl-secondary-text"
matTooltip="{{'USER.LOGINMETHODS.ENTERCODE_DESC' | translate}}"
(click)="enterCode()">{{'USER.LOGINMETHODS.ENTERCODE' | translate}}</a>
<a *ngIf="canWrite" class="verify cnsl-secondary-text"
matTooltip="{{'USER.LOGINMETHODS.PHONE.RESEND' | translate}}"
(click)="emitPhoneVerification()">{{'USER.LOGINMETHODS.RESENDCODE' | translate}}</a>
</ng-container>
</div>
<ng-content select="[phoneAction]"></ng-content>
</div>
<div class="right">
<button matTooltip="{{'ACTIONS.DELETE' | translate}}" *ngIf="human && human.phone?.phone" color="warn"
(click)="emitDeletePhone()" mat-icon-button>
<i class="las la-trash"></i>
</button>
<button matTooltip="{{'ACTIONS.EDIT' | translate}}" [disabled]="!canWrite"
(click)="openEditDialog(EditDialogType.PHONE)" mat-icon-button>
<i class="las la-pen"></i>
</button>
</div>
<div class="right">
<button
matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
[disabled]="!canWrite || state === UserState.USER_STATE_INITIAL"
(click)="openEditDialog(EditDialogType.EMAIL)"
mat-icon-button
>
<i class="las la-pen"></i>
</button>
</div>
</div>
</div>
<div class="contact-method-row">
<div class="left">
<span class="label cnsl-secondary-text">{{ 'USER.PHONE' | translate }}</span>
<span class="name">{{ human.phone?.phone ? human.phone?.phone : ('USER.PHONEEMPTY' | translate) }}</span>
<span *ngIf="human.phone?.isPhoneVerified" class="contact-state verified">{{ 'USER.PHONEVERIFIED' | translate }}</span>
<div *ngIf="human.phone?.phone && !human.phone?.isPhoneVerified" class="block">
<span class="contact-state notverified">{{ 'USER.NOTVERIFIED' | translate }}</span>
<ng-container *ngIf="human.phone?.phone">
<a
*ngIf="!disablePhoneCode && canWrite"
class="verify cnsl-secondary-text"
matTooltip="{{ 'USER.LOGINMETHODS.ENTERCODE_DESC' | translate }}"
(click)="enterCode()"
>{{ 'USER.LOGINMETHODS.ENTERCODE' | translate }}</a
>
<a
*ngIf="canWrite"
class="verify cnsl-secondary-text"
matTooltip="{{ 'USER.LOGINMETHODS.PHONE.RESEND' | translate }}"
(click)="emitPhoneVerification()"
>{{ 'USER.LOGINMETHODS.RESENDCODE' | translate }}</a
>
</ng-container>
</div>
<ng-content select="[phoneAction]"></ng-content>
</div>
<div class="right">
<button
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
*ngIf="human && human.phone?.phone"
color="warn"
(click)="emitDeletePhone()"
mat-icon-button
>
<i class="las la-trash"></i>
</button>
<button
matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
[disabled]="!canWrite"
(click)="openEditDialog(EditDialogType.PHONE)"
mat-icon-button
>
<i class="las la-pen"></i>
</button>
</div>
</div>
</div>

2
console/src/app/pages/users/user-detail/contact/contact.component.ts
View File

@@ -14,7 +14,7 @@ import { EditDialogType } from '../auth-user-detail/edit-dialog/edit-dialog.comp
export class ContactComponent {
@Input() disablePhoneCode: boolean = false;
@Input() canWrite: boolean | null = false;
@Input() human!: Human.AsObject;
@Input() human?: Human.AsObject;
@Input() state!: UserState;
@Output() editType: EventEmitter<EditDialogType> = new EventEmitter<EditDialogType>();
@Output() resendEmailVerification: EventEmitter<void> = new EventEmitter<void>();

2
console/src/app/pages/users/user-detail/detail-form/detail-form.component.html
View File

@@ -14,7 +14,7 @@
*ngIf="user && user.profile?.displayName && user.profile?.firstName && user.profile?.lastName"
class="avatar"
[name]="user.profile?.displayName ?? ''"
[avatarUrl]="user?.profile?.avatarUrl || ''"
[avatarUrl]="user.profile?.avatarUrl || ''"
[forColor]="preferredLoginName"
[size]="80"
>