update

src/app/pages/account/account.component.html

@@ -3,6 +3,7 @@
 
 <nav mat-tab-nav-bar>
     <a mat-tab-link routerLink="info" routerLinkActive="active">{{'info' | i18n}}</a>
+    <a mat-tab-link routerLink="profile" routerLinkActive="active">{{'profile' | i18n}}</a>
     <a mat-tab-link routerLink="voucher" routerLinkActive="active">{{'vouchers' | i18n}}</a>
     <a mat-tab-link routerLink="security" routerLinkActive="active">{{'security' | i18n}}</a>
 </nav>

src/app/pages/account/info/info.component.html

@@ -1,4 +1,6 @@
 <h3>{{'permissions' | i18n}}</h3>
 <app-permissions [permissions]="permissions"></app-permissions>
 <h3>{{'quotas' | i18n}}</h3>
-<app-quotas [quotas]="quotas"></app-quotas>
+<app-quotas [quotas]="quotas"></app-quotas>
+<h3>{{'profile' | i18n}}</h3>
+<app-profilefields [profileFields]="profileFields"></app-profilefields>

src/app/pages/account/info/info.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { PermissionService } from './../../../services/permission.service';
 import { QuotaService } from './../../../services/quota.service';
+import { ProfileService } from './../../../services/profile.service';
 
 @Component({
   selector: 'app-account-info',
@@ -11,8 +12,9 @@ export class InfoComponent implements OnInit {
 
   permissions = [];
   quotas = [];
+  profileFields =  [];
 
-  constructor(private permissionService: PermissionService, private quotaService: QuotaService) { }
+  constructor(private permissionService: PermissionService, private quotaService: QuotaService, private profileService : ProfileService) { }
 
   ngOnInit(): void {
     this.permissionService.permissions().subscribe((data: any) => {
@@ -22,6 +24,10 @@ export class InfoComponent implements OnInit {
     this.quotaService.quotas().subscribe((data: any) => {
       this.quotas = data;
     })
+
+    this.profileService.getAll().subscribe((data: any) => {
+      this.profileFields = data;
+    })
   }
 
 }

src/app/pages/account/profile/profile.component.html

@@ -0,0 +1 @@
+<app-profilefields [profileFields]="profileFields" [edit]="true"></app-profilefields>

src/app/pages/account/profile/profile.component.scss

@@ -0,0 +1,8 @@
+
+table {
+  width: 100%;
+}
+
+td.mat-cell {
+  padding: 12px;
+}

src/app/pages/account/profile/profile.component.spec.ts

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

src/app/pages/account/profile/profile.component.ts

@@ -0,0 +1,24 @@
+import {Component, OnInit} from '@angular/core';
+import {ProfileService} from '../../../services/profile.service';
+import {I18nService} from '../../../services/i18n.service';
+
+@Component({
+  selector: 'app-account-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent implements OnInit {
+
+  profileFields = [];
+  types = ["TEXT", "NUMBER", "DATE", "URL", "EMAIL", "BOOL"];
+  visibilities = ["PRIVATE", "PROTECTED", "PUBLIC"];
+
+  constructor(private profileService: ProfileService, private i18n: I18nService) {}
+
+  ngOnInit(): void {
+    this.profileService.getAll().subscribe((data: any) => {
+      this.profileFields = data;
+    })
+  }
+
+}

src/app/pages/account/security/security-totp.dialog.html

@@ -12,5 +12,5 @@
 </div>
 <div mat-dialog-actions>
     <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
-    <button [disabled]="code.invalid" mat-raised-button [mat-dialog-close]="code.value" cdkFocusInitial color="accent">{{'security.2fa.totp.enable' | i18n}}</button>
+    <button [disabled]="code.invalid" mat-raised-button [mat-dialog-close]="code.value" color="accent">{{'security.2fa.totp.enable' | i18n}}</button>
 </div>