andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-31 03:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): user metadata, rehaul detail pages (#2209)

Browse Source 
* service, sidenav, i18n, dialog

* detail layout, user detail

* metadata dialog from

* dialog

* features

* formarray

* metadata component

* comp

* user metadata refresh

* use formarray, control, bulk save

* metadata revert, has feature directive

* lint

* lint

* typo

* info row user, warn color optim

* card cleanup, actions for user detail

* project, org, user, app rehaul

* lint

* scss

* digit fix

* features and project grid rehaul

* info-section layout, org domain info

* readd palette scss

* add svg email warn

* missing translation

* rm unused ts

* lockoutpolicy

* check for lockout feature
This commit is contained in:
Max Peintner
2021-09-13 13:38:57 +02:00
committed by GitHub
parent e4bdaf26b0
commit 490cafa538
111 changed files with 2437 additions and 1063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/detail-layout/detail-layout.component.scss
+9 -1
View File
@@ -11,16 +11,24 @@
.detail-container {
display: flex;
flex-direction: column;
padding-bottom: 3rem;
@media only screen and (min-width: 550px) {
flex-direction: row;
}
.detail-left {
align-self: flex-start;
width: 100px;
display: flex;
padding: 1rem;
padding-top: 0;
justify-content: center;
@media only screen and (min-width: 550px) {
width: 100px;
}
a {
margin-top: 13px;
color: inherit;
console/src/app/modules/features/features.component.html
+140 -48
View File
@@ -58,126 +58,212 @@
translate}}</span>
</div>
<br/>
<p class="feature-section">{{'FEATURES.HEADERS.LOGINPOLICY' | translate}}</p>
<div class="row">
<i class="icon las la-sign-in-alt"></i>
<div class="featureavatar green">
<i class="icon las la-sign-in-alt"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYUSERNAMELOGIN' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyUsernameLogin"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.loginPolicyUsernameLogin}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyUsernameLogin"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<i class="icon las la-sign-in-alt"></i>
<div class="featureavatar green">
<i class="icon las la-sign-in-alt"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDRESET' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyPasswordReset"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
</mat-slide-toggle>
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.loginPolicyPasswordReset}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyPasswordReset"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<i class="icon las la-sign-in-alt"></i>
<div class="featureavatar green">
<i class="icon las la-sign-in-alt"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYREGISTRATION' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyRegistration"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.loginPolicyRegistration}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyRegistration"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<i class="icon las la-sign-in-alt"></i>
<div class="featureavatar green">
<i class="icon las la-sign-in-alt"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYIDP' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyIdp"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.loginPolicyIdp}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyIdp"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<i class="icon las la-sign-in-alt"></i>
<div class="featureavatar green">
<i class="icon las la-sign-in-alt"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYFACTORS' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyFactors"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.loginPolicyFactors}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyFactors"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<i class="icon las la-sign-in-alt"></i>
<div class="featureavatar green">
<i class="icon las la-sign-in-alt"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDLESS' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.loginPolicyPasswordless"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.loginPolicyPasswordless}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyPasswordless"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<br/>
<p class="feature-section">{{'FEATURES.HEADERS.PASSWORD' | translate}}</p>
<div class="row">
<mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
<div class="featureavatar yellow">
<mat-icon class="icon smaller" svgIcon="mdi_textbox_password"></mat-icon>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYCOMPLEXITYPOLICY' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="features.passwordComplexityPolicy"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.passwordComplexityPolicy}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.passwordComplexityPolicy"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<br/>
<div class="row">
<div class="featureavatar yellow">
<mat-icon class="icon smaller" svgIcon="mdi_textbox_password"></mat-icon>
</div>
<span class="left-desc">{{'FEATURES.DATA.LOCKOUTPOLICY' | translate}}</span>
<span class="fill-space"></span>
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.lockoutPolicy}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.lockoutPolicy"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<p class="feature-section">{{'FEATURES.HEADERS.LABELPOLICY' | translate}}</p>
<div class="row">
<i class="icon las la-swatchbook"></i>
<div class="featureavatar blue">
<i class="icon las la-swatchbook"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LABELPOLICYPRIVATELABEL' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyPrivateLabel"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.labelPolicyPrivateLabel}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyPrivateLabel"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<i class="icon las la-swatchbook"></i>
<div class="featureavatar blue">
<i class="icon las la-swatchbook"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.LABELPOLICYWATERMARK' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyWatermark"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.labelPolicyWatermark}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyWatermark"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<br/>
<p class="feature-section">{{'FEATURES.HEADERS.DOMAIN' | translate}}</p>
<div class="row">
<i class="icon las la-gem"></i>
<div class="featureavatar purple">
<i class="icon las la-gem"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.CUSTOMDOMAIN' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customDomain"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.customDomain}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customDomain"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<p class="feature-section">{{'FEATURES.HEADERS.TEXTSANDLINKS' | translate}}</p>
<div class="row">
<div class="featureavatar red">
<i class="icon las la-paragraph"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXTMESSAGE' | translate}}</span>
<span class="fill-space"></span>
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.customTextMessage}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customTextMessage"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<i class="icon las la-file-contract"></i>
<div class="featureavatar red">
<i class="icon las la-paragraph"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXTLOGIN' | translate}}</span>
<span class="fill-space"></span>
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.customTextLogin}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customTextLogin"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<div class="row">
<div class="featureavatar black">
<i class="icon las la-file-contract"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.PRIVACYPOLICY' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.privacyPolicy"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.privacyPolicy}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.privacyPolicy"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
<p class="feature-section">{{'FEATURES.HEADERS.METADATA' | translate}}</p>
<div class="row">
<i class="icon las la-paragraph"></i>
<span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXT' | translate}}</span>
<div class="featureavatar blue">
<i class="icon las la-tags"></i>
</div>
<span class="left-desc">{{'FEATURES.DATA.METADATAUSER' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customText"
[disabled]="(['iam.features.write'] | hasRole | async) == false">
<template [ngTemplateOutlet]="templateRef"
[ngTemplateOutletContext]="{active: features.metadataUser}"></template>
<mat-slide-toggle class="toggle" color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.metadataUser"
*ngIf="(['iam.features.write'] | hasRole | async)">
</mat-slide-toggle>
</div>
</div>
@@ -188,3 +274,9 @@
}}</button>
</div>
</app-detail-layout>
<ng-template #templateRef let-active="active">
<span class="state" [ngClass]="{'active': active, 'inactive': !active}">
{{active ? ('FEATURES.AVAILABLE' | translate) : ('FEATURES.UNAVAILABLE' | translate)}}
</span>
</ng-template>
console/src/app/modules/features/features.component.scss
+59 -4
View File
@@ -46,7 +46,7 @@
}
.error {
color: #f44336;
color: var(--warn);
font-size: 14px;
}
@@ -71,19 +71,70 @@
flex-direction: column;
width: 100%;
.feature-section {
font-size: 14px;
color: var(--grey);
margin-top: 1.5rem;
}
.row {
display: flex;
align-items: center;
padding: .3rem 0;
i,
.icon {
.featureavatar {
margin-right: 1rem;
font-size: 1.5rem;
height: 30px;
width: 30px;
min-width: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #7b8ada);
&.purple {
background: linear-gradient(40deg, #7c3aed 30%, #6d28d9);
}
&.red {
background: linear-gradient(40deg, #dc2626 30%, #db2777);
}
&.green {
background: linear-gradient(40deg, #059669 30%, #047857);
}
&.blue {
background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
}
&.yellow {
background: linear-gradient(40deg, #f59e0b 30%, #b45309);
}
&.black {
background: linear-gradient(40deg, #1f2937, #111827);
}
i,
.icon {
font-size: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
color: white;
&.smaller {
font-size: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
}
}
}
.left-desc {
font-size: .9rem;
margin-right: 1rem;
}
.fill-space {
@@ -107,3 +158,7 @@
display: block;
}
}
.toggle {
margin-left: 1rem;
}
console/src/app/modules/features/features.component.ts
+8 -2
View File
@@ -160,8 +160,11 @@ export class FeaturesComponent implements OnDestroy {
req.setLabelPolicyPrivateLabel(this.features.labelPolicyPrivateLabel);
req.setLabelPolicyWatermark(this.features.labelPolicyWatermark);
req.setCustomDomain(this.features.customDomain);
req.setCustomText(this.features.customText);
req.setCustomTextLogin(this.features.customTextLogin);
req.setCustomTextMessage(this.features.customTextMessage);
req.setPrivacyPolicy(this.features.privacyPolicy);
req.setMetadataUser(this.features.metadataUser);
req.setLockoutPolicy(this.features.lockoutPolicy);
this.adminService.setOrgFeatures(req).then(() => {
this.toast.showInfo('POLICY.TOAST.SET', true);
@@ -182,7 +185,10 @@ export class FeaturesComponent implements OnDestroy {
dreq.setLabelPolicyPrivateLabel(this.features.labelPolicyPrivateLabel);
dreq.setLabelPolicyWatermark(this.features.labelPolicyWatermark);
dreq.setCustomDomain(this.features.customDomain);
dreq.setCustomText(this.features.customText);
dreq.setCustomTextLogin(this.features.customTextLogin);
dreq.setCustomTextMessage(this.features.customTextMessage);
dreq.setMetadataUser(this.features.metadataUser);
dreq.setLockoutPolicy(this.features.lockoutPolicy);
this.adminService.setDefaultFeatures(dreq).then(() => {
this.toast.showInfo('POLICY.TOAST.SET', true);
console/src/app/modules/info-row/info-row.component.html
+82
View File
@@ -0,0 +1,82 @@
<div class="info-row" *ngIf="user">
<div class="info">
<p class="title">{{ 'USER.PAGES.STATE' | translate }}</p>
<p *ngIf="user && user.state !== undefined" class="state"
[ngClass]="{'active': user.state === UserState.USER_STATE_ACTIVE, 'inactive': user.state === UserState.USER_STATE_INACTIVE}">{{'USER.DATA.STATE'+user.state
| translate}}</p>
</div>
<div class="info">
<p class="title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
<p class="desc">{{user?.details?.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
</div>
<div class="info">
<p class="title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
<p class="desc">{{user?.details?.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
</div>
<div class="info width">
<p class="title">{{ 'USER.PAGES.LOGINNAMES' | translate }}</p>
<div class="copy-row" *ngFor="let login of user?.loginNamesList">
<button [disabled]="copied == login"
[matTooltip]="(copied != login ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="login" (copiedValue)="copied = $event">
{{login}}
</button>
</div>
</div>
</div>
<div class="info-row" *ngIf="app">
<div class="info">
<p class="title">{{ 'APP.PAGES.STATE' | translate }}</p>
<p *ngIf="app && app.state !== undefined" class="state"
[ngClass]="{'active': app.state === AppState.APP_STATE_ACTIVE, 'inactive': app.state === AppState.APP_STATE_INACTIVE}">{{'APP.PAGES.DETAIL.STATE.'+app.state
| translate}}</p>
</div>
<div class="info">
<p class="title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
<p class="desc">{{app?.details?.creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
</div>
<div class="info">
<p class="title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
<p class="desc">{{app?.details?.changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}</p>
</div>
<div class="info" >
<p class="title">{{ 'APP.OIDC.INFO.CLIENTID' | translate }}</p>
<div class="copy-row" *ngIf="app?.oidcConfig?.clientId">
<button [disabled]="copied == app.oidcConfig?.clientId"
[matTooltip]="(copied != app.oidcConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="app.oidcConfig?.clientId" (copiedValue)="copied = $event">
{{app.oidcConfig?.clientId}}
</button>
</div>
<div class="copy-row" *ngIf="app?.apiConfig?.clientId">
<button [disabled]="copied == app.apiConfig?.clientId"
[matTooltip]="(copied != app.apiConfig?.clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="app.apiConfig?.clientId" (copiedValue)="copied = $event">
{{app.apiConfig?.clientId}}
</button>
</div>
</div>
<div class="info">
<p class="title">{{ 'APP.PAGES.URLS' | translate }}</p>
<div class="copy-row" *ngFor="let environmentV of (environmentMap | keyvalue)">
<div *ngIf="environmentV.value" class="environment">
<span class="key">{{environmentV.key}}</span>
<button [disabled]="copied == environmentV.value"
[matTooltip]="(copied != environmentV.value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="environmentV.value"
(copiedValue)="copied = environmentV.key">
{{environmentV.value}}
</button>
</div>
</div>
</div>
</div>
console/src/app/modules/info-row/info-row.component.scss
+77
View File
@@ -0,0 +1,77 @@
@use '~@angular/material' as mat;
@mixin info-row-theme($theme) {
$foreground: map-get($theme, foreground);
$button-text-color: map-get($foreground, text);
$button-disabled-text-color: map-get($foreground, disabled-button);
.info-row {
display: flex;
flex-direction: column;
margin: 0 -.5rem;
@media only screen and (min-width: 500px) {
flex-direction: row;
flex-wrap: wrap;
}
.info {
display: flex;
flex-direction: column;
margin: .5rem .5rem;
flex: 1;
align-items: flex-start;
box-sizing: border-box;
&:not(.width) {
min-width: 100px;
}
.title {
font-size: 14px;
color: var(--grey);
margin: 0;
}
.desc {
margin: .5rem 0;
font-size: 14px;
padding: 2px 0;
}
.copy-row {
display: flex;
flex-direction: column;
width: 100%;
align-items: stretch;
button {
transition: opacity .15s ease-in-out;
background-color: #8795a110;
border: 1px solid #8795a160;
border-radius: 4px;
padding: .25rem 1rem;
margin: .25rem 0;
color: $button-text-color;
text-overflow: ellipsis;
overflow: hidden;
&[disabled] {
color: $button-disabled-text-color;
}
}
.environment {
display: flex;
flex-direction: column;
width: 100%;
margin: .25rem 0;
.key {
font-size: 14px;
}
}
}
}
}
}
console/src/app/modules/info-row/info-row.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { InfoRowComponent } from './info-row.component';
describe('InfoRowComponent', () => {
let component: InfoRowComponent;
let fixture: ComponentFixture<InfoRowComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [InfoRowComponent],
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(InfoRowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/modules/info-row/info-row.component.ts
+36
View File
@@ -0,0 +1,36 @@
import { HttpClient } from '@angular/common/http';
import { Component, Input, OnInit } from '@angular/core';
import { App, AppState } from 'src/app/proto/generated/zitadel/app_pb';
import { User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
@Component({
selector: 'cnsl-info-row',
templateUrl: './info-row.component.html',
styleUrls: ['./info-row.component.scss'],
})
export class InfoRowComponent implements OnInit {
@Input() public user!: User.AsObject;
@Input() public app!: App.AsObject;
public UserState: any = UserState;
public AppState: any = AppState;
public copied: string = '';
public environmentMap: { [key: string]: string; } = {};
constructor(private http: HttpClient) { }
ngOnInit(): void {
if (this.app) {
this.http.get('./assets/environment.json')
.toPromise().then((env: any) => {
this.environmentMap = {
issuer: env.issuer,
adminServiceUrl: env.adminServiceUrl,
mgmtServiceUrl: env.mgmtServiceUrl,
authServiceUrl: env.adminServiceUrl,
};
});
}
}
}
console/src/app/modules/info-row/info-row.module.ts
+33
View File
@@ -0,0 +1,33 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.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 { InfoRowComponent } from './info-row.component';
@NgModule({
declarations: [
InfoRowComponent,
],
imports: [
CommonModule,
FormsModule,
MatTooltipModule,
TranslateModule,
CopyToClipboardModule,
MatButtonModule,
LocalizedDatePipeModule,
TimestampToDatePipeModule,
],
exports: [
InfoRowComponent,
],
})
export class InfoRowModule { }
console/src/app/modules/info-section/info-section.component.html
+5
View File
@@ -5,4 +5,9 @@
<div class="info-section-content">
<ng-content></ng-content>
</div>
<a class="action" *ngIf="featureLink" actions [routerLink]="featureLink">
<span>{{'ACTIONS.GOTOFEATURES' | translate}}</span>
<i class="las la-angle-right"></i>
</a>
</div>
console/src/app/modules/info-section/info-section.component.scss
+20
View File
@@ -13,6 +13,7 @@
padding: .5rem 0;
padding-right: 1rem;
font-size: 14px;
margin: .5rem 0;
.icon {
margin-right: 1rem;
@@ -20,10 +21,29 @@
line-height: 1.2rem;
font-size: 1.2rem;
margin-left: .5rem;
padding: .25rem 0;
}
.info-section-content {
flex: 1;
padding: .25rem 0;
}
.action {
font-size: 14px;
display: flex;
align-items: center;
text-decoration: none;
margin-left: .5rem;
border-radius: 50vw;
align-self: center;
padding: .25rem .5rem;
background: if($is-dark-theme, #00000030, #ffffff40);
font-weight: 600;
i {
font-size: 1.2rem;
}
}
&.info {
console/src/app/modules/info-section/info-section.component.ts
+1
View File
@@ -14,4 +14,5 @@ enum InfoSectionType {
export class InfoSectionComponent {
@Input() type: InfoSectionType = InfoSectionType.INFO;
@Input() featureLink: string = '';
}
console/src/app/modules/info-section/info-section.module.ts
+11 -7
View File
@@ -1,17 +1,21 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { InfoSectionComponent } from './info-section.component';
@NgModule({
declarations: [InfoSectionComponent],
imports: [
CommonModule,
],
exports: [
InfoSectionComponent,
],
declarations: [InfoSectionComponent],
imports: [
CommonModule,
TranslateModule,
RouterModule,
],
exports: [
InfoSectionComponent,
],
})
export class InfoSectionModule { }
console/src/app/modules/links/links.component.html
+24 -15
View File
@@ -1,26 +1,35 @@
<div class="next-steps">
<div class="title-row">
<h5>{{'NEXTSTEPS.TITLE' | translate}}</h5>
<i class="las la-shoe-prints"></i>
</div>
<div class="row">
<ng-container *ngFor="let link of links">
<ng-template *ngIf="link.withRole" appHasRole [appHasRole]="link.withRole">
<div class="step">
<h6>{{ link.i18nTitle | translate }}</h6>
<p>{{link.i18nDesc | translate}}</p>
<span class="fill-space"></span>
<a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-mini-fab><i
class="las la-angle-right"></i></a>
<a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-mini-fab><i
class="las la-angle-right"></i></a>
</div>
</ng-template>
<div class="step" *ngIf="!link.withRole">
<div class="step card">
<ng-content select="[icon]"></ng-content>
<h6>{{ link.i18nTitle | translate }}</h6>
<p>{{link.i18nDesc | translate}}</p>
<span class="fill-space"></span>
<a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-mini-fab><i
class="las la-angle-right"></i></a>
<a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-mini-fab><i
class="las la-angle-right"></i></a>
<a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
<a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
</div>
</ng-template>
<div class="step card" *ngIf="!link.withRole">
<i *ngIf="link.iconClasses" class="{{link.iconClasses}}"></i>
<h6>{{ link.i18nTitle | translate }}</h6>
<p>{{link.i18nDesc | translate}}</p>
<span class="fill-space"></span>
<a *ngIf="link.routerLink" [routerLink]="link.routerLink" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
<a *ngIf="link.href" [href]="link.href" target="_blank" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
</div>
</ng-container>
</div>
console/src/app/modules/links/links.component.scss
+34 -18
View File
@@ -1,45 +1,61 @@
.next-steps {
margin-top: 1rem;
margin-top: 4rem;
h5 {
text-transform: uppercase;
font-size: 14px;
color: var(--grey);
.title-row {
display: flex;
align-items: center;
h5 {
text-transform: uppercase;
font-size: 14px;
letter-spacing: .05em;
font-weight: 400;
margin-right: 1rem;
}
}
.row {
display: flex;
overflow-x: auto;
flex-wrap: wrap;
display: grid;
row-gap: 1rem;
column-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
padding-bottom: .5rem;
margin: 0 -.5rem;
margin-bottom: 2rem;
@media only screen and (max-width: 1300px) {
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 450px) {
grid-template-columns: 1fr;
}
.step {
min-width: 220px;
padding: 1rem;
margin: 1rem .5rem;
border: 1px solid #8795a150;
border-radius: .5rem;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
align-items: flex-start;
flex: 1;
@media only screen and (min-width: 899px) {
max-width: 280px;
}
i {
font-size: 2.5rem;
margin-bottom: 1rem;
}
h6 {
font-size: 1rem;
font-size: 1.1rem;
text-align: center;
margin: 0 0 1rem 0;
font-weight: 400;
margin: 0;
}
p {
font-size: 14px;
text-align: center;
margin: 1rem 0;
color: var(--grey);
}
console/src/app/modules/links/links.component.ts
+13 -12
View File
@@ -2,23 +2,24 @@ import { Component, Input, OnInit } from '@angular/core';
export interface CnslLinks {
i18nTitle: string;
i18nDesc: string;
routerLink?: any;
href?: string;
withRole?: Array<string | RegExp>;
i18nTitle: string;
i18nDesc: string;
routerLink?: any;
href?: string;
iconClasses?: string;
withRole?: Array<string | RegExp>;
}
@Component({
selector: 'cnsl-links',
templateUrl: './links.component.html',
styleUrls: ['./links.component.scss'],
selector: 'cnsl-links',
templateUrl: './links.component.html',
styleUrls: ['./links.component.scss'],
})
export class LinksComponent implements OnInit {
@Input() links: Array<CnslLinks> = [];
constructor() { }
@Input() links: Array<CnslLinks> = [];
constructor() { }
ngOnInit(): void {
}
ngOnInit(): void {
}
}
console/src/app/modules/meta-layout/meta-layout.component.scss
+1 -1
View File
@@ -8,7 +8,7 @@
display: relative;
width: 100%;
overflow-y: auto;
padding-bottom: 50px;
padding-bottom: 2rem;
&.hidden {
flex-basis: 100%;
console/src/app/modules/meta-layout/meta.scss
+21 -1
View File
@@ -3,9 +3,29 @@
.meta-details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.title-row {
display: flex;
align-items: center;
margin: .5rem 0;
.title {
font-size: 14px;
letter-spacing: .05em;
text-transform: uppercase;
display: block;
}
.edit {
font-size: 14px;
}
.fill-space {
flex: 1;
}
}
.meta-row {
display: flex;
margin-bottom: .5rem;
console/src/app/modules/mfa-table/mfa-table.component.scss
+1 -1
View File
@@ -32,7 +32,7 @@
left: -2px;
transform: translateX(-50%) translateY(-50%);
cursor: pointer;
color: #f44336;
color: var(--warn);
transition: all .2s ease;
&[disabled] {
console/src/app/modules/name-dialog/name-dialog.component.html
+20
View File
@@ -0,0 +1,20 @@
<h1 mat-dialog-title>
<span>{{data.titleKey | translate}} {{data?.number}}</span>
</h1>
<p class="desc">{{data.descKey | translate}}</p>
<div mat-dialog-content>
<cnsl-form-field class="formfield">
<cnsl-label>{{ data.labelKey | translate }}</cnsl-label>
<input cnslInput [(ngModel)]="name" />
</cnsl-form-field>
</div>
<div mat-dialog-actions class="action">
<button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
{{'ACTIONS.CLOSE' | translate}}
</button>
<button [disabled]="!name" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
(click)="closeDialog(name)">
{{'ACTIONS.RENAME' | translate}}
</button>
</div>
console/src/app/modules/name-dialog/name-dialog.component.scss
+26
View File
@@ -0,0 +1,26 @@
h1 {
font-size: 1.5rem;
margin: 0;
}
.desc {
font-size: 14px;
color: var(--grey);
}
.formfield {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}
console/src/app/modules/name-dialog/name-dialog.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { CodeDialogComponent } from './code-dialog.component';
describe('CodeDialogComponent', () => {
let component: CodeDialogComponent;
let fixture: ComponentFixture<CodeDialogComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [CodeDialogComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CodeDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/modules/name-dialog/name-dialog.component.ts
+19
View File
@@ -0,0 +1,19 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-name-dialog',
templateUrl: './name-dialog.component.html',
styleUrls: ['./name-dialog.component.scss'],
})
export class NameDialogComponent {
public name: string = '';
constructor(public dialogRef: MatDialogRef<NameDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.name = data.name ?? '';
}
closeDialog(name: string = ''): void {
this.dialogRef.close(name);
}
}
console/src/app/modules/name-dialog/name-dialog.module.ts
+27
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 { MatDialogModule } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from '../input/input.module';
import { NameDialogComponent } from './name-dialog.component';
@NgModule({
declarations: [
NameDialogComponent,
],
imports: [
CommonModule,
MatDialogModule,
MatButtonModule,
TranslateModule,
InputModule,
FormsModule,
],
exports: [
NameDialogComponent,
],
})
export class NameDialogModule { }
console/src/app/modules/password-complexity-view/password-complexity-view.component.scss
+1 -1
View File
@@ -47,7 +47,7 @@
}
&.red {
color: #f44336;
color: var(--warn);
}
}
}
console/src/app/modules/policies/login-policy/login-policy.component.html
+37 -53
View File
@@ -29,12 +29,9 @@
{{'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.username_login'] | hasFeature | async) == false; else usernameInfo">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.username_login'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.username_login'] | hasFeature | async) == false; else usernameInfo" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.username_login'})"></span>
</cnsl-info-section>
<ng-template #usernameInfo>
<cnsl-info-section class="info">
@@ -49,12 +46,10 @@
{{'POLICY.DATA.ALLOWREGISTER' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.registration'] | hasFeature | async) == false; else regInfo">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.registration'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.registration'] | hasFeature | async) == false; else regInfo" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.registration'})"></span>
</cnsl-info-section>
<ng-template #regInfo>
<cnsl-info-section class="info">
{{'POLICY.DATA.ALLOWREGISTER_DESC' | translate}}
@@ -66,12 +61,11 @@
[(ngModel)]="loginData.allowExternalIdp">
{{'POLICY.DATA.ALLOWEXTERNALIDP' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false; else idpInfo">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.idp'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false; else idpInfo" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.idp'})"></span>
</cnsl-info-section>
<ng-template #idpInfo>
<cnsl-info-section class="info">
{{'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}}
@@ -83,12 +77,11 @@
[(ngModel)]="loginData.forceMfa">
{{'POLICY.DATA.FORCEMFA' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false; else factorsInfo">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.factors'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false; else factorsInfo" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})"></span>
</cnsl-info-section>
<ng-template #factorsInfo>
<cnsl-info-section class="info">
{{'POLICY.DATA.FORCEMFA_DESC' | translate}}
@@ -101,12 +94,9 @@
{{'POLICY.DATA.HIDEPASSWORDRESET' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.password_reset'] | hasFeature | async) == false; else passwordResetInfo">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.hide_password_reset'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.password_reset'] | hasFeature | async) == false; else passwordResetInfo" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.password_reset'})"></span>
</cnsl-info-section>
<ng-template #passwordResetInfo>
<cnsl-info-section class="info">
@@ -116,7 +106,6 @@
</div>
<div class="row">
<cnsl-form-field class="form-field" label="Access Code" required="true">
<cnsl-label>{{'LOGINPOLICY.PASSWORDLESS' | translate}}</cnsl-label>
<mat-select [(ngModel)]="loginData.passwordlessType"
@@ -126,12 +115,10 @@
</mat-option>
</mat-select>
</cnsl-form-field>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.passwordless'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.passwordless'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.passwordless'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.passwordless'})"></span>
</cnsl-info-section>
</div>
</div>
@@ -143,11 +130,11 @@
<ng-container *ngIf="!isDefault">
<h3 class="subheader">{{ 'MFA.LIST.MULTIFACTORTITLE' | translate }}</h3>
<p class="subdesc">{{ 'MFA.LIST.MULTIFACTORDESCRIPTION' | translate }}</p>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})"></span>
</cnsl-info-section>
<app-mfa-table [service]="service" [serviceType]="serviceType"
[componentType]="LoginMethodComponentType.MultiFactor"
[disabled]="(([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false) || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false)">
@@ -155,11 +142,11 @@
<h3 class="subheader">{{ 'MFA.LIST.SECONDFACTORTITLE' | translate }}</h3>
<p class="subdesc">{{ 'MFA.LIST.SECONDFACTORDESCRIPTION' | translate }}</p>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})"></span>
</cnsl-info-section>
<app-mfa-table [service]="service" [serviceType]="serviceType"
[componentType]="LoginMethodComponentType.SecondFactor"
[disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false)">
@@ -168,12 +155,9 @@
<h3 class="subheader">{{'LOGINPOLICY.IDPS' | translate}}</h3>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false">
<cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'login_policy.idp'})}}
</cnsl-info-section>
</ng-container>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.idp'})"></span>
</cnsl-info-section>
<div class="idps">
<div class="idp"
console/src/app/modules/policies/login-policy/login-policy.component.scss
+1 -1
View File
@@ -90,7 +90,7 @@
}
.rm {
color: #f44336;
color: var(--warn);
position: absolute;
display: none;
top: -2px;
console/src/app/modules/policies/login-texts/login-texts.component.html
+2 -5
View File
@@ -35,11 +35,8 @@
</cnsl-form-field>
</form>
<cnsl-info-section class="warn"
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['custom_text.login'] | hasFeature | async) == false"
type="WARN">
{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'custom_text.login'})}}
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['custom_text.login'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'custom_text.login'})"></span>
</cnsl-info-section>
<div class="divider"></div>
console/src/app/modules/policies/message-texts/message-texts.component.html
+3 -6
View File
@@ -19,12 +19,9 @@
</cnsl-form-field>
</div>
<cnsl-info-section class="warn"
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['custom_text.message'] | hasFeature | async) == false"
type="WARN">
{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'custom_text.message'})}}
</cnsl-info-section>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['custom_text.message'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'custom_text.message'})"></span>
</cnsl-info-section>
<div class="content" >
<cnsl-edit-text [chips]="chips[currentType]" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['custom_text.message'] | hasFeature | async) == false" label="one" [default$]="getDefaultInitMessageTextMap$" [current$]="getCustomInitMessageTextMap$" (changedValues)="updateCurrentValues(
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html
+12 -8
View File
@@ -3,12 +3,16 @@
<cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'password_complexity_policy'})"></span>
</cnsl-info-section>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<ng-template appHasRole [appHasRole]="['policy.delete']">
<button *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
<button *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false"
matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()" mat-stroked-button>
{{'POLICY.RESET' | translate}}
</button>
@@ -20,11 +24,11 @@
<span class="left-desc">{{'POLICY.DATA.MINLENGTH' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="decrementLength()">
<button mat-icon-button (click)="decrementLength()" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false">
<mat-icon>remove</mat-icon>
</button>
<span>{{complexityData?.minLength}}</span>
<button mat-icon-button (click)="incrementLength()">
<button mat-icon-button (click)="incrementLength()" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false">
<mat-icon>add</mat-icon>
</button>
</div>
@@ -33,14 +37,14 @@
<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 color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="complexityData.hasNumber">
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="complexityData.hasNumber" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false">
</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 color="primary" name="hasSymbol" ngDefaultControl [(ngModel)]="complexityData.hasSymbol">
<mat-slide-toggle color="primary" name="hasSymbol" ngDefaultControl [(ngModel)]="complexityData.hasSymbol" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
@@ -48,7 +52,7 @@
<span class="left-desc">{{'POLICY.DATA.HASLOWERCASE' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasLowercase" ngDefaultControl
[(ngModel)]="complexityData.hasLowercase">
[(ngModel)]="complexityData.hasLowercase" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false">
</mat-slide-toggle>
</div>
<div class="row">
@@ -56,13 +60,13 @@
<span class="left-desc">{{'POLICY.DATA.HASUPPERCASE' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasUppercase" ngDefaultControl
[(ngModel)]="complexityData.hasUppercase">
[(ngModel)]="complexityData.hasUppercase" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false">
</mat-slide-toggle>
</div>
</div>
<div class="btn-container">
<button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
<button (click)="savePolicy()" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['password_complexity_policy'] | hasFeature | async) == false" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
}}</button>
</div>
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.ts
+1
View File
@@ -61,6 +61,7 @@ export class PasswordComplexityPolicyComponent implements OnDestroy {
this.getData().then(data => {
if (data.policy) {
console.log(data);
this.complexityData = data.policy;
this.loading = false;
}
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.module.ts
+4
View File
@@ -7,9 +7,11 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasFeatureModule } from 'src/app/directives/has-feature/has-feature.module';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PolicyGridModule } from '../../policy-grid/policy-grid.module';
@@ -29,6 +31,8 @@ import { PasswordComplexityPolicyComponent } from './password-complexity-policy.
HasRoleModule,
MatTooltipModule,
TranslateModule,
HasFeatureModule,
HasFeaturePipeModule,
DetailLayoutModule,
MatProgressSpinnerModule,
PolicyGridModule,
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.html
+9 -4
View File
@@ -1,9 +1,14 @@
<app-detail-layout [backRouterLink]="[ serviceType === PolicyComponentServiceType.ADMIN ? '/iam/policies' : '/org']"
[title]="'POLICY.PWD_LOCKOUT.TITLE' | translate" [description]="'POLICY.PWD_LOCKOUT.DESCRIPTION' | translate">
<cnsl-info-section class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['lockout_policy'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'lockout_policy'})"></span>
</cnsl-info-section>
<ng-template appHasRole [appHasRole]="['policy.delete']">
<button *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
<button [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['lockout_policy'] | hasFeature | async) == false" *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="resetPolicy()" mat-stroked-button>
{{'POLICY.RESET' | translate}}
</button>
@@ -14,11 +19,11 @@
<span class="left-desc">{{'POLICY.DATA.MAXATTEMPTS' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="decrementMaxAttempts()">
<button [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['lockout_policy'] | hasFeature | async) == false" mat-icon-button (click)="decrementMaxAttempts()">
<mat-icon>remove</mat-icon>
</button>
<span>{{lockoutData?.maxPasswordAttempts}}</span>
<button mat-icon-button (click)="incrementMaxAttempts()">
<button [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['lockout_policy'] | hasFeature | async) == false" mat-icon-button (click)="incrementMaxAttempts()">
<mat-icon>add</mat-icon>
</button>
</div>
@@ -26,7 +31,7 @@
</div>
<div class="btn-container">
<button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
<button (click)="savePolicy()" [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['lockout_policy'] | hasFeature | async) == false" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
}}</button>
</div>
</app-detail-layout>
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.ts
-1
View File
@@ -23,7 +23,6 @@ export class PasswordLockoutPolicyComponent implements OnDestroy {
@Input() public service!: ManagementService | AdminService;
public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public lockoutForm!: FormGroup;
public lockoutData!: LockoutPolicy.AsObject;
private sub: Subscription = new Subscription();
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.module.ts
+2
View File
@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { PasswordLockoutPolicyRoutingModule } from './password-lockout-policy-routing.module';
@@ -28,6 +29,7 @@ import { PasswordLockoutPolicyComponent } from './password-lockout-policy.compon
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
HasFeaturePipeModule,
InfoSectionModule,
],
})
console/src/app/modules/policies/privacy-policy/privacy-policy.component.html
+2 -5
View File
@@ -4,11 +4,8 @@
<cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
<cnsl-info-section class="warn"
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['privacy_policy'] | hasFeature | async) == false"
type="WARN">
{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'privacy_policy'})}}
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['privacy_policy'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'privacy_policy'})"></span>
</cnsl-info-section>
<div class="divider"></div>
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+12 -6
View File
@@ -11,6 +11,10 @@
<p class="desc">{{'POLICY.PRIVATELABELING.PREVIEW_DESCRIPTION' | translate}}</p>
<cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>
<cnsl-info-section *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.private_label'})"></span>
</cnsl-info-section>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
@@ -57,9 +61,10 @@
</mat-panel-description>
</mat-expansion-panel-header>
<p class="description">Your Logo will be used in the Login itself, while the icon is used for smaller UI elements like in the organisation switcher in console</p>
<p class="description">{{'POLICY.PRIVATELABELING.USEOFLOGO' | translate}}</p>
<cnsl-info-section class="max-size-desc"> {{'POLICY.PRIVATELABELING.MAXSIZE' | translate}}</cnsl-info-section>
<cnsl-info-section class="max-size-desc"> {{'POLICY.PRIVATELABELING.EMAILNOSVG' | translate}}</cnsl-info-section>
<!-- <span class="title">{{ theme === Theme.DARK ? ('POLICY.PRIVATELABELING.DARK' | translate) : ('POLICY.PRIVATELABELING.LIGHT' | translate)}}</span> -->
<div class="logo-setup-wrapper">
@@ -242,20 +247,21 @@
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) == false">
<cnsl-info-section class="info" type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'label_policy.private_label'})}}
<cnsl-info-section [featureLink]="['/org/features']" class="info" type="WARN"
>
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.private_label'})"></span>
</cnsl-info-section>
</ng-container>
<mat-slide-toggle class="toggle" color="primary" ngDefaultControl
<mat-slide-toggle class="toggle" color="primary" ngDefaultControl [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.private_label'] | hasFeature | async) == false"
[(ngModel)]="previewData.hideLoginNameSuffix" (change)="savePolicy()">
{{'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate}}
</mat-slide-toggle>
<ng-container
*ngIf="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.watermark'] | hasFeature | async) == false">
<cnsl-info-section class="info" type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
'label_policy.watermark'})}}
<cnsl-info-section [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'label_policy.watermark'})"></span>
</cnsl-info-section>
</ng-container>
<mat-slide-toggle class="toggle" color="primary" ngDefaultControl [disabled]="serviceType == PolicyComponentServiceType.MGMT && (['label_policy.watermark'] | hasFeature | async) == false"
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
+2 -2
View File
@@ -629,8 +629,8 @@ export class PrivateLabelingPolicyComponent implements OnDestroy {
const darkPrimary = labelpolicy?.primaryColorDark || '#5282c1';
const lightPrimary = labelpolicy?.primaryColor || '#5282c1';
const darkWarn = labelpolicy?.warnColorDark || '#F44336';
const lightWarn = labelpolicy?.warnColor || '#F44336';
const darkWarn = labelpolicy?.warnColorDark || '#ff3b5b';
const lightWarn = labelpolicy?.warnColor || '#cd3d56';
const darkBackground = labelpolicy?.backgroundColorDark || '#212224';
const lightBackground = labelpolicy?.backgroundColor || '#fafafa';
console/src/app/modules/refresh-table/refresh-table.component.html
+2 -2
View File
@@ -11,8 +11,8 @@
<mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
<ng-content select="[actions]"></ng-content>
<button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon>refresh</mat-icon>
<button *ngIf="!hideRefresh" mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
</div>
<div class="table-wrapper">
console/src/app/modules/refresh-table/refresh-table.component.scss
+4
View File
@@ -40,5 +40,9 @@
.icon-button {
margin-right: .5rem;
.icon {
font-size: 1.2rem;
}
}
}
console/src/app/modules/refresh-table/refresh-table.component.ts
+44 -43
View File
@@ -5,56 +5,57 @@ import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { RefreshService } from 'src/app/services/refresh.service';
const rotate = animation([
animate(
'{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)',
keyframes([
style({
transform: 'rotate(0deg)',
}),
style({
transform: 'rotate(360deg)',
}),
]),
),
animate(
'{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)',
keyframes([
style({
transform: 'rotate(0deg)',
}),
style({
transform: 'rotate(360deg)',
}),
]),
),
]);
@Component({
selector: 'app-refresh-table',
templateUrl: './refresh-table.component.html',
styleUrls: ['./refresh-table.component.scss'],
animations: [
trigger('rotate', [
transition('* => *', [useAnimation(rotate, { params: { time: '1s' } })]),
]),
],
selector: 'app-refresh-table',
templateUrl: './refresh-table.component.html',
styleUrls: ['./refresh-table.component.scss'],
animations: [
trigger('rotate', [
transition('* => *', [useAnimation(rotate, { params: { time: '1s' } })]),
]),
],
})
export class RefreshTableComponent implements OnInit {
@Input() public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
@Input() public timestamp!: Timestamp.AsObject;
@Input() public dataSize: number = 0;
@Input() public emitRefreshAfterTimeoutInMs: number = 0;
@Input() public loading: boolean = false;
@Input() public emitRefreshOnPreviousRoutes: string[] = [];
@Output() public refreshed: EventEmitter<void> = new EventEmitter();
@Input() public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
@Input() public timestamp!: Timestamp.AsObject;
@Input() public dataSize: number = 0;
@Input() public emitRefreshAfterTimeoutInMs: number = 0;
@Input() public loading: boolean = false;
@Input() public emitRefreshOnPreviousRoutes: string[] = [];
@Output() public refreshed: EventEmitter<void> = new EventEmitter();
@Input() public hideRefresh: boolean = false;
constructor(private refreshService: RefreshService) { }
constructor(private refreshService: RefreshService) { }
ngOnInit(): void {
if (this.emitRefreshAfterTimeoutInMs) {
setTimeout(() => {
this.emitRefresh();
}, this.emitRefreshAfterTimeoutInMs);
}
if (this.emitRefreshOnPreviousRoutes.length && this.refreshService.previousUrls
.some(url => this.emitRefreshOnPreviousRoutes.includes(url))) {
setTimeout(() => {
this.emitRefresh();
}, 1000);
}
ngOnInit(): void {
if (this.emitRefreshAfterTimeoutInMs) {
setTimeout(() => {
this.emitRefresh();
}, this.emitRefreshAfterTimeoutInMs);
}
emitRefresh(): void {
this.selection.clear();
return this.refreshed.emit();
if (this.emitRefreshOnPreviousRoutes.length && this.refreshService.previousUrls
.some(url => this.emitRefreshOnPreviousRoutes.includes(url))) {
setTimeout(() => {
this.emitRefresh();
}, 1000);
}
}
emitRefresh(): void {
this.selection.clear();
return this.refreshed.emit();
}
}