TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-06-12 02:08:32 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
111 changed files with 2437 additions and 1063 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cmd/zitadel/setup.yaml
View File

@ -83,7 +83,7 @@ SetUp:
DefaultLabelPolicy:
PrimaryColor: '#5282c1'
BackgroundColor: '#141735'
WarnColor: '#f44336'
WarnColor: '#ff3b5b'
FontColor: '#ffffff'
Step7:
OTP: true

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

@ -275,7 +275,7 @@
.show-all {
$primary: map-get($theme, primary);
color: mat.get-color-from-palette($primary, 300) !important;
border-bottom: 2px solid var(--grey);
border-bottom: 1px solid var(--grey);
margin-bottom: .5rem;
}
/* stylelint-enable */

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

@ -242,8 +242,8 @@ export class AppComponent implements OnDestroy {
const darkPrimary = '#5282c1';
const lightPrimary = '#5282c1';
const darkWarn = '#F44336';
const lightWarn = '#F44336';
const darkWarn = '#cd3d56';
const lightWarn = '#cd3d56';
const darkBackground = '#212224';
const lightBackground = '#fafafa';
@ -267,8 +267,8 @@ export class AppComponent implements OnDestroy {
const darkPrimary = this.labelpolicy?.primaryColorDark || '#5282c1';
const lightPrimary = this.labelpolicy?.primaryColor || '#5282c1';
const darkWarn = this.labelpolicy?.warnColorDark || '#F44336';
const lightWarn = this.labelpolicy?.warnColor || '#F44336';
const darkWarn = this.labelpolicy?.warnColorDark || '#cd3d56';
const lightWarn = this.labelpolicy?.warnColor || '#cd3d56';
const darkBackground = this.labelpolicy?.backgroundColorDark || '#212224';
const lightBackground = this.labelpolicy?.backgroundColor || '#fafafa';

30
console/src/app/directives/has-feature/has-feature.directive.ts Normal file
View File

@ -0,0 +1,30 @@
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
@Directive({
selector: '[appHasFeature]',
})
export class HasFeatureDirective {
private hasView: boolean = false;
@Input() public set appHasFeature(features: string[] | RegExp[]) {
if (features && features.length > 0) {
this.authService.canUseFeature(features).subscribe(isAllowed => {
if (isAllowed && !this.hasView) {
this.viewContainerRef.clear();
this.viewContainerRef.createEmbeddedView(this.templateRef);
} else if (this.hasView) {
this.viewContainerRef.clear();
this.hasView = false;
}
});
}
}
constructor(
private authService: GrpcAuthService,
protected templateRef: TemplateRef<any>,
protected viewContainerRef: ViewContainerRef,
) { }
}

19
console/src/app/directives/has-feature/has-feature.module.ts Normal file
View File

@ -0,0 +1,19 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HasFeatureDirective } from './has-feature.directive';
@NgModule({
declarations: [
HasFeatureDirective,
],
imports: [
CommonModule,
],
exports: [
HasFeatureDirective,
],
})
export class HasFeatureModule { }

10
console/src/app/modules/detail-layout/detail-layout.component.scss
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;

188
console/src/app/modules/features/features.component.html
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>

63
console/src/app/modules/features/features.component.scss
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;
}

10
console/src/app/modules/features/features.component.ts
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);

82
console/src/app/modules/info-row/info-row.component.html Normal file
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>

77
console/src/app/modules/info-row/info-row.component.scss Normal file
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;
}
}
}
}
}
}

25
console/src/app/modules/info-row/info-row.component.spec.ts Normal file
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();
});
});

36
console/src/app/modules/info-row/info-row.component.ts Normal file
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,
};
});
}
}
}

33
console/src/app/modules/info-row/info-row.module.ts Normal file
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 { }

5
console/src/app/modules/info-section/info-section.component.html
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>

20
console/src/app/modules/info-section/info-section.component.scss
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 {

1
console/src/app/modules/info-section/info-section.component.ts
View File

@ -14,4 +14,5 @@ enum InfoSectionType {
export class InfoSectionComponent {
@Input() type: InfoSectionType = InfoSectionType.INFO;
@Input() featureLink: string = '';
}

18
console/src/app/modules/info-section/info-section.module.ts
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 { }

39
console/src/app/modules/links/links.component.html
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>

52
console/src/app/modules/links/links.component.scss
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);
}

25
console/src/app/modules/links/links.component.ts
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 {
}
}

2
console/src/app/modules/meta-layout/meta-layout.component.scss
View File

@ -8,7 +8,7 @@
display: relative;
width: 100%;
overflow-y: auto;
padding-bottom: 50px;
padding-bottom: 2rem;
&.hidden {
flex-basis: 100%;

22
console/src/app/modules/meta-layout/meta.scss
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;

2
console/src/app/modules/mfa-table/mfa-table.component.scss
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] {

20
console/src/app/modules/name-dialog/name-dialog.component.html Normal file
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>

26
console/src/app/modules/name-dialog/name-dialog.component.scss Normal file
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;
}
}

25
console/src/app/modules/name-dialog/name-dialog.component.spec.ts Normal file
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();
});
});

19
console/src/app/modules/name-dialog/name-dialog.component.ts Normal file
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);
}
}

27
console/src/app/modules/name-dialog/name-dialog.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 { 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 { }

2
console/src/app/modules/password-complexity-view/password-complexity-view.component.scss
View File

@ -47,7 +47,7 @@
}
&.red {
color: #f44336;
color: var(--warn);
}
}
}

90
console/src/app/modules/policies/login-policy/login-policy.component.html
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"

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

@ -90,7 +90,7 @@
}
.rm {
color: #f44336;
color: var(--warn);
position: absolute;
display: none;
top: -2px;

7
console/src/app/modules/policies/login-texts/login-texts.component.html
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>

9
console/src/app/modules/policies/message-texts/message-texts.component.html
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(

20
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html
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>

1
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.ts
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;
}

4
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.module.ts
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,

13
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.html
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>

1
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.ts
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();

2
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.module.ts
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,
],
})

7
console/src/app/modules/policies/privacy-policy/privacy-policy.component.html
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>

18
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
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"

4
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
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';

4
console/src/app/modules/refresh-table/refresh-table.component.html
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">

4
console/src/app/modules/refresh-table/refresh-table.component.scss
View File

@ -40,5 +40,9 @@
.icon-button {
margin-right: .5rem;
.icon {
font-size: 1.2rem;
}
}
}

87
console/src/app/modules/refresh-table/refresh-table.component.ts
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();
}
}

3
console/src/app/pages/grants/grants.component.scss
View File

@ -1,8 +1,9 @@
h1 {
margin-top: 0;
margin: 0;
}
.desc {
color: var(--grey);
margin-bottom: 2rem;
font-size: 14px;
}

10
console/src/app/pages/orgs/org-detail/org-detail.component.html
View File

@ -1,13 +1,13 @@
<app-meta-layout>
<div class="enlarged-container">
<div class="max-width-container">
<h1 class="h1">{{org?.name}}</h1>
<p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}</p>
<ng-container *ngIf="(['org.write$'] | hasRole) as canwrite$">
<app-card title="{{ 'ORG.DOMAINS.TITLE' | translate }}"
description="{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}">
<button (click)="loadDomains()" card-actions mat-icon-button>
<mat-icon>refresh</mat-icon>
<button class="icon-button" (click)="loadDomains()" card-actions mat-icon-button>
<mat-icon class="icon">refresh</mat-icon>
</button>
<div *ngFor="let domain of domains" class="domain">
@ -31,8 +31,8 @@
</div>
<p class="new-desc">{{'ORG.PAGES.ORGDOMAIN.VERIFICATION' | translate}}</p>
<cnsl-info-section type="WARN" *ngIf="(['custom_domain'] | hasFeature | async) == false" class="custom-domain-deactivated">
{{'ORG.PAGES.CUSTOMDOMAINFEATUREMISSING' | translate}}
<cnsl-info-section *ngIf="(['custom_domain'] | hasFeature | async) == false" [featureLink]="['/org/features']" class="info" type="WARN">
<span [innerHTML]="'FEATURES.NOTAVAILABLE' | translate: ({value: 'custom_domain'})"></span>
</cnsl-info-section>
<button [disabled]="(canwrite$ | async) == false || (['custom_domain'] | hasFeature | async) == false" matTooltip="Add domain" mat-raised-button

9
console/src/app/pages/orgs/org-detail/org-detail.component.scss
View File

@ -1,5 +1,5 @@
.h1 {
margin-top: 0;
margin: 0;
}
h2 {
@ -17,6 +17,13 @@ h2 {
.sub {
color: var(--grey);
margin-bottom: 2rem;
font-size: 14px;
}
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.domain {

2
console/src/app/pages/projects/apps/additional-origins/additional-origins.component.scss
View File

@ -57,6 +57,6 @@
.error {
font-size: 13px;
color: #f44336;
color: var(--warn);
margin: 0 .5rem 1.5rem .5rem;
}

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

@ -11,37 +11,34 @@
<span *ngIf="app?.apiConfig">API</span>
</div>
<ng-container *ngIf="isZitadel === false">
<ng-template appHasRole [appHasRole]="['project.app.write:'+projectId, 'project.app.write']">
<button *ngIf="!editState" matTooltip="{{'ACTIONS.EDIT' | translate}}" mat-icon-button
(click)="editState = !editState" aria-label="edit app name">
<i class="las la-edit"></i>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['project.app.write:'+projectId, 'project.app.write']">
<button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
<span>{{'ACTIONS.ACTIONS' | translate}}</span>
<mat-icon class="icon">keyboard_arrow_down</mat-icon>
</button>
<mat-menu #actions="matMenu" xPosition="before">
<button mat-menu-item (click)="openNameDialog()"
aria-label="Edit project name" *ngIf="isZitadel === false">
{{'ACTIONS.RENAME' | translate}}
</button>
<button mat-menu-item
*ngIf="app?.state !== AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_INACTIVE)">
{{'ACTIONS.DEACTIVATE' | translate}}
</button>
<button mat-menu-item *ngIf="app?.state == AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_ACTIVE)">
{{'ACTIONS.REACTIVATE' | translate}}
</button>
<ng-template appHasRole [appHasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
<button mat-menu-item matTooltip="{{'APP.PAGES.DELETE' | translate}}"
(click)="deleteApp()">
<span [style.color]="'var(--warn)'">{{'APP.PAGES.DELETE' | translate}}</span>
</button>
<button *ngIf="editState" (click)="saveApp()" [disabled]="appNameForm.invalid || name?.disabled"
mat-icon-button>
<i class="las la-save"></i>
</button>
<ng-template appHasRole [appHasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
<button matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" mat-icon-button
(click)="deleteApp()" aria-label="delete app">
<i class="las la-trash"></i>
</button>
</ng-template>
<span class="fill-space"></span>
<button class="state-button" mat-stroked-button color="warn"
*ngIf="app && app.state !== undefined && app?.state !== AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_INACTIVE)">
{{'ACTIONS.DEACTIVATE' | translate}}
</button>
<button class="state-button" mat-stroked-button
*ngIf="app && app.state !== undefined && app?.state !== AppState.APP_STATE_ACTIVE"
(click)="changeState(AppState.APP_STATE_ACTIVE)">
{{'ACTIONS.REACTIVATE' | translate}}
</button>
</ng-template>
</ng-template>
</mat-menu>
</ng-template>
</ng-container>
<p class="desc">{{ 'APP.PAGES.DESCRIPTION' | translate }}</p>
@ -50,104 +47,68 @@
<span *ngIf="errorMessage" class="err-container">{{errorMessage}}</span>
<form *ngIf="app && editState" [formGroup]="appNameForm">
<div class="name-content">
<cnsl-form-field class="name-field">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
</div>
</form>
<div class="environment-wrapper">
<div class="environment" *ngIf="app?.oidcConfig?.clientId">
<span class="key">{{'APP.OIDC.INFO.CLIENTID' | translate}}</span>
<div class="environment-row">
<span>{{this.app.oidcConfig?.clientId}}</span>
<button color="primary" [disabled]="copiedKey == this.app.oidcConfig?.clientId"
[matTooltip]="(copiedKey != this.app.oidcConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="this.app.oidcConfig?.clientId"
(copiedValue)="copiedKey = 'clientId'" mat-icon-button>
<i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
<i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
</button>
</div>
</div>
<div class="environment" *ngIf="app?.apiConfig?.clientId">
<span class="key">{{'APP.API.INFO.CLIENTID' | translate}}</span>
<div class="environment-row">
<span>{{this.app.apiConfig?.clientId}}</span>
<button color="primary" [disabled]="copiedKey == this.app.apiConfig?.clientId"
[matTooltip]="(copiedKey != this.app.apiConfig?.clientId ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="this.app.apiConfig?.clientId"
(copiedValue)="copiedKey = 'clientId'" mat-icon-button>
<i *ngIf="copiedKey != 'clientId'" class="las la-clipboard"></i>
<i *ngIf="copiedKey == 'clientId'" class="las la-clipboard-check"></i>
</button>
</div>
</div>
<ng-container *ngFor="let environmentV of (environmentMap | keyvalue)">
<div *ngIf="environmentV.value" class="environment">
<span class="key">{{environmentV.key}}</span>
<div class="environment-row">
<span>{{environmentV.value}}</span>
<button color="primary" [disabled]="copiedKey == environmentV.value"
[matTooltip]="(copiedKey != environmentV.value ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="environmentV.value"
(copiedValue)="copiedKey = environmentV.key" mat-icon-button>
<i *ngIf="copiedKey != environmentV.key" class="las la-clipboard"></i>
<i *ngIf="copiedKey == environmentV.key" class="las la-clipboard-check"></i>
</button>
</div>
</div>
</ng-container>
</div>
<div class="compliance"
*ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
<cnsl-info-section class="problem" type="WARN">
<ul style="margin: 0;">
<li style="margin: 0 0 .5rem 0;"
*ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
{{problem.localizedMessage}}</li>
</ul>
</cnsl-info-section>
*ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
<cnsl-info-section class="problem" type="WARN">
<ul style="margin: 0;">
<li style="margin: 0 0 .5rem 0;"
*ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
{{problem.localizedMessage}}</li>
</ul>
</cnsl-info-section>
</div>
<div class="content" *ngIf="app?.oidcConfig">
<h3 class="full-width section-title">{{'APP.OIDC.REDIRECTSECTIONTITLE' | translate}}</h3>
<cnsl-info-row *ngIf="app" [app]="app"></cnsl-info-row>
<mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
<cnsl-info-section class="step-description" *ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
</cnsl-info-section>
<cnsl-info-section class="step-description"
<div *ngIf="app?.oidcConfig" class="expandables">
<div class="expandable">
<p class="title">{{'APP.OIDC.REDIRECTSECTIONTITLE' | translate}}
<button mat-icon-button (click)="showRedirects = !showRedirects"
matTooltip="{{(showRedirects ? 'ACTIONS.HIDE' : 'ACTIONS.SHOW') | translate}}">
<mat-icon *ngIf="!showRedirects">expand_more</mat-icon>
<mat-icon *ngIf="showRedirects">expand_less</mat-icon>
</button>
</p>
<ng-container *ngIf="showRedirects">
<cnsl-info-section *ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
<div class="dev-col">
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
<mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
</div>
</cnsl-info-section>
<cnsl-info-section
*ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value == OIDCAppType.OIDC_APP_TYPE_USER_AGENT">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}
</cnsl-info-section>
<div class="dev-col">
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</span>
<mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
</div>
</cnsl-info-section>
<div class="content">
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
(changedUris)="redirectUrisList = $event" [urisList]="redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $event"
[urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
</div>
</ng-container>
</div>
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
(changedUris)="redirectUrisList = $event" [urisList]="redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $event"
[urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<div style="margin: .5rem" class="divider"></div>
<div class="additional-origins">
<div class="expandable">
<p class="title">{{'APP.ADDITIONALORIGINS' | translate}}
<button mat-icon-button (click)="showAdditionalOrigins = !showAdditionalOrigins"
matTooltip="{{(showAdditionalOrigins ? 'ACTIONS.HIDE' : 'ACTIONS.SHOW') | translate}}">

203
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
View File

@ -13,13 +13,14 @@
margin-right: 1rem;
h1 {
font-size: 1.2rem;
margin: 0 0 0 0;
font-size: 2rem;
margin: 0;
font-weight: normal;
}
span {
font-size: 12px;
font-size: 14px;
margin: .5rem 0;
color: var(--grey);
}
}
@ -41,8 +42,15 @@
color: rgb(201, 51, 71);
}
.state-button {
margin-left: .5rem;
.actions-trigger {
margin-top: .25rem;
display: flex;
align-items: center;
.icon {
margin-left: .5rem;
margin-right: -.5rem;
}
}
}
@ -51,49 +59,10 @@
font-size: 14px;
}
.environment-wrapper {
padding: 1rem 0;
display: flex;
flex-wrap: wrap;
.environment {
min-width: 300px;
.key {
font-size: 12px;
color: var(--grey);
}
.environment-row {
display: flex;
align-items: center;
overflow: hidden;
height: 30px;
button {
transition: opacity .15s ease-in-out;
visibility: hidden;
opacity: 0;
&[disabled] {
visibility: visible;
color: white;
opacity: 1;
}
}
&:hover {
button {
visibility: visible;
opacity: 1;
}
}
}
}
}
.compliance .problem {
font-size: 14px;
margin-bottom: .5rem;
display: block;
}
.name-content {
@ -136,109 +105,107 @@
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
.grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
.rt {
margin-top: 2.3rem;
margin-left: .5rem;
}
.rt {
margin-top: 2.3rem;
margin-left: .5rem;
}
}
&.nowrap {
flex-wrap: nowrap;
}
.expandables {
padding-top: 1rem;
&.center {
align-items: center;
}
.redirect-section {
flex: 1;
margin: 0 .5rem;
}
.additional-origins {
.expandable {
display: block;
width: 100%;
margin: 0 .5rem;
.title {
margin: 0;
text-transform: uppercase;
letter-spacing: .05em;
font-size: 14px;
}
.dev-col {
display: flex;
flex-direction: column;
align-items: flex-start;
.devmode {
margin: 1rem 0 .5rem 0;
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
padding-bottom: 2rem;
.redirect-section {
flex: 1;
margin: 0 .5rem;
}
}
.desc {
color: var(--grey);
font-size: 14px;
margin-top: 0;
margin: 0;
}
.input {
width: 100%;
}
}
}
.formfield {
flex: 1 1 30%;
margin: 0 .5rem;
.formfield {
flex: 1 1 30%;
margin: 0 .5rem;
&.full-width {
flex-basis: 100%;
}
}
.section-title {
margin: 1.5rem 0 0 0;
}
.full-width {
&.full-width {
flex-basis: 100%;
margin-left: .5rem;
margin-right: .5rem;
}
}
.clockskew-title {
font-size: 14px;
color: var(--grey);
margin: 1rem .5rem 0 .5rem;
}
.section-title {
margin: 1.5rem 0 0 0;
}
.clockskew-slider {
width: 100%;
margin: 0 .5rem;
}
.full-width {
flex-basis: 100%;
margin-left: .5rem;
margin-right: .5rem;
}
.desc {
color: var(--grey);
font-size: 14px;
margin-bottom: 1.5rem;
}
.clockskew-title {
font-size: 14px;
color: var(--grey);
margin: 1rem .5rem 0 .5rem;
}
.devmode {
flex: 1 1 100%;
margin: 1rem .5rem;
}
.clockskew-slider {
width: 100%;
margin: 0 .5rem;
}
.step-description {
font-size: .9rem;
color: var(--grey);
flex-basis: 100%;
margin: 0 .5rem 1rem .5rem;
}
.desc {
color: var(--grey);
font-size: 14px;
margin-bottom: 1.5rem;
}
.error {
font-size: 13px;
color: #f44336;
margin: 0 .5rem 1.5rem .5rem;
}
.error {
font-size: 13px;
color: var(--warn);
margin: 0 .5rem 1.5rem .5rem;
}
.btn-container {

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

@ -1,8 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
@ -14,6 +13,7 @@ import { take } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import { CnslLinks } from 'src/app/modules/links/links.component';
import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import {
APIAuthMethodType,
@ -62,7 +62,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public errorMessage: string = '';
public removable: boolean = true;
public addOnBlur: boolean = true;
public showAdditionalOrigins: boolean = false;
public showRedirects: boolean = false;
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
public authMethods: RadioItemAuthType[] = [];
@ -98,7 +101,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
];
public AppState: any = AppState;
public appNameForm!: FormGroup;
public oidcForm!: FormGroup;
public apiForm!: FormGroup;
@ -119,7 +121,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public requestRedirectValuesSubject$: Subject<void> = new Subject();
public copiedKey: any = '';
public environmentMap: { [key: string]: string; } = {};
public nextLinks: Array<CnslLinks> = [];
constructor(
@ -132,25 +133,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private mgmtService: ManagementService,
private authService: GrpcAuthService,
private router: Router,
private http: HttpClient,
private snackbar: MatSnackBar,
) {
this.http.get('./assets/environment.json')
.toPromise().then((env: any) => {
this.environmentMap = {
issuer: env.issuer,
adminServiceUrl: env.adminServiceUrl,
mgmtServiceUrl: env.mgmtServiceUrl,
authServiceUrl: env.adminServiceUrl,
};
});
this.appNameForm = this.fb.group({
state: [{ value: '', disabled: true }, []],
name: [{ value: '', disabled: true }, [Validators.required]],
});
this.oidcForm = this.fb.group({
devMode: [{ value: false, disabled: true }, []],
clientId: [{ value: '', disabled: true }],
@ -174,6 +158,25 @@ export class AppDetailComponent implements OnInit, OnDestroy {
return seconds + 's';
}
public openNameDialog(): void {
const dialogRef = this.dialog.open(NameDialogComponent, {
data: {
name: this.app.name,
titleKey: 'APP.NAMEDIALOG.TITLE',
descKey: 'APP.NAMEDIALOG.DESCRIPTION',
labelKey: 'APP.NAMEDIALOG.NAME',
},
width: '400px',
});
dialogRef.afterClosed().subscribe(name => {
if (name) {
this.app.name = name;
this.saveApp();
}
});
}
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(params => this.getData(params));
}
@ -188,15 +191,18 @@ export class AppDetailComponent implements OnInit, OnDestroy {
i18nTitle: 'APP.PAGES.NEXTSTEPS.0.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.0.DESC',
routerLink: ['/projects', this.projectId],
iconClasses: 'las la-user-tag',
},
{
i18nTitle: 'APP.PAGES.NEXTSTEPS.1.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.1.DESC',
routerLink: ['/users', 'create'],
iconClasses: 'las la-user-plus',
}, {
i18nTitle: 'APP.PAGES.NEXTSTEPS.2.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.2.DESC',
href: 'https://docs.zitadel.ch',
iconClasses: 'las la-people-carry',
},
];
}
@ -216,8 +222,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.mgmtService.getAppByID(projectid, id).then(app => {
if (app.app) {
this.app = app.app;
this.appNameForm.patchValue(this.app);
if (this.app.oidcConfig) {
this.getAuthMethodOptions('OIDC');
@ -245,7 +249,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
if (allowed) {
this.appNameForm.enable();
this.oidcForm.enable();
this.apiForm.enable();
}
@ -426,19 +429,15 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public saveApp(): void {
if (this.appNameForm.valid) {
this.app.name = this.name?.value;
this.mgmtService
.updateApp(this.projectId, this.app.id, this.name?.value)
.then(() => {
this.toast.showInfo('APP.TOAST.UPDATED', true);
this.editState = false;
})
.catch(error => {
this.toast.showError(error);
});
}
this.mgmtService
.updateApp(this.projectId, this.app.id, this.app.name)
.then(() => {
this.toast.showInfo('APP.TOAST.UPDATED', true);
this.editState = false;
})
.catch(error => {
this.toast.showError(error);
});
}
public toggleRefreshToken(event: MatCheckboxChange): void {
@ -462,10 +461,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public saveOIDCApp(): void {
this.requestRedirectValuesSubject$.next();
if (this.appNameForm.valid) {
this.app.name = this.name?.value;
}
if (this.oidcForm.valid) {
if (this.app.oidcConfig) {
this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
@ -577,10 +572,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this._location.back();
}
public get name(): AbstractControl | null {
return this.appNameForm.get('name');
}
public get clientId(): AbstractControl | null {
return this.oidcForm.get('clientId');
}

93
console/src/app/pages/projects/apps/apps.module.ts
View File

@ -24,10 +24,12 @@ import { AppRadioModule } from 'src/app/modules/app-radio/app-radio.module';
import { CardModule } from 'src/app/modules/card/card.module';
import { ChangesModule } from 'src/app/modules/changes/changes.module';
import { ClientKeysModule } from 'src/app/modules/client-keys/client-keys.module';
import { InfoRowModule } from 'src/app/modules/info-row/info-row.module';
import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { LinksModule } from 'src/app/modules/links/links.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { NameDialogModule } from 'src/app/modules/name-dialog/name-dialog.module';
import { OriginPipeModule } from 'src/app/pipes/origin-pipe/origin-pipe.module';
import { RedirectPipeModule } from 'src/app/pipes/redirect-pipe/redirect-pipe.module';
@ -39,49 +41,52 @@ import { AppsRoutingModule } from './apps-routing.module';
import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
@NgModule({
declarations: [
AppCreateComponent,
AppDetailComponent,
AppSecretDialogComponent,
RedirectUrisComponent,
AdditionalOriginsComponent,
],
imports: [
CommonModule,
A11yModule,
RedirectPipeModule,
LinksModule,
AppRadioModule,
AppsRoutingModule,
FormsModule,
TranslateModule,
OriginPipeModule,
ReactiveFormsModule,
HasRoleModule,
MatMenuModule,
MatChipsModule,
ClientKeysModule,
MatIconModule,
MatSelectModule,
MatButtonToggleModule,
MatButtonModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatDialogModule,
MatCheckboxModule,
CardModule,
MatTooltipModule,
TranslateModule,
MatStepperModule,
MatRadioModule,
CopyToClipboardModule,
MatSlideToggleModule,
InputModule,
MetaLayoutModule,
MatSliderModule,
ChangesModule,
InfoSectionModule,
],
exports: [TranslateModule],
declarations: [
AppCreateComponent,
AppDetailComponent,
AppSecretDialogComponent,
RedirectUrisComponent,
AdditionalOriginsComponent,
],
imports: [
CommonModule,
A11yModule,
RedirectPipeModule,
LinksModule,
NameDialogModule,
AppRadioModule,
AppsRoutingModule,
FormsModule,
InfoRowModule,
TranslateModule,
OriginPipeModule,
MatMenuModule,
ReactiveFormsModule,
HasRoleModule,
MatMenuModule,
MatChipsModule,
ClientKeysModule,
MatIconModule,
MatSelectModule,
MatButtonToggleModule,
MatButtonModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatDialogModule,
MatCheckboxModule,
CardModule,
MatTooltipModule,
TranslateModule,
MatStepperModule,
MatRadioModule,
CopyToClipboardModule,
MatSlideToggleModule,
InputModule,
MetaLayoutModule,
MatSliderModule,
ChangesModule,
InfoSectionModule,
],
exports: [TranslateModule],
})
export class AppsModule { }

2
console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss
View File

@ -57,6 +57,6 @@
.error {
font-size: 13px;
color: #f44336;
color: var(--warn);
margin: 0 .5rem 1.5rem .5rem;
}

2
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss
View File

@ -10,7 +10,7 @@
}
.h1 {
font-size: 1.2rem;
font-size: 2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;

16
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html
View File

@ -9,14 +9,18 @@
<p class="n-items" *ngIf="!loading && selection.selected.length > 0">{{'PROJECT.PAGES.PINNED' | translate}}</p>
<div class="item card" *ngFor="let item of selection.selected; index as i"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE}"
(click)="navigateToProject(item.projectId,item.grantId, $event)">
<div class="text-part">
<span *ngIf="item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<div class="name-row">
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<div class="state-dot" [ngClass]="{'active': item.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': item.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE}"></div>
</div>
<span class="description" *ngIf="item.projectOwnerName">{{item.projectOwnerName}}</span>
<span *ngIf="item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
@ -32,14 +36,16 @@
<p class="n-items" *ngIf="!loading && notPinned.length > 0">{{'PROJECT.PAGES.ALL' | translate}}</p>
<div class="item card" *ngFor="let item of notPinned; index as i"
(click)="navigateToProject(item.projectId,item.grantId, $event)"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE}">
(click)="navigateToProject(item.projectId,item.grantId, $event)">
<div class="text-part">
<span *ngIf="item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<div class="name-row">
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<div class="state-dot" [ngClass]="{'active': item.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': item.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE}"></div>
</div>
<span class="description" *ngIf="item.projectOwnerName">{{item.projectOwnerName}}</span>
<span *ngIf="item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>

29
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.scss
View File

@ -44,7 +44,7 @@
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 260px;
flex-basis: 270px;
display: flex;
text-decoration: none;
cursor: pointer;
@ -81,10 +81,29 @@
color: var(--grey);
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: .5rem;
.name-row {
display: flex;
align-items: center;
margin: 1rem 0 .5rem 0;
.name {
font-size: 1.2rem;
margin-right: .5rem;
}
.state-dot {
height: 8px;
width: 8px;
border-radius: 50%;
&.active {
background-color: var(--success);
}
&.inactive {
background-color: var(--warn);
}
}
}
.description {

150
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.ts
View File

@ -3,96 +3,96 @@ import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { Router } from '@angular/router';
import { Org } from 'src/app/proto/generated/zitadel/org_pb';
import { GrantedProject, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
import { GrantedProject, ProjectGrantState } from 'src/app/proto/generated/zitadel/project_pb';
import { StorageKey, StorageService } from 'src/app/services/storage.service';
@Component({
selector: 'app-granted-project-grid',
templateUrl: './granted-project-grid.component.html',
styleUrls: ['./granted-project-grid.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
query('@animate',
stagger(100, animateChild()),
),
]),
]),
trigger('animate', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-100%)' }),
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
style({ opacity: 1, transform: 'translateY(0)' }),
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
]),
]),
],
selector: 'app-granted-project-grid',
templateUrl: './granted-project-grid.component.html',
styleUrls: ['./granted-project-grid.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
query('@animate',
stagger(100, animateChild()),
),
]),
]),
trigger('animate', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-100%)' }),
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
style({ opacity: 1, transform: 'translateY(0)' }),
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
]),
]),
],
})
export class GrantedProjectGridComponent implements OnChanges {
@Input() items: Array<GrantedProject.AsObject> = [];
public notPinned: Array<GrantedProject.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
@Input() items: Array<GrantedProject.AsObject> = [];
public notPinned: Array<GrantedProject.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
public showNewProject: boolean = false;
public ProjectState: any = ProjectState;
public showNewProject: boolean = false;
public ProjectGrantState: any = ProjectGrantState;
constructor(private storage: StorageService, private router: Router) {
this.selection.changed.subscribe(selection => {
this.setPrefixedItem('pinned-granted-projects', JSON.stringify(
this.selection.selected.map(item => item.projectId),
)).then(() => {
selection.added.forEach(item => {
const index = this.notPinned.findIndex(i => i.projectId === item.projectId);
this.notPinned.splice(index, 1);
});
this.notPinned.push(...selection.removed);
});
constructor(private storage: StorageService, private router: Router) {
this.selection.changed.subscribe(selection => {
this.setPrefixedItem('pinned-granted-projects', JSON.stringify(
this.selection.selected.map(item => item.projectId),
)).then(() => {
selection.added.forEach(item => {
const index = this.notPinned.findIndex(i => i.projectId === item.projectId);
this.notPinned.splice(index, 1);
});
}
this.notPinned.push(...selection.removed);
});
});
}
public addItem(): void {
this.newClicked.emit(true);
}
public addItem(): void {
this.newClicked.emit(true);
}
public ngOnChanges(changes: SimpleChanges): void {
if (changes.items?.currentValue && changes.items.currentValue.length > 0) {
this.notPinned = Object.assign([], this.items);
this.reorganizeItems();
}
public ngOnChanges(changes: SimpleChanges): void {
if (changes.items?.currentValue && changes.items.currentValue.length > 0) {
this.notPinned = Object.assign([], this.items);
this.reorganizeItems();
}
}
public reorganizeItems(): void {
this.getPrefixedItem('pinned-granted-projects').then(storageEntry => {
if (storageEntry) {
const array: string[] = JSON.parse(storageEntry);
const toSelect: GrantedProject.AsObject[] = this.items.filter((item, index) => {
if (array.includes(item.projectId)) {
return true;
}
});
this.selection.select(...toSelect);
}
public reorganizeItems(): void {
this.getPrefixedItem('pinned-granted-projects').then(storageEntry => {
if (storageEntry) {
const array: string[] = JSON.parse(storageEntry);
const toSelect: GrantedProject.AsObject[] = this.items.filter((item, index) => {
if (array.includes(item.projectId)) {
return true;
}
});
}
this.selection.select(...toSelect);
}
});
}
private async getPrefixedItem(key: string): Promise<string | null> {
const org = this.storage.getItem<Org.AsObject>(StorageKey.organization) as Org.AsObject;
return localStorage.getItem(`${org.id}:${key}`);
}
private async getPrefixedItem(key: string): Promise<string | null> {
const org = this.storage.getItem<Org.AsObject>(StorageKey.organization) as Org.AsObject;
return localStorage.getItem(`${org.id}:${key}`);
}
private async setPrefixedItem(key: string, value: any): Promise<void> {
const org = this.storage.getItem<Org.AsObject>(StorageKey.organization) as Org.AsObject;
return localStorage.setItem(`${org.id}:${key}`, value);
}
private async setPrefixedItem(key: string, value: any): Promise<void> {
const org = this.storage.getItem<Org.AsObject>(StorageKey.organization) as Org.AsObject;
return localStorage.setItem(`${org.id}:${key}`, value);
}
public navigateToProject(projectId: string, id: string, event: any): void {
if (event && event.srcElement && event.srcElement.localName !== 'button') {
this.router.navigate(['/granted-projects', projectId, 'grant', id]);
}
public navigateToProject(projectId: string, id: string, event: any): void {
if (event && event.srcElement && event.srcElement.localName !== 'button') {
this.router.navigate(['/granted-projects', projectId, 'grant', id]);
}
}
}

2
console/src/app/pages/projects/granted-projects/granted-projects.component.scss
View File

@ -1,5 +1,5 @@
h1 {
margin-top: 0;
margin: 0;
}
.sub {

6
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
View File

@ -1,3 +1,9 @@
h3 {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
letter-spacing: .05em;
}
.app-grid-header {
display: flex;

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

@ -5,48 +5,44 @@
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.name}}</h1>
<ng-template appHasRole [appHasRole]="['project.write:'+projectId, 'project.write']">
<button matTooltip="{{'ACTIONS.EDIT' | translate}}" mat-icon-button (click)="editstate = !editstate"
aria-label="Edit project name" *ngIf="isZitadel === false">
<i *ngIf="!editstate" class="las la-edit"></i>
<mat-icon *ngIf="editstate">close</mat-icon>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['project.delete:'+projectId, 'project.delete']">
<button matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" mat-icon-button
(click)="deleteProject()" aria-label="Edit project name" *ngIf="isZitadel === false">
<i class="las la-trash"></i>
</button>
</ng-template>
<span class="fill-space"></span>
<button mat-stroked-button color="warn"
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) == false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_ACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' |
translate}}</button>
<button mat-stroked-button color="warn"
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) == false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_INACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' |
translate}}</button>
<ng-template appHasRole [appHasRole]="['project.write:'+projectId, 'project.write']">
<button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
<span>{{'ACTIONS.ACTIONS' | translate}}</span>
<mat-icon class="icon">keyboard_arrow_down</mat-icon>
</button>
<mat-menu #actions="matMenu" xPosition="before">
<button mat-menu-item (click)="openNameDialog()"
aria-label="Edit project name" *ngIf="isZitadel === false">
{{'ACTIONS.RENAME' | translate}}
</button>
<button mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) == false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_ACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_INACTIVE)">
{{'PROJECT.TABLE.DEACTIVATE' | translate}}
</button>
<button mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) == false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_INACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_ACTIVE)">
{{'PROJECT.TABLE.ACTIVATE' | translate}}
</button>
<ng-template appHasRole [appHasRole]="['project.delete$', 'project.delete:'+projectId]">
<button mat-menu-item matTooltip="{{'ACTIONS.DELETE' | translate}}"
(click)="deleteProject()" aria-label="Edit project name" *ngIf="isZitadel === false">
<span [style.color]="'var(--warn)'">{{'PROJECT.PAGES.DELETE' | translate}}</span>
</button>
</ng-template>
</mat-menu>
</ng-template>
<div class="full-width">
<div class="line">
<ng-container *ngIf="editstate">
<cnsl-form-field *ngIf="editstate && project?.name" class="formfield"
hintLabel="The name is required!">
<cnsl-label>{{'PROJECT.NAME' | translate}}</cnsl-label>
<input cnslInput [(ngModel)]="project.name" name="name" />
</cnsl-form-field>
<button matTooltip="{{'ACTIONS.SAVE' | translate}}" class="icon-button" *ngIf="editstate"
mat-icon-button (click)="updateName()">
<mat-icon>check</mat-icon>
</button>
</ng-container>
<span class="fill-space"></span>
</div>
<p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
<p *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
</div>

12
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
View File

@ -14,12 +14,22 @@
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.actions-trigger {
margin-top: .25rem;
display: flex;
align-items: center;
.icon {
margin-left: .5rem;
margin-right: -.5rem;
}
}
.full-width {
padding-top: 1rem;
width: 100%;

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

@ -21,6 +21,8 @@ import { User } from 'src/app/proto/generated/zitadel/user_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { NameDialogComponent } from '../../../../modules/name-dialog/name-dialog.component';
@Component({
selector: 'app-owned-project-detail',
templateUrl: './owned-project-detail.component.html',
@ -41,7 +43,6 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
public grid: boolean = true;
private subscription?: Subscription;
public editstate: boolean = false;
public isZitadel: boolean = false;
@ -73,6 +74,25 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
this.subscription?.unsubscribe();
}
public openNameDialog(): void {
const dialogRef = this.dialog.open(NameDialogComponent, {
data: {
name: this.project.name,
titleKey: 'PROJECT.NAMEDIALOG.TITLE',
descKey: 'PROJECT.NAMEDIALOG.DESCRIPTION',
labelKey: 'PROJECT.NAMEDIALOG.NAME',
},
width: '400px',
});
dialogRef.afterClosed().subscribe(name => {
if (name) {
this.project.name = name;
this.updateName();
}
});
}
public openPrivateLabelingDialog(): void {
const dialogRef = this.dialog.open(ProjectPrivateLabelingDialogComponent, {
data: {
@ -221,7 +241,6 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
public updateName(): void {
this.saveProject();
this.editstate = false;
}
public openAddMember(): void {

78
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts
View File

@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatRippleModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
@ -35,43 +36,44 @@ import { OwnedProjectDetailComponent } from './owned-project-detail.component';
import { ProjectGrantsComponent } from './project-grants/project-grants.component';
@NgModule({
declarations: [
OwnedProjectDetailComponent,
ApplicationGridComponent,
ApplicationsComponent,
ProjectGrantsComponent,
],
imports: [
CommonModule,
FormsModule,
AppCardModule,
OwnedProjectDetailRoutingModule,
TranslateModule,
ReactiveFormsModule,
HasRoleModule,
MatButtonModule,
MatIconModule,
ContributorsModule,
MatTabsModule,
WarnDialogModule,
MatTooltipModule,
ProjectRolesModule,
HasRolePipeModule,
UserGrantsModule,
TimestampToDatePipeModule,
MatTableModule,
InputModule,
CardModule,
PaginatorModule,
MatRippleModule,
MatCheckboxModule,
MatSelectModule,
MatProgressSpinnerModule,
ChangesModule,
MetaLayoutModule,
RefreshTableModule,
MemberCreateDialogModule,
LocalizedDatePipeModule,
],
declarations: [
OwnedProjectDetailComponent,
ApplicationGridComponent,
ApplicationsComponent,
ProjectGrantsComponent,
],
imports: [
CommonModule,
FormsModule,
AppCardModule,
OwnedProjectDetailRoutingModule,
TranslateModule,
ReactiveFormsModule,
HasRoleModule,
MatButtonModule,
MatIconModule,
ContributorsModule,
MatTabsModule,
WarnDialogModule,
MatTooltipModule,
ProjectRolesModule,
HasRolePipeModule,
UserGrantsModule,
TimestampToDatePipeModule,
MatTableModule,
InputModule,
CardModule,
PaginatorModule,
MatRippleModule,
MatCheckboxModule,
MatSelectModule,
MatMenuModule,
MatProgressSpinnerModule,
ChangesModule,
MetaLayoutModule,
RefreshTableModule,
MemberCreateDialogModule,
LocalizedDatePipeModule,
],
})
export class OwnedProjectDetailModule { }

10
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
View File

@ -17,7 +17,10 @@
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<div class="name-row">
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<div class="state-dot" [ngClass]="{'active': item.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': item.state === ProjectState.PROJECT_STATE_INACTIVE}"></div>
</div>
<span *ngIf="item.details.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{
@ -41,7 +44,10 @@
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<div class="name-row">
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<div class="state-dot" [ngClass]="{'active': item.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': item.state === ProjectState.PROJECT_STATE_INACTIVE}"></div>
</div>
<span *ngIf="item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{

33
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.scss
View File

@ -44,7 +44,7 @@
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 260px;
flex-basis: 270px;
display: flex;
text-decoration: none;
cursor: pointer;
@ -57,10 +57,6 @@
min-height: 166px;
transition: box-shadow .1s ease-in;
&.inactive {
color: var(--grey);
}
img {
height: 50px;
width: 50px;
@ -81,10 +77,29 @@
color: var(--grey);
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: .5rem;
.name-row {
display: flex;
align-items: center;
margin: 1rem 0 .5rem 0;
.name {
font-size: 1.2rem;
margin-right: .5rem;
}
.state-dot {
height: 8px;
width: 8px;
border-radius: 50%;
&.active {
background-color: var(--success);
}
&.inactive {
background-color: var(--warn);
}
}
}
.description {

1
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.ts
View File

@ -121,6 +121,7 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;
}
console.log(resp.resultList);
this.dataSource.data = this.ownedProjectList;
this.loadingSubject.next(false);
}).catch(error => {

2
console/src/app/pages/projects/owned-projects/owned-projects.component.scss
View File

@ -1,5 +1,5 @@
h1 {
margin-top: 0;
margin: 0;
}
.sub {

2
console/src/app/pages/projects/owned-projects/owned-projects.module.ts
View File

@ -24,6 +24,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
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 { NameDialogModule } from '../../../modules/name-dialog/name-dialog.module';
import {
ProjectPrivateLabelingDialogModule,
} from '../../../modules/project-private-labeling-dialog/project-private-labeling-dialog.module';
@ -43,6 +44,7 @@ import { OwnedProjectsComponent } from './owned-projects.component';
OwnedProjectsRoutingModule,
UserGrantsModule,
FormsModule,
NameDialogModule,
ReactiveFormsModule,
TranslateModule,
AvatarModule,

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

@ -1,6 +1,9 @@
<app-card title="{{'USER.PASSWORDLESS.TITLE' | translate}}"
description="{{'USER.PASSWORDLESS.DESCRIPTION' | translate}}">
<app-refresh-table [loading]="loading$ | async" (refreshed)="getPasswordless()"
<button card-actions mat-icon-button (click)="getPasswordless()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
<app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getPasswordless()"
[dataSize]="dataSource?.data?.length">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">

5
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.scss
View File

@ -1,3 +1,8 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.add-row {
display: flex;

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

@ -28,7 +28,7 @@
}
.error {
color: #f44336;
color: var(--warn);
font-size: 14px;
}

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

@ -1,7 +1,7 @@
<app-meta-layout>
<div class="max-width-container">
<div class="header-row">
<div>
<div class="text">
<h1 class="h1">{{ 'USER.TITLE' | translate }}</h1>
<p class="sub">{{'USER.DESCRIPTION' | translate}}</p>
</div>
@ -14,18 +14,7 @@
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
<app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
<div class="login-name-row" *ngFor="let login of user?.loginNamesList">
<span>{{login}}</span>
<button color="primary" [disabled]="copied == login"
[matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="login" (copiedValue)="copied = $event" mat-icon-button>
<i *ngIf="copied != login" class="las la-clipboard"></i>
<i *ngIf="copied == login" class="las la-clipboard-check"></i>
</button>
</div>
</app-card>
<cnsl-info-row *ngIf="user" [user]="user"></cnsl-info-row>
<app-card *ngIf="user && user.human?.profile" class=" app-card" title="{{ 'USER.PROFILE.TITLE' | translate }}">
<app-detail-form [showEditImage]="true" [preferredLoginName]="user.preferredLoginName" [genders]="genders" [languages]="languages" [username]="user.userName" [user]="user.human"
@ -35,8 +24,8 @@
<app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
<button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon>refresh</mat-icon>
<button class="icon-button" card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
<app-contact *ngIf="user?.human" [human]="user.human" [state]="user.state" canWrite="true"
(editType)="openEditDialog($event)" (enteredPhoneCode)="enteredPhoneCode($event)"
@ -45,10 +34,7 @@
</app-contact>
</app-card>
<app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<app-external-idps [userId]="user.id" [service]="userService"></app-external-idps>
</app-card>
<app-external-idps [userId]="user?.id" [service]="userService"></app-external-idps>
<app-auth-passwordless *ngIf="user" #mfaComponent></app-auth-passwordless>
@ -62,24 +48,35 @@
[disableDelete]="((['user.grant.delete$'] | hasRole) | async) == false">
</app-user-grants>
</app-card>
<ng-template appHasFeature [appHasFeature]="['metadata.user']">
<cnsl-metadata *ngIf="user?.id" [userId]="user.id"></cnsl-metadata>
</ng-template>
</div>
<div *ngIf="user" class="side" metainfo>
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="user?.id" class="second">{{ user.id }}</span>
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="user?.id" class="second">{{ user.id }}</span>
</div>
<div class="meta-row" *ngIf="user?.preferredLoginName">
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
</div>
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab label="Details">
<div class="side-padding">
<ng-template appHasRole [appHasRole]="['user.membership.read']">
<app-memberships [auth]="true" [user]="user"></app-memberships>
</ng-template>
</div>
<div class="meta-row" *ngIf="user?.preferredLoginName">
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
</div>
<ng-template appHasRole [appHasRole]="['user.membership.read']">
<app-memberships [auth]="true" [user]="user"></app-memberships>
</ng-template>
<app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.MYUSER" [id]="user.id">
</app-changes>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
<app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.MYUSER" [id]="user.id">
</app-changes>
</mat-tab>
</mat-tab-group>
</div>
</app-meta-layout>

51
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
View File

@ -5,13 +5,18 @@
margin-bottom: 2rem;
flex-wrap: wrap;
.h1 {
margin-top: 0;
}
.text {
flex: 1;
.sub {
color: var(--grey);
max-width: 500px;
.h1 {
margin: 0;
}
.sub {
color: var(--grey);
max-width: 500px;
font-size: 14px;
}
}
.theme {
@ -19,30 +24,6 @@
}
}
.login-name-row {
display: flex;
align-items: center;
button {
transition: opacity .15s ease-in-out;
visibility: hidden;
opacity: 0;
&[disabled] {
visibility: visible;
color: white;
opacity: 1;
}
}
&:hover {
button {
visibility: visible;
opacity: 1;
}
}
}
.btn-container {
display: flex;
justify-content: flex-end;
@ -66,6 +47,16 @@
}
}
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.resendemail {
margin-right: 1rem;
}
.side-padding {
padding-top: 1rem;
}

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

@ -24,8 +24,6 @@ export class AuthUserDetailComponent implements OnDestroy {
public loading: boolean = false;
public copied: string = '';
public ChangeType: any = ChangeType;
public userLoginMustBeDomain: boolean = false;
public UserState: any = UserState;

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

@ -1,5 +1,8 @@
<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
<app-refresh-table [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
<button card-actions mat-icon-button (click)="getMFAs()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
<app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>

5
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
View File

@ -1,3 +1,8 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.add-row {
display: flex;

4
console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.html
View File

@ -1,5 +1,5 @@
<h1 mat-dialog-title>
<span class="title">{{'USER.CODEDIALOG.TITLE' | translate}} {{data?.number}}</span>
<span>{{'USER.CODEDIALOG.TITLE' | translate}} {{data?.number}}</span>
</h1>
<p class="desc">{{'USER.CODEDIALOG.DESCRIPTION' | translate}}</p>
<div mat-dialog-content>
@ -9,7 +9,7 @@
</cnsl-form-field>
</div>
<div mat-dialog-actions class="action">
<button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="closeDialog()">
<button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
{{'ACTIONS.CLOSE' | translate}}
</button>

10
console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.scss
View File

@ -1,3 +1,13 @@
h1 {
font-size: 1.5rem;
margin: 0;
}
.desc {
font-size: 14px;
color: var(--grey);
}
.formfield {
width: 100%;
}

2
console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.scss
View File

@ -12,7 +12,7 @@
}
.error {
color: #f44336;
color: var(--warn);
font-size: 14px;
}

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

@ -36,7 +36,7 @@
}
&.notverified {
color: #ff4436;
color: var(--warn);
margin-right: 1rem;
}
}

2
console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.scss
View File

@ -30,7 +30,7 @@
}
.error {
color: #f44336;
color: var(--warn);
font-size: 14px;
}

105
console/src/app/pages/users/user-detail/external-idps/external-idps.component.html
View File

@ -1,59 +1,64 @@
<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="viewTimestamp" [selection]="selection">
<app-card title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}" description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<button card-actions mat-icon-button (click)="refreshPage()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
<app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" [dataSize]="dataSource.data.length"
[timestamp]="viewTimestamp" [selection]="selection">
<div class="table-wrapper">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let idp">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
</mat-checkbox>
</td>
</ng-container>
<div class="table-wrapper">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let idp">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="idpConfigId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpId}} </td>
</ng-container>
<ng-container matColumnDef="idpConfigId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpId}} </td>
</ng-container>
<ng-container matColumnDef="idpName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
</ng-container>
<ng-container matColumnDef="idpName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.IDPNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.idpName}} </td>
</ng-container>
<ng-container matColumnDef="externalUserDisplayName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.providedUserName}} </td>
</ng-container>
<ng-container matColumnDef="externalUserDisplayName">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.providedUserName}} </td>
</ng-container>
<ng-container matColumnDef="externalUserId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.providedUserId}} </td>
</ng-container>
<ng-container matColumnDef="externalUserId">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }} </th>
<td mat-cell *matCellDef="let idp"> {{idp?.providedUserId}} </td>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let idp">
<button color="warn" mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
(click)="removeExternalIdp(idp)">
<i class="las la-trash"></i>
</button>
</td>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let idp">
<button color="warn" mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
(click)="removeExternalIdp(idp)">
<i class="las la-trash"></i>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<cnsl-paginator #paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult || 0" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
</div>
</table>
<cnsl-paginator #paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult || 0" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
</div>
</app-refresh-table>
</app-refresh-table>
</app-card>

5
console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss
View File

@ -1,3 +1,8 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.table-wrapper {
overflow: auto;

40
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.html Normal file
View File

@ -0,0 +1,40 @@
<div mat-dialog-title class="title-row">
<h1 class="title">{{'USER.METADATA.TITLE' | translate}}</h1>
<span class="fill-space"></span>
<p *ngIf="ts" class="ts">{{ts | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</p>
<mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
<button class="icon-button" mat-icon-button (click)="load()"><mat-icon class="icon">refresh</mat-icon></button>
</div>
<p class="desc">{{'USER.METADATA.DESCRIPTION' | translate}}</p>
<div mat-dialog-content>
<form *ngFor="let md of metadata; index as i" (ngSubmit)="saveElement(i)" >
<div class="content">
<cnsl-form-field #key id="key{{i}}" class="formfield">
<cnsl-label>{{ 'USER.METADATA.KEY' | translate }}</cnsl-label>
<input cnslInput [(ngModel)]="md.key" [ngModelOptions]="{standalone: true}" />
</cnsl-form-field>
<cnsl-form-field #value id="value{{i}}" class="formfield">
<cnsl-label>{{ 'USER.METADATA.VALUE' | translate }}</cnsl-label>
<input cnslInput [(ngModel)]="md.value" [ngModelOptions]="{standalone: true}" />
</cnsl-form-field>
<button mat-icon-button [disabled]="!(md.key && md.value)" class="set-button" type="submit" color="primary"
matTooltip="{{ 'ACTIONS.SAVE' | translate }}">
<i class="las la-save"></i>
</button>
<button mat-icon-button (click)="removeEntry(i)" [disabled]="metadata.length < 2 && i === 0 && !md.key" class="rm-button" type="button" color="warn"
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
<i class="las la-trash"></i>
</button>
</div>
</form>
<button color="primary" (click)="addEntry()" mat-stroked-button color="primary" class="continue-button" type="button">
<mat-icon>add</mat-icon>
{{ 'ACTIONS.ADD' | translate }}
</button>
</div>
<div mat-dialog-actions class="action">
<button cdkFocusInitial color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
{{'ACTIONS.CLOSE' | translate}}
</button>
</div>

58
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.scss Normal file
View File

@ -0,0 +1,58 @@
.title-row {
display: flex;
align-items: center;
.title {
font-size: 1.5rem;
margin: 0;
}
.fill-space {
flex: 1;
}
.ts {
margin: 0;
font-size: 14px;
color: var(--grey);
}
.icon-button {
.icon {
font-size: 1.2rem;
}
}
}
.content {
display: flex;
align-items: center;
margin: 0 -.5rem;
.formfield {
flex: 1;
margin: 0 .5rem;
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.rm-button,
.set-button {
margin-top: 14px;
}
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

25
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.spec.ts Normal file
View File

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

116
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.ts Normal file
View File

@ -0,0 +1,116 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-metadata-dialog',
templateUrl: './metadata-dialog.component.html',
styleUrls: ['./metadata-dialog.component.scss'],
})
export class MetadataDialogComponent {
public metadata: Partial<Metadata.AsObject>[] = [];
public injData: any = {};
public loading: boolean = true;
public ts!: Timestamp.AsObject | undefined;
constructor(
private service: ManagementService,
private toast: ToastService,
public dialogRef: MatDialogRef<MetadataDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.injData = data;
this.load();
}
public load(): void {
this.loadMetadata().then(() => {
this.loading = false;
if (this.metadata.length === 0) {
this.addEntry();
}
}).catch(error => {
this.loading = false;
this.toast.showError(error);
if (this.metadata.length === 0) {
this.addEntry();
}
});
}
public loadMetadata(): Promise<void> {
this.loading = true;
if (this.injData.userId) {
return this.service.listUserMetadata(this.injData.userId).then(resp => {
this.metadata = resp.resultList.map(md => {
return {
key: md.key,
value: atob(md.value as string),
};
});
this.ts = resp.details?.viewTimestamp;
});
} else {
return Promise.reject();
}
}
public addEntry(): void {
const newGroup = {
key: '',
value: '',
};
this.metadata.push(newGroup);
}
public removeEntry(index: number): void {
const key = this.metadata[index].key;
if (key) {
this.removeMetadata(key).then(() => {
this.metadata.splice(index, 1);
if (this.metadata.length === 0) {
this.addEntry();
}
});
} else {
this.metadata.splice(index, 1);
}
}
public saveElement(index: number): void {
const metadataElement = this.metadata[index];
if (metadataElement.key && metadataElement.value) {
this.setMetadata(metadataElement.key, metadataElement.value as string);
}
}
public setMetadata(key: string, value: string): void {
console.log(key, value, this.injData.userId);
if (key && value) {
this.service.setUserMetadata(key, btoa(value), this.injData.userId)
.then(() => {
this.toast.showInfo('USER.METADATA.SETSUCCESS', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
public removeMetadata(key: string): Promise<void> {
return this.service.removeUserMetadata(key, this.injData.userId)
.then((resp) => {
this.toast.showInfo('USER.METADATA.REMOVESUCCESS', true);
}).catch(error => {
this.toast.showError(error);
});
}
closeDialog(): void {
this.dialogRef.close();
}
}

21
console/src/app/pages/users/user-detail/metadata/metadata.component.html Normal file
View File

@ -0,0 +1,21 @@
<app-card class="metadata-details" title="{{ 'USER.METADATA.TITLE' | translate }}">
<div card-actions class="actions">
<mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
<button mat-raised-button color="primary" class="edit" (click)="editMetadata()">{{'ACTIONS.EDIT' | translate}}</button>
<button matTooltip="{{'ACTIONS.REFRESH' | translate}}" class="refresh-btn" (click)="loadMetadata()"
mat-icon-button aria-label="refresh contributors">
<mat-icon class="icon">refresh</mat-icon>
</button>
</div>
<ng-container *ngIf="metadata?.length; else emptyList">
<div class="metadata-set" *ngFor="let md of metadata">
<span class="first">{{md.key}}</span>
<span class="second">{{ md.value }}</span>
</div>
</ng-container>
<ng-template #emptyList>
<p class="empty-desc">{{'USER.METADATA.EMPTY' | translate}}</p>
</ng-template>
</app-card>

72
console/src/app/pages/users/user-detail/metadata/metadata.component.scss Normal file
View File

@ -0,0 +1,72 @@
.metadata-details {
padding-bottom: 1rem;
.actions {
display: flex;
align-items: center;
.edit {
font-size: 14px;
}
}
.meta-row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.first {
flex: 1;
font-size: 13px;
margin-right: .5rem;
}
.fill-space {
flex: 1;
}
.second {
font-size: 13px;
}
}
.metadata-set {
display: flex;
flex-direction: column;
margin-bottom: .5rem;
.first {
font-size: 14px;
color: var(--grey);
}
}
}
.border-t {
border-top: 1px solid #81868a40;
}
.edit {
font-size: 14px;
cursor: pointer;
}
.empty-desc {
margin: 0;
font-size: 14px;
color: var(--grey);
}
.ts {
font-size: 14px;
color: var(--grey);
margin-top: 0;
}
.refresh-btn {
float: left;
.icon {
font-size: 1.2rem;
}
}

25
console/src/app/pages/users/user-detail/metadata/metadata.component.spec.ts Normal file
View File

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

53
console/src/app/pages/users/user-detail/metadata/metadata.component.ts Normal file
View File

@ -0,0 +1,53 @@
import { Component, Input, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { MetadataDialogComponent } from '../metadata-dialog/metadata-dialog.component';
@Component({
selector: 'cnsl-metadata',
templateUrl: './metadata.component.html',
styleUrls: ['./metadata.component.scss'],
})
export class MetadataComponent implements OnInit {
@Input() userId: string = '';
public metadata: Metadata.AsObject[] = [];
public loading: boolean = false;
constructor(private dialog: MatDialog, private service: ManagementService, private toast: ToastService,
) { }
ngOnInit(): void {
this.loadMetadata();
}
public editMetadata(): void {
const dialogRef = this.dialog.open(MetadataDialogComponent, {
data: {
userId: this.userId,
},
});
dialogRef.afterClosed().subscribe(() => {
this.loadMetadata();
});
}
public loadMetadata(): Promise<any> {
this.loading = true;
return (this.service as ManagementService).listUserMetadata(this.userId).then(resp => {
this.loading = false;
this.metadata = resp.resultList.map(md => {
return {
key: md.key,
value: atob(md.value as string),
};
});
}).catch((error) => {
this.loading = false;
this.toast.showError(error);
});
}
}

12
console/src/app/pages/users/user-detail/user-detail.module.ts
View File

@ -5,9 +5,11 @@ import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { QRCodeModule } from 'angularx-qrcode';
@ -31,6 +33,8 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
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 { HasFeatureModule } from '../../../directives/has-feature/has-feature.module';
import { InfoRowModule } from '../../../modules/info-row/info-row.module';
import { AuthFactorDialogComponent } from './auth-user-detail/auth-factor-dialog/auth-factor-dialog.component';
import { AuthPasswordlessComponent } from './auth-user-detail/auth-passwordless/auth-passwordless.component';
import {
@ -48,6 +52,8 @@ import { DetailFormMachineModule } from './detail-form-machine/detail-form-machi
import { DetailFormModule } from './detail-form/detail-form.module';
import { ExternalIdpsComponent } from './external-idps/external-idps.component';
import { MembershipsComponent } from './memberships/memberships.component';
import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component';
import { MetadataComponent } from './metadata/metadata.component';
import { PasswordComponent } from './password/password.component';
import { UserDetailRoutingModule } from './user-detail-routing.module';
import { PasswordlessComponent } from './user-detail/passwordless/passwordless.component';
@ -73,11 +79,14 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
DialogU2FComponent,
DialogPasswordlessComponent,
AuthFactorDialogComponent,
MetadataDialogComponent,
MetadataComponent,
],
imports: [
UserDetailRoutingModule,
ChangesModule,
CommonModule,
MatTabsModule,
FormsModule,
ReactiveFormsModule,
DetailFormModule,
@ -94,11 +103,14 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
CardModule,
MatProgressSpinnerModule,
MatProgressBarModule,
HasFeatureModule,
MatTooltipModule,
HasRoleModule,
TranslateModule,
MatTableModule,
InfoRowModule,
PaginatorModule,
MatMenuModule,
SharedModule,
RefreshTableModule,
CopyToClipboardModule,

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

@ -1,6 +1,9 @@
<app-card title="{{'USER.PASSWORDLESS.TITLE' | translate}}"
description="{{'USER.PASSWORDLESS.DESCRIPTION' | translate}}">
<app-refresh-table [loading]="loading$ | async" (refreshed)="getPasswordless()"
<button card-actions mat-icon-button (click)="getPasswordless()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
<app-refresh-table [hideRefresh]="true" [loading]="loading$ | async"
[dataSize]="dataSource?.data?.length">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">

6
console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.scss
View File

@ -1,3 +1,9 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.centered {
display: flex;
align-items: center;

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

@ -4,28 +4,34 @@
<a (click)="navigateBack()" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{user.human ? user.human?.profile?.displayName : user.machine?.name}}</h1>
<ng-template appHasRole [appHasRole]="['user.delete$', 'user.delete:'+user?.id]">
<button mat-icon-button color="warn" matTooltip="{{'USER.PAGES.DELETE' | translate}}"
(click)="deleteUser()"><i class="las la-trash"></i></button>
</ng-template>
<div class="head-row">
<h1>{{user.human ? user.human?.profile?.displayName : user.machine?.name}}</h1>
<p *ngIf="user?.preferredLoginName">{{user?.preferredLoginName}}</p>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['user.write$', 'user.write:'+user?.id]">
<button class="unlock-button" mat-stroked-button color="warn"
<button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
<span>{{'ACTIONS.ACTIONS' | translate}}</span>
<mat-icon class="icon">keyboard_arrow_down</mat-icon>
</button>
<mat-menu #actions="matMenu" xPosition="before">
<button mat-menu-item color="warn"
*ngIf="user?.state === UserState.USER_STATE_LOCKED"
(click)="unlockUser()">{{'USER.PAGES.UNLOCK' |
translate}}</button>
<button class="state-button" mat-stroked-button color="warn"
*ngIf="user?.state !== UserState.USER_STATE_INACTIVE"
(click)="changeState(UserState.USER_STATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
translate}}</button>
<button class="state-button" mat-stroked-button color="warn"
*ngIf="user?.state == UserState.USER_STATE_INACTIVE"
(click)="changeState(UserState.USER_STATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
<button mat-menu-item
*ngIf="user?.state !== UserState.USER_STATE_INACTIVE"
(click)="changeState(UserState.USER_STATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
translate}}</button>
<button mat-menu-item
*ngIf="user?.state == UserState.USER_STATE_INACTIVE"
(click)="changeState(UserState.USER_STATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
<ng-template appHasRole [appHasRole]="['user.delete$', 'user.delete:'+user?.id]">
<button mat-menu-item matTooltip="{{'USER.PAGES.DELETE' | translate}}"
(click)="deleteUser()"><span [style.color]="'var(--warn)'">{{'USER.PAGES.DELETE' | translate}}</span></button>
</ng-template>
</mat-menu>
</ng-template>
</div>
@ -34,19 +40,7 @@
<cnsl-info-section class="locked" *ngIf="user?.state === UserState.USER_STATE_LOCKED" type="WARN">{{'USER.PAGES.LOCKEDDESCRIPTION' | translate}}</cnsl-info-section>
<span *ngIf="!loading && !user">{{ 'USER.PAGES.NOUSER' | translate }}</span>
<app-card title="{{ 'USER.PAGES.LOGINNAMES' | translate }}"
description="{{ 'USER.PAGES.LOGINNAMESDESC' | translate }}" *ngIf="user">
<div class="login-name-row" *ngFor="let login of user?.loginNamesList">
<span>{{login}} </span>
<button color="primary" [disabled]="copied == login"
[matTooltip]="(copied != login ? 'USER.PAGES.COPY' : 'USER.PAGES.COPIED' ) | translate"
appCopyToClipboard [valueToCopy]="login" (copiedValue)="copied = $event" mat-icon-button>
<i *ngIf="copied != login" class="las la-clipboard"></i>
<i *ngIf="copied == login" class="las la-clipboard-check"></i>
</button>
</div>
</app-card>
<cnsl-info-row *ngIf="user" [user]="user"></cnsl-info-row>
<ng-template appHasRole [appHasRole]="['user.read$', 'user.read:'+user?.id]">
<app-card *ngIf="user.human" title="{{ 'USER.PROFILE.TITLE' | translate }}">
@ -57,8 +51,8 @@
<app-card *ngIf="user.human" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
<button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon>refresh</mat-icon>
<button card-actions class="icon-button" mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
<app-contact disablePhoneCode="true"
[canWrite]="(['user.write:' + user?.id, 'user.write$'] | hasRole | async)" *ngIf="user?.human"
@ -73,11 +67,8 @@
translate}}</button>
</app-contact>
</app-card>
<app-card *ngIf="user && user.human && user.id" title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}"
description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
<app-external-idps [userId]="user.id" [service]="mgmtUserService"></app-external-idps>
</app-card>
<app-external-idps *ngIf="user && user.human && user.id" [userId]="user.id" [service]="mgmtUserService"></app-external-idps>
<app-card *ngIf="user.machine" title="{{ 'USER.MACHINE.TITLE' | translate }}">
<app-detail-form-machine [disabled]="(canWrite$ | async) == false" [username]="user.userName"
@ -103,31 +94,42 @@
[disableDelete]="((['user.grant.delete$'] | hasRole) | async) == false">
</app-user-grants>
</app-card>
<ng-template appHasFeature [appHasFeature]="['metadata.user']">
<cnsl-metadata *ngIf="user" [userId]="user.id"></cnsl-metadata>
</ng-template>
</div>
<div *ngIf="user" class="side" metainfo>
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="user?.id" class="second">{{ user.id }}</span>
</div>
<div class="meta-row" *ngIf="user?.preferredLoginName">
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
<div class="meta-row">
<span class="first">{{'ORG.PAGES.STATE' | translate}}</span>
<span *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}}</span>
</div>
<div class="meta-details">
<div class="meta-row">
<span class="first">{{'RESOURCEID' | translate}}:</span>
<span *ngIf="user?.id" class="second">{{ user.id }}</span>
</div>
<div class="meta-row" *ngIf="user?.preferredLoginName">
<span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
<span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
</div>
<div class="meta-row">
<span class="first">{{'USER.PAGES.STATE' | translate}}</span>
<span *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}}</span>
</div>
</div>
<ng-template appHasRole [appHasRole]="['user.membership.read']">
<app-memberships [user]="user" [disabled]="(canWrite$ | async) == false"></app-memberships>
</ng-template>
<app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.USER" [id]="user.id">
</app-changes>
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab label="Details">
<div class="side-padding">
<ng-template appHasRole [appHasRole]="['user.membership.read']">
<app-memberships [user]="user" [disabled]="(canWrite$ | async) == false"></app-memberships>
</ng-template>
</div>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
<app-changes class="changes" [refresh]="refreshChanges$" [changeType]="ChangeType.USER" [id]="user.id">
</app-changes>
</mat-tab>
</mat-tab-group>
</div>
</app-meta-layout>

44
console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss
View File

@ -1,29 +1,43 @@
.head {
display: flex;
align-items: center;
align-items: flex-start;
flex-wrap: wrap;
padding-bottom: .5rem;
padding-bottom: 2rem;
a {
display: block;
margin-right: 2rem;
}
h1 {
margin: 0;
margin-right: 1rem;
.head-row {
display: flex;
flex-direction: column;
h1 {
margin: 0;
margin-right: 1rem;
}
p {
margin: .5rem 0;
font-size: 14px;
color: var(--grey);
}
}
.fill-space {
flex: 1;
}
.unlock-button {
margin-left: .5rem;
}
.actions-trigger {
margin-top: .25rem;
display: flex;
align-items: center;
.state-button {
margin-left: .5rem;
.icon {
margin-left: .5rem;
margin-right: -.5rem;
}
}
}
@ -32,6 +46,12 @@
margin: 1rem 0;
}
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.img-phone-email {
width: 300px;
}
@ -42,3 +62,7 @@
min-height: 0;
}
}
.side-padding {
padding-top: 1rem;
}

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

@ -8,6 +8,7 @@ import { ChangeType } from 'src/app/modules/changes/changes.component';
import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { SendHumanResetPasswordNotificationRequest, UnlockUserRequest } from 'src/app/proto/generated/zitadel/management_pb';
import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
import { Email, Gender, Machine, Phone, Profile, User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@ -22,6 +23,7 @@ import { ResendEmailDialogComponent } from '../auth-user-detail/resend-email-dia
})
export class UserDetailComponent implements OnInit {
public user!: User.AsObject;
public metadata: Metadata.AsObject[] = [];
public genders: Gender[] = [Gender.GENDER_MALE, Gender.GENDER_FEMALE, Gender.GENDER_DIVERSE];
public languages: string[] = ['de', 'en'];
@ -56,6 +58,14 @@ export class UserDetailComponent implements OnInit {
}).catch(err => {
console.error(err);
});
this.mgmtUserService.listUserMetadata(id, 0, 100, []).then(resp => {
if (resp.resultList) {
this.metadata = resp.resultList;
}
}).catch(err => {
console.error(err);
});
});
}

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

@ -1,5 +1,8 @@
<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
<app-refresh-table [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
<button card-actions mat-icon-button (click)="getMFAs()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon class="icon">refresh</mat-icon>
</button>
<app-refresh-table [hideRefresh]="true" [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>

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