TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 20:47:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: console flat navigation, settings (#3581)

Browse Source 
* instance routing

* instance naming

* org list

* rm isonsystem

* breadcrumb  type

* routing

* instance members

* fragment refresh org

* settings pages

* settings list, sidenav grouping, i18n

* org-settings, policy changes

* lint

* grid

* rename grid

* fallback to general

* cleanup

* general settings, remove cards

* sidenav for settings, label policy

* i18n

* header, nav backbuild

* general, project nav rehaul

* login text background adapt

* org nav anim

* org, instance settings, fix policy layout, roles

* i18n, active route for project

* lint
This commit is contained in:
Max Peintner 2022-05-09 15:01:36 +02:00 committed by GitHub
parent 94e420bb24
commit 06e3330d2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
188 changed files with 4046 additions and 3639 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
console/src/app/app-routing.module.ts
View File

@ -13,6 +13,10 @@ const routes: Routes = [
loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
canActivate: [AuthGuard],
},
{
path: 'orgs',
loadChildren: () => import('./pages/org-list/org-list.module').then((m) => m.OrgListModule),
},
{
path: 'granted-projects',
loadChildren: () =>
@ -41,8 +45,8 @@ const routes: Routes = [
],
},
{
path: 'system',
loadChildren: () => import('./pages/iam/iam.module').then((m) => m.IamModule),
path: 'instance',
loadChildren: () => import('./pages/instance/instance.module').then((m) => m.InstanceModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.read', 'iam.write'],
@ -59,7 +63,7 @@ const routes: Routes = [
},
{
path: 'org',
loadChildren: () => import('./pages/orgs/orgs.module').then((m) => m.OrgsModule),
loadChildren: () => import('./pages/orgs/org.module').then((m) => m.OrgModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['org.read'],
@ -140,6 +144,14 @@ const routes: Routes = [
roles: ['iam.read'],
},
},
{
path: 'settings',
loadChildren: () => import('./pages/instance-settings/instance-settings.module').then((m) => m.InstanceSettingsModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.read', 'iam.write'],
},
},
{
path: 'domains',
loadChildren: () => import('./pages/domains/domains.module').then((m) => m.DomainsModule),
@ -148,6 +160,14 @@ const routes: Routes = [
roles: ['org.read'],
},
},
{
path: 'org-settings',
loadChildren: () => import('./pages/org-settings/org-settings.module').then((m) => m.OrgSettingsModule),
canActivate: [AuthGuard, RoleGuard],
data: {
roles: ['iam.read', 'iam.write'],
},
},
{
path: 'signedout',
loadChildren: () => import('./pages/signedout/signedout.module').then((m) => m.SignedoutModule),

2
console/src/app/app.component.scss
View File

@ -22,7 +22,7 @@
position: relative;
.router-container {
padding: 0 2rem;
padding: 0 2rem 50px 2rem;
@media only screen and (max-width: 500px) {
padding: 0 1rem;

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

@ -349,7 +349,7 @@ export class AppComponent implements OnInit, OnDestroy {
public changedOrg(org: Org.AsObject): void {
this.loadPrivateLabelling();
this.authService.zitadelPermissionsChanged.pipe(take(1)).subscribe(() => {
this.router.navigate(['/']);
this.router.navigate(['/org'],{fragment: org.id} );
});
}

13
console/src/app/modules/accounts-card/accounts-card.component.html
View File

@ -17,19 +17,6 @@
<span class="u-name">{{ user.human?.profile?.displayName ? user.human?.profile?.displayName : 'A' }}</span>
<span class="u-email" *ngIf="user.preferredLoginName">{{ user.preferredLoginName }}</span>
<a [routerLink]="['/system']" class="iamuser" *ngIf="iamuser" (click)="close()">
<span class="label">{{ 'MENU.INSTANCE' | translate }}</span>
<a class="iambtn">
<i class="las la-cog"></i>
</a>
</a>
<a [routerLink]="['/org']" class="iamuser" *ngIf="isOnSystem" (click)="close()">
<span class="label">{{ 'MENU.ORGANIZATION' | translate }}</span>
<a class="iambtn">
<i class="las la-cog"></i>
</a>
</a>
<button (click)="editUserProfile()" mat-stroked-button>{{ 'USER.EDITACCOUNT' | translate }}</button>
<div class="l-accounts">

34
console/src/app/modules/accounts-card/accounts-card.component.scss
View File

@ -50,40 +50,6 @@
margin-top: 0;
}
.iamuser {
position: absolute;
border-radius: 50vw;
right: 1rem;
top: 1rem;
font-size: 12px;
line-height: 12px;
font-weight: 600;
background-color: $primary-color;
color: mat.get-color-from-palette($primary, default-contrast);
flex-direction: row;
align-items: center;
text-decoration: none;
padding: 0 4px;
display: none;
.label {
margin: 0.5rem 1rem;
}
.iambtn {
margin: 0 0 0 4px;
color: mat.get-color-from-palette($primary, default-contrast);
}
@media only screen and (max-width: 600px) {
display: flex;
.label {
margin: 0.5rem 0 0.5rem 0.5rem;
}
}
}
button {
border-radius: 50vh;
margin: 0.5rem;

7
console/src/app/modules/accounts-card/accounts-card.component.ts
View File

@ -78,11 +78,4 @@ export class AccountsCardComponent implements OnInit {
this.authService.signout();
this.closedCard.emit();
}
public get isOnSystem(): boolean {
return (
['/system', '/views', '/failed-events', '/system/members'].includes(this.router.url) ||
new RegExp('/system/policy/*').test(this.router.url)
);
}
}

1
console/src/app/modules/footer/footer.component.scss
View File

@ -16,7 +16,6 @@
padding: 2rem;
background-color: map-get($background, footer) !important;
border-top: 1px solid map-get($foreground, divider);
margin-top: 50px;
display: flex;
transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

10
console/src/app/modules/header/header.component.html
View File

@ -37,7 +37,7 @@
</ng-template>
<ng-container *ngFor="let bread of breadcrumbService.breadcrumbs$ | async as bc; index as i">
<ng-container *ngIf="bread.type === BreadcrumbType.IAM">
<ng-container *ngIf="bread.type === BreadcrumbType.INSTANCE">
<ng-template cnslHasRole [hasRole]="['iam.read']">
<svg
class="slash hide-on-small"
@ -132,7 +132,7 @@
</div>
</ng-container>
<ng-container *ngIf="bread.type !== BreadcrumbType.IAM && bread.type !== BreadcrumbType.ORG">
<ng-container *ngIf="bread.type !== BreadcrumbType.INSTANCE && bread.type !== BreadcrumbType.ORG">
<svg
class="slash"
viewBox="0 0 24 24"
@ -176,8 +176,8 @@
<div class="system-rel" *ngIf="!isOnMe">
<a
id="systembutton"
*ngIf="!isOnSystem && (['iam.read$', 'iam.write$'] | hasRole | async)"
[routerLink]="['/system']"
*ngIf="!isOnInstance && (['iam.read$', 'iam.write$'] | hasRole | async)"
[routerLink]="['/instance']"
class="iam-settings cnsl-action-button"
mat-stroked-button
>
@ -186,7 +186,7 @@
</a>
<a
id="orgbutton"
*ngIf="isOnSystem && (['org.read'] | hasRole | async)"
*ngIf="isOnInstance && (['org.read'] | hasRole | async)"
[routerLink]="['/org']"
class="org-settings cnsl-action-button"
mat-stroked-button

14
console/src/app/modules/header/header.component.ts
View File

@ -63,14 +63,14 @@ export class HeaderComponent implements OnDestroy {
this.changedActiveOrg.emit(org);
}
public get isOnSystem(): boolean {
return (
['/system', '/views', '/failed-events', '/system/members'].includes(this.router.url) ||
new RegExp('/system/policy/*').test(this.router.url)
);
}
public get isOnMe(): boolean {
return this.router.url === '/users/me';
}
public get isOnInstance(): boolean {
return (
['/instance', '/views', '/orgs', '/settings', '/failed-events', '/instance/members'].includes(this.router.url) ||
this.router.url.includes('/settings')
);
}
}

13
console/src/app/modules/idp-create/idp-create.component.ts
View File

@ -85,9 +85,9 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
];
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
@ -98,16 +98,11 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
OIDCMappingField.OIDC_MAPPING_FIELD_EMAIL,
];
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
break;
}
});

61
console/src/app/modules/idp-table/idp-table.component.html
View File

@ -2,7 +2,7 @@
[loading]="loading$ | async"
(refreshed)="refreshPage()"
[dataSize]="dataSource.data.length"
[emitRefreshOnPreviousRoutes]="['/system/idp/create']"
[emitRefreshOnPreviousRoutes]="['/instance/idp/create']"
[timestamp]="idpResult?.details?.viewTimestamp"
[selection]="selection"
[hideRefresh]="true"
@ -14,7 +14,17 @@
class="margin-right bg-state inactive"
mat-stroked-button
*ngIf="selection.hasValue()"
[disabled]="disabled"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.idp.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'org.idp.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'IDP.DEACTIVATE' | translate }}
</button>
@ -24,12 +34,38 @@
class="bg-state active"
mat-stroked-button
*ngIf="selection.hasValue()"
[disabled]="disabled"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.idp.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'org.idp.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'IDP.ACTIVATE' | translate }}
</button>
<a [routerLink]="createRouterLink" class="cnsl-action-button" color="primary" mat-raised-button [disabled]="disabled">
<a
[routerLink]="createRouterLink"
class="cnsl-action-button"
color="primary"
mat-raised-button
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.idp.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'org.idp.write'
: ''
]
| hasRole
| async) === false
"
>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
@ -193,7 +229,22 @@
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-header-row
*matHeaderRowDef="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.idp.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'org.idp.write'
: ''
]
| hasRole
| async)
? displayedColumnsWithActions
: displayedColumns
"
></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</div>

15
console/src/app/modules/idp-table/idp-table.component.ts
View File

@ -24,7 +24,6 @@ import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
export class IdpTableComponent implements OnInit {
@Input() public serviceType!: PolicyComponentServiceType;
@Input() service!: AdminService | ManagementService;
@Input() disabled: boolean = false;
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
public dataSource: MatTableDataSource<IDP.AsObject> = new MatTableDataSource<IDP.AsObject>();
public selection: SelectionModel<IDP.AsObject> = new SelectionModel<IDP.AsObject>(true, []);
@ -55,10 +54,6 @@ export class IdpTableComponent implements OnInit {
if (this.serviceType === PolicyComponentServiceType.MGMT) {
this.displayedColumns = ['availability', 'name', 'type', 'owner', 'creationDate', 'changeDate', 'state'];
}
if (!this.disabled) {
this.displayedColumns.push('actions');
}
}
public isAllSelected(): boolean {
@ -195,7 +190,7 @@ export class IdpTableComponent implements OnInit {
public get createRouterLink(): RouterLink | any {
if (this.service instanceof AdminService) {
return ['/system', 'idp', 'create'];
return ['/instance', 'idp', 'create'];
} else if (this.service instanceof ManagementService) {
return ['/org', 'idp', 'create'];
}
@ -207,13 +202,13 @@ export class IdpTableComponent implements OnInit {
case PolicyComponentServiceType.MGMT:
switch (row.owner) {
case IDPOwnerType.IDP_OWNER_TYPE_SYSTEM:
return ['/system', 'idp', row.id];
return ['/instance', 'idp', row.id];
case IDPOwnerType.IDP_OWNER_TYPE_ORG:
return ['/org', 'idp', row.id];
}
break;
case PolicyComponentServiceType.ADMIN:
return ['/system', 'idp', row.id];
return ['/instance', 'idp', row.id];
}
}
}
@ -289,4 +284,8 @@ export class IdpTableComponent implements OnInit {
public isEnabled(idp: IDP.AsObject): boolean {
return this.idps.findIndex((i) => i.idpId === idp.id) > -1;
}
public get displayedColumnsWithActions(): string[] {
return ['actions', ...this.displayedColumns];
}
}

27
console/src/app/modules/idp/idp.component.ts
View File

@ -8,15 +8,15 @@ import { ActivatedRoute, Router } from '@angular/router';
import { Observable, Subject } from 'rxjs';
import { take } from 'rxjs/operators';
import {
UpdateIDPJWTConfigRequest,
UpdateIDPOIDCConfigRequest,
UpdateIDPRequest,
UpdateIDPJWTConfigRequest,
UpdateIDPOIDCConfigRequest,
UpdateIDPRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import { IDP, IDPState, IDPStylingType, OIDCMappingField } from 'src/app/proto/generated/zitadel/idp_pb';
import {
UpdateOrgIDPJWTConfigRequest,
UpdateOrgIDPOIDCConfigRequest,
UpdateOrgIDPRequest,
UpdateOrgIDPJWTConfigRequest,
UpdateOrgIDPOIDCConfigRequest,
UpdateOrgIDPRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
@ -101,24 +101,19 @@ export class IdpComponent implements OnDestroy {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
breadcrumbService.setBreadcrumb([bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
type: BreadcrumbType.INSTANCE,
name: 'Instance',
routerLink: ['/instance'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
@ -419,7 +414,7 @@ export class IdpComponent implements OnDestroy {
case PolicyComponentServiceType.MGMT:
return ['/org', 'policy', 'login'];
case PolicyComponentServiceType.ADMIN:
return ['/system', 'policy', 'login'];
return ['/instance', 'policy', 'login'];
}
}

4
console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts
View File

@ -23,8 +23,8 @@ export class KeyboardShortcutsComponent {
public get isNotOnSystem(): boolean {
return !(
['/system', '/views', '/failed-events'].includes(this.router.url) ||
new RegExp('/system/policy/*').test(this.router.url)
['/instance', '/views', '/failed-events'].includes(this.router.url) ||
new RegExp('/instance/policy/*').test(this.router.url)
);
}
}

8
console/src/app/modules/members-table/members-table.component.ts
View File

@ -4,10 +4,10 @@ import { MatDialog } from '@angular/material/dialog';
import { MatTable } from '@angular/material/table';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { IamMembersDataSource } from 'src/app/pages/iam/iam-members/iam-members-datasource';
import { InstanceMembersDataSource } from 'src/app/pages/instance/instance-members/instance-members-datasource';
import { OrgMembersDataSource } from 'src/app/pages/orgs/org-members/org-members-datasource';
import {
ProjectGrantMembersDataSource,
ProjectGrantMembersDataSource,
} from 'src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-datasource';
import { Member } from 'src/app/proto/generated/zitadel/member_pb';
import { getMembershipColor } from 'src/app/utils/color';
@ -21,7 +21,7 @@ type MemberDatasource =
| OrgMembersDataSource
| ProjectMembersDataSource
| ProjectGrantMembersDataSource
| IamMembersDataSource;
| InstanceMembersDataSource;
@Component({
selector: 'cnsl-members-table',
@ -121,7 +121,7 @@ export class MembersTableComponent implements OnInit, OnDestroy {
public masterToggle(): void {
this.isAllSelected()
? this.selection.clear()
: this.dataSource.membersSubject.value.forEach((row) => this.selection.select(row));
: this.dataSource.membersSubject.value.forEach((row: Member.AsObject) => this.selection.select(row));
}
public changePage(event?: PageEvent): any {

23
console/src/app/modules/memberships-table/memberships-table.component.ts
View File

@ -160,31 +160,10 @@ export class MembershipsTableComponent implements OnInit, OnDestroy {
});
} else if (membership.iam) {
// only shown on auth user
this.router.navigate(['/system/members']);
this.router.navigate(['/instance/members']);
}
}
// public canNavigateToEdit(membership: Membership.AsObject): Observable<boolean> {
// if (membership.orgId && !membership.projectId && !membership.projectGrantId) {
// return this.authService.isAllowed(['org.member.read:' + membership.orgId]);
// } else if (membership.projectGrantId && membership.details?.resourceOwner) {
// return from(this.authService.getActiveOrg(membership.details?.resourceOwner)).pipe(
// switchMap(() => this.authService.isAllowed(['project.grant.member.read:' + membership.projectId])),
// catchError(() => of(false)),
// );
// } else if (membership.projectId && membership.details?.resourceOwner) {
// return from(this.authService.getActiveOrg(membership.details?.resourceOwner)).pipe(
// take(1),
// switchMap(() => this.authService.isAllowed(['project.member.read:' + membership.projectId])),
// catchError(() => of(false)),
// );
// } else if (membership.iam) {
// return this.authService.isAllowed(['iam.member.read']);
// } else {
// return of(false);
// }
// }
private startOrgContextWorkflow(membershipOrg: Org.AsObject, currentOrg?: Org.AsObject | null): void {
if (!currentOrg || (membershipOrg.id && currentOrg.id && currentOrg.id !== membershipOrg.id)) {
setTimeout(() => {

47
console/src/app/modules/nav/nav.component.html
View File

@ -7,27 +7,36 @@
*ngIf="
breadc[breadc.length - 1] &&
!breadc[breadc.length - 1].hideNav &&
breadc[breadc.length - 1].type !== BreadcrumbType.GRANTEDPROJECT &&
breadc[breadc.length - 1].type !== BreadcrumbType.APP &&
breadc[breadc.length - 1].type !== BreadcrumbType.AUTHUSER
"
[ngSwitch]="breadc[breadc.length - 1].type"
[ngSwitch]="breadc[0].type"
>
<div class="nav-row" @navrow>
<ng-container *ngSwitchCase="BreadcrumbType.IAM">
<ng-container *ngSwitchCase="BreadcrumbType.INSTANCE">
<div class="nav-row-abs" @navroworg>
<ng-template cnslHasRole [hasRole]="['iam.read']">
<a
class="nav-item"
[routerLinkActiveOptions]="{ exact: false }"
[routerLinkActive]="['active']"
[routerLink]="['/system']"
[routerLink]="['/instance']"
>
<div class="c_label">
<span> {{ 'MENU.INSTANCEOVERVIEW' | translate }} </span>
</div>
</a>
<a
class="nav-item"
[routerLinkActiveOptions]="{ exact: true }"
[routerLinkActive]="['active']"
[routerLink]="['/orgs']"
>
<div class="c_label">
<span> {{ 'MENU.ORGS' | translate }} </span>
</div>
</a>
<a
class="nav-item"
[routerLinkActiveOptions]="{ exact: false }"
@ -49,6 +58,17 @@
<span> {{ 'MENU.FAILEDEVENTS' | translate }} </span>
</div>
</a>
<a
class="nav-item"
[routerLinkActiveOptions]="{ exact: false }"
[routerLinkActive]="['active']"
[routerLink]="['/settings']"
>
<div class="c_label">
<span> {{ 'MENU.SETTINGS' | translate }} </span>
</div>
</a>
</ng-template>
<template [ngTemplateOutlet]="shortcutKeyRef"></template>
@ -56,7 +76,7 @@
</ng-container>
<ng-container *ngSwitchCase="BreadcrumbType.ORG">
<div class="nav-row-abs" @navroworg>
<div class="nav-row-abs" @navrowproject>
<a
class="nav-item"
[routerLinkActive]="['active']"
@ -142,13 +162,24 @@
<span class="label">{{ 'MENU.DOMAINS' | translate }}</span>
</a>
</ng-template>
<ng-template cnslHasRole [hasRole]="['org.read']">
<a
class="nav-item"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }"
[routerLink]="['/org-settings']"
>
<span class="label">{{ 'MENU.SETTINGS' | translate }}</span>
</a>
</ng-template>
</ng-container>
<template [ngTemplateOutlet]="shortcutKeyRef"></template>
</div>
</ng-container>
<ng-container *ngSwitchCase="BreadcrumbType.PROJECT">
<!-- <ng-container *ngSwitchCase="BreadcrumbType.PROJECT">
<div *ngIf="breadc[breadc.length - 1]?.param?.value" class="nav-row-abs" @navrowproject>
<ng-template cnslHasRole [hasRole]="['project.read(:[0-9]*)?']">
<a
@ -207,7 +238,7 @@
<template [ngTemplateOutlet]="shortcutKeyRef"></template>
</div>
</ng-container>
</ng-container> -->
</div>
</ng-container>
</ng-container>

70
console/src/app/modules/org-context/org-context.component.html
View File

@ -1,49 +1,75 @@
<div class="org-context-card" cdkTrapFocus>
<div class="spinner-w">
<mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent">
</mat-spinner>
<mat-spinner diameter="20" *ngIf="orgLoading$ | async" color="accent"> </mat-spinner>
</div>
<div class="filter-wrapper">
<input cnslInput class="filter-input" [formControl]="filterControl" autocomplete="off"
(click)="$event.stopPropagation()" placeholder="{{'ORG.PAGES.FILTERPLACEHOLDER' | translate}}" #input>
<input
cnslInput
class="filter-input"
[formControl]="filterControl"
autocomplete="off"
(click)="$event.stopPropagation()"
placeholder="{{ 'ORG.PAGES.FILTERPLACEHOLDER' | translate }}"
#input
/>
</div>
<div class="org-wrapper">
<button class="org-button-with-pin" mat-button
[ngClass]="{'active': pinnedorg.id === org?.id, 'border-bottom':pinned.selected.length && i === pinned.selected.length -1}"
[disabled]="!pinnedorg.id" *ngFor="let pinnedorg of pinned.selected; index as i"
(click)="setActiveOrg(pinnedorg)">
<button
class="org-button-with-pin"
mat-button
[ngClass]="{
active: pinnedorg.id === org?.id,
'border-bottom': pinned.selected.length && i === pinned.selected.length - 1
}"
[disabled]="!pinnedorg.id"
*ngFor="let pinnedorg of pinned.selected; index as i"
(click)="setActiveOrg(pinnedorg)"
>
<div class="org-flex-row">
<span class="org-span">{{pinnedorg?.name ? pinnedorg.name : 'NO NAME'}}</span>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{key: pinnedorg}"></template>
<span class="org-span">{{ pinnedorg?.name ? pinnedorg.name : 'NO NAME' }}</span>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: pinnedorg }"></template>
</div>
</button>
<ng-container *ngFor="let temporg of orgs$ | async">
<button *ngIf="!pinned.isSelected(temporg)" class="org-button-with-pin" mat-button
[ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id" (click)="setActiveOrg(temporg)">
<div class="org-flex-row"><span class="org-span">{{temporg?.name ? temporg.name : 'NO NAME'}}</span>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{key: temporg}"></template>
<button
*ngIf="!pinned.isSelected(temporg)"
class="org-button-with-pin"
mat-button
[ngClass]="{ active: temporg.id === org?.id }"
[disabled]="!temporg.id"
(click)="setActiveOrg(temporg)"
>
<div class="org-flex-row">
<span class="org-span">{{ temporg?.name ? temporg.name : 'NO NAME' }}</span>
<template [ngTemplateOutlet]="toggleButton" [ngTemplateOutletContext]="{ key: temporg }"></template>
</div>
</button>
</ng-container>
</div>
<button mat-button class="show-all" [routerLink]="[ '/org/overview' ]" (click)="closedCard.emit()">{{'MENU.SHOWORGS' |
translate}}</button>
<button mat-button class="show-all" [routerLink]="['/orgs']" (click)="closedCard.emit()">
{{ 'MENU.SHOWORGS' | translate }}
</button>
<ng-template cnslHasRole [hasRole]="['org.create','iam.write']">
<button mat-button [routerLink]="[ '/org/create' ]" (click)="closedCard.emit()">
<ng-template cnslHasRole [hasRole]="['org.create', 'iam.write']">
<button mat-button [routerLink]="['/org/create']" (click)="closedCard.emit()">
<mat-icon class="avatar">add</mat-icon>
{{'MENU.NEWORG' | translate}}
{{ 'MENU.NEWORG' | translate }}
</button>
</ng-template>
</div>
<ng-template #toggleButton let-key="key">
<button matTooltip="{{'ACTIONS.PIN' | translate}}" [ngClass]="{ selected: pinned.isSelected(key)}"
(click)="toggle(key,$event)" class="edit-button" mat-icon-button>
<button
matTooltip="{{ 'ACTIONS.PIN' | translate }}"
[ngClass]="{ selected: pinned.isSelected(key) }"
(click)="toggle(key, $event)"
class="edit-button"
mat-icon-button
>
<mat-icon *ngIf="pinned.isSelected(key)" svgIcon="mdi_pin"></mat-icon>
<mat-icon svgIcon="mdi_pin_outline" *ngIf="!pinned.isSelected(key)"></mat-icon>
</button>
</ng-template>
</ng-template>

106
console/src/app/modules/org-table/org-table.component.html Normal file
View File

@ -0,0 +1,106 @@
<cnsl-refresh-table
*ngIf="dataSource"
[hideRefresh]="true"
(refreshed)="refresh()"
[dataSize]="dataSource.data.length"
[loading]="loading$ | async"
>
<cnsl-filter-org actions (filterChanged)="applySearchQuery($any($event))" (filterOpen)="filterOpen = $event">
</cnsl-filter-org>
<ng-template actions cnslHasRole [hasRole]="['org.create', 'iam.write']">
<a [routerLink]="['/org', 'create']" color="primary" mat-raised-button class="cnsl-action-button">
<mat-icon class="icon">add</mat-icon>
<span>{{ 'ACTIONS.NEW' | translate }}</span>
<cnsl-action-keys (actionTriggered)="gotoRouterLink(['/org', 'create'])"> </cnsl-action-keys>
</a>
</ng-template>
<table [dataSource]="dataSource" mat-table class="table" aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
{{ 'ORG.PAGES.ACTIVE' | translate }}
</th>
<td class="selection" mat-cell *matCellDef="let org">
<mat-radio-button (change)="selectOrg(org)" color="primary" [checked]="org.id === activeOrg.id"> </mat-radio-button>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>{{ 'ORG.PAGES.ID' | translate }}</th>
<td mat-cell *matCellDef="let org" (change)="selectOrg(org)">{{ org.id }}</td>
</ng-container>
<ng-container matColumnDef="primaryDomain">
<th mat-header-cell *matHeaderCellDef>{{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }}</th>
<td mat-cell *matCellDef="let org">
<span>{{ org.primaryDomain }}</span>
<button
color="primary"
class="cpy-button"
mat-icon-button
[disabled]="copied === org.primaryDomain"
[matTooltip]="(copied !== org.primaryDomain ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
cnslCopyToClipboard
[valueToCopy]="org.primaryDomain"
(copiedValue)="copied = $event"
>
<i *ngIf="copied !== org.primaryDomain" class="las la-clipboard"></i>
<i *ngIf="copied === org.primaryDomain" class="las la-clipboard-check"></i>
</button>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
{{ 'ORG.PAGES.NAME' | translate }}
</th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">{{ org.name }}</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef>{{ 'ORG.PAGES.STATE' | translate }}</th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
<span
class="state"
[ngClass]="{
active: org.state === OrgState.ORG_STATE_ACTIVE,
inactive: org.state === OrgState.ORG_STATE_INACTIVE
}"
*ngIf="org.state"
>{{ 'ORG.STATE.' + org.state | translate }}</span
>
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef>
{{ 'ORG.PAGES.CREATIONDATE' | translate }}
</th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
{{ org.details?.creationDate | timestampToDate | localizedDate: 'fromNow' }}
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef>
{{ 'ORG.PAGES.DATECHANGED' | translate }}
</th>
<td mat-cell *matCellDef="let org" (click)="setAndNavigateToOrg(org)">
{{ org.details?.changeDate | timestampToDate | localizedDate: 'fromNow' }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<cnsl-paginator
#paginator
class="paginator"
[timestamp]="timestamp"
[length]="totalResult || 0"
[pageSize]="initialLimit"
[pageSizeOptions]="[10, 20, 50, 100]"
(page)="changePage($event)"
></cnsl-paginator>
</cnsl-refresh-table>

8
console/src/app/pages/orgs/org-list/org-list.component.scss → console/src/app/modules/org-table/org-table.component.scss
View File

@ -1,11 +1,3 @@
h1 {
margin: 0;
}
.org-desc {
font-size: 14px;
}
td {
cursor: pointer;

24
console/src/app/modules/org-table/org-table.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OrgTableComponent } from './org-table.component';
describe('OrgsComponent', () => {
let component: OrgTableComponent;
let fixture: ComponentFixture<OrgTableComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [OrgTableComponent],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(OrgTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

33
console/src/app/pages/orgs/org-list/org-list.component.ts → console/src/app/modules/org-table/org-table.component.ts
View File

@ -1,34 +1,30 @@
import { Component, Input, ViewChild } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { enterAnimations } from 'src/app/animations';
import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
import { BehaviorSubject, catchError, finalize, from, map, Observable, of } from 'rxjs';
import { Org, OrgQuery, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
enum OrgListSearchKey {
NAME = 'NAME',
}
@Component({
selector: 'cnsl-org-list',
templateUrl: './org-list.component.html',
styleUrls: ['./org-list.component.scss'],
animations: [enterAnimations],
selector: 'cnsl-org-table',
templateUrl: './org-table.component.html',
styleUrls: ['./org-table.component.scss'],
})
export class OrgListComponent {
export class OrgTableComponent {
public orgSearchKey: OrgListSearchKey | undefined = undefined;
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@ViewChild('input') public filter!: Input;
public dataSource!: MatTableDataSource<Org.AsObject>;
public displayedColumns: string[] = ['select', 'name', 'state', 'primaryDomain', 'creationDate', 'changeDate'];
public displayedColumns: string[] = ['name', 'state', 'primaryDomain', 'creationDate', 'changeDate'];
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public activeOrg!: Org.AsObject;
@ -39,20 +35,9 @@ export class OrgListComponent {
public filterOpen: boolean = false;
public OrgState: any = OrgState;
public copied: string = '';
constructor(private authService: GrpcAuthService, private router: Router, breadcrumbService: BreadcrumbService) {
constructor(private authService: GrpcAuthService, private router: Router) {
this.loadOrgs(this.initialLimit, 0);
this.authService.getActiveOrg().then((org) => (this.activeOrg = org));
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iamBread, bread]);
}
public loadOrgs(limit: number, offset: number, queries?: OrgQuery[]): void {

21
console/src/app/pages/orgs/org-list/org-list.module.ts → console/src/app/modules/org-table/org-table.module.ts
View File

@ -7,25 +7,24 @@ import { MatRadioModule } from '@angular/material/radio';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { ActionKeysModule } from 'src/app/modules/action-keys/action-keys.module';
import { FilterOrgModule } from 'src/app/modules/filter-org/filter-org.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
import { OrgListRoutingModule } from './org-list-routing.module';
import { OrgListComponent } from './org-list.component';
import { ActionKeysModule } from '../action-keys/action-keys.module';
import { FilterOrgModule } from '../filter-org/filter-org.module';
import { InputModule } from '../input/input.module';
import { PaginatorModule } from '../paginator/paginator.module';
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
import { OrgTableComponent } from './org-table.component';
@NgModule({
declarations: [OrgListComponent],
declarations: [OrgTableComponent],
imports: [
CommonModule,
OrgListRoutingModule,
MatTableModule,
TranslateModule,
RefreshTableModule,
@ -37,6 +36,7 @@ import { OrgListComponent } from './org-list.component';
MatIconModule,
PaginatorModule,
HasRoleModule,
RouterModule,
MatButtonModule,
MatTooltipModule,
CopyToClipboardModule,
@ -44,5 +44,6 @@ import { OrgListComponent } from './org-list.component';
InputModule,
FormsModule,
],
exports: [OrgTableComponent],
})
export class OrgListModule {}
export class OrgTableModule {}

17
console/src/app/modules/policies/general-settings/general-settings.component.html Normal file
View File

@ -0,0 +1,17 @@
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<h2>{{ 'SETTING.DEFAULTLANGUAGE' | translate }}</h2>
<cnsl-form-field class="default-language" label="Default Language" required="true">
<cnsl-label>{{ 'SETTING.DEFAULTLANGUAGE' | translate }}</cnsl-label>
<mat-select [(ngModel)]="defaultLanguage">
<mat-option *ngFor="let lang of defaultLanguageOptions" [value]="lang">
{{ lang }} - {{ 'SETTING.LANGUAGE.' + lang | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<div class="general-btn-container">
<button class="save-button" (click)="savePolicy()" color="primary" type="submit" mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>

17
console/src/app/modules/policies/general-settings/general-settings.component.scss Normal file
View File

@ -0,0 +1,17 @@
.spinner-wr {
margin: 0.5rem 0;
}
.default-language {
max-width: 400px;
display: block;
}
.general-btn-container {
display: flex;
justify-content: flex-start;
.save-button {
display: block;
}
}

25
console/src/app/modules/policies/general-settings/general-settings.component.spec.ts Normal file
View File

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

88
console/src/app/modules/policies/general-settings/general-settings.component.ts Normal file
View File

@ -0,0 +1,88 @@
import { Component, Injector, Input, OnInit, Type } from '@angular/core';
import { SetDefaultLanguageResponse } from 'src/app/proto/generated/zitadel/admin_pb';
import { AdminService } from 'src/app/services/admin.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@Component({
selector: 'cnsl-general-settings',
templateUrl: './general-settings.component.html',
styleUrls: ['./general-settings.component.scss'],
})
export class GeneralSettingsComponent implements OnInit {
@Input() public serviceType!: PolicyComponentServiceType;
public service!: ManagementService | AdminService;
public defaultLanguage: string = '';
public defaultLanguageOptions: string[] = [];
public loading: boolean = false;
constructor(private injector: Injector, private toast: ToastService) {}
ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
this.fetchData();
}
private fetchData(): void {
if (this.serviceType === PolicyComponentServiceType.ADMIN) {
(this.service as AdminService).getDefaultLanguage().then((langResp) => {
this.defaultLanguage = langResp.language;
});
(this.service as AdminService).getSupportedLanguages().then((supportedResp) => {
this.defaultLanguageOptions = supportedResp.languagesList;
});
}
}
private updateData(): Promise<SetDefaultLanguageResponse.AsObject> | void {
if (this.serviceType === PolicyComponentServiceType.ADMIN) {
return (this.service as AdminService).setDefaultLanguage(this.defaultLanguage);
} else {
return;
}
}
public savePolicy(): void {
const prom = this.updateData();
if (prom) {
prom
.then(() => {
this.toast.showInfo('POLICY.LOGIN_POLICY.SAVED', true);
this.loading = true;
setTimeout(() => {
this.fetchData();
}, 2000);
})
.catch((error) => {
this.toast.showError(error);
});
}
}
public removePolicy(): void {
if (this.serviceType === PolicyComponentServiceType.MGMT) {
(this.service as ManagementService)
.resetLoginPolicyToDefault()
.then(() => {
this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
this.loading = true;
setTimeout(() => {
this.fetchData();
}, 2000);
})
.catch((error) => {
this.toast.showError(error);
});
}
}
}

27
console/src/app/modules/policies/general-settings/general-settings.module.ts Normal file
View File

@ -0,0 +1,27 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { CardModule } from '../../card/card.module';
import { FormFieldModule } from '../../form-field/form-field.module';
import { GeneralSettingsComponent } from './general-settings.component';
@NgModule({
declarations: [GeneralSettingsComponent],
imports: [
CommonModule,
CardModule,
FormsModule,
MatButtonModule,
FormFieldModule,
MatProgressSpinnerModule,
MatSelectModule,
TranslateModule,
],
exports: [GeneralSettingsComponent],
})
export class GeneralSettingsModule {}

3
console/src/app/modules/policies/idp-settings/idp-settings.component.html Normal file
View File

@ -0,0 +1,3 @@
<h2>{{ 'IDP.LIST.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'IDP.LIST.DESCRIPTION' | translate }}</p>
<cnsl-idp-table [service]="service" [serviceType]="serviceType"> </cnsl-idp-table>

0
console/src/app/modules/policies/idp-settings/idp-settings.component.scss Normal file
View File

24
console/src/app/modules/policies/idp-settings/idp-settings.component.spec.ts Normal file
View File

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

29
console/src/app/modules/policies/idp-settings/idp-settings.component.ts Normal file
View File

@ -0,0 +1,29 @@
import { Component, Injector, Input, OnInit, Type } from '@angular/core';
import { AdminService } from 'src/app/services/admin.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@Component({
selector: 'cnsl-idp-settings',
templateUrl: './idp-settings.component.html',
styleUrls: ['./idp-settings.component.scss'],
})
export class IdpSettingsComponent implements OnInit {
@Input() public serviceType!: PolicyComponentServiceType;
public service!: ManagementService | AdminService;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
constructor(private injector: Injector) {}
ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
}
}

15
console/src/app/modules/policies/idp-settings/idp-settings.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { TranslateModule } from '@ngx-translate/core';
import { CardModule } from '../../card/card.module';
import { IdpTableModule } from '../../idp-table/idp-table.module';
import { IdpSettingsComponent } from './idp-settings.component';
@NgModule({
declarations: [IdpSettingsComponent],
imports: [CommonModule, CardModule, IdpTableModule, MatProgressSpinnerModule, TranslateModule],
exports: [IdpSettingsComponent],
})
export class IdpSettingsModule {}

353
console/src/app/modules/policies/login-policy/login-policy.component.html
View File

@ -1,236 +1,153 @@
<cnsl-detail-layout
[hasBackButton]="true"
[title]="'POLICY.LOGIN_POLICY.TITLE' | translate"
[description]="
(serviceType === PolicyComponentServiceType.MGMT
? 'POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT'
: PolicyComponentServiceType.ADMIN
? 'POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN'
: ''
) | translate
"
>
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="orgName; else iam">{{ orgName }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<!-- <cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section> -->
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<h2>{{ 'MFA.LIST.MULTIFACTORTITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'MFA.LIST.MULTIFACTORDESCRIPTION' | translate }}</p>
<ng-container *ngIf="serviceType === PolicyComponentServiceType.MGMT">
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
*ngIf="!isDefault"
color="primary"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
<div class="login-policy-row" *ngIf="loginData">
<cnsl-form-field class="passwordless-allowed" label="Access Code" required="true">
<cnsl-label>{{ 'LOGINPOLICY.PASSWORDLESS' | translate }}</cnsl-label>
<mat-select [(ngModel)]="loginData.passwordlessType">
<mat-option *ngFor="let pt of passwordlessTypes" [value]="pt">
{{ 'LOGINPOLICY.PASSWORDLESSTYPE.' + pt | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<ng-template cnslHasRole [hasRole]="['policy.write']">
<button
*ngIf="isDefault"
color="primary"
matTooltip="{{ 'POLICY.CREATECUSTOM' | translate }}"
(click)="savePolicy()"
mat-raised-button
>
{{ 'POLICY.CREATECUSTOM' | translate }}
</button>
</ng-template>
</ng-container>
<ng-template cnslHasRole [hasRole]="['org.idp.read']">
<cnsl-card title="{{ 'IDP.LIST.TITLE' | translate }}" description="{{ 'IDP.LIST.DESCRIPTION' | translate }}">
<cnsl-idp-table
[service]="service"
[serviceType]="serviceType"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.idp.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'org.idp.write'
: ''
]
| hasRole
| async) === false
"
>
</cnsl-idp-table>
</cnsl-card>
</ng-template>
<cnsl-card
title="{{ 'MFA.LIST.MULTIFACTORTITLE' | translate }}"
description="{{ 'MFA.LIST.MULTIFACTORDESCRIPTION' | translate }}"
[expanded]="true"
<cnsl-card class="max-card-width">
<cnsl-mfa-table
[service]="service"
[serviceType]="serviceType"
[componentType]="LoginMethodComponentType.MultiFactor"
[disabled]="
loginData?.passwordlessType === PasswordlessType.PASSWORDLESS_TYPE_NOT_ALLOWED ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
<div class="login-policy-row">
<cnsl-form-field *ngIf="loginData" class="passwordless-allowed" label="Access Code" required="true">
<cnsl-label>{{ 'LOGINPOLICY.PASSWORDLESS' | translate }}</cnsl-label>
<mat-select [(ngModel)]="loginData.passwordlessType" [disabled]="disabled">
<mat-option *ngFor="let pt of passwordlessTypes" [value]="pt">
{{ 'LOGINPOLICY.PASSWORDLESSTYPE.' + pt | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
</cnsl-mfa-table>
</cnsl-card>
<cnsl-mfa-table
[service]="service"
[serviceType]="serviceType"
[componentType]="LoginMethodComponentType.MultiFactor"
[disabled]="
loginData?.passwordlessType === PasswordlessType.PASSWORDLESS_TYPE_NOT_ALLOWED ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
</cnsl-mfa-table>
</cnsl-card>
<br />
<cnsl-card
*ngIf="loginData"
title="{{ 'MFA.LIST.SECONDFACTORTITLE' | translate }}"
description="{{ 'MFA.LIST.SECONDFACTORDESCRIPTION' | translate }}"
[expanded]="true"
<h2>{{ 'MFA.LIST.SECONDFACTORTITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'MFA.LIST.SECONDFACTORDESCRIPTION' | translate }}</p>
<div *ngIf="loginData" class="login-policy-row">
<mat-slide-toggle
card-actions
class="login-policy-toggle"
color="primary"
ngDefaultControl
[(ngModel)]="loginData.forceMfa"
>
{{ 'POLICY.DATA.FORCEMFA' | translate }}
</mat-slide-toggle>
</div>
<cnsl-card class="max-card-width">
<cnsl-mfa-table
[service]="service"
[serviceType]="serviceType"
[componentType]="LoginMethodComponentType.SecondFactor"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
</cnsl-mfa-table>
</cnsl-card>
<br />
<h2>{{ 'POLICY.LOGIN_POLICY.ADVANCED' | translate }}</h2>
<cnsl-card class="max-card-width login-policy-content" *ngIf="loginData">
<div class="login-policy-row">
<mat-slide-toggle
card-actions
class="force-mfa-toggle"
class="login-policy-toggle"
color="primary"
[disabled]="disabled"
matTooltip="{{ 'POLICY.DATA.FORCEMFA_DESC' | translate }}"
ngDefaultControl
[(ngModel)]="loginData.forceMfa"
[(ngModel)]="loginData.allowUsernamePassword"
>
{{ 'POLICY.DATA.FORCEMFA' | translate }}
{{ 'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate }}
</mat-slide-toggle>
<cnsl-mfa-table
[service]="service"
[serviceType]="serviceType"
[componentType]="LoginMethodComponentType.SecondFactor"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
</cnsl-mfa-table>
</cnsl-card>
<!-- <cnsl-info-section class="info">
{{ 'POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate }}
</cnsl-info-section> -->
</div>
<div class="login-policy-row">
<mat-slide-toggle class="login-policy-toggle" color="primary" ngDefaultControl [(ngModel)]="loginData.allowRegister">
{{ 'POLICY.DATA.ALLOWREGISTER' | translate }}
</mat-slide-toggle>
<cnsl-card title="{{ 'POLICY.LOGIN_POLICY.ADVANCED' | translate }}">
<div class="login-policy-content" *ngIf="loginData">
<div class="login-policy-row">
<mat-slide-toggle
color="primary"
matTooltip="{{ 'POLICY.DATA.FORCEMFA_DESC' | translate }}"
[disabled]="disabled"
ngDefaultControl
[(ngModel)]="loginData.allowUsernamePassword"
>
{{ 'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate }}
</mat-slide-toggle>
<!-- <ng-template #regInfo>
<cnsl-info-section class="info">
{{ 'POLICY.DATA.ALLOWREGISTER_DESC' | translate }}
</cnsl-info-section>
</ng-template> -->
</div>
<div class="login-policy-row">
<mat-slide-toggle class="login-policy-toggle" color="primary" ngDefaultControl [(ngModel)]="loginData.allowExternalIdp">
{{ 'POLICY.DATA.ALLOWEXTERNALIDP' | translate }}
</mat-slide-toggle>
<ng-template #usernameInfo>
<cnsl-info-section class="info">
{{ 'POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate }}
</cnsl-info-section>
</ng-template>
</div>
<div class="login-policy-row">
<mat-slide-toggle
class="login-policy-toggle"
color="primary"
[disabled]="disabled"
ngDefaultControl
[(ngModel)]="loginData.allowRegister"
>
{{ 'POLICY.DATA.ALLOWREGISTER' | translate }}
</mat-slide-toggle>
<ng-template #regInfo>
<cnsl-info-section class="info">
{{ 'POLICY.DATA.ALLOWREGISTER_DESC' | translate }}
</cnsl-info-section>
</ng-template>
</div>
<div class="login-policy-row">
<mat-slide-toggle
class="login-policy-toggle"
color="primary"
[disabled]="disabled"
ngDefaultControl
[(ngModel)]="loginData.allowExternalIdp"
>
{{ 'POLICY.DATA.ALLOWEXTERNALIDP' | translate }}
</mat-slide-toggle>
<ng-template #idpInfo>
<cnsl-info-section class="info">
{{ 'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate }}
</cnsl-info-section>
</ng-template>
</div>
<div class="login-policy-row">
<mat-slide-toggle
class="login-policy-toggle"
color="primary"
[disabled]="disabled"
ngDefaultControl
[(ngModel)]="loginData.hidePasswordReset"
>
{{ 'POLICY.DATA.HIDEPASSWORDRESET' | translate }}
</mat-slide-toggle>
<ng-template #passwordResetInfo>
<cnsl-info-section class="info">
{{ 'POLICY.DATA.HIDEPASSWORDRESET_DESC' | translate }}
</cnsl-info-section>
</ng-template>
</div>
</div>
</cnsl-card>
<div class="login-policy-btn-container">
<button
[disabled]="disabled"
class="login-policy-save-button"
(click)="savePolicy()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
<!-- <ng-template #idpInfo>
<cnsl-info-section class="info">
{{ 'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate }}
</cnsl-info-section>
</ng-template> -->
</div>
<cnsl-policy-grid class="grid" [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="security">
</cnsl-policy-grid>
</cnsl-detail-layout>
<div class="login-policy-row">
<mat-slide-toggle class="login-policy-toggle" color="primary" ngDefaultControl [(ngModel)]="loginData.hidePasswordReset">
{{ 'POLICY.DATA.HIDEPASSWORDRESET' | translate }}
</mat-slide-toggle>
<!-- <ng-template #passwordResetInfo>
<cnsl-info-section class="info">
{{ 'POLICY.DATA.HIDEPASSWORDRESET_DESC' | translate }}
</cnsl-info-section>
</ng-template> -->
</div>
</cnsl-card>
<div class="login-policy-btn-container">
<button class="login-policy-save-button" (click)="savePolicy()" color="primary" type="submit" mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
<ng-container *ngIf="serviceType === PolicyComponentServiceType.MGMT">
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
*ngIf="!isDefault"
color="primary"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
</ng-container>

17
console/src/app/modules/policies/login-policy/login-policy.component.scss
View File

@ -2,9 +2,9 @@
margin: 0.5rem 0;
}
.policy-applied-to {
margin: -1rem 0 0 0;
font-size: 14px;
.max-card-width {
max-width: 400px;
display: block;
}
.passwordless-allowed {
@ -12,15 +12,9 @@
display: block;
}
.force-mfa-toggle {
margin-right: 1rem;
}
.login-policy-content {
padding-top: 1rem;
.login-policy-row {
padding-bottom: 1.5rem;
padding-bottom: 0.5rem;
.login-policy-toggle {
margin: 0.3rem 0;
@ -34,10 +28,9 @@
.login-policy-btn-container {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
.login-policy-save-button {
margin-bottom: 3rem;
display: block;
}
}

98
console/src/app/modules/policies/login-policy/login-policy.component.ts
View File

@ -1,7 +1,4 @@
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { Component, Injector, Input, OnInit, Type } from '@angular/core';
import {
GetLoginPolicyResponse as AdminGetLoginPolicyResponse,
UpdateLoginPolicyRequest,
@ -11,16 +8,12 @@ import {
AddCustomLoginPolicyRequest,
GetLoginPolicyResponse as MgmtGetLoginPolicyResponse,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { LoginPolicy, PasswordlessType } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { GridPolicy, LOGIN_POLICY } from '../../policy-grid/policies';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
import { LoginMethodComponentType } from './mfa-table/mfa-table.component';
@ -29,7 +22,7 @@ import { LoginMethodComponentType } from './mfa-table/mfa-table.component';
templateUrl: './login-policy.component.html',
styleUrls: ['./login-policy.component.scss'],
})
export class LoginPolicyComponent implements OnDestroy {
export class LoginPolicyComponent implements OnInit {
public LoginMethodComponentType: any = LoginMethodComponentType;
public passwordlessTypes: Array<PasswordlessType> = [
PasswordlessType.PASSWORDLESS_TYPE_NOT_ALLOWED,
@ -37,90 +30,43 @@ export class LoginPolicyComponent implements OnDestroy {
];
public loginData!: LoginPolicy.AsObject;
private sub: Subscription = new Subscription();
public service!: ManagementService | AdminService;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public loading: boolean = false;
public disabled: boolean = true;
public currentPolicy: GridPolicy = LOGIN_POLICY;
public InfoSectionType: any = InfoSectionType;
public orgName: string = '';
public PasswordlessType: any = PasswordlessType;
constructor(
private route: ActivatedRoute,
private toast: ToastService,
private injector: Injector,
breadcrumbService: BreadcrumbService,
private storageService: StorageService,
) {
this.sub = this.route.data
.pipe(
switchMap((data) => {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.passwordlessTypes = [
PasswordlessType.PASSWORDLESS_TYPE_ALLOWED,
PasswordlessType.PASSWORDLESS_TYPE_NOT_ALLOWED,
];
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.orgName = org.name;
}
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.passwordlessTypes = [
PasswordlessType.PASSWORDLESS_TYPE_ALLOWED,
PasswordlessType.PASSWORDLESS_TYPE_NOT_ALLOWED,
];
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
}
return this.route.params;
}),
)
.subscribe(() => {
this.fetchData();
});
}
constructor(private toast: ToastService, private injector: Injector) {}
private fetchData(): void {
this.getData().then((resp) => {
if (resp.policy) {
this.loginData = resp.policy;
this.loading = false;
this.disabled = this.isDefault;
}
});
}
public ngOnDestroy(): void {
this.sub.unsubscribe();
public ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.passwordlessTypes = [
PasswordlessType.PASSWORDLESS_TYPE_ALLOWED,
PasswordlessType.PASSWORDLESS_TYPE_NOT_ALLOWED,
];
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.passwordlessTypes = [
PasswordlessType.PASSWORDLESS_TYPE_ALLOWED,
PasswordlessType.PASSWORDLESS_TYPE_NOT_ALLOWED,
];
break;
}
this.fetchData();
}
private async getData(): Promise<AdminGetLoginPolicyResponse.AsObject | MgmtGetLoginPolicyResponse.AsObject> {

5
console/src/app/modules/policies/login-policy/login-policy.module.ts
View File

@ -13,12 +13,10 @@ import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { CardModule } from 'src/app/modules/card/card.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { IdpTableModule } from 'src/app/modules/idp-table/idp-table.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 { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { LoginPolicyRoutingModule } from './login-policy-routing.module';
import { LoginPolicyComponent } from './login-policy.component';
import { DialogAddTypeComponent } from './mfa-table/dialog-add-type/dialog-add-type.component';
@ -41,12 +39,11 @@ import { MfaTableComponent } from './mfa-table/mfa-table.component';
HasRolePipeModule,
MatTooltipModule,
DetailLayoutModule,
IdpTableModule,
MatProgressSpinnerModule,
MatSelectModule,
MatRippleModule,
TranslateModule,
PolicyGridModule,
],
exports: [LoginPolicyComponent],
})
export class LoginPolicyModule {}

24
console/src/app/modules/policies/login-policy/mfa-table/mfa-table.component.html
View File

@ -5,19 +5,29 @@
<div class="login-policy-mfa-list">
<div class="mfa" *ngFor="let mfa of mfas">
<span>
{{(componentType === LoginMethodComponentType.SecondFactor ? 'MFA.SECONDFACTORTYPES.':
LoginMethodComponentType.MultiFactor ? 'MFA.MULTIFACTORTYPES.': '')+mfa | translate}}
{{
(componentType === LoginMethodComponentType.SecondFactor
? 'MFA.SECONDFACTORTYPES.'
: LoginMethodComponentType.MultiFactor
? 'MFA.MULTIFACTORTYPES.'
: '') + mfa | translate
}}
</span>
<button color="warn" *ngIf="!disabled" mat-icon-button (click)="removeMfa(mfa)" class="rm">
<i matTooltip="{{'ACTIONS.REMOVE' | translate}}" class="las la-times-circle"></i>
<i matTooltip="{{ 'ACTIONS.REMOVE' | translate }}" class="las la-times-circle"></i>
</button>
</div>
<div class="mfa-list-btns">
<button mat-raised-button color="primary" class="new-mfa cnsl-action-button" [disabled]="disabled"
(click)="!disabled ? addMfa(): null">
<button
mat-stroked-button
color="primary"
class="new-mfa cnsl-action-button"
[disabled]="disabled"
(click)="!disabled ? addMfa() : null"
>
<mat-icon class="icon">add</mat-icon>
<span>{{'ACTIONS.ADD' | translate}}</span>
<span>{{ 'ACTIONS.ADD' | translate }}</span>
</button>
</div>
</div>
</div>

4
console/src/app/modules/policies/login-policy/mfa-table/mfa-table.component.scss
View File

@ -13,6 +13,7 @@
justify-content: space-between;
padding: 0.5rem 0;
min-height: 40px;
max-width: 400px;
border-bottom: 1px solid map-get($foreground, dividers);
&:last-child {
@ -42,7 +43,8 @@
.mfa-list-btns {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
max-width: 400px;
.new-mfa {
margin-top: 0.5rem;

165
console/src/app/modules/policies/login-texts/login-texts.component.html
View File

@ -1,94 +1,81 @@
<cnsl-detail-layout
[hasBackButton]="true"
[title]="'POLICY.LOGIN_TEXTS.TITLE' | translate"
[description]="'POLICY.LOGIN_TEXTS.DESCRIPTION' | translate"
>
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="orgName; else iam">{{ orgName }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<div class="date">
<div>
<p class="newer-title" *ngIf="newerVersionExists">{{ 'POLICY.LOGIN_TEXTS.NEWERVERSIONEXISTS' | translate }}</p>
<p *ngIf="newerPolicyChangeDate && newerVersionExists">
{{ 'POLICY.LOGIN_TEXTS.CHANGEDATE' | translate }}:
{{ newerPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
</p>
<p class="cnsl-secondary-text" *ngIf="currentPolicyChangeDate">
{{ 'POLICY.LOGIN_TEXTS.CURRENTDATE' | translate }}:
{{ currentPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
</p>
</div>
<button [disabled]="!newerVersionExists" color="primary" mat-raised-button (click)="loadData()">
<i class="las la-sync-alt"></i>
{{ 'ACTIONS.REFRESH' | translate }}
</button>
<h2>{{ 'POLICY.LOGIN_TEXTS.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.LOGIN_TEXTS.DESCRIPTION' | translate }}</p>
<div class="date">
<div>
<p class="newer-title" *ngIf="newerVersionExists">{{ 'POLICY.LOGIN_TEXTS.NEWERVERSIONEXISTS' | translate }}</p>
<p *ngIf="newerPolicyChangeDate && newerVersionExists">
{{ 'POLICY.LOGIN_TEXTS.CHANGEDATE' | translate }}:
{{ newerPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
</p>
<p class="cnsl-secondary-text" *ngIf="currentPolicyChangeDate">
{{ 'POLICY.LOGIN_TEXTS.CURRENTDATE' | translate }}:
{{ currentPolicyChangeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm:ss' }}
</p>
</div>
<form *ngIf="form" class="top-actions" [formGroup]="form">
<cnsl-form-field class="keys" appearance="outline">
<cnsl-label>{{ 'POLICY.LOGIN_TEXTS.KEYNAME' | translate }}</cnsl-label>
<mat-select formControlName="currentSubMap" name="currentSubMap">
<mat-option *ngFor="let key of KeyNamesArray" [value]="key">
{{ 'POLICY.LOGIN_TEXTS.KEYS.' + key | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<button [disabled]="!newerVersionExists" color="primary" mat-raised-button (click)="loadData()">
<i class="las la-sync-alt"></i>
{{ 'ACTIONS.REFRESH' | translate }}
</button>
</div>
<form *ngIf="form" class="top-actions" [formGroup]="form">
<cnsl-form-field class="keys" appearance="outline">
<cnsl-label>{{ 'POLICY.LOGIN_TEXTS.KEYNAME' | translate }}</cnsl-label>
<mat-select formControlName="currentSubMap" name="currentSubMap">
<mat-option *ngFor="let key of KeyNamesArray" [value]="key">
{{ 'POLICY.LOGIN_TEXTS.KEYS.' + key | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field class="language">
<cnsl-label>{{ 'POLICY.LOGIN_TEXTS.LOCALE' | translate }}</cnsl-label>
<mat-select formControlName="locale" name="locale">
<mat-option *ngFor="let loc of LOCALES" [value]="loc">
<div class="centerline">
<span
>{{ loc }}
<span class="lighter cnsl-secondary-text"
>|&nbsp;{{ 'POLICY.LOGIN_TEXTS.LOCALES.' + loc | translate }}</span
></span
>
</div>
</mat-option>
</mat-select>
</cnsl-form-field>
</form>
<cnsl-form-field class="language">
<cnsl-label>{{ 'POLICY.LOGIN_TEXTS.LOCALE' | translate }}</cnsl-label>
<mat-select formControlName="locale" name="locale">
<mat-option *ngFor="let loc of LOCALES" [value]="loc">
<div class="centerline">
<span
>{{ loc }}
<span class="lighter cnsl-secondary-text"
>|&nbsp;{{ 'POLICY.LOGIN_TEXTS.LOCALES.' + loc | translate }}</span
></span
>
</div>
</mat-option>
</mat-select>
</cnsl-form-field>
</form>
<div class="divider"></div>
<div class="divider"></div>
<div class="content">
<cnsl-edit-text
label="one"
[disabled]="(canWrite$ | async) === false"
[default$]="getDefaultInitMessageTextMap$"
[current$]="getCustomInitMessageTextMap$"
(changedValues)="updateCurrentValues($event)"
></cnsl-edit-text>
</div>
<div class="content">
<cnsl-edit-text
label="one"
[disabled]="(canWrite$ | async) === false"
[default$]="getDefaultInitMessageTextMap$"
[current$]="getCustomInitMessageTextMap$"
(changedValues)="updateCurrentValues($event)"
></cnsl-edit-text>
</div>
<div class="actions">
<!-- *ngIf="totalCustomPolicy && totalCustomPolicy.isDefault === false" -->
<button
class="reset-button"
[disabled]="(canWrite$ | async) === false"
(click)="resetDefault()"
color="warn"
type="submit"
mat-stroked-button
>
<i class="las la-history"></i> {{ 'ACTIONS.RESETDEFAULT' | translate }}
</button>
<button
class="save-button"
[disabled]="(canWrite$ | async) === false"
(click)="saveCurrentMessage()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
<cnsl-policy-grid [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="text"></cnsl-policy-grid>
</cnsl-detail-layout>
<div class="actions">
<!-- *ngIf="totalCustomPolicy && totalCustomPolicy.isDefault === false" -->
<button
class="reset-button"
[disabled]="(canWrite$ | async) === false"
(click)="resetDefault()"
color="warn"
type="submit"
mat-stroked-button
>
<i class="las la-history"></i> {{ 'ACTIONS.RESETDEFAULT' | translate }}
</button>
<button
class="save-button"
[disabled]="(canWrite$ | async) === false"
(click)="saveCurrentMessage()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>

10
console/src/app/modules/policies/login-texts/login-texts.component.scss
View File

@ -32,18 +32,16 @@
}
.top-actions {
display: flex;
margin: 0 -0.5rem;
flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 1rem;
.keys {
flex: 1;
margin: 0 0.5rem;
min-width: 150px;
grid-column: span 3;
}
.language {
margin: 0 0.5rem;
min-width: 150px;
.lighter {

125
console/src/app/modules/policies/login-texts/login-texts.component.ts
View File

@ -1,30 +1,25 @@
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute } from '@angular/router';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, from, interval, Observable, of, Subject, Subscription } from 'rxjs';
import { map, pairwise, startWith, switchMap, takeUntil } from 'rxjs/operators';
import { map, pairwise, startWith, takeUntil } from 'rxjs/operators';
import {
GetCustomLoginTextsRequest as AdminGetCustomLoginTextsRequest,
GetDefaultLoginTextsRequest as AdminGetDefaultLoginTextsRequest,
SetCustomLoginTextsRequest as AdminSetCustomLoginTextsRequest,
GetCustomLoginTextsRequest as AdminGetCustomLoginTextsRequest,
GetDefaultLoginTextsRequest as AdminGetDefaultLoginTextsRequest,
SetCustomLoginTextsRequest as AdminSetCustomLoginTextsRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import {
GetCustomLoginTextsRequest,
GetDefaultLoginTextsRequest,
SetCustomLoginTextsRequest,
GetCustomLoginTextsRequest,
GetDefaultLoginTextsRequest,
SetCustomLoginTextsRequest,
} 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 { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { GridPolicy, LOGIN_TEXTS_POLICY } from '../../policy-grid/policies';
import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
import { mapRequestValues } from './helper';
@ -97,7 +92,7 @@ const REQUESTMAP = {
templateUrl: './login-texts.component.html',
styleUrls: ['./login-texts.component.scss'],
})
export class LoginTextsComponent implements OnDestroy {
export class LoginTextsComponent implements OnInit, OnDestroy {
public currentPolicyChangeDate!: Timestamp.AsObject | undefined;
public newerPolicyChangeDate!: Timestamp.AsObject | undefined;
@ -108,7 +103,7 @@ export class LoginTextsComponent implements OnDestroy {
public service!: ManagementService | AdminService;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public KeyNamesArray: string[] = KeyNamesArray;
public LOCALES: string[] = ['en', 'de', 'it'];
@ -116,11 +111,9 @@ export class LoginTextsComponent implements OnDestroy {
private sub: Subscription = new Subscription();
public updateRequest!: SetCustomLoginTextsRequest;
public currentPolicy: GridPolicy = LOGIN_TEXTS_POLICY;
public destroy$: Subject<void> = new Subject();
public InfoSectionType: any = InfoSectionType;
public orgName: string = '';
public form: FormGroup = new FormGroup({
currentSubMap: new FormControl('emailVerificationDoneText'),
locale: new FormControl('en'),
@ -135,76 +128,10 @@ export class LoginTextsComponent implements OnDestroy {
]);
constructor(
private authService: GrpcAuthService,
private route: ActivatedRoute,
private injector: Injector,
private dialog: MatDialog,
private toast: ToastService,
private storageService: StorageService,
breadcrumbService: BreadcrumbService,
) {
this.sub = this.route.data
.pipe(
switchMap((data) => {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData();
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.orgName = org.name;
}
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData();
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
}
return this.route.params;
}),
)
.subscribe(() => {
interval(10000)
.pipe(
// debounceTime(5000),
takeUntil(this.destroy$),
)
.subscribe((x) => {
this.checkForChanges();
});
});
this.form.valueChanges
.pipe(startWith({ currentSubMap: 'emailVerificationDoneText', locale: 'en' }), pairwise(), takeUntil(this.destroy$))
.subscribe((pair) => {
@ -225,6 +152,38 @@ export class LoginTextsComponent implements OnDestroy {
});
}
ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData();
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData();
break;
}
interval(10000)
.pipe(
// debounceTime(5000),
takeUntil(this.destroy$),
)
.subscribe((x) => {
this.checkForChanges();
});
}
public getDefaultValues(req: any): Promise<any> {
return this.service.getDefaultLoginTexts(req).then((res) => {
if (res.customText) {

6
console/src/app/modules/policies/login-texts/login-texts.module.ts
View File

@ -16,10 +16,10 @@ import { HasRoleModule } from '../../../directives/has-role/has-role.module';
import { DetailLayoutModule } from '../../../modules/detail-layout/detail-layout.module';
import { InputModule } from '../../../modules/input/input.module';
import { HasRolePipeModule } from '../../../pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { EditTextModule } from '../../edit-text/edit-text.module';
import { FormFieldModule } from '../../form-field/form-field.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
import { LoginTextsRoutingModule } from './login-texts-routing.module';
import { LoginTextsComponent } from './login-texts.component';
@ -48,9 +48,11 @@ import { LoginTextsComponent } from './login-texts.component';
TextFieldModule,
MatDialogModule,
WarnDialogModule,
PolicyGridModule,
CardModule,
TimestampToDatePipeModule,
LocalizedDatePipeModule,
],
exports: [LoginTextsComponent],
})
export class LoginTextsPolicyModule {}

133
console/src/app/modules/policies/message-texts/message-texts.component.html
View File

@ -1,77 +1,64 @@
<cnsl-detail-layout
[hasBackButton]="true"
[title]="'POLICY.MESSAGE_TEXTS.TITLE' | translate"
[description]="'POLICY.MESSAGE_TEXTS.DESCRIPTION' | translate"
>
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="orgName; else iam">{{ orgName }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<h2>{{ 'POLICY.MESSAGE_TEXTS.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.MESSAGE_TEXTS.DESCRIPTION' | translate }}</p>
<div class="message-texts-top-actions">
<cnsl-form-field class="type">
<cnsl-label>{{ 'POLICY.MESSAGE_TEXTS.TYPE' | translate }}</cnsl-label>
<mat-select [(ngModel)]="currentType" name="currentSubMap" (selectionChange)="changedCurrentType()">
<mat-option *ngFor="let type of MESSAGETYPES | keyvalue" [value]="type.value">
{{ 'POLICY.MESSAGE_TEXTS.TYPES.' + type.value | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<div class="message-texts-top-actions">
<cnsl-form-field class="type">
<cnsl-label>{{ 'POLICY.MESSAGE_TEXTS.TYPE' | translate }}</cnsl-label>
<mat-select [(ngModel)]="currentType" name="currentSubMap" (selectionChange)="changedCurrentType()">
<mat-option *ngFor="let type of MESSAGETYPES | keyvalue" [value]="type.value">
{{ 'POLICY.MESSAGE_TEXTS.TYPES.' + type.value | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field class="language">
<cnsl-label>{{ 'POLICY.LOGIN_TEXTS.LOCALE' | translate }}</cnsl-label>
<mat-select [(ngModel)]="locale" name="locale" (selectionChange)="changeLocale($event)">
<mat-option *ngFor="let loc of LOCALES" [value]="loc">
<div class="centerline">
<span
>{{ loc }}
<span class="lighter cnsl-secondary-text"
>|&nbsp;{{ 'POLICY.LOGIN_TEXTS.LOCALES.' + loc | translate }}</span
></span
>
</div>
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<cnsl-form-field class="language">
<cnsl-label>{{ 'POLICY.LOGIN_TEXTS.LOCALE' | translate }}</cnsl-label>
<mat-select [(ngModel)]="locale" name="locale" (selectionChange)="changeLocale($event)">
<mat-option *ngFor="let loc of LOCALES" [value]="loc">
<div class="centerline">
<span
>{{ loc }}
<span class="lighter cnsl-secondary-text"
>|&nbsp;{{ 'POLICY.LOGIN_TEXTS.LOCALES.' + loc | translate }}</span
></span
>
</div>
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<div class="content">
<cnsl-edit-text
[chips]="chips[currentType]"
[disabled]="(canWrite$ | async) === false"
label="one"
[default$]="getDefaultInitMessageTextMap$"
[current$]="getCustomInitMessageTextMap$"
(changedValues)="updateCurrentValues($event)"
></cnsl-edit-text>
</div>
<div class="content">
<cnsl-edit-text
[chips]="chips[currentType]"
[disabled]="(canWrite$ | async) === false"
label="one"
[default$]="getDefaultInitMessageTextMap$"
[current$]="getCustomInitMessageTextMap$"
(changedValues)="updateCurrentValues($event)"
></cnsl-edit-text>
</div>
<div class="actions">
<button
class="reset-button"
*ngIf="(getCustomInitMessageTextMap$ | async) && (getCustomInitMessageTextMap$ | async)?.isDefault === false"
[disabled]="(canWrite$ | async) === false"
(click)="resetDefault()"
color="warn"
type="submit"
mat-stroked-button
>
<i class="las la-history"></i> {{ 'ACTIONS.RESETDEFAULT' | translate }}
</button>
<button
class="save-button"
[disabled]="!updateRequest || (canWrite$ | async) === false"
(click)="saveCurrentMessage()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
<cnsl-policy-grid [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="text"></cnsl-policy-grid>
</cnsl-detail-layout>
<div class="actions">
<button
class="reset-button"
*ngIf="(getCustomInitMessageTextMap$ | async) && (getCustomInitMessageTextMap$ | async)?.isDefault === false"
[disabled]="(canWrite$ | async) === false"
(click)="resetDefault()"
color="warn"
type="submit"
mat-stroked-button
>
<i class="las la-history"></i> {{ 'ACTIONS.RESETDEFAULT' | translate }}
</button>
<button
class="save-button"
[disabled]="!updateRequest || (canWrite$ | async) === false"
(click)="saveCurrentMessage()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>

137
console/src/app/modules/policies/message-texts/message-texts.component.ts
View File

@ -1,51 +1,46 @@
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSelectChange } from '@angular/material/select';
import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject, from, Observable, of, Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import {
GetCustomPasswordResetMessageTextRequest as AdminGetCustomPasswordResetMessageTextRequest,
GetDefaultInitMessageTextRequest as AdminGetDefaultInitMessageTextRequest,
GetDefaultVerifyEmailMessageTextRequest as AdminGetDefaultVerifyEmailMessageTextRequest,
GetDefaultVerifyPhoneMessageTextRequest as AdminGetDefaultVerifyPhoneMessageTextRequest,
SetDefaultDomainClaimedMessageTextRequest,
SetDefaultInitMessageTextRequest,
SetDefaultPasswordlessRegistrationMessageTextRequest,
SetDefaultPasswordResetMessageTextRequest,
SetDefaultVerifyEmailMessageTextRequest,
SetDefaultVerifyPhoneMessageTextRequest,
GetCustomPasswordResetMessageTextRequest as AdminGetCustomPasswordResetMessageTextRequest,
GetDefaultInitMessageTextRequest as AdminGetDefaultInitMessageTextRequest,
GetDefaultVerifyEmailMessageTextRequest as AdminGetDefaultVerifyEmailMessageTextRequest,
GetDefaultVerifyPhoneMessageTextRequest as AdminGetDefaultVerifyPhoneMessageTextRequest,
SetDefaultDomainClaimedMessageTextRequest,
SetDefaultInitMessageTextRequest,
SetDefaultPasswordlessRegistrationMessageTextRequest,
SetDefaultPasswordResetMessageTextRequest,
SetDefaultVerifyEmailMessageTextRequest,
SetDefaultVerifyPhoneMessageTextRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import {
GetCustomDomainClaimedMessageTextRequest,
GetCustomPasswordlessRegistrationMessageTextRequest,
GetCustomPasswordResetMessageTextRequest,
GetCustomVerifyEmailMessageTextRequest,
GetCustomVerifyPhoneMessageTextRequest,
GetDefaultDomainClaimedMessageTextRequest,
GetDefaultInitMessageTextRequest,
GetDefaultPasswordlessRegistrationMessageTextRequest,
GetDefaultPasswordResetMessageTextRequest,
GetDefaultVerifyEmailMessageTextRequest,
GetDefaultVerifyPhoneMessageTextRequest,
SetCustomDomainClaimedMessageTextRequest,
SetCustomInitMessageTextRequest,
SetCustomPasswordlessRegistrationMessageTextRequest,
SetCustomPasswordResetMessageTextRequest,
SetCustomVerifyEmailMessageTextRequest,
SetCustomVerifyPhoneMessageTextRequest,
GetCustomDomainClaimedMessageTextRequest,
GetCustomPasswordlessRegistrationMessageTextRequest,
GetCustomPasswordResetMessageTextRequest,
GetCustomVerifyEmailMessageTextRequest,
GetCustomVerifyPhoneMessageTextRequest,
GetDefaultDomainClaimedMessageTextRequest,
GetDefaultInitMessageTextRequest,
GetDefaultPasswordlessRegistrationMessageTextRequest,
GetDefaultPasswordResetMessageTextRequest,
GetDefaultVerifyEmailMessageTextRequest,
GetDefaultVerifyPhoneMessageTextRequest,
SetCustomDomainClaimedMessageTextRequest,
SetCustomInitMessageTextRequest,
SetCustomPasswordlessRegistrationMessageTextRequest,
SetCustomPasswordResetMessageTextRequest,
SetCustomVerifyEmailMessageTextRequest,
SetCustomVerifyPhoneMessageTextRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { MessageCustomText } from 'src/app/proto/generated/zitadel/text_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { GridPolicy, MESSAGE_TEXTS_POLICY } from '../../policy-grid/policies';
import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@ -279,7 +274,7 @@ const REQUESTMAP = {
templateUrl: './message-texts.component.html',
styleUrls: ['./message-texts.component.scss'],
})
export class MessageTextsComponent implements OnDestroy {
export class MessageTextsComponent implements OnInit, OnDestroy {
public getDefaultInitMessageTextMap$: Observable<{ [key: string]: string }> = of({});
public getCustomInitMessageTextMap$: BehaviorSubject<{ [key: string]: string | boolean }> = new BehaviorSubject({}); // boolean because of isDefault
@ -287,7 +282,7 @@ export class MessageTextsComponent implements OnDestroy {
public service!: ManagementService | AdminService;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public MESSAGETYPES: any = MESSAGETYPES;
@ -392,8 +387,6 @@ export class MessageTextsComponent implements OnDestroy {
public locale: string = 'en';
public LOCALES: string[] = ['en', 'de', 'it'];
private sub: Subscription = new Subscription();
public currentPolicy: GridPolicy = MESSAGE_TEXTS_POLICY;
public orgName: string = '';
public canWrite$: Observable<boolean> = this.authService.isAllowed([
this.serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
@ -404,61 +397,29 @@ export class MessageTextsComponent implements OnDestroy {
constructor(
private authService: GrpcAuthService,
private route: ActivatedRoute,
private toast: ToastService,
private injector: Injector,
private dialog: MatDialog,
private storageService: StorageService,
breadcrumbService: BreadcrumbService,
) {
this.sub = this.route.data
.pipe(
switchMap((data) => {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData(this.currentType);
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.orgName = org.name;
}
) {}
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData(this.currentType);
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
}
return this.route.params;
}),
)
.subscribe();
ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData(this.currentType);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.service.getSupportedLanguages().then((lang) => {
this.LOCALES = lang.languagesList;
});
this.loadData(this.currentType);
break;
}
}
public getDefaultValues(type: MESSAGETYPES, req: any): Promise<any> {

5
console/src/app/modules/policies/message-texts/message-texts.module.ts
View File

@ -13,10 +13,10 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
import { InputModule } from 'src/app/modules/input/input.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { EditTextModule } from '../../edit-text/edit-text.module';
import { FormFieldModule } from '../../form-field/form-field.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { MessageTextsRoutingModule } from './message-texts-routing.module';
import { MessageTextsComponent } from './message-texts.component';
@ -37,12 +37,13 @@ import { MessageTextsComponent } from './message-texts.component';
HasRolePipeModule,
MatTooltipModule,
TranslateModule,
CardModule,
MatTooltipModule,
MatSelectModule,
DetailLayoutModule,
MatProgressSpinnerModule,
PolicyGridModule,
TextFieldModule,
],
exports: [MessageTextsComponent],
})
export class MessageTextsPolicyModule {}

84
console/src/app/modules/policies/org-iam-policy/org-iam-policy.component.html
View File

@ -1,55 +1,41 @@
<cnsl-detail-layout
[hasBackButton]="true"
[title]="'POLICY.IAM_POLICY.TITLE' | translate"
[description]="'POLICY.IAM_POLICY.DESCRIPTION' | translate"
>
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="orgName; else iam">{{ orgName }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<h2>{{ 'POLICY.IAM_POLICY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.IAM_POLICY.DESCRIPTION' | translate }}</p>
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<ng-template cnslHasRole [hasRole]="['iam.policy.delete']">
<button
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
<ng-template cnslHasRole [hasRole]="['iam.policy.delete']">
<button
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
<div class="content" *ngIf="iamData">
<div class="row">
<mat-slide-toggle
color="primary"
name="hasNumber"
ngDefaultControl
[disabled]="(['iam.policy.write'] | hasRole | async) === false"
[(ngModel)]="iamData.userLoginMustBeDomain"
>
{{ 'POLICY.DATA.USERLOGINMUSTBEDOMAIN' | translate }}
</mat-slide-toggle>
</div>
</div>
<div class="btn-container">
<button
(click)="savePolicy()"
[disabled]="(['iam.policy.write'] | hasRole | async) === false"
<div class="content" *ngIf="iamData">
<div class="row">
<mat-slide-toggle
color="primary"
type="submit"
mat-raised-button
name="hasNumber"
ngDefaultControl
[disabled]="(['iam.policy.write'] | hasRole | async) === false"
[(ngModel)]="iamData.userLoginMustBeDomain"
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
{{ 'POLICY.DATA.USERLOGINMUSTBEDOMAIN' | translate }}
</mat-slide-toggle>
</div>
</div>
<cnsl-policy-grid [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="login"></cnsl-policy-grid>
</cnsl-detail-layout>
<div class="btn-container">
<button
(click)="savePolicy()"
[disabled]="(['iam.policy.write'] | hasRole | async) === false"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>

4
console/src/app/modules/policies/org-iam-policy/org-iam-policy.component.scss
View File

@ -36,12 +36,10 @@
.btn-container {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
width: 100%;
margin-bottom: 50px;
button {
margin-top: 3rem;
display: block;
}
}

60
console/src/app/modules/policies/org-iam-policy/org-iam-policy.component.ts
View File

@ -1,18 +1,13 @@
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { GetCustomOrgIAMPolicyResponse } from 'src/app/proto/generated/zitadel/admin_pb';
import { GetOrgIAMPolicyResponse } from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { OrgIAMPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { GridPolicy, IAM_POLICY } from '../../policy-grid/policies';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@Component({
@ -20,9 +15,9 @@ import { PolicyComponentServiceType } from '../policy-component-types.enum';
templateUrl: './org-iam-policy.component.html',
styleUrls: ['./org-iam-policy.component.scss'],
})
export class OrgIamPolicyComponent implements OnDestroy {
export class OrgIamPolicyComponent implements OnInit, OnDestroy {
private managementService!: ManagementService;
public serviceType!: PolicyComponentServiceType;
@Input() public serviceType!: PolicyComponentServiceType;
public iamData!: OrgIAMPolicy.AsObject;
@ -30,50 +25,14 @@ export class OrgIamPolicyComponent implements OnDestroy {
private org!: Org.AsObject;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public currentPolicy: GridPolicy = IAM_POLICY;
public orgName: string = '';
constructor(
private route: ActivatedRoute,
private toast: ToastService,
private storage: StorageService,
private injector: Injector,
private adminService: AdminService,
private storageService: StorageService,
breadcrumbService: BreadcrumbService,
) {
const temporg = this.storage.getItem(StorageKey.organization, StorageLocation.session) as Org.AsObject;
if (temporg) {
this.org = temporg;
constructor(private toast: ToastService, private injector: Injector, private adminService: AdminService) {}
ngOnInit(): void {
if (this.serviceType === PolicyComponentServiceType.MGMT) {
this.managementService = this.injector.get(ManagementService as Type<ManagementService>);
}
this.sub = this.route.data
.pipe(
switchMap((data) => {
this.serviceType = data.serviceType;
if (this.serviceType === PolicyComponentServiceType.MGMT) {
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.orgName = org.name;
}
this.managementService = this.injector.get(ManagementService as Type<ManagementService>);
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
}
return this.route.params;
}),
)
.subscribe((_) => {
this.fetchData();
});
this.fetchData();
}
public ngOnDestroy(): void {
@ -103,7 +62,6 @@ export class OrgIamPolicyComponent implements OnDestroy {
}
public savePolicy(): void {
console.log(this.iamData);
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
if ((this.iamData as OrgIAMPolicy.AsObject).isDefault) {

5
console/src/app/modules/policies/org-iam-policy/org-iam-policy.module.ts
View File

@ -11,8 +11,8 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
import { InputModule } from 'src/app/modules/input/input.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { OrgIamPolicyRoutingModule } from './org-iam-policy-routing.module';
import { OrgIamPolicyComponent } from './org-iam-policy.component';
@ -22,6 +22,7 @@ import { OrgIamPolicyComponent } from './org-iam-policy.component';
OrgIamPolicyRoutingModule,
CommonModule,
FormsModule,
CardModule,
InputModule,
MatButtonModule,
HasRolePipeModule,
@ -32,7 +33,7 @@ import { OrgIamPolicyComponent } from './org-iam-policy.component';
InfoSectionModule,
TranslateModule,
DetailLayoutModule,
PolicyGridModule,
],
exports: [OrgIamPolicyComponent],
})
export class OrgIamPolicyModule {}

28
console/src/app/modules/policies/password-age-policy/password-age-policy.component.ts
View File

@ -4,11 +4,10 @@ import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { GetPasswordAgePolicyResponse as AdminGetPasswordAgePolicyResponse } from 'src/app/proto/generated/zitadel/admin_pb';
import {
GetPasswordAgePolicyResponse as MgmtGetPasswordAgePolicyResponse,
GetPasswordAgePolicyResponse as MgmtGetPasswordAgePolicyResponse,
} from 'src/app/proto/generated/zitadel/management_pb';
import { PasswordAgePolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@ -28,12 +27,7 @@ export class PasswordAgePolicyComponent implements OnDestroy {
private sub: Subscription = new Subscription();
public PolicyComponentServiceType: any = PolicyComponentServiceType;
constructor(
private route: ActivatedRoute,
private toast: ToastService,
private injector: Injector,
breadcrumbService: BreadcrumbService,
) {
constructor(private route: ActivatedRoute, private toast: ToastService, private injector: Injector) {
this.sub = this.route.data
.pipe(
switchMap((data) => {
@ -41,27 +35,9 @@ export class PasswordAgePolicyComponent implements OnDestroy {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
}

117
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html
View File

@ -1,38 +1,29 @@
<cnsl-detail-layout
[hasBackButton]="true"
[title]="'POLICY.PWD_COMPLEXITY.TITLE' | translate"
[description]="'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate"
>
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="orgName; else iam">{{ orgName }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<!-- <cnsl-card
title="{{ 'POLICY.PWD_COMPLEXITY.TITLE' | translate }}"
description="{{ 'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate }}"
> -->
<h2>{{ 'POLICY.PWD_COMPLEXITY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate }}</p>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<div *ngIf="loading" class="spinner-wr">
<mat-spinner diameter="30" color="primary"></mat-spinner>
</div>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
<div *ngIf="complexityData" class="complexity-content">
<cnsl-card *ngIf="complexityData">
<div class="complexity-content">
<div class="row">
<mat-icon class="icon" svgIcon="mdi_counter"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.MINLENGTH' | translate }}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="decrementLength()" [disabled]="(['policy.write'] | hasRole | async) === false">
<mat-icon>remove</mat-icon>
@ -42,72 +33,84 @@
<mat-icon>add</mat-icon>
</button>
</div>
<div class="number-toggle-row">
<mat-icon class="icon" svgIcon="mdi_counter"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.MINLENGTH' | translate }}</span>
</div>
</div>
<div class="row">
<mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASNUMBER' | translate }}</span>
<span class="fill-space"></span>
<mat-slide-toggle
class="slide-toggle"
color="primary"
name="hasNumber"
ngDefaultControl
[(ngModel)]="complexityData.hasNumber"
[disabled]="(['policy.write'] | hasRole | async) === false"
>
<div class="slide-toggle-row">
<mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASNUMBER' | translate }}</span>
</div>
</mat-slide-toggle>
</div>
<div class="row">
<mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASSYMBOL' | translate }}</span>
<span class="fill-space"></span>
<mat-slide-toggle
class="slide-toggle"
color="primary"
name="hasSymbol"
ngDefaultControl
[(ngModel)]="complexityData.hasSymbol"
[disabled]="(['policy.write'] | hasRole | async) === false"
>
<div class="slide-toggle-row">
<mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASSYMBOL' | translate }}</span>
</div>
</mat-slide-toggle>
</div>
<div class="row">
<mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASLOWERCASE' | translate }}</span>
<span class="fill-space"></span>
<mat-slide-toggle
class="slide-toggle"
color="primary"
name="hasLowercase"
ngDefaultControl
[(ngModel)]="complexityData.hasLowercase"
[disabled]="(['policy.write'] | hasRole | async) === false"
>
<div class="slide-toggle-row">
<mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASLOWERCASE' | translate }}</span>
</div>
</mat-slide-toggle>
</div>
<div class="row">
<mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASUPPERCASE' | translate }}</span>
<span class="fill-space"></span>
<mat-slide-toggle
class="slide-toggle"
color="primary"
name="hasUppercase"
ngDefaultControl
[(ngModel)]="complexityData.hasUppercase"
[disabled]="(['policy.write'] | hasRole | async) === false"
>
<div class="slide-toggle-row">
<mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
<span class="left-desc">{{ 'POLICY.DATA.HASUPPERCASE' | translate }}</span>
</div>
</mat-slide-toggle>
</div>
</div>
</cnsl-card>
<div class="btn-container">
<button
(click)="savePolicy()"
[disabled]="(['policy.write'] | hasRole | async) === false"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
<cnsl-policy-grid [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="security"></cnsl-policy-grid>
</cnsl-detail-layout>
<div class="btn-container">
<button
(click)="savePolicy()"
[disabled]="(['policy.write'] | hasRole | async) === false"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
<!-- </cnsl-card> -->

38
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss
View File

@ -8,7 +8,6 @@
}
.complexity-content {
padding-top: 1rem;
display: flex;
flex-direction: column;
width: 100%;
@ -18,12 +17,36 @@
align-items: center;
padding: 0.3rem 0;
.icon {
margin-right: 1rem;
.number-toggle-row {
display: flex;
align-items: center;
margin-left: 1rem;
.icon {
margin-right: 1rem;
}
.left-desc {
font-size: 0.9rem;
}
}
.left-desc {
font-size: 0.9rem;
.slide-toggle {
margin-left: 1.75rem;
.slide-toggle-row {
display: flex;
align-items: center;
margin-left: 1.5rem;
.icon {
margin-right: 1rem;
}
.left-desc {
font-size: 0.9rem;
}
}
}
.fill-space {
@ -40,12 +63,9 @@
.btn-container {
display: flex;
justify-content: flex-end;
width: 100%;
margin-bottom: 50px;
justify-content: flex-start;
button {
margin-top: 3rem;
display: block;
}
}

85
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.ts
View File

@ -1,93 +1,46 @@
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { Component, Injector, Input, OnInit, Type } from '@angular/core';
import {
GetPasswordComplexityPolicyResponse as AdminGetPasswordComplexityPolicyResponse,
GetPasswordComplexityPolicyResponse as AdminGetPasswordComplexityPolicyResponse,
} from 'src/app/proto/generated/zitadel/admin_pb';
import {
GetPasswordComplexityPolicyResponse as MgmtGetPasswordComplexityPolicyResponse,
GetPasswordComplexityPolicyResponse as MgmtGetPasswordComplexityPolicyResponse,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { COMPLEXITY_POLICY, GridPolicy } from '../../policy-grid/policies';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@Component({
selector: 'cnsl-password-policy',
selector: 'cnsl-password-complexity-policy',
templateUrl: './password-complexity-policy.component.html',
styleUrls: ['./password-complexity-policy.component.scss'],
})
export class PasswordComplexityPolicyComponent implements OnDestroy {
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
export class PasswordComplexityPolicyComponent implements OnInit {
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public service!: ManagementService | AdminService;
public complexityData!: PasswordComplexityPolicy.AsObject;
private sub: Subscription = new Subscription();
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public loading: boolean = false;
public currentPolicy: GridPolicy = COMPLEXITY_POLICY;
public InfoSectionType: any = InfoSectionType;
public orgName: string = '';
constructor(
private route: ActivatedRoute,
private toast: ToastService,
private injector: Injector,
private storageService: StorageService,
breadcrumbService: BreadcrumbService,
) {
this.sub = this.route.data
.pipe(
switchMap((data) => {
this.serviceType = data.serviceType;
constructor(private toast: ToastService, private injector: Injector) {}
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.orgName = org.name;
}
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
return this.route.params;
}),
)
.subscribe(() => {
this.fetchData();
});
public ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
this.fetchData();
}
public fetchData(): void {
@ -101,10 +54,6 @@ export class PasswordComplexityPolicyComponent implements OnDestroy {
});
}
public ngOnDestroy(): void {
this.sub.unsubscribe();
}
private async getData(): Promise<
MgmtGetPasswordComplexityPolicyResponse.AsObject | AdminGetPasswordComplexityPolicyResponse.AsObject
> {

5
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.module.ts
View File

@ -12,8 +12,8 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
import { InputModule } from 'src/app/modules/input/input.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { PasswordComplexityPolicyRoutingModule } from './password-complexity-policy-routing.module';
import { PasswordComplexityPolicyComponent } from './password-complexity-policy.component';
@ -32,9 +32,10 @@ import { PasswordComplexityPolicyComponent } from './password-complexity-policy.
HasRolePipeModule,
TranslateModule,
DetailLayoutModule,
CardModule,
MatProgressSpinnerModule,
PolicyGridModule,
InfoSectionModule,
],
exports: [PasswordComplexityPolicyComponent],
})
export class PasswordComplexityPolicyModule {}

75
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.html
View File

@ -1,34 +1,15 @@
<cnsl-detail-layout
[hasBackButton]="true"
[title]="'POLICY.PWD_LOCKOUT.TITLE' | translate"
[description]="'POLICY.PWD_LOCKOUT.DESCRIPTION' | translate"
>
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="orgName; else iam">{{ orgName }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<cnsl-info-section class="default" *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<!-- <cnsl-card
title="{{ 'POLICY.PWD_LOCKOUT.TITLE' | translate }}"
description="{{ 'POLICY.PWD_LOCKOUT.DESCRIPTION' | translate }}"
> -->
<h2>{{ 'POLICY.PWD_LOCKOUT.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.PWD_LOCKOUT.DESCRIPTION' | translate }}</p>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
[disabled]="(['policy.write'] | hasRole | async) === false"
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="resetPolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
<cnsl-info-section class="default" *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<div class="content" *ngIf="lockoutData">
<cnsl-card *ngIf="lockoutData">
<div class="lockout-content">
<div class="row">
<span class="left-desc">{{ 'POLICY.DATA.MAXATTEMPTS' | translate }}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button [disabled]="(['policy.write'] | hasRole | async) === false" mat-icon-button (click)="decrementMaxAttempts()">
<mat-icon>remove</mat-icon>
@ -38,20 +19,36 @@
<mat-icon>add</mat-icon>
</button>
</div>
<div class="number-toggle-row">
<span class="left-desc">{{ 'POLICY.DATA.MAXATTEMPTS' | translate }}</span>
<span class="fill-space"></span>
</div>
</div>
</div>
</cnsl-card>
<div class="btn-container">
<div class="btn-container">
<button
(click)="savePolicy()"
[disabled]="(['policy.write'] | hasRole | async) === false"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
(click)="savePolicy()"
[disabled]="(['policy.write'] | hasRole | async) === false"
color="primary"
type="submit"
mat-raised-button
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="resetPolicy()"
mat-stroked-button
>
{{ 'ACTIONS.SAVE' | translate }}
{{ 'POLICY.RESET' | translate }}
</button>
</div>
<cnsl-policy-grid [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="security"></cnsl-policy-grid>
</cnsl-detail-layout>
</ng-template>
</div>
<!-- </cnsl-card> -->

17
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss
View File

@ -8,8 +8,7 @@
font-size: 14px;
}
.content {
padding-top: 1rem;
.lockout-content {
display: flex;
flex-direction: column;
width: 100%;
@ -19,8 +18,14 @@
align-items: center;
padding: 0.3rem 0;
.left-desc {
font-size: 0.9rem;
.number-toggle-row {
margin-left: 1rem;
display: flex;
align-items: center;
.left-desc {
font-size: 0.9rem;
}
}
.fill-space {
@ -36,11 +41,11 @@
.btn-container {
display: flex;
justify-content: flex-end;
justify-content: flex-start;
width: 100%;
button {
margin-top: 3rem;
display: block;
margin-right: 1rem;
}
}

86
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.ts
View File

@ -1,22 +1,16 @@
import { Component, Injector, Input, OnDestroy, Type } from '@angular/core';
import { Component, Injector, Input, OnInit, Type } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { GetLockoutPolicyResponse as AdminGetPasswordLockoutPolicyResponse } from 'src/app/proto/generated/zitadel/admin_pb';
import {
GetLockoutPolicyResponse as MgmtGetPasswordLockoutPolicyResponse,
GetLockoutPolicyResponse as MgmtGetPasswordLockoutPolicyResponse,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { LockoutPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { GridPolicy, LOCKOUT_POLICY } from '../../policy-grid/policies';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@Component({
@ -24,77 +18,33 @@ import { PolicyComponentServiceType } from '../policy-component-types.enum';
templateUrl: './password-lockout-policy.component.html',
styleUrls: ['./password-lockout-policy.component.scss'],
})
export class PasswordLockoutPolicyComponent implements OnDestroy {
export class PasswordLockoutPolicyComponent implements OnInit {
@Input() public service!: ManagementService | AdminService;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public lockoutForm!: FormGroup;
public lockoutData!: LockoutPolicy.AsObject;
private sub: Subscription = new Subscription();
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public InfoSectionType: any = InfoSectionType;
public currentPolicy: GridPolicy = LOCKOUT_POLICY;
public orgName: string = '';
constructor(
private route: ActivatedRoute,
breadcrumbService: BreadcrumbService,
private toast: ToastService,
private injector: Injector,
private storageService: StorageService,
) {
this.sub = this.route.data
.pipe(
switchMap((data) => {
this.serviceType = data.serviceType;
constructor(private toast: ToastService, private injector: Injector, private storageService: StorageService) {}
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.orgName = org.name;
}
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
}
return this.route.params;
}),
)
.subscribe(() => {
this.fetchData();
});
}
public ngOnDestroy(): void {
this.sub.unsubscribe();
public ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
this.fetchData();
}
private fetchData(): void {
console.log(this.serviceType);
this.getData().then((resp) => {
console.log(resp);
if (resp.policy) {
this.lockoutData = resp.policy;
}

5
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.module.ts
View File

@ -11,8 +11,8 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
import { InputModule } from 'src/app/modules/input/input.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { PasswordLockoutPolicyRoutingModule } from './password-lockout-policy-routing.module';
import { PasswordLockoutPolicyComponent } from './password-lockout-policy.component';
@ -29,10 +29,11 @@ import { PasswordLockoutPolicyComponent } from './password-lockout-policy.compon
MatIconModule,
HasRoleModule,
MatTooltipModule,
CardModule,
TranslateModule,
DetailLayoutModule,
PolicyGridModule,
InfoSectionModule,
],
exports: [PasswordLockoutPolicyComponent],
})
export class PasswordLockoutPolicyModule {}

12
console/src/app/modules/policies/policy-component-types.enum.ts
View File

@ -1,15 +1,3 @@
export enum PolicyComponentType {
LOCKOUT = 'lockout',
AGE = 'age',
COMPLEXITY = 'complexity',
IAM = 'iam',
LOGIN = 'login',
PRIVATELABEL = 'privatelabel',
MESSAGETEXTS = 'messagetexts',
LOGINTEXTS = 'logintexts',
PRIVACYPOLICY = 'privacypolicy',
}
export enum PolicyComponentServiceType {
MGMT = 'mgmt',
ADMIN = 'admin',

107
console/src/app/modules/policies/privacy-policy/privacy-policy.component.html
View File

@ -1,68 +1,53 @@
<cnsl-detail-layout
[hasBackButton]="true"
[title]="'POLICY.PRIVACY_POLICY.TITLE' | translate"
[description]="'POLICY.PRIVACY_POLICY.DESCRIPTION' | translate"
>
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="orgName; else iam">{{ orgName }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<h2>{{ 'POLICY.PRIVACY_POLICY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.PRIVACY_POLICY.DESCRIPTION' | translate }}</p>
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<div class="divider"></div>
<div>
<form *ngIf="form" [formGroup]="form" class="policy-content">
<cnsl-form-field class="privacy-policy-formfield">
<cnsl-label>{{ 'POLICY.PRIVACY_POLICY.TOSLINK' | translate }}</cnsl-label>
<input cnslInput name="tosLink" formControlName="tosLink" />
<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ key: 'tosLink' }"></template>
</cnsl-form-field>
<div>
<form *ngIf="form" [formGroup]="form" class="content">
<cnsl-form-field class="privacy-policy-formfield">
<cnsl-label>{{ 'POLICY.PRIVACY_POLICY.TOSLINK' | translate }}</cnsl-label>
<input cnslInput name="tosLink" formControlName="tosLink" />
<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ key: 'tosLink' }"></template>
</cnsl-form-field>
<cnsl-form-field class="privacy-policy-formfield">
<cnsl-label>{{ 'POLICY.PRIVACY_POLICY.POLICYLINK' | translate }}</cnsl-label>
<input cnslInput name="privacyLink" formControlName="privacyLink" />
<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ key: 'privacyLink' }"></template>
</cnsl-form-field>
<cnsl-form-field class="privacy-policy-formfield">
<cnsl-label>{{ 'POLICY.PRIVACY_POLICY.POLICYLINK' | translate }}</cnsl-label>
<input cnslInput name="privacyLink" formControlName="privacyLink" />
<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ key: 'privacyLink' }"></template>
</cnsl-form-field>
<cnsl-form-field class="privacy-policy-formfield">
<cnsl-label>{{ 'POLICY.PRIVACY_POLICY.HELPLINK' | translate }}</cnsl-label>
<input cnslInput name="helpLink" formControlName="helpLink" />
<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ key: 'helpLink' }"></template>
</cnsl-form-field>
</form>
</div>
<cnsl-form-field class="privacy-policy-formfield">
<cnsl-label>{{ 'POLICY.PRIVACY_POLICY.HELPLINK' | translate }}</cnsl-label>
<input cnslInput name="helpLink" formControlName="helpLink" />
<template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ key: 'helpLink' }"></template>
</cnsl-form-field>
</form>
</div>
<div class="actions">
<button
*ngIf="privacyPolicy && privacyPolicy.isDefault === false"
class="reset-button"
[disabled]="(canWrite$ | async) === false"
(click)="resetDefault()"
color="warn"
type="submit"
mat-stroked-button
>
<i class="las la-history"></i> {{ 'ACTIONS.RESETDEFAULT' | translate }}
</button>
<button
class="save-button"
[disabled]="(canWrite$ | async) === false"
(click)="saveCurrentMessage()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
<cnsl-policy-grid [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="text"></cnsl-policy-grid>
</cnsl-detail-layout>
<div class="policy-actions">
<button
*ngIf="privacyPolicy && privacyPolicy.isDefault === false"
class="reset-button"
[disabled]="(canWrite$ | async) === false"
(click)="resetDefault()"
color="warn"
type="submit"
mat-stroked-button
>
<i class="las la-history"></i> {{ 'ACTIONS.RESETDEFAULT' | translate }}
</button>
<button
class="save-button"
[disabled]="(canWrite$ | async) === false"
(click)="saveCurrentMessage()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
<ng-template #templateRef let-key="key">
<div class="chips">
@ -78,4 +63,4 @@
<i *ngIf="copied === LANGPLACEHOLDER" class="las la-clipboard-check"></i>
</div>
</div>
</ng-template>
</ng-template>

42
console/src/app/modules/policies/privacy-policy/privacy-policy.component.scss
View File

@ -2,29 +2,7 @@
margin: 0.5rem 0;
}
.policy-applied-to {
margin: -1rem 0 0 0;
font-size: 14px;
}
.top-actions {
display: flex;
margin: 0 -0.5rem;
flex-wrap: wrap;
.keys {
flex: 1;
margin: 0 0.5rem;
min-width: 150px;
}
}
.centerline {
display: flex;
align-items: center;
}
.content {
.policy-content {
padding-top: 1rem;
display: grid;
grid-template-columns: 1fr;
@ -40,7 +18,7 @@
display: flex;
flex-wrap: wrap;
opacity: 0;
margin: 0 -0.25rem;
margin: 0;
transition: all 0.2s ease;
.chip {
@ -49,7 +27,7 @@
font-size: 12px;
background: #5282c1;
color: white;
margin: 0.25rem;
margin-right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
@ -79,22 +57,14 @@
}
}
.divider {
width: 100%;
height: 1px;
background-color: rgba(#81868a, 0.5);
margin: 1.5rem 0 0 0;
}
.actions {
.policy-actions {
display: flex;
justify-content: flex-end;
margin: 0 -0.25rem;
justify-content: flex-start;
.save-button,
.reset-button {
display: block;
margin: 0 0.25rem 3rem 0.25rem;
margin: 0 1rem 0 0;
}
.reset-button {

81
console/src/app/modules/policies/privacy-policy/privacy-policy.component.ts
View File

@ -1,30 +1,25 @@
import { Component, Injector, OnDestroy, Type } from '@angular/core';
import { Component, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
import { take } from 'rxjs/operators';
import {
GetPrivacyPolicyResponse as AdminGetPrivacyPolicyResponse,
UpdatePrivacyPolicyRequest,
GetPrivacyPolicyResponse as AdminGetPrivacyPolicyResponse,
UpdatePrivacyPolicyRequest,
} from 'src/app/proto/generated/zitadel/admin_pb';
import {
AddCustomPrivacyPolicyRequest,
GetPrivacyPolicyResponse,
UpdateCustomPrivacyPolicyRequest,
AddCustomPrivacyPolicyRequest,
GetPrivacyPolicyResponse,
UpdateCustomPrivacyPolicyRequest,
} from 'src/app/proto/generated/zitadel/management_pb';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { PrivacyPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { CnslLinks } from '../../links/links.component';
import { GridPolicy, PRIVACY_POLICY } from '../../policy-grid/policies';
import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@ -33,19 +28,17 @@ import { PolicyComponentServiceType } from '../policy-component-types.enum';
templateUrl: './privacy-policy.component.html',
styleUrls: ['./privacy-policy.component.scss'],
})
export class PrivacyPolicyComponent implements OnDestroy {
export class PrivacyPolicyComponent implements OnInit, OnDestroy {
public service!: ManagementService | AdminService;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public nextLinks: CnslLinks[] = [];
private sub: Subscription = new Subscription();
public privacyPolicy: PrivacyPolicy.AsObject | undefined = undefined;
public form!: FormGroup;
public currentPolicy: GridPolicy = PRIVACY_POLICY;
public InfoSectionType: any = InfoSectionType;
public orgName: string = '';
public canWrite$: Observable<boolean> = this.authService.isAllowed([
this.serviceType === PolicyComponentServiceType.ADMIN
@ -60,13 +53,10 @@ export class PrivacyPolicyComponent implements OnDestroy {
constructor(
private authService: GrpcAuthService,
private route: ActivatedRoute,
private injector: Injector,
private dialog: MatDialog,
private toast: ToastService,
private fb: FormBuilder,
private storageService: StorageService,
breadcrumbService: BreadcrumbService,
) {
this.form = this.fb.group({
tosLink: ['', []],
@ -81,48 +71,19 @@ export class PrivacyPolicyComponent implements OnDestroy {
this.form.disable();
}
});
}
this.route.data
.pipe(
switchMap((data) => {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.loadData();
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.orgName = org.name;
}
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.loadData();
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
}
return this.route.params;
}),
)
.subscribe();
ngOnInit(): void {
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
this.loadData();
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
this.loadData();
break;
}
}
public addChip(formControlName: string, value: string): void {

5
console/src/app/modules/policies/privacy-policy/privacy-policy.module.ts
View File

@ -15,9 +15,9 @@ import { HasRoleModule } from '../../../directives/has-role/has-role.module';
import { DetailLayoutModule } from '../../../modules/detail-layout/detail-layout.module';
import { InputModule } from '../../../modules/input/input.module';
import { HasRolePipeModule } from '../../../pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { FormFieldModule } from '../../form-field/form-field.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
import { PrivacyPolicyRoutingModule } from './privacy-policy-routing.module';
import { PrivacyPolicyComponent } from './privacy-policy.component';
@ -39,14 +39,15 @@ import { PrivacyPolicyComponent } from './privacy-policy.component';
HasRolePipeModule,
MatTooltipModule,
TranslateModule,
CardModule,
MatTooltipModule,
DetailLayoutModule,
MatProgressSpinnerModule,
TextFieldModule,
MatDialogModule,
WarnDialogModule,
PolicyGridModule,
InfoSectionModule,
],
exports: [PrivacyPolicyComponent],
})
export class PrivacyPolicyModule {}

810
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
View File

@ -1,441 +1,429 @@
<cnsl-detail-layout [hasBackButton]="true" [title]="'POLICY.PRIVATELABELING.TITLE' | translate">
<p class="policy-applied-to" sub>
{{ 'POLICY.APPLIEDTO' | translate }}:
<strong *ngIf="org; else iam">{{ org.name }}</strong>
<ng-template #iam
><strong>{{ 'MENU.INSTANCE' | translate }}</strong>
</ng-template>
</p>
<h2>{{ 'POLICY.PRIVATELABELING.TITLE' | translate }}</h2>
<div class="privatelabeling-policy">
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<div class="privatelabeling-policy">
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<div class="privatelabeling-top-row">
<mat-button-toggle-group class="buttongroup" [(ngModel)]="theme" name="theme" aria-label="Theme">
<mat-button-toggle [value]="Theme.LIGHT">
<div class="toggle-row">
<i class="icon las la-sun"></i>
<span>{{ 'POLICY.PRIVATELABELING.LIGHT' | translate }}</span>
<div *ngIf="theme === Theme.LIGHT" class="current-dot"></div>
</div>
</mat-button-toggle>
<mat-button-toggle [value]="Theme.DARK">
<div class="toggle-row">
<i class="icon las la-moon"></i>
<span> {{ 'POLICY.PRIVATELABELING.DARK' | translate }}</span>
<div *ngIf="theme === Theme.DARK" class="current-dot"></div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<div class="privatelabeling-top-row">
<mat-button-toggle-group class="buttongroup" [(ngModel)]="theme" name="theme" aria-label="Theme">
<mat-button-toggle [value]="Theme.LIGHT">
<div class="toggle-row">
<i class="icon las la-sun"></i>
<span>{{ 'POLICY.PRIVATELABELING.LIGHT' | translate }}</span>
<div *ngIf="theme === Theme.LIGHT" class="current-dot"></div>
</div>
</mat-button-toggle>
<mat-button-toggle [value]="Theme.DARK">
<div class="toggle-row">
<i class="icon las la-moon"></i>
<span> {{ 'POLICY.PRIVATELABELING.DARK' | translate }}</span>
<div *ngIf="theme === Theme.DARK" class="current-dot"></div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group
class="theme-toggle"
class="buttongroup"
[(ngModel)]="view"
name="displayview"
aria-label="Display View"
>
<mat-button-toggle [value]="View.PREVIEW">
<div class="toggle-row">
<span>{{ 'POLICY.PRIVATELABELING.VIEWS.PREVIEW' | translate }}</span>
<div *ngIf="view === View.PREVIEW" class="current-dot"></div>
</div>
</mat-button-toggle>
<mat-button-toggle [value]="View.CURRENT">
<div class="toggle-row">
<span> {{ 'POLICY.PRIVATELABELING.VIEWS.CURRENT' | translate }}</span>
<div *ngIf="view === View.CURRENT" class="current-dot"></div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group
class="theme-toggle"
class="buttongroup"
[(ngModel)]="view"
name="displayview"
aria-label="Display View"
>
<mat-button-toggle [value]="View.PREVIEW">
<div class="toggle-row">
<span>{{ 'POLICY.PRIVATELABELING.VIEWS.PREVIEW' | translate }}</span>
<div *ngIf="view === View.PREVIEW" class="current-dot"></div>
</div>
</mat-button-toggle>
<mat-button-toggle [value]="View.CURRENT">
<div class="toggle-row">
<span> {{ 'POLICY.PRIVATELABELING.VIEWS.CURRENT' | translate }}</span>
<div *ngIf="view === View.CURRENT" class="current-dot"></div>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
<span class="fill-space"></span>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
class="pl-action-button"
*ngIf="view === View.CURRENT && serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.RESET' | translate }}
</button>
</ng-template>
<span class="fill-space"></span>
<ng-template cnslHasRole [hasRole]="['policy.delete']">
<button
*ngIf="view === View.PREVIEW"
class="pl-action-button"
mat-raised-button
color="primary"
(click)="activatePolicy()"
*ngIf="view === View.CURRENT && serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
(click)="removePolicy()"
mat-stroked-button
>
{{ 'POLICY.PRIVATELABELING.ACTIVATEPREVIEW' | translate }}
{{ 'POLICY.RESET' | translate }}
</button>
</div>
</ng-template>
<cnsl-info-section *ngIf="view === View.PREVIEW" class="desc cnsl-secondary-text">
{{ 'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate }}
</cnsl-info-section>
<button
*ngIf="view === View.PREVIEW"
class="pl-action-button"
mat-raised-button
color="primary"
(click)="activatePolicy()"
>
{{ 'POLICY.PRIVATELABELING.ACTIVATEPREVIEW' | translate }}
</button>
</div>
<div *ngIf="previewData && data" class="lab-policy-content">
<mat-accordion class="settings">
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header [attr.data-e2e]="'policy-category'">
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-image"></i>
<span>Logos</span>
<span class="space"></span>
<small class="cnsl-secondary-text" *ngIf="theme === Theme.DARK"
>({{ 'POLICY.PRIVATELABELING.DARK' | translate }})</small
>
<small class="cnsl-secondary-text" *ngIf="theme === Theme.LIGHT"
>({{ 'POLICY.PRIVATELABELING.LIGHT' | translate }})</small
>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<cnsl-info-section *ngIf="view === View.PREVIEW" class="desc cnsl-secondary-text">
{{ 'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate }}
</cnsl-info-section>
<div>
<p class="cnsl-secondary-button">{{ 'POLICY.PRIVATELABELING.USEOFLOGO' | translate }}</p>
<cnsl-info-section *ngIf="view !== View.CURRENT" class="max-size-desc">
{{ 'POLICY.PRIVATELABELING.MAXSIZE' | translate }}
</cnsl-info-section>
<cnsl-info-section *ngIf="view !== View.CURRENT" class="max-size-desc">
{{ 'POLICY.PRIVATELABELING.EMAILNOSVG' | translate }}
</cnsl-info-section>
<div class="logo-view" [attr.data-e2e]="'image-part-logo'">
<span class="label cnsl-secondary-text">Logo</span>
<div class="img-wrapper">
<ng-container
*ngIf="
view === View.PREVIEW
? theme === Theme.DARK
? previewData.logoUrlDark
: previewData.logoUrl
: theme === Theme.DARK
? data.logoUrlDark
: data.logoUrl as logoSrc;
else addLogoButton
"
>
<img [src]="logoSrc" alt="logo" />
<button
class="dl-btn"
mat-icon-button
color="warn"
(click)="deleteAsset(AssetType.LOGO, theme)"
[disabled]="view === View.CURRENT"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
>
<i class="las la-ban"></i>
</button>
</ng-container>
<ng-template #addLogoButton>
<input
#selectedFile
style="display: none"
class="file-input"
type="file"
(change)="onDropLogo(theme, $any($event.target).files)"
/>
<button
mat-icon-button
matTooltip="{{ 'POLICY.PRIVATELABELING.BTN' | translate }}"
*ngIf="view !== View.CURRENT"
(click)="$event.preventDefault(); selectedFile.click()"
>
<mat-icon>add</mat-icon>
</button>
</ng-template>
</div>
</div>
<div class="logo-view" [attr.data-e2e]="'image-part-icon'">
<span class="label cnsl-secondary-text">Icon</span>
<div class="img-wrapper icon">
<ng-container
*ngIf="
view === View.PREVIEW
? theme === Theme.DARK
? previewData.iconUrlDark
: previewData.iconUrl
: theme === Theme.DARK
? data.iconUrlDark
: data.iconUrl as iconSrc;
else addIconButton
"
>
<img [src]="iconSrc" alt="icon" />
<button
class="dl-btn"
mat-icon-button
color="warn"
(click)="deleteAsset(AssetType.ICON, theme)"
[disabled]="view === View.CURRENT"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
>
<i class="las la-ban"></i>
</button>
</ng-container>
<ng-template #addIconButton>
<input
#selectedIconFile
style="display: none"
class="file-input"
type="file"
(change)="onDropIcon(theme, $any($event.target).files)"
/>
<button
mat-icon-button
matTooltip="{{ 'POLICY.PRIVATELABELING.BTN' | translate }}"
*ngIf="view !== View.CURRENT"
(click)="$event.preventDefault(); selectedIconFile.click()"
>
<mat-icon>add</mat-icon>
</button>
</ng-template>
</div>
</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-palette"></i>
<span>{{ 'POLICY.PRIVATELABELING.COLORS' | translate }}</span>
<span class="space"></span>
<small class="cnsl-secondary-text" *ngIf="theme === Theme.DARK"
>({{ 'POLICY.PRIVATELABELING.DARK' | translate }})</small
>
<small class="cnsl-secondary-text" *ngIf="theme === Theme.LIGHT"
>({{ 'POLICY.PRIVATELABELING.LIGHT' | translate }})</small
>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngIf="theme === Theme.DARK">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.BACKGROUNDDARK"
(previewChanged)="previewData.backgroundColorDark = $event; savePolicy()"
name="Background Color"
[color]="data.backgroundColorDark"
[previewColor]="previewData.backgroundColorDark"
></cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.PRIMARY"
(previewChanged)="previewData.primaryColorDark = $event; savePolicy()"
name="Primary Color"
[color]="data.primaryColorDark"
[previewColor]="previewData.primaryColorDark"
>
</cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.WARN"
(previewChanged)="previewData.warnColorDark = $event; savePolicy()"
name="Warn Color"
[color]="data.warnColorDark"
[previewColor]="previewData.warnColorDark"
>
</cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.FONTDARK"
(previewChanged)="previewData.fontColorDark = $event; savePolicy()"
name="Font Color"
[color]="data.fontColorDark"
[previewColor]="previewData.fontColorDark"
>
</cnsl-color>
</div>
</div>
</ng-container>
<ng-container *ngIf="theme === Theme.LIGHT">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.BACKGROUNDLIGHT"
(previewChanged)="previewData.backgroundColor = $event; savePolicy()"
name="Background Color"
[color]="data.backgroundColor"
[previewColor]="previewData.backgroundColor"
></cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.PRIMARY"
(previewChanged)="previewData.primaryColor = $event; savePolicy()"
name="Primary Color"
[color]="data.primaryColor"
[previewColor]="previewData.primaryColor"
>
</cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.WARN"
name="Warn Color"
(previewChanged)="previewData.warnColor = $event; savePolicy()"
[color]="data.warnColor"
[previewColor]="previewData.warnColor"
></cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.FONTLIGHT"
(previewChanged)="previewData.fontColor = $event; savePolicy()"
name="Font Color"
[color]="data.fontColor"
[previewColor]="previewData.fontColor"
></cnsl-color>
</div>
</div>
</ng-container>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header class="header" [attr.data-e2e]="'policy-category'">
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-font"></i>
{{ 'POLICY.PRIVATELABELING.FONT' | translate }}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="fonts">
<cnsl-info-section class="info-section"
>{{ 'POLICY.PRIVATELABELING.FONTINLOGINONLY' | translate }}
</cnsl-info-section>
<div class="font-preview" *ngIf="previewData.fontUrl; else addFontButton">
<mat-icon class="icon">text_fields</mat-icon>
<span class="fill-space"></span>
<button
class="dl-btn"
[disabled]="view === View.CURRENT"
mat-icon-button
color="warn"
(click)="deleteFont()"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
<div *ngIf="previewData && data" class="lab-policy-content">
<mat-accordion class="settings">
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header [attr.data-e2e]="'policy-category'">
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-image"></i>
<span>Logos</span>
<span class="space"></span>
<small class="cnsl-secondary-text" *ngIf="theme === Theme.DARK"
>({{ 'POLICY.PRIVATELABELING.DARK' | translate }})</small
>
<i class="las la-ban"></i>
</button>
</div>
<ng-template #addFontButton>
<div
class="font-add"
cnslDropzone
(hovered)="toggleHoverFont($event)"
(dropped)="onDropFont($event)"
[class.hovering]="isHoveringOverFont"
<small class="cnsl-secondary-text" *ngIf="theme === Theme.LIGHT"
>({{ 'POLICY.PRIVATELABELING.LIGHT' | translate }})</small
>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<p class="cnsl-secondary-button">{{ 'POLICY.PRIVATELABELING.USEOFLOGO' | translate }}</p>
<cnsl-info-section *ngIf="view !== View.CURRENT" class="max-size-desc">
{{ 'POLICY.PRIVATELABELING.MAXSIZE' | translate }}
</cnsl-info-section>
<cnsl-info-section *ngIf="view !== View.CURRENT" class="max-size-desc">
{{ 'POLICY.PRIVATELABELING.EMAILNOSVG' | translate }}
</cnsl-info-section>
<div class="logo-view" [attr.data-e2e]="'image-part-logo'">
<span class="label cnsl-secondary-text">Logo</span>
<div class="img-wrapper">
<ng-container
*ngIf="
view === View.PREVIEW
? theme === Theme.DARK
? previewData.logoUrlDark
: previewData.logoUrl
: theme === Theme.DARK
? data.logoUrlDark
: data.logoUrl as logoSrc;
else addLogoButton
"
>
<img [src]="logoSrc" alt="logo" />
<button
class="dl-btn"
mat-icon-button
color="warn"
(click)="deleteAsset(AssetType.LOGO, theme)"
[disabled]="view === View.CURRENT"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
>
<i class="las la-ban"></i>
</button>
</ng-container>
<ng-template #addLogoButton>
<input
#selectedFontFile
#selectedFile
style="display: none"
class="file-input"
type="file"
(change)="onDropFont($any($event.target).files)"
(change)="onDropLogo(theme, $any($event.target).files)"
/>
<a
class="btn"
<button
mat-icon-button
*ngIf="view !== View.CURRENT"
(click)="selectedFontFile.click()"
matTooltip="{{ 'POLICY.PRIVATELABELING.BTN' | translate }}"
*ngIf="view !== View.CURRENT"
(click)="$event.preventDefault(); selectedFile.click()"
>
<mat-icon>add</mat-icon>
</a>
</div>
</ng-template>
</button>
</ng-template>
</div>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-universal-access"></i>
{{ 'POLICY.PRIVATELABELING.ADVANCEDBEHAVIOR' | translate }}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="adv-container" *ngIf="previewData">
<mat-slide-toggle
class="toggle"
color="primary"
ngDefaultControl
[disabled]="view === View.CURRENT"
[(ngModel)]="view === View.CURRENT ? data.hideLoginNameSuffix : previewData.hideLoginNameSuffix"
(change)="savePolicy()"
>
{{ 'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate }}
</mat-slide-toggle>
<mat-slide-toggle
class="toggle"
color="primary"
ngDefaultControl
[disabled]="view === View.CURRENT"
[(ngModel)]="view === View.CURRENT ? data.disableWatermark : previewData.disableWatermark"
(change)="savePolicy()"
>
{{ 'POLICY.DATA.DISABLEWATERMARK' | translate }}
</mat-slide-toggle>
<div class="logo-view" [attr.data-e2e]="'image-part-icon'">
<span class="label cnsl-secondary-text">Icon</span>
<div class="img-wrapper icon">
<ng-container
*ngIf="
view === View.PREVIEW
? theme === Theme.DARK
? previewData.iconUrlDark
: previewData.iconUrl
: theme === Theme.DARK
? data.iconUrlDark
: data.iconUrl as iconSrc;
else addIconButton
"
>
<img [src]="iconSrc" alt="icon" />
<button
class="dl-btn"
mat-icon-button
color="warn"
(click)="deleteAsset(AssetType.ICON, theme)"
[disabled]="view === View.CURRENT"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
>
<i class="las la-ban"></i>
</button>
</ng-container>
<ng-template #addIconButton>
<input
#selectedIconFile
style="display: none"
class="file-input"
type="file"
(change)="onDropIcon(theme, $any($event.target).files)"
/>
<button
mat-icon-button
matTooltip="{{ 'POLICY.PRIVATELABELING.BTN' | translate }}"
*ngIf="view !== View.CURRENT"
(click)="$event.preventDefault(); selectedIconFile.click()"
>
<mat-icon>add</mat-icon>
</button>
</ng-template>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="vertical-divider"></div>
<div class="preview-wrapper">
<div class="col">
<cnsl-preview
[refresh]="refreshPreview"
[theme]="theme"
class="preview"
[policy]="view === View.PREVIEW ? previewData : data"
>
</cnsl-preview>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-palette"></i>
<span>{{ 'POLICY.PRIVATELABELING.COLORS' | translate }}</span>
<span class="space"></span>
<small class="cnsl-secondary-text" *ngIf="theme === Theme.DARK"
>({{ 'POLICY.PRIVATELABELING.DARK' | translate }})</small
>
<small class="cnsl-secondary-text" *ngIf="theme === Theme.LIGHT"
>({{ 'POLICY.PRIVATELABELING.LIGHT' | translate }})</small
>
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngIf="theme === Theme.DARK">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.BACKGROUNDDARK"
(previewChanged)="previewData.backgroundColorDark = $event; savePolicy()"
name="Background Color"
[color]="data.backgroundColorDark"
[previewColor]="previewData.backgroundColorDark"
></cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.PRIMARY"
(previewChanged)="previewData.primaryColorDark = $event; savePolicy()"
name="Primary Color"
[color]="data.primaryColorDark"
[previewColor]="previewData.primaryColorDark"
>
</cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.WARN"
(previewChanged)="previewData.warnColorDark = $event; savePolicy()"
name="Warn Color"
[color]="data.warnColorDark"
[previewColor]="previewData.warnColorDark"
>
</cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.FONTDARK"
(previewChanged)="previewData.fontColorDark = $event; savePolicy()"
name="Font Color"
[color]="data.fontColorDark"
[previewColor]="previewData.fontColorDark"
>
</cnsl-color>
</div>
</div>
</ng-container>
<ng-container *ngIf="theme === Theme.LIGHT">
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.BACKGROUNDLIGHT"
(previewChanged)="previewData.backgroundColor = $event; savePolicy()"
name="Background Color"
[color]="data.backgroundColor"
[previewColor]="previewData.backgroundColor"
></cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.PRIMARY"
(previewChanged)="previewData.primaryColor = $event; savePolicy()"
name="Primary Color"
[color]="data.primaryColor"
[previewColor]="previewData.primaryColor"
>
</cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.WARN"
name="Warn Color"
(previewChanged)="previewData.warnColor = $event; savePolicy()"
[color]="data.warnColor"
[previewColor]="previewData.warnColor"
></cnsl-color>
</div>
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[colorType]="ColorType.FONTLIGHT"
(previewChanged)="previewData.fontColor = $event; savePolicy()"
name="Font Color"
[color]="data.fontColor"
[previewColor]="previewData.fontColor"
></cnsl-color>
</div>
</div>
</ng-container>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header class="header" [attr.data-e2e]="'policy-category'">
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-font"></i>
{{ 'POLICY.PRIVATELABELING.FONT' | translate }}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="fonts">
<cnsl-info-section class="info-section"
>{{ 'POLICY.PRIVATELABELING.FONTINLOGINONLY' | translate }}
</cnsl-info-section>
<div class="font-preview" *ngIf="previewData.fontUrl; else addFontButton">
<mat-icon class="icon">text_fields</mat-icon>
<span class="fill-space"></span>
<button
class="dl-btn"
[disabled]="view === View.CURRENT"
mat-icon-button
color="warn"
(click)="deleteFont()"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
>
<i class="las la-ban"></i>
</button>
</div>
<ng-template #addFontButton>
<div
class="font-add"
cnslDropzone
(hovered)="toggleHoverFont($event)"
(dropped)="onDropFont($event)"
[class.hovering]="isHoveringOverFont"
>
<input
#selectedFontFile
style="display: none"
class="file-input"
type="file"
(change)="onDropFont($any($event.target).files)"
/>
<a
class="btn"
mat-icon-button
*ngIf="view !== View.CURRENT"
(click)="selectedFontFile.click()"
matTooltip="{{ 'POLICY.PRIVATELABELING.BTN' | translate }}"
>
<mat-icon>add</mat-icon>
</a>
</div>
</ng-template>
</div>
</mat-expansion-panel>
<mat-expansion-panel class="expansion">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="panel-title">
<i class="icon las la-universal-access"></i>
{{ 'POLICY.PRIVATELABELING.ADVANCEDBEHAVIOR' | translate }}
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="adv-container" *ngIf="previewData">
<mat-slide-toggle
class="toggle"
color="primary"
ngDefaultControl
[disabled]="view === View.CURRENT"
[(ngModel)]="view === View.CURRENT ? data.hideLoginNameSuffix : previewData.hideLoginNameSuffix"
(change)="savePolicy()"
>
{{ 'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate }}
</mat-slide-toggle>
<mat-slide-toggle
class="toggle"
color="primary"
ngDefaultControl
[disabled]="view === View.CURRENT"
[(ngModel)]="view === View.CURRENT ? data.disableWatermark : previewData.disableWatermark"
(change)="savePolicy()"
>
{{ 'POLICY.DATA.DISABLEWATERMARK' | translate }}
</mat-slide-toggle>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="vertical-divider"></div>
<div class="preview-wrapper">
<div class="col">
<cnsl-preview
[refresh]="refreshPreview"
[theme]="theme"
class="preview"
[policy]="view === View.PREVIEW ? previewData : data"
>
</cnsl-preview>
</div>
</div>
<cnsl-policy-grid class="grid" [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="text">
</cnsl-policy-grid>
</div>
</cnsl-detail-layout>
</div>

17
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
View File

@ -1,10 +1,5 @@
@use '@angular/material' as mat;
.policy-applied-to {
margin: -1rem 0 0 0;
font-size: 14px;
}
@mixin private-label-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat.get-color-from-palette($primary, 500);
@ -97,7 +92,6 @@
padding-top: 2rem;
display: flex;
flex-direction: column;
margin: 0 -1rem;
@media only screen and (min-width: 950px) {
flex-direction: row;
@ -109,12 +103,14 @@
min-width: 400px;
}
}
.settings {
margin-right: 1rem;
}
}
.settings {
flex: 1;
min-width: 350px;
margin: 0 1rem;
.expansion {
box-shadow: none;
@ -298,13 +294,16 @@
}
.preview-wrapper {
margin: 0 1rem;
flex: 2;
position: relative;
background-color: #00000010;
border: 1px solid $border-color;
box-sizing: border-box;
@media only screen and (min-width: 950px) {
margin-left: 1rem;
}
.col {
display: flex;
flex-direction: column;

79
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
View File

@ -1,8 +1,7 @@
import { HttpErrorResponse } from '@angular/common/http';
import { Component, EventEmitter, Injector, OnDestroy, OnInit, Type } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, EventEmitter, Injector, Input, OnDestroy, OnInit, Type } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';
import { takeUntil } from 'rxjs/operators';
import {
GetLabelPolicyResponse as AdminGetLabelPolicyResponse,
GetPreviewLabelPolicyResponse as AdminGetPreviewLabelPolicyResponse,
@ -18,15 +17,12 @@ import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service';
import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service';
import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
import { ThemeService } from 'src/app/services/theme.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { GridPolicy, PRIVATELABEL_POLICY } from '../../policy-grid/policies';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
export enum Theme {
@ -59,7 +55,7 @@ const MAX_ALLOWED_SIZE = 0.5 * 1024 * 1024;
export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
public theme: Theme = Theme.LIGHT;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public service!: ManagementService | AdminService;
public previewData!: LabelPolicy.AsObject;
@ -84,66 +80,17 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
public refreshPreview: EventEmitter<void> = new EventEmitter();
public org!: Org.AsObject;
public currentPolicy: GridPolicy = PRIVATELABEL_POLICY;
public InfoSectionType: any = InfoSectionType;
private destroy$: Subject<void> = new Subject();
public view: View = View.PREVIEW;
constructor(
private authService: GrpcAuthService,
private route: ActivatedRoute,
private toast: ToastService,
private injector: Injector,
private assetService: AssetService,
private storageService: StorageService,
private themeService: ThemeService,
breadcrumbService: BreadcrumbService,
) {
this.route.data
.pipe(
takeUntil(this.destroy$),
switchMap((data) => {
this.serviceType = data.serviceType;
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
const org: Org.AsObject | null = this.storageService.getItem(StorageKey.organization, StorageLocation.session);
if (org) {
this.org = org;
}
const iambread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
const bread: Breadcrumb = {
type: BreadcrumbType.ORG,
routerLink: ['/org'],
};
breadcrumbService.setBreadcrumb([iambread, bread]);
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
const iamBread = new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'System',
routerLink: ['/system'],
});
breadcrumbService.setBreadcrumb([iamBread]);
break;
}
return this.route.params;
}),
)
.subscribe(() => {
this.fetchData();
});
}
) {}
public toggleHoverLogo(theme: Theme, isHovering: boolean): void {
if (theme === Theme.DARK) {
@ -194,6 +141,24 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
this.theme = Theme.LIGHT;
}
});
switch (this.serviceType) {
case PolicyComponentServiceType.MGMT:
this.service = this.injector.get(ManagementService as Type<ManagementService>);
const org: Org.AsObject | null = this.storageService.getItem(StorageKey.organization, StorageLocation.session);
if (org) {
this.org = org;
}
break;
case PolicyComponentServiceType.ADMIN:
this.service = this.injector.get(AdminService as Type<AdminService>);
break;
}
this.fetchData();
}
public onDropFont(filelist: FileList | null): Promise<any> | void {

5
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.module.ts
View File

@ -14,10 +14,10 @@ import { ColorChromeModule } from 'ngx-color/chrome';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DropzoneModule } from '../../../directives/dropzone/dropzone.module';
import { CardModule } from '../../card/card.module';
import { DetailLayoutModule } from '../../detail-layout/detail-layout.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { InputModule } from '../../input/input.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
import { ColorComponent } from './color/color.component';
import { PreviewComponent } from './preview/preview.component';
import { PrivateLabelingPolicyRoutingModule } from './private-labeling-policy-routing.module';
@ -34,6 +34,7 @@ import { PrivateLabelingPolicyComponent } from './private-labeling-policy.compon
MatButtonModule,
MatButtonToggleModule,
OverlayModule,
CardModule,
MatIconModule,
HasRoleModule,
MatSlideToggleModule,
@ -42,9 +43,9 @@ import { PrivateLabelingPolicyComponent } from './private-labeling-policy.compon
DetailLayoutModule,
DropzoneModule,
MatProgressSpinnerModule,
PolicyGridModule,
MatExpansionModule,
InfoSectionModule,
],
exports: [PrivateLabelingPolicyComponent],
})
export class PrivateLabelingPolicyModule {}

121
console/src/app/modules/policy-grid/policies.ts
View File

@ -1,121 +0,0 @@
import { PolicyComponentType } from '../policies/policy-component-types.enum';
export interface GridPolicy {
i18nTitle: string;
i18nDesc: string;
iamRouterLink: any;
orgRouterLink: any;
iamWithRole: string[];
orgWithRole: string[];
tags: string[];
icon?: string;
svgIcon?: string;
color: string;
}
export const COMPLEXITY_POLICY: GridPolicy = {
i18nTitle: 'POLICY.PWD_COMPLEXITY.TITLE',
i18nDesc: 'POLICY.PWD_COMPLEXITY.DESCRIPTION',
iamRouterLink: ['/system', 'policy', PolicyComponentType.COMPLEXITY],
orgRouterLink: ['/org', 'policy', PolicyComponentType.COMPLEXITY],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
tags: ['login', 'security'],
svgIcon: 'mdi_textbox_password',
color: 'yellow',
};
export const LOCKOUT_POLICY: GridPolicy = {
i18nTitle: 'POLICY.PWD_LOCKOUT.TITLE',
i18nDesc: 'POLICY.PWD_LOCKOUT.DESCRIPTION',
iamRouterLink: ['/system', 'policy', PolicyComponentType.LOCKOUT],
orgRouterLink: ['/org', 'policy', PolicyComponentType.LOCKOUT],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
tags: ['login', 'security'],
icon: 'las la-lock',
color: 'yellow',
};
export const IAM_POLICY = {
i18nTitle: 'POLICY.IAM_POLICY.TITLE',
i18nDesc: 'POLICY.IAM_POLICY.DESCRIPTION',
iamRouterLink: ['/system', 'policy', PolicyComponentType.IAM],
orgRouterLink: ['/org', 'policy', PolicyComponentType.IAM],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['iam.policy.read'],
tags: ['login'],
icon: 'las la-sign-in-alt',
color: 'purple',
};
export const LOGIN_POLICY = {
i18nTitle: 'POLICY.LOGIN_POLICY.TITLE',
i18nDesc: 'POLICY.LOGIN_POLICY.DESCRIPTION',
iamRouterLink: ['/system', 'policy', PolicyComponentType.LOGIN],
orgRouterLink: ['/org', 'policy', PolicyComponentType.LOGIN],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
tags: ['login', 'security'],
icon: 'las la-sign-in-alt',
color: 'green',
};
export const PRIVATELABEL_POLICY = {
i18nTitle: 'POLICY.PRIVATELABELING.TITLE',
i18nDesc: 'POLICY.PRIVATELABELING.DESCRIPTION',
iamRouterLink: ['/system', 'policy', PolicyComponentType.PRIVATELABEL],
orgRouterLink: ['/org', 'policy', PolicyComponentType.PRIVATELABEL],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
tags: ['login', 'appearance'],
icon: 'las la-swatchbook',
color: 'blue',
};
export const PRIVACY_POLICY = {
i18nTitle: 'POLICY.PRIVACY_POLICY.TITLE',
i18nDesc: 'POLICY.PRIVACY_POLICY.DESCRIPTION',
iamRouterLink: ['/system', 'policy', PolicyComponentType.PRIVACYPOLICY],
orgRouterLink: ['/org', 'policy', PolicyComponentType.PRIVACYPOLICY],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
tags: ['documents', 'text'],
icon: 'las la-file-contract',
color: 'black',
};
export const MESSAGE_TEXTS_POLICY = {
i18nTitle: 'POLICY.MESSAGE_TEXTS.TITLE',
i18nDesc: 'POLICY.MESSAGE_TEXTS.DESCRIPTION',
iamRouterLink: ['/system', 'policy', PolicyComponentType.MESSAGETEXTS],
orgRouterLink: ['/org', 'policy', PolicyComponentType.MESSAGETEXTS],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
tags: ['appearance', 'text'],
icon: 'las la-paragraph',
color: 'red',
};
export const LOGIN_TEXTS_POLICY = {
i18nTitle: 'POLICY.LOGIN_TEXTS.TITLE',
i18nDesc: 'POLICY.LOGIN_TEXTS.DESCRIPTION_SHORT',
iamRouterLink: ['/system', 'policy', PolicyComponentType.LOGINTEXTS],
orgRouterLink: ['/org', 'policy', PolicyComponentType.LOGINTEXTS],
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
tags: ['appearance', 'text'],
icon: 'las la-paragraph',
color: 'red',
};
export const POLICIES: GridPolicy[] = [
COMPLEXITY_POLICY,
LOCKOUT_POLICY,
IAM_POLICY,
LOGIN_POLICY,
PRIVATELABEL_POLICY,
PRIVACY_POLICY,
MESSAGE_TEXTS_POLICY,
LOGIN_TEXTS_POLICY,
];

41
console/src/app/modules/policy-grid/policy-grid.component.html
View File

@ -1,41 +0,0 @@
<h2>{{'POLICY.TITLE' | translate}}</h2>
<p class="top-desc cnsl-secondary-text">{{'POLICY.DESCRIPTION' | translate}}</p>
<div class="tags" *ngIf="tags">
<span class="tag" [ngClass]="{'active': tag === tagForFilter}"
(click)="tagForFilter !== tag ? tagForFilter = tag : tagForFilter = ''" *ngFor="let tag of tags"><i
class="las la-hashtag"></i>{{tag}}</span>
</div>
<div class="row-lyt">
<ng-container *ngFor="let policy of filteredPolicies">
<ng-template cnslHasRole
[hasRole]="type === PolicyComponentServiceType.ADMIN ? policy.iamWithRole : type === PolicyComponentServiceType.MGMT ? policy.orgWithRole : []">
<div class="p-item card" @policy [attr.data-e2e]="'policy-card'">
<div class="avatar {{policy.color}}">
<mat-icon *ngIf="policy.svgIcon" class="mat-icon" [svgIcon]="policy.svgIcon"></mat-icon>
<i *ngIf="policy.icon" class="icon {{policy.icon}}"></i>
</div>
<div class="title">
<span>{{policy.i18nTitle | translate}}</span>
</div>
<p class="desc cnsl-secondary-text">
{{policy.i18nDesc | translate}}</p>
<span class="fill-space"></span>
<div class="tags" *ngIf="policy.tags">
<span class="tag cnsl-secondary-text" *ngFor="let tag of policy.tags"
(click)="tagForFilter !== tag ? tagForFilter = tag : tagForFilter = ''"><i
class="las la-hashtag"></i>{{tag}}</span>
</div>
<div class="btn-wrapper">
<button
[routerLink]="type === PolicyComponentServiceType.ADMIN ? policy.iamRouterLink : type === PolicyComponentServiceType.MGMT ? policy.orgRouterLink : null"
mat-stroked-button>{{'POLICY.BTN_EDIT' | translate}}</button>
</div>
</div>
</ng-template>
</ng-container>
</div>

25
console/src/app/modules/policy-grid/policy-grid.component.spec.ts
View File

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

56
console/src/app/modules/policy-grid/policy-grid.component.ts
View File

@ -1,56 +0,0 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
import { PolicyComponentServiceType, PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
import { GridPolicy, POLICIES } from './policies';
@Component({
selector: 'cnsl-policy-grid',
templateUrl: './policy-grid.component.html',
styleUrls: ['./policy-grid.component.scss'],
animations: [
trigger('policy', [
transition(':enter', [
style({
opacity: 0.5,
}),
animate(
'.15s ease-in-out',
style({
opacity: 1,
}),
),
]),
transition(':leave', [
style({
opacity: 1,
}),
animate(
'.15s ease-in-out',
style({
opacity: 0.5,
}),
),
]),
]),
],
})
export class PolicyGridComponent {
@Input() public type!: PolicyComponentServiceType;
@Input() public tag: string = '';
public PolicyComponentType: any = PolicyComponentType;
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public POLICIES: GridPolicy[] = POLICIES;
public tags: Set<string> = new Set(POLICIES.map((p) => p.tags).flat());
@Input() public tagForFilter: string = '';
@Input() public currentPolicy!: GridPolicy;
public get filteredPolicies(): GridPolicy[] {
if (this.tagForFilter) {
return POLICIES.filter((p) => p !== this.currentPolicy && p.tags.includes(this.tagForFilter));
} else {
return POLICIES.filter((p) => p !== this.currentPolicy);
}
}
}

5
console/src/app/modules/project-members/project-members.component.ts
View File

@ -71,11 +71,6 @@ export class ProjectMembersComponent {
this.mgmtService.getIAM().then((iam) => {
const isZitadel = iam.iamProjectId === (this.project as Project.AsObject).id;
const breadcrumbs = [
new Breadcrumb({
type: BreadcrumbType.IAM,
name: 'IAM',
routerLink: ['/system'],
}),
new Breadcrumb({
type: BreadcrumbType.ORG,
routerLink: ['/org'],

0
console/src/app/pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component.html → console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.html
View File

0
console/src/app/pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component.scss → console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.scss
View File

24
console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.spec.ts Normal file
View File

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

24
console/src/app/pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component.ts → console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.component.ts
View File

@ -5,18 +5,20 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'cnsl-project-role-detail',
templateUrl: './project-role-detail.component.html',
styleUrls: ['./project-role-detail.component.scss'],
selector: 'cnsl-project-role-detail-dialog',
templateUrl: './project-role-detail-dialog.component.html',
styleUrls: ['./project-role-detail-dialog.component.scss'],
})
export class ProjectRoleDetailComponent {
export class ProjectRoleDetailDialogComponent {
public projectId: string = '';
public formGroup!: FormGroup;
constructor(private mgmtService: ManagementService, private toast: ToastService,
public dialogRef: MatDialogRef<ProjectRoleDetailComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
constructor(
private mgmtService: ManagementService,
private toast: ToastService,
public dialogRef: MatDialogRef<ProjectRoleDetailDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) {
this.projectId = data.projectId;
this.formGroup = new FormGroup({
key: new FormControl({ value: '', disabled: true }, [Validators.required]),
@ -29,11 +31,13 @@ export class ProjectRoleDetailComponent {
submitForm(): void {
if (this.formGroup.valid && this.key?.value && this.group?.value && this.displayName?.value) {
this.mgmtService.updateProjectRole(this.projectId, this.key.value, this.displayName.value, this.group.value)
this.mgmtService
.updateProjectRole(this.projectId, this.key.value, this.displayName.value, this.group.value)
.then(() => {
this.toast.showInfo('PROJECT.TOAST.ROLECHANGED', true);
this.dialogRef.close(true);
}).catch(error => {
})
.catch((error) => {
this.toast.showError(error);
});
}

26
console/src/app/modules/project-role-detail-dialog/project-role-detail-dialog.module.ts Normal file
View File

@ -0,0 +1,26 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatRadioModule } from '@angular/material/radio';
import { TranslateModule } from '@ngx-translate/core';
import { InfoSectionModule } from '../info-section/info-section.module';
import { InputModule } from '../input/input.module';
import { ProjectRoleDetailDialogComponent } from './project-role-detail-dialog.component';
@NgModule({
declarations: [ProjectRoleDetailDialogComponent],
imports: [
CommonModule,
TranslateModule,
InputModule,
MatButtonModule,
FormsModule,
ReactiveFormsModule,
MatRadioModule,
InfoSectionModule,
],
exports: [ProjectRoleDetailDialogComponent],
})
export class ProjectRoleDetailDialogModule {}

6
console/src/app/modules/project-roles-table/project-roles-table.component.ts
View File

@ -7,10 +7,8 @@ import { Role } from 'src/app/proto/generated/zitadel/project_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectRoleDetailComponent,
} from '../../pages/projects/owned-projects/project-roles/project-role-detail/project-role-detail.component';
import { PaginatorComponent } from '../paginator/paginator.component';
import { ProjectRoleDetailDialogComponent } from '../project-role-detail-dialog/project-role-detail-dialog.component';
import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
import { ProjectRolesDataSource } from './project-roles-table-datasource';
@ -126,7 +124,7 @@ export class ProjectRolesTableComponent implements OnInit {
}
public openDetailDialog(role: Role.AsObject): void {
this.dialog.open(ProjectRoleDetailComponent, {
this.dialog.open(ProjectRoleDetailDialogComponent, {
data: {
role,
projectId: this.projectId,

2
console/src/app/modules/project-roles-table/project-roles-table.module.ts
View File

@ -21,6 +21,7 @@ import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/
import { ActionKeysModule } from '../action-keys/action-keys.module';
import { ProjectRoleChipModule } from '../project-role-chip/project-role-chip.module';
import { ProjectRoleDetailDialogModule } from '../project-role-detail-dialog/project-role-detail-dialog.module';
import { TableActionsModule } from '../table-actions/table-actions.module';
import { ProjectRolesTableComponent } from './project-roles-table.component';
@ -46,6 +47,7 @@ import { ProjectRolesTableComponent } from './project-roles-table.component';
HasRolePipeModule,
TranslateModule,
TableActionsModule,
ProjectRoleDetailDialogModule,
MatMenuModule,
TimestampToDatePipeModule,
RefreshTableModule,

92
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
View File

@ -3,26 +3,36 @@
<div class="found-user-row" *ngFor="let user of users; index as i">
<div class="circle">
<cnsl-avatar
*ngIf="user.human && user.human.profile && user.human.profile.displayName && user.human.profile.firstName && user.human.profile.lastName; else cog"
class="avatar" [name]="user.human.profile.displayName" [avatarUrl]="user.human.profile?.avatarUrl || ''"
[forColor]="user.preferredLoginName" [size]="32">
*ngIf="
user.human &&
user.human.profile &&
user.human.profile.displayName &&
user.human.profile.firstName &&
user.human.profile.lastName;
else cog
"
class="avatar"
[name]="user.human.profile.displayName"
[avatarUrl]="user.human.profile?.avatarUrl || ''"
[forColor]="user.preferredLoginName"
[size]="32"
>
</cnsl-avatar>
<ng-template #cog>
<cnsl-avatar class="avatar" [forColor]="user.preferredLoginName" [isMachine]="true" [size]="32">
</cnsl-avatar>
<cnsl-avatar class="avatar" [forColor]="user.preferredLoginName" [isMachine]="true" [size]="32"> </cnsl-avatar>
</ng-template>
</div>
<div class="user-name-column" *ngIf="user.human">
<span>{{user.human?.profile?.displayName}}</span>
<span class="smaller cnsl-secondary-text">{{user.preferredLoginName}}</span>
<span>{{ user.human?.profile?.displayName }}</span>
<span class="smaller cnsl-secondary-text">{{ user.preferredLoginName }}</span>
</div>
<div class="user-name-column" *ngIf="user.machine">
<span>{{user.machine.name}}</span>
<span class="smaller cnsl-secondary-text">{{user.preferredLoginName}}</span>
<span>{{ user.machine.name }}</span>
<span class="smaller cnsl-secondary-text">{{ user.preferredLoginName }}</span>
</div>
<span class="fill-space"></span>
<button class="search-user-dl-btn" matTooltip="{{'ACTIONS.REMOVE' | translate}}" mat-icon-button color="warn">
<button class="search-user-dl-btn" matTooltip="{{ 'ACTIONS.REMOVE' | translate }}" mat-icon-button color="warn">
<i class="las la-minus-circle" (click)="users.splice(i, 1)"></i>
</button>
</div>
@ -37,13 +47,26 @@
<ng-container *ngIf="target && target === UserTarget.SELF">
<div class="line">
<cnsl-form-field class="user-create-form-field more-space">
<cnsl-label>{{'USER.SEARCH.ADDITIONAL' | translate}}</cnsl-label>
<cnsl-label>{{ 'USER.SEARCH.ADDITIONAL' | translate }}</cnsl-label>
<input cnslInput *ngIf="singleOutput" type="text" placeholder="Search for the user loginname" #usernameInput
[formControl]="myControl" [matAutocomplete]="auto" />
<input
cnslInput
*ngIf="singleOutput"
type="text"
placeholder="Search for the user loginname"
#usernameInput
[formControl]="myControl"
[matAutocomplete]="auto"
/>
<input *ngIf="!singleOutput" cnslInput #usernameInput [formControl]="myControl" placeholder="John Doe"
[matAutocomplete]="auto" />
<input
*ngIf="!singleOutput"
cnslInput
#usernameInput
[formControl]="myControl"
placeholder="johndoe@domain.com"
[matAutocomplete]="auto"
/>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
<mat-option *ngIf="isLoading" class="is-loading">
@ -53,9 +76,20 @@
<div class="user-option">
<div class="circle">
<cnsl-avatar
*ngIf="user.human && user.human.profile && user.human.profile.displayName && user.human.profile.firstName && user.human.profile.lastName; else cog"
class="avatar" [name]="user.human.profile.displayName"
[avatarUrl]="user.human.profile?.avatarUrl || ''" [forColor]="user.preferredLoginName" [size]="32">
*ngIf="
user.human &&
user.human.profile &&
user.human.profile.displayName &&
user.human.profile.firstName &&
user.human.profile.lastName;
else cog
"
class="avatar"
[name]="user.human.profile.displayName"
[avatarUrl]="user.human.profile?.avatarUrl || ''"
[forColor]="user.preferredLoginName"
[size]="32"
>
</cnsl-avatar>
<ng-template #cog>
<cnsl-avatar class="avatar" [forColor]="user.preferredLoginName" [isMachine]="true" [size]="32">
@ -63,19 +97,21 @@
</ng-template>
</div>
<div class="user-option-column">
<span>{{(user.human && user.human.profile && user.human.profile.displayName) ?
user.human.profile.displayName :
user.machine?.name}}</span>
<span>{{
user.human && user.human.profile && user.human.profile.displayName
? user.human.profile.displayName
: user.machine?.name
}}</span>
<span class="fill-space"></span>
<span class="smaller cnsl-secondary-text">{{user.preferredLoginName}}</span>
<span class="smaller cnsl-secondary-text">{{ user.preferredLoginName }}</span>
</div>
</div>
</mat-option>
</mat-autocomplete>
<span class="target-desc">
{{'USER.TARGET.SELF'| translate}}
<a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
{{ 'USER.TARGET.SELF' | translate }}
<a (click)="changeTarget()">{{ 'USER.TARGET.CLICKHERE' | translate }}</a>
</span>
</cnsl-form-field>
</div>
@ -84,11 +120,11 @@
<ng-container *ngIf="target && target === UserTarget.EXTERNAL">
<div class="line">
<cnsl-form-field class="user-create-form-field more-space">
<cnsl-label>{{'USER.SEARCH.ADDITIONAL-EXTERNAL' | translate}}</cnsl-label>
<cnsl-label>{{ 'USER.SEARCH.ADDITIONAL-EXTERNAL' | translate }}</cnsl-label>
<input cnslInput type="text" [formControl]="globalLoginNameControl" placeholder="example@externaldomain.com" />
<span class="target-desc">
{{(target === UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate}}
<a (click)="changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
{{ (target === UserTarget.SELF ? 'USER.TARGET.SELF' : 'USER.TARGET.EXTERNAL') | translate }}
<a (click)="changeTarget()">{{ 'USER.TARGET.CLICKHERE' | translate }}</a>
</span>
</cnsl-form-field>
@ -97,4 +133,4 @@
</button>
</div>
</ng-container>
</form>
</form>

28
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
View File

@ -1,14 +1,14 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import {
AfterContentChecked,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
ViewChild,
AfterContentChecked,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
ViewChild,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@ -17,7 +17,7 @@ import { from, of, Subject } from 'rxjs';
import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
import { ListUsersResponse } from 'src/app/proto/generated/zitadel/management_pb';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
import { DisplayNameQuery, SearchQuery, User } from 'src/app/proto/generated/zitadel/user_pb';
import { SearchQuery, User, UserNameQuery } from 'src/app/proto/generated/zitadel/user_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@ -78,11 +78,11 @@ export class SearchUserAutocompleteComponent implements OnInit, AfterContentChec
switchMap((value) => {
const query = new SearchQuery();
const dnQuery = new DisplayNameQuery();
dnQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
dnQuery.setDisplayName(value);
const unQuery = new UserNameQuery();
unQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
unQuery.setUserName(value);
query.setDisplayNameQuery(dnQuery);
query.setUserNameQuery(unQuery);
if (this.target === UserTarget.SELF) {
return from(this.userService.listUsers(10, 0, [query]));

62
console/src/app/modules/settings-grid/settinglinks.ts Normal file
View File

@ -0,0 +1,62 @@
export interface SettingLinks {
i18nTitle: string;
i18nDesc: string;
iamRouterLink: any;
orgRouterLink: any;
queryParams: any;
iamWithRole: string[];
orgWithRole: string[];
icon?: string;
svgIcon?: string;
color: string;
}
export const LOGIN_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.LOGIN',
i18nDesc: 'POLICY.LOGIN_POLICY.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'login' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-sign-in-alt',
color: 'green',
};
export const APPEARANCE_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.APPEARANCE',
i18nDesc: 'POLICY.PRIVATELABELING.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'branding' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-swatchbook',
color: 'blue',
};
export const PRIVACY_POLICY: SettingLinks = {
i18nTitle: 'SETTINGS.LIST.PRIVACYPOLICY',
i18nDesc: 'POLICY.PRIVACY_POLICY.DESCRIPTION',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'privacypolicy' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-file-contract',
color: 'black',
};
export const NOTIFICATION_GROUP: SettingLinks = {
i18nTitle: 'SETTINGS.GROUPS.NOTIFICATIONS',
i18nDesc: '',
iamRouterLink: ['/settings'],
orgRouterLink: ['/org-settings'],
queryParams: { id: 'notifications' },
iamWithRole: ['iam.policy.read'],
orgWithRole: ['policy.read'],
icon: 'las la-bell',
color: 'red',
};
export const SETTINGLINKS: SettingLinks[] = [LOGIN_GROUP, APPEARANCE_GROUP, PRIVACY_POLICY, NOTIFICATION_GROUP];

50
console/src/app/modules/settings-grid/settings-grid.component.html Normal file
View File

@ -0,0 +1,50 @@
<h2>{{ 'POLICY.TITLE' | translate }}</h2>
<p class="top-desc cnsl-secondary-text">{{ 'POLICY.DESCRIPTION' | translate }}</p>
<div class="row-lyt" [ngClass]="{ more: type === PolicyComponentServiceType.ADMIN }">
<ng-container *ngFor="let setting of SETTINGS">
<ng-template
cnslHasRole
[hasRole]="
type === PolicyComponentServiceType.ADMIN
? setting.iamWithRole
: type === PolicyComponentServiceType.MGMT
? setting.orgWithRole
: []
"
>
<div class="p-item card" @policy [attr.data-e2e]="'policy-card'">
<div class="avatar {{ setting.color }}">
<mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon>
<i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i>
</div>
<div class="title">
<span>{{ setting.i18nTitle | translate }}</span>
</div>
<p class="desc cnsl-secondary-text">
{{ setting.i18nDesc ? (setting.i18nDesc | translate) : '' }}
</p>
<span class="fill-space"></span>
<div class="btn-wrapper">
<a
[routerLink]="
type === PolicyComponentServiceType.ADMIN
? setting.iamRouterLink
: type === PolicyComponentServiceType.MGMT
? setting.orgRouterLink
: null
"
[queryParams]="setting.queryParams"
mat-stroked-button
>
{{ 'POLICY.BTN_EDIT' | translate }}
</a>
</div>
</div>
</ng-template>
</ng-container>
</div>

48
console/src/app/modules/policy-grid/policy-grid.component.scss → console/src/app/modules/settings-grid/settings-grid.component.scss
View File

@ -9,28 +9,10 @@ h2 {
font-size: 14px;
}
.tags {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -0.5rem 1rem -0.5rem;
.tag {
display: flex;
align-items: center;
margin: 0 0.5rem;
cursor: pointer;
&:hover,
&.active {
color: var(--color-main);
}
}
}
.row-lyt {
margin: 0;
display: grid;
margin-top: 1.5rem;
row-gap: 1rem;
column-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
@ -39,10 +21,26 @@ h2 {
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 450px) {
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
&.more {
grid-template-columns: 1fr 1fr 1fr 1fr;
@media only screen and (max-width: 1300px) {
grid-template-columns: 1fr 1fr 1fr;
}
@media only screen and (max-width: 850px) {
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
}
.p-item {
display: flex;
flex-direction: column;
@ -137,16 +135,6 @@ h2 {
flex: 1;
}
.tags {
.tag {
font-size: 13px;
i {
font-size: 18px;
}
}
}
.btn-wrapper {
display: flex;
}

24
console/src/app/modules/settings-grid/settings-grid.component.spec.ts Normal file
View File

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

43
console/src/app/modules/settings-grid/settings-grid.component.ts Normal file
View File

@ -0,0 +1,43 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, Input } from '@angular/core';
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
import { SETTINGLINKS, SettingLinks } from './settinglinks';
@Component({
selector: 'cnsl-settings-grid',
templateUrl: './settings-grid.component.html',
styleUrls: ['./settings-grid.component.scss'],
animations: [
trigger('policy', [
transition(':enter', [
style({
opacity: 0.5,
}),
animate(
'.15s ease-in-out',
style({
opacity: 1,
}),
),
]),
transition(':leave', [
style({
opacity: 1,
}),
animate(
'.15s ease-in-out',
style({
opacity: 0.5,
}),
),
]),
]),
],
})
export class SettingsGridComponent {
@Input() public type!: PolicyComponentServiceType;
@Input() public tag: string = '';
public PolicyComponentServiceType: any = PolicyComponentServiceType;
public SETTINGS: SettingLinks[] = SETTINGLINKS;
}

8
console/src/app/modules/policy-grid/policy-grid.module.ts → console/src/app/modules/settings-grid/settings-grid.module.ts
View File

@ -9,10 +9,10 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.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';
import { SettingsGridComponent } from './settings-grid.component';
@NgModule({
declarations: [PolicyGridComponent],
declarations: [SettingsGridComponent],
imports: [
CommonModule,
HasRolePipeModule,
@ -24,6 +24,6 @@ import { PolicyGridComponent } from './policy-grid.component';
MatTooltipModule,
InfoSectionModule,
],
exports: [PolicyGridComponent],
exports: [SettingsGridComponent],
})
export class PolicyGridModule {}
export class SettingsGridModule {}

37
console/src/app/modules/settings-list/settings-list.component.html Normal file
View File

@ -0,0 +1,37 @@
<cnsl-sidenav
[title]="title"
[description]="description"
[indented]="true"
[(ngModel)]="currentSetting"
[settingsList]="settingsList"
queryParam="id"
>
<ng-container *ngIf="currentSetting === 'general' && serviceType === PolicyComponentServiceType.ADMIN">
<cnsl-general-settings [serviceType]="serviceType"></cnsl-general-settings>
</ng-container>
<ng-container *ngIf="currentSetting === 'complexity'">
<cnsl-password-complexity-policy [serviceType]="serviceType"></cnsl-password-complexity-policy>
</ng-container>
<ng-container *ngIf="currentSetting === 'lockout'">
<cnsl-password-lockout-policy [serviceType]="serviceType"></cnsl-password-lockout-policy>
</ng-container>
<ng-container *ngIf="currentSetting === 'login'">
<!-- <cnsl-org-iam-policy [serviceType]="serviceType"></cnsl-org-iam-policy> -->
<cnsl-login-policy [serviceType]="serviceType"></cnsl-login-policy>
</ng-container>
<ng-container *ngIf="currentSetting === 'idp'">
<cnsl-idp-settings [serviceType]="serviceType"></cnsl-idp-settings>
</ng-container>
<ng-container *ngIf="currentSetting === 'branding'">
<cnsl-private-labeling-policy [serviceType]="serviceType"></cnsl-private-labeling-policy>
</ng-container>
<ng-container *ngIf="currentSetting === 'messagetexts'">
<cnsl-message-texts [serviceType]="serviceType"></cnsl-message-texts>
</ng-container>
<ng-container *ngIf="currentSetting === 'logintexts'">
<cnsl-login-texts [serviceType]="serviceType"></cnsl-login-texts>
</ng-container>
<ng-container *ngIf="currentSetting === 'privacypolicy'">
<cnsl-privacy-policy [serviceType]="PolicyComponentServiceType.ADMIN"></cnsl-privacy-policy>
</ng-container>
</cnsl-sidenav>

3
console/src/app/modules/settings-list/settings-list.component.scss Normal file
View File

@ -0,0 +1,3 @@
.divider {
margin: 2rem 0;
}

25
console/src/app/modules/settings-list/settings-list.component.spec.ts Normal file
View File

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

31
console/src/app/modules/settings-list/settings-list.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
import { SidenavSetting } from '../sidenav/sidenav.component';
@Component({
selector: 'cnsl-settings-list',
templateUrl: './settings-list.component.html',
styleUrls: ['./settings-list.component.scss'],
})
export class SettingsListComponent implements OnChanges {
@Input() public title: string = '';
@Input() public description: string = '';
@Input() public serviceType!: PolicyComponentServiceType;
@Input() public selectedId: string = '';
@Input() public settingsList: SidenavSetting[] = [];
public currentSetting: string | undefined = '';
public PolicyComponentServiceType: any = PolicyComponentServiceType;
constructor() {}
ngOnChanges(changes: SimpleChanges): void {
if (changes.selectedId?.currentValue) {
this.currentSetting =
this.settingsList && this.settingsList.find((l) => l.id === changes.selectedId.currentValue)
? changes.selectedId.currentValue
: '';
} else {
this.currentSetting = this.settingsList ? this.settingsList[0].id : '';
}
}
}

43
console/src/app/modules/settings-list/settings-list.module.ts Normal file
View File

@ -0,0 +1,43 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../card/card.module';
import { GeneralSettingsModule } from '../policies/general-settings/general-settings.module';
import { IdpSettingsModule } from '../policies/idp-settings/idp-settings.module';
import { LoginPolicyModule } from '../policies/login-policy/login-policy.module';
import { LoginTextsPolicyModule } from '../policies/login-texts/login-texts.module';
import { MessageTextsPolicyModule } from '../policies/message-texts/message-texts.module';
import { OrgIamPolicyModule } from '../policies/org-iam-policy/org-iam-policy.module';
import { PasswordComplexityPolicyModule } from '../policies/password-complexity-policy/password-complexity-policy.module';
import { PasswordLockoutPolicyModule } from '../policies/password-lockout-policy/password-lockout-policy.module';
import { PrivacyPolicyModule } from '../policies/privacy-policy/privacy-policy.module';
import { PrivateLabelingPolicyModule } from '../policies/private-labeling-policy/private-labeling-policy.module';
import { SidenavModule } from '../sidenav/sidenav.module';
import { SettingsListComponent } from './settings-list.component';
@NgModule({
declarations: [SettingsListComponent],
imports: [
CommonModule,
FormsModule,
SidenavModule,
LoginPolicyModule,
CardModule,
PasswordComplexityPolicyModule,
PasswordLockoutPolicyModule,
PrivateLabelingPolicyModule,
GeneralSettingsModule,
IdpSettingsModule,
PrivacyPolicyModule,
MessageTextsPolicyModule,
LoginTextsPolicyModule,
OrgIamPolicyModule,
TranslateModule,
HasRolePipeModule,
],
exports: [SettingsListComponent],
})
export class SettingsListModule {}

66
console/src/app/modules/settings-list/settings.ts Normal file
View File

@ -0,0 +1,66 @@
import { SidenavSetting } from '../sidenav/sidenav.component';
export const GENERAL: SidenavSetting = {
id: 'general',
i18nKey: 'SETTINGS.LIST.GENERAL',
};
export const LOGIN: SidenavSetting = {
id: 'login',
i18nKey: 'SETTINGS.LIST.LOGIN',
groupI18nKey: 'SETTINGS.GROUPS.LOGIN',
// requiredRoles: {
// [PolicyComponentServiceType.ADMIN]: true,
// [PolicyComponentServiceType.MGMT]: true,
// }
};
export const LOCKOUT: SidenavSetting = {
id: 'lockout',
i18nKey: 'SETTINGS.LIST.LOCKOUT',
groupI18nKey: 'SETTINGS.GROUPS.LOGIN',
};
export const COMPLEXITY: SidenavSetting = {
id: 'complexity',
i18nKey: 'SETTINGS.LIST.COMPLEXITY',
groupI18nKey: 'SETTINGS.GROUPS.LOGIN',
};
export const IDP: SidenavSetting = { id: 'idp', i18nKey: 'SETTINGS.LIST.IDP', groupI18nKey: 'SETTINGS.GROUPS.LOGIN' };
export const NOTIFICATIONPROVIDERS: SidenavSetting = {
id: 'notificationproviders',
i18nKey: 'SETTINGS.LIST.NOTIFICATIONPROVIDERS',
groupI18nKey: 'SETTINGS.GROUPS.NOTIFICATIONS',
};
export const NOTIFICATIONS: SidenavSetting = {
id: 'notifications',
i18nKey: 'SETTINGS.LIST.NOTIFICATIONS',
groupI18nKey: 'SETTINGS.GROUPS.NOTIFICATIONS',
};
export const MESSAGETEXTS: SidenavSetting = {
id: 'messagetexts',
i18nKey: 'SETTINGS.LIST.MESSAGETEXTS',
groupI18nKey: 'SETTINGS.GROUPS.APPEARANCE',
};
export const LOGINTEXTS: SidenavSetting = {
id: 'logintexts',
i18nKey: 'SETTINGS.LIST.LOGINTEXTS',
groupI18nKey: 'SETTINGS.GROUPS.APPEARANCE',
};
export const PRIVACYPOLICY: SidenavSetting = {
id: 'privacypolicy',
i18nKey: 'SETTINGS.LIST.PRIVACYPOLICY',
groupI18nKey: 'SETTINGS.GROUPS.OTHER',
};
export const BRANDING: SidenavSetting = {
id: 'branding',
i18nKey: 'SETTINGS.LIST.BRANDING',
groupI18nKey: 'SETTINGS.GROUPS.APPEARANCE',
};

8
console/src/app/modules/shortcuts/shortcuts.component.ts
View File

@ -7,7 +7,7 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ManagementService } from 'src/app/services/mgmt.service';
import { StorageLocation, StorageService } from 'src/app/services/storage.service';
import { POLICIES } from '../policy-grid/policies';
import { SETTINGLINKS } from '../settings-grid/settinglinks';
export interface ShortcutItem {
id: string;
@ -108,8 +108,8 @@ export class ShortcutsComponent implements OnDestroy {
const org: Org.AsObject | null = this.storageService.getItem('organization', StorageLocation.session);
if (org && org.id) {
this.org = org;
this.loadProjectShortcuts();
}
this.loadProjectShortcuts();
});
}
@ -132,7 +132,7 @@ export class ShortcutsComponent implements OnDestroy {
});
const routesShortcuts = [PROFILE_SHORTCUT, CREATE_ORG, CREATE_PROJECT, CREATE_USER];
const policyShortcuts = POLICIES.map((p) => {
const settingsShortcuts = SETTINGLINKS.map((p) => {
const policy: ShortcutItem = {
id: p.i18nTitle,
type: ShortcutType.POLICY,
@ -148,7 +148,7 @@ export class ShortcutsComponent implements OnDestroy {
return policy;
});
this.ALL_SHORTCUTS = [...routesShortcuts, ...policyShortcuts, ...mapped];
this.ALL_SHORTCUTS = [...routesShortcuts, ...settingsShortcuts, ...mapped];
this.loadShortcuts(this.org);
}
});

22
console/src/app/modules/sidenav/sidenav.component.html
View File

@ -1,6 +1,9 @@
<div class="sidenav-container">
<div class="sidenav-settings-list">
<div class="sidenav-settings-list" [ngClass]="{ indented: indented }">
<div class="sidenav-sticky-rel">
<h1 *ngIf="title">{{ title }}</h1>
<p *ngIf="description" class="cnsl-secondary-text">{{ description }}</p>
<button
*ngIf="currentSetting !== undefined"
(click)="value = undefined"
@ -10,8 +13,19 @@
<i class="las la-angle-left"></i>
<span>{{ 'USER.SETTINGS.TITLE' | translate }}</span>
</button>
<ng-container *ngFor="let setting of settingsList">
<ng-container *ngFor="let setting of settingsList; index as i">
<ng-container>
<span
class="sidenav-setting-group hide-on-mobile"
[ngClass]="{ show: currentSetting === undefined }"
*ngIf="
(setting.groupI18nKey && i > 0 && setting.groupI18nKey !== settingsList[i - 1].groupI18nKey) ||
(i === 0 && setting.groupI18nKey)
"
>{{ setting.groupI18nKey | translate }}</span
>
<button
(click)="value = setting.id"
class="sidenav-setting-list-element hide-on-mobile"
@ -34,8 +48,6 @@
</div>
<div class="sidenav-content">
<div class="max-width-container">
<ng-content></ng-content>
</div>
<ng-content></ng-content>
</div>
</div>

48
console/src/app/modules/sidenav/sidenav.component.scss
View File

@ -2,10 +2,10 @@
@mixin sidenav-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
$is-dark-theme: map-get($theme, is-dark);
.sidenav-container {
padding-top: 1rem;
display: grid;
position: relative;
grid-template-columns: 1fr;
@ -13,12 +13,54 @@
.sidenav-settings-list {
position: relative;
&.indented {
margin-right: 2rem;
.sidenav-sticky-rel {
margin-left: -2rem;
padding-left: 2rem;
background: map-get($background, footer);
}
}
.sidenav-sticky-rel {
display: flex;
flex-direction: column;
position: sticky;
top: 50px;
padding: 1rem 2rem 1rem 0;
top: 36px;
padding: 20px 2rem 20px 0;
.sidenav-setting-group {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: if($is-dark-theme, #ffffff60, #00000060);
margin-top: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
padding-top: 1rem;
border-top: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
&:nth-child(2) {
border-top: none;
padding-top: 0;
margin-top: 0;
}
&.hide-on-mobile {
@media only screen and (max-width: 500px) {
display: none;
}
}
&.show {
display: none;
@media only screen and (max-width: 500px) {
display: flex;
}
}
}
.sidenav-setting-list-element {
border: none;

53
console/src/app/modules/sidenav/sidenav.component.ts
View File

@ -1,30 +1,63 @@
import { Component, forwardRef, Input } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { Component, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
export interface SidenavSetting {
id: string;
i18nKey: string;
groupI18nKey?: string;
requiredRoles?: { [serviceType in PolicyComponentServiceType]: string[] };
}
@Component({
selector: 'cnsl-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss'],
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SidenavComponent), multi: true }],
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SidenavComponent, multi: true }],
})
export class SidenavComponent {
@Input() public currentSetting: string | undefined = 'general';
export class SidenavComponent implements ControlValueAccessor, OnInit {
@Input() public title: string = '';
@Input() public description: string = '';
@Input() public indented: boolean = false;
@Input() public currentSetting?: string | undefined = undefined;
@Input() public settingsList: SidenavSetting[] = [];
@Input() public queryParam: string = '';
constructor() {}
constructor(private router: Router, private route: ActivatedRoute) {}
private onChange: any = () => {};
private onTouch: any = () => {};
ngOnInit(): void {
if (!this.value) {
this.value = this.settingsList[0].id;
}
}
private onChange = (current: string | undefined) => {};
private onTouch = (current: string | undefined) => {};
@Input() get value(): string | undefined {
return this.currentSetting;
}
set value(setting: string | undefined) {
this.currentSetting = setting;
this.onChange(setting);
this.onTouch(setting);
if (setting || setting === undefined) {
this.onChange(setting);
this.onTouch(setting);
}
if (this.queryParam && setting) {
this.router.navigate([], {
relativeTo: this.route,
queryParams: {
[this.queryParam]: setting,
},
queryParamsHandling: 'merge',
skipLocationChange: false,
});
}
}
public writeValue(value: any) {

4
console/src/app/modules/sidenav/sidenav.module.ts
View File

@ -1,13 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { SidenavComponent } from './sidenav.component';
@NgModule({
declarations: [SidenavComponent],
imports: [CommonModule, MatIconModule, TranslateModule],
imports: [CommonModule, FormsModule, RouterModule, MatIconModule, TranslateModule],
exports: [SidenavComponent],
})
export class SidenavModule {}

2
console/src/app/modules/user-grants/user-grants.component.ts
View File

@ -84,7 +84,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
'actions',
];
public ngOnInit(): void {
ngOnInit(): void {
this.dataSource = new UserGrantsDataSource(this.userService);
switch (this.context) {

Some files were not shown because too many files have changed in this diff Show More