andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-11 08:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* service, sidenav, i18n, dialog

* detail layout, user detail

* metadata dialog from

* dialog

* features

* formarray

* metadata component

* comp

* user metadata refresh

* use formarray, control, bulk save

* metadata revert, has feature directive

* lint

* lint

* typo

* info row user, warn color optim

* card cleanup, actions for user detail

* project, org, user, app rehaul

* lint

* scss

* digit fix

* features and project grid rehaul

* info-section layout, org domain info

* readd palette scss

* add svg email warn

* missing translation

* rm unused ts

* lockoutpolicy

* check for lockout feature
This commit is contained in:
Max Peintner
2021-09-13 13:38:57 +02:00
committed by GitHub
parent e4bdaf26b0
commit 490cafa538
111 changed files with 2437 additions and 1063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/grants/grants.component.scss
+2 -1
View File
@@ -1,8 +1,9 @@
h1 {
margin-top: 0;
margin: 0;
}
.desc {
color: var(--grey);
margin-bottom: 2rem;
font-size: 14px;
}
console/src/app/pages/orgs/org-detail/org-detail.component.html
+5 -5
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
console/src/app/pages/orgs/org-detail/org-detail.component.scss
+8 -1
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 {
console/src/app/pages/projects/apps/additional-origins/additional-origins.component.scss
+1 -1
View File
@@ -57,6 +57,6 @@
.error {
font-size: 13px;
color: #f44336;
color: var(--warn);
margin: 0 .5rem 1.5rem .5rem;
}
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+83 -122
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}}">
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
+85 -118
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 {
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+36 -45
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');
}
console/src/app/pages/projects/apps/apps.module.ts
+49 -44
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 { }
console/src/app/pages/projects/apps/redirect-uris/redirect-uris.component.scss
+1 -1
View File
@@ -57,6 +57,6 @@
.error {
font-size: 13px;
color: #f44336;
color: var(--warn);
margin: 0 .5rem 1.5rem .5rem;
}
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss
+1 -1
View File
@@ -10,7 +10,7 @@
}
.h1 {
font-size: 1.2rem;
font-size: 2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html
+11 -5
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>
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.scss
+24 -5
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 {
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.ts
+75 -75
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]);
}
}
}
console/src/app/pages/projects/granted-projects/granted-projects.component.scss
+1 -1
View File
@@ -1,5 +1,5 @@
h1 {
margin-top: 0;
margin: 0;
}
.sub {
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
+6
View File
@@ -1,3 +1,9 @@
h3 {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
letter-spacing: .05em;
}
.app-grid-header {
display: flex;
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
+33 -37
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>
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
+11 -1
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%;
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts
+21 -2
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 {
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts
+40 -38
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 { }
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
+8 -2
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}}
{{
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.scss
+24 -9
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 {
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.ts
+1
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 => {
console/src/app/pages/projects/owned-projects/owned-projects.component.scss
+1 -1
View File
@@ -1,5 +1,5 @@
h1 {
margin-top: 0;
margin: 0;
}
.sub {
console/src/app/pages/projects/owned-projects/owned-projects.module.ts
+2
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,
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.html
+4 -1
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">
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.scss
+5
View File
@@ -1,3 +1,8 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.add-row {
display: flex;
console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.scss
+1 -1
View File
@@ -28,7 +28,7 @@
}
.error {
color: #f44336;
color: var(--warn);
font-size: 14px;
}
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
+31 -34
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>
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss
+21 -30
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;
}
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.ts
-2
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;
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html
+4 -1
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>
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss
+5
View File
@@ -1,3 +1,8 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.add-row {
display: flex;
console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.html
+2 -2
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>
console/src/app/pages/users/user-detail/auth-user-detail/code-dialog/code-dialog.component.scss
+10
View File
@@ -1,3 +1,13 @@
h1 {
font-size: 1.5rem;
margin: 0;
}
.desc {
font-size: 14px;
color: var(--grey);
}
.formfield {
width: 100%;
}
console/src/app/pages/users/user-detail/auth-user-detail/dialog-u2f/dialog-u2f.component.scss
+1 -1
View File
@@ -12,7 +12,7 @@
}
.error {
color: #f44336;
color: var(--warn);
font-size: 14px;
}
console/src/app/pages/users/user-detail/contact/contact.component.scss
+1 -1
View File
@@ -36,7 +36,7 @@
}
&.notverified {
color: #ff4436;
color: var(--warn);
margin-right: 1rem;
}
}
console/src/app/pages/users/user-detail/detail-form/profile-picture/profile-picture.component.scss
+1 -1
View File
@@ -30,7 +30,7 @@
}
.error {
color: #f44336;
color: var(--warn);
font-size: 14px;
}
console/src/app/pages/users/user-detail/external-idps/external-idps.component.html
+55 -50
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>
console/src/app/pages/users/user-detail/external-idps/external-idps.component.scss
+5
View File
@@ -1,3 +1,8 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.table-wrapper {
overflow: auto;
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.html
+40
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>
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.scss
+58
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;
}
}
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.spec.ts
+25
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();
});
});
console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.ts
+116
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();
}
}
console/src/app/pages/users/user-detail/metadata/metadata.component.html
+21
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>
console/src/app/pages/users/user-detail/metadata/metadata.component.scss
+72
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;
}
}
console/src/app/pages/users/user-detail/metadata/metadata.component.spec.ts
+25
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();
});
});
console/src/app/pages/users/user-detail/metadata/metadata.component.ts
+53
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);
});
}
}
console/src/app/pages/users/user-detail/user-detail.module.ts
+12
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,
console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.html
+4 -1
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">
console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.scss
+6
View File
@@ -1,3 +1,9 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.centered {
display: flex;
align-items: center;
console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
+59 -57
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>
console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss
+34 -10
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;
}
console/src/app/pages/users/user-detail/user-detail/user-detail.component.ts
+10
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);
});
});
}
console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.html
+4 -1
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>
console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.scss
+5
View File
@@ -1,3 +1,8 @@
.icon-button {
.icon {
font-size: 1.2rem;
}
}
.col {
display: flex;
console/src/app/pages/users/user-list/user-list.component.scss
+2 -1
View File
@@ -1,8 +1,9 @@
h1 {
margin-top: 0;
margin: 0;
}
.sub {
color: var(--grey);
margin-bottom: 2rem;
font-size: 14px;
}