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]>

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

@@ -25,7 +25,7 @@
       color="primary"
       matTooltip="{{ 'ACTIONS.NEW' | translate }}"
     >
-      <i class="icon las la-fingerprint"></i>
+      <mat-icon>add</mat-icon>
       {{ 'USER.PASSWORDLESS.U2F' | translate }}
     </button>
     <table class="table" mat-table [dataSource]="dataSource">

console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html

@@ -3,7 +3,7 @@
   <div *ngIf="!showSent && !showQR">
     <p>{{ 'USER.PASSWORDLESS.DIALOG.ADD_DESCRIPTION' | translate }}</p>
 
-    <div class="desc">
+    <div class="passwordless-desc">
       <i class="icon las la-plus-circle"></i>
       <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.NEW_DESCRIPTION' | translate }}</p>
     </div>
@@ -19,7 +19,7 @@
 
     <p class="error">{{ error }}</p>
 
-    <div class="desc">
+    <div class="passwordless-desc">
       <i class="icon las la-paper-plane"></i>
       <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.SEND_DESCRIPTION' | translate }}</p>
     </div>
@@ -28,7 +28,7 @@
       {{ 'USER.PASSWORDLESS.DIALOG.SEND' | translate }}
     </button>
 
-    <div class="desc">
+    <div class="passwordless-desc">
       <i class="icon las la-qrcode"></i>
       <p class="cnsl-secondary-text">{{ 'USER.PASSWORDLESS.DIALOG.QRCODE_DESCRIPTION' | translate }}</p>
     </div>

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

@@ -12,7 +12,7 @@
   margin: 0;
 }
 
-.desc {
+.passwordless-desc {
   display: flex;
   align-items: center;
   padding-top: 1rem;

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

@@ -130,7 +130,13 @@
       </ng-container>
 
       <ng-container *ngIf="currentSetting === 'metadata'">
-        <cnsl-metadata *ngIf="user && user.id" [userId]="user.id"></cnsl-metadata>
+        <cnsl-metadata
+          [metadata]="metadata"
+          [disabled]="(['user.write:' + user.id, 'user.write'] | hasRole | async) === false"
+          *ngIf="user && user.id"
+          (editClicked)="editMetadata()"
+          (refresh)="loadMetadata()"
+        ></cnsl-metadata>
       </ng-container>
     </cnsl-sidenav>
 

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

@@ -6,15 +6,18 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription, take } from 'rxjs';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
+import { MetadataDialogComponent } from 'src/app/modules/metadata/metadata-dialog/metadata-dialog.component';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
+import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
 import { Email, Gender, Phone, Profile, User, UserState } from 'src/app/proto/generated/zitadel/user_pb';
 import { AuthenticationService } from 'src/app/services/authentication.service';
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
+import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
-
+import { Buffer } from 'buffer';
 import { EditDialogComponent, EditDialogType } from './edit-dialog/edit-dialog.component';
 
 @Component({
@@ -30,6 +33,7 @@ export class AuthUserDetailComponent implements OnDestroy {
   private subscription: Subscription = new Subscription();
 
   public loading: boolean = false;
+  public loadingMetadata: boolean = false;
 
   public ChangeType: any = ChangeType;
   public userLoginMustBeDomain: boolean = false;
@@ -38,6 +42,8 @@ export class AuthUserDetailComponent implements OnDestroy {
   public USERGRANTCONTEXT: UserGrantContext = UserGrantContext.USER;
   public refreshChanges$: EventEmitter<void> = new EventEmitter();
 
+  public metadata: Metadata.AsObject[] = [];
+
   public settingsList: SidenavSetting[] = [
     { id: 'general', i18nKey: 'USER.SETTINGS.GENERAL' },
     { id: 'idp', i18nKey: 'USER.SETTINGS.IDP' },
@@ -55,6 +61,7 @@ export class AuthUserDetailComponent implements OnDestroy {
     public userService: GrpcAuthService,
     private dialog: MatDialog,
     private auth: AuthenticationService,
+    private mgmt: ManagementService,
     private breadcrumbService: BreadcrumbService,
     private mediaMatcher: MediaMatcher,
     private _location: Location,
@@ -104,6 +111,8 @@ export class AuthUserDetailComponent implements OnDestroy {
         if (resp.user) {
           this.user = resp.user;
 
+          this.loadMetadata();
+
           this.breadcrumbService.setBreadcrumb([
             new Breadcrumb({
               type: BreadcrumbType.AUTHUSER,
@@ -337,4 +346,45 @@ export class AuthUserDetailComponent implements OnDestroy {
       }
     });
   }
+
+  public loadMetadata(): Promise<any> | void {
+    if (this.user) {
+      this.loadingMetadata = true;
+      return this.mgmt
+        .listUserMetadata(this.user.id)
+        .then((resp) => {
+          this.loadingMetadata = false;
+          this.metadata = resp.resultList.map((md) => {
+            return {
+              key: md.key,
+              value: Buffer.from(md.value as string, 'base64').toString('ascii'),
+            };
+          });
+        })
+        .catch((error) => {
+          this.loadingMetadata = false;
+          this.toast.showError(error);
+        });
+    }
+  }
+
+  public editMetadata(): void {
+    if (this.user && this.user.id) {
+      const setFcn = (key: string, value: string): Promise<any> =>
+        this.mgmt.setUserMetadata(key, Buffer.from(value).toString('base64'), this.user?.id ?? '');
+      const removeFcn = (key: string): Promise<any> => this.mgmt.removeUserMetadata(key, this.user?.id ?? '');
+
+      const dialogRef = this.dialog.open(MetadataDialogComponent, {
+        data: {
+          metadata: this.metadata,
+          setFcn: setFcn,
+          removeFcn: removeFcn,
+        },
+      });
+
+      dialogRef.afterClosed().subscribe(() => {
+        this.loadMetadata();
+      });
+    }
+  }
 }

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.html

@@ -1,55 +0,0 @@
-<div class="title-row">
-  <h1 class="metadata-title">{{ 'USER.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>
-  <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 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>{{ '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 (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>

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.scss

@@ -1,61 +0,0 @@
-.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;
-  }
-}

console/src/app/pages/users/user-detail/metadata-dialog/metadata-dialog.component.spec.ts

@@ -1,24 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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 { GrpcAuthService } from 'src/app/services/grpc-auth.service';
-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 injData: any = {};
-  public loading: boolean = true;
-  public ts!: Timestamp.AsObject | undefined;
-
-  constructor(
-    private managementService: ManagementService,
-    private authService: GrpcAuthService,
-    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.managementService.listUserMetadata(this.injData.userId).then((resp) => {
-        this.metadata = resp.resultList.map((md) => {
-          return {
-            key: md.key,
-            value: Buffer.from(md.value as string, 'base64'),
-          };
-        });
-        this.ts = resp.details?.viewTimestamp;
-      });
-    } else {
-      return this.authService.listMyMetadata().then((resp) => {
-        this.metadata = resp.resultList.map((md) => {
-          return {
-            key: md.key,
-            value: Buffer.from(md.value as string, 'base64'),
-          };
-        });
-        this.ts = resp.details?.viewTimestamp;
-      });
-    }
-  }
-
-  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.managementService
-        .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.managementService
-      .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

@@ -1,25 +0,0 @@
-<cnsl-card class="metadata-details" title="{{ 'USER.METADATA.TITLE' | translate }}">
-  <div class="metadata-actions">
-    <mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
-    <button
-      [disabled]="(['user.write:' + userId, 'user.write'] | hasRole | async) === false"
-      mat-raised-button
-      color="primary"
-      class="edit"
-      (click)="editMetadata()"
-    >
-      {{ 'ACTIONS.EDIT' | translate }}
-    </button>
-  </div>
-
-  <ng-container *ngIf="metadata?.length; else emptyList">
-    <div class="metadata-set" *ngFor="let md of metadata">
-      <span class="first cnsl-secondary-text">{{ md.key }}</span>
-      <span class="second">{{ md.value }}</span>
-    </div>
-  </ng-container>
-
-  <ng-template #emptyList>
-    <p class="empty-desc cnsl-secondary-text">{{ 'USER.METADATA.EMPTY' | translate }}</p>
-  </ng-template>
-</cnsl-card>

console/src/app/pages/users/user-detail/metadata/metadata.component.scss

@@ -1,66 +0,0 @@
-.metadata-details {
-  padding-bottom: 1rem;
-
-  .metadata-actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    .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;
-  }
-}

console/src/app/pages/users/user-detail/metadata/metadata.component.spec.ts

@@ -1,24 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -52,12 +52,11 @@ import { ContactComponent } from './contact/contact.component';
 import { DetailFormMachineModule } from './detail-form-machine/detail-form-machine.module';
 import { DetailFormModule } from './detail-form/detail-form.module';
 import { ExternalIdpsComponent } from './external-idps/external-idps.component';
-import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component';
-import { MetadataComponent } from './metadata/metadata.component';
 import { PasswordComponent } from './password/password.component';
 import { PasswordlessComponent } from './user-detail/passwordless/passwordless.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
+import { MetadataModule } from 'src/app/modules/metadata/metadata.module';
 
 @NgModule({
   declarations: [
@@ -76,8 +75,6 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     DialogU2FComponent,
     DialogPasswordlessComponent,
     AuthFactorDialogComponent,
-    MetadataDialogComponent,
-    MetadataComponent,
   ],
   imports: [
     ChangesModule,
@@ -95,6 +92,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
     ShowTokenDialogModule,
     MetaLayoutModule,
     MatCheckboxModule,
+    MetadataModule,
     TopViewModule,
     HasRolePipeModule,
     UserGrantsModule,

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

@@ -206,7 +206,13 @@
         </ng-container>
 
         <ng-container *ngIf="currentSetting && currentSetting === 'metadata'">
-          <cnsl-metadata *ngIf="user" [userId]="user.id"></cnsl-metadata>
+          <cnsl-metadata
+            [metadata]="metadata"
+            [disabled]="(['user.write:' + user.id, 'user.write'] | hasRole | async) === false"
+            *ngIf="user && user.id"
+            (editClicked)="editMetadata()"
+            (refresh)="loadMetadata(user.id)"
+          ></cnsl-metadata>
         </ng-container>
       </div>
     </cnsl-sidenav>

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

@@ -7,6 +7,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { take } from 'rxjs/operators';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
+import { MetadataDialogComponent } from 'src/app/modules/metadata/metadata-dialog/metadata-dialog.component';
 import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
 import { UserGrantContext } from 'src/app/modules/user-grants/user-grants-datasource';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
@@ -16,7 +17,7 @@ import { Email, Gender, Machine, Phone, Profile, User, UserState } from 'src/app
 import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
-
+import { Buffer } from 'buffer';
 import { EditDialogComponent, EditDialogType } from '../auth-user-detail/edit-dialog/edit-dialog.component';
 import { ResendEmailDialogComponent } from '../auth-user-detail/resend-email-dialog/resend-email-dialog.component';
 
@@ -42,7 +43,9 @@ export class UserDetailComponent implements OnInit {
   public languages: string[] = ['de', 'en', 'it', 'fr'];
 
   public ChangeType: any = ChangeType;
+
   public loading: boolean = true;
+  public loadingMetadata: boolean = true;
 
   public UserState: any = UserState;
   public copied: string = '';
@@ -113,6 +116,7 @@ export class UserDetailComponent implements OnInit {
       this.mgmtUserService
         .getUserByID(id)
         .then((resp) => {
+          this.loadMetadata(id);
           this.loading = false;
           if (resp.user) {
             this.user = resp.user;
@@ -129,17 +133,6 @@ export class UserDetailComponent implements OnInit {
           this.loading = false;
           this.toast.showError(err);
         });
-
-      this.mgmtUserService
-        .listUserMetadata(id, 0, 100, [])
-        .then((resp) => {
-          if (resp.resultList) {
-            this.metadata = resp.resultList;
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-        });
     });
   }
 
@@ -448,4 +441,43 @@ export class UserDetailComponent implements OnInit {
         break;
     }
   }
+
+  public loadMetadata(id: string): Promise<any> | void {
+    this.loadingMetadata = true;
+    return this.mgmtUserService
+      .listUserMetadata(id)
+      .then((resp) => {
+        this.loadingMetadata = false;
+        this.metadata = resp.resultList.map((md) => {
+          return {
+            key: md.key,
+            value: Buffer.from(md.value as string, 'base64').toString('ascii'),
+          };
+        });
+      })
+      .catch((error) => {
+        this.loadingMetadata = false;
+        this.toast.showError(error);
+      });
+  }
+
+  public editMetadata(): void {
+    if (this.user) {
+      const setFcn = (key: string, value: string): Promise<any> =>
+        this.mgmtUserService.setUserMetadata(key, Buffer.from(value).toString('base64'), this.user.id);
+      const removeFcn = (key: string): Promise<any> => this.mgmtUserService.removeUserMetadata(key, this.user.id);
+
+      const dialogRef = this.dialog.open(MetadataDialogComponent, {
+        data: {
+          metadata: this.metadata,
+          setFcn: setFcn,
+          removeFcn: removeFcn,
+        },
+      });
+
+      dialogRef.afterClosed().subscribe(() => {
+        this.loadMetadata(this.user.id);
+      });
+    }
+  }
 }