mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-27 09:42:16 +00:00
feat(console): org metadata, mfa i18n, defer load of actions (#4471)
* user metadata refactor * metadata module, set remove interface * refresh list * mfa, passwordless i18n * i18n, metadata table Co-authored-by: Livio Spring <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Spring
Livio Spring
parent
531c30a031
commit
05ad3b4ef0
@@ -0,0 +1,52 @@
|
||||
<div class="title-row">
|
||||
<h1 class="metadata-title">{{ 'METADATA.TITLE' | translate }}</h1>
|
||||
<span class="fill-space"></span>
|
||||
<p *ngIf="ts" class="ts cnsl-secondary-text">{{ ts | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</p>
|
||||
<mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
|
||||
</div>
|
||||
<p class="desc">{{ 'METADATA.DESCRIPTION' | translate }}</p>
|
||||
<div mat-dialog-content class="metadata-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>{{ '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>{{ '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 (click)="addEntry()" mat-stroked-button class="continue-button" type="button">
|
||||
<mat-icon>add</mat-icon>
|
||||
{{ 'ACTIONS.ADD' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div mat-dialog-actions class="action">
|
||||
<button cdkFocusInitial mat-stroked-button class="ok-button" (click)="closeDialog()">
|
||||
{{ 'ACTIONS.CLOSE' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,61 @@
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.metadata-title {
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ts {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
.icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-dialog-content {
|
||||
min-width: 400px;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 -0.5rem;
|
||||
|
||||
.formfield {
|
||||
flex: 1;
|
||||
margin: 0 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: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Buffer } from 'buffer';
|
||||
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: 'cnsl-metadata-dialog',
|
||||
templateUrl: './metadata-dialog.component.html',
|
||||
styleUrls: ['./metadata-dialog.component.scss'],
|
||||
})
|
||||
export class MetadataDialogComponent {
|
||||
public metadata: Partial<Metadata.AsObject>[] = [];
|
||||
public loading: boolean = false;
|
||||
public ts!: Timestamp.AsObject | undefined;
|
||||
|
||||
constructor(
|
||||
private toast: ToastService,
|
||||
public dialogRef: MatDialogRef<MetadataDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
) {
|
||||
this.metadata = data.metadata;
|
||||
}
|
||||
|
||||
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 {
|
||||
if (key && value) {
|
||||
this.data
|
||||
.setFcn(key, value)
|
||||
.then(() => {
|
||||
this.toast.showInfo('METADATA.SETSUCCESS', true);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public removeMetadata(key: string): Promise<void> {
|
||||
return this.data
|
||||
.removeFcn(key)
|
||||
.then((resp: any) => {
|
||||
this.toast.showInfo('METADATA.REMOVESUCCESS', true);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
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 { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
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 { CardModule } from '../card/card.module';
|
||||
|
||||
import { InputModule } from '../input/input.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component';
|
||||
import { MetadataComponent } from './metadata/metadata.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [MetadataComponent, MetadataDialogComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatDialogModule,
|
||||
MatProgressSpinnerModule,
|
||||
CardModule,
|
||||
MatButtonModule,
|
||||
TranslateModule,
|
||||
InputModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
FormsModule,
|
||||
LocalizedDatePipeModule,
|
||||
TimestampToDatePipeModule,
|
||||
RefreshTableModule,
|
||||
MatTableModule,
|
||||
],
|
||||
exports: [MetadataComponent, MetadataDialogComponent],
|
||||
})
|
||||
export class MetadataModule {}
|
||||
@@ -0,0 +1,36 @@
|
||||
<cnsl-card class="metadata-details" title="{{ 'METADATA.TITLE' | translate }}">
|
||||
<mat-spinner card-actions class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
|
||||
|
||||
<cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refresh.emit()" [dataSize]="dataSource.data.length">
|
||||
<button actions [disabled]="disabled" mat-raised-button color="primary" class="edit" (click)="editClicked.emit()">
|
||||
{{ 'ACTIONS.EDIT' | translate }}
|
||||
</button>
|
||||
|
||||
<table class="table" mat-table [dataSource]="dataSource">
|
||||
<ng-container matColumnDef="key">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'METADATA.KEY' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let metadata">
|
||||
<span *ngIf="metadata?.key" class="centered">
|
||||
{{ metadata.key }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="value">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'METADATA.VALUE' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let metadata">
|
||||
<span *ngIf="metadata?.value" class="centered">
|
||||
{{ metadata.value }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
<div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
|
||||
<i class="las la-exclamation"></i>
|
||||
<span>{{ 'USER.MFA.EMPTY' | translate }}</span>
|
||||
</div>
|
||||
</cnsl-refresh-table>
|
||||
</cnsl-card>
|
||||
@@ -0,0 +1,69 @@
|
||||
.metadata-details {
|
||||
padding-bottom: 1rem;
|
||||
|
||||
.refresh {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.edit {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
margin-bottom: 0.5rem;
|
||||
align-items: center;
|
||||
|
||||
.first {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.second {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-set {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.first {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-t {
|
||||
border-top: 1px solid #81868a40;
|
||||
}
|
||||
|
||||
.edit {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
float: left;
|
||||
|
||||
.icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,34 @@
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTable, MatTableDataSource } from '@angular/material/table';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-metadata',
|
||||
templateUrl: './metadata.component.html',
|
||||
styleUrls: ['./metadata.component.scss'],
|
||||
})
|
||||
export class MetadataComponent implements OnChanges {
|
||||
@Input() public metadata: Metadata.AsObject[] = [];
|
||||
@Input() public disabled: boolean = false;
|
||||
@Input() public loading: boolean = false;
|
||||
@Output() public editClicked: EventEmitter<void> = new EventEmitter();
|
||||
@Output() public refresh: EventEmitter<void> = new EventEmitter();
|
||||
|
||||
public displayedColumns: string[] = ['key', 'value'];
|
||||
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
|
||||
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
|
||||
|
||||
@ViewChild(MatTable) public table!: MatTable<Metadata.AsObject>;
|
||||
@ViewChild(MatSort) public sort!: MatSort;
|
||||
public dataSource: MatTableDataSource<Metadata.AsObject> = new MatTableDataSource<Metadata.AsObject>([]);
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes.metadata?.currentValue) {
|
||||
this.dataSource = new MatTableDataSource<Metadata.AsObject>(changes.metadata.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user