profile improvements, aliases feature

src/app/app-routing.module.ts

@@ -20,6 +20,7 @@ import {SecurityComponent} from './pages/account/security/security.component';
 import {UnavailableComponent} from './pages/unavailable/unavailable.component';
 import {NotfoundComponent} from './pages/notfound/notfound.component';
 import {UserComponent} from './pages/user/user.component'
+import {AliasesComponent} from './pages/account/aliases/aliases.component';
 
 const routes: Routes = [
   {path: '', redirectTo: "/services", pathMatch: 'full'},
@@ -38,8 +39,9 @@ const routes: Routes = [
 
       {path: 'info', component: InfoComponent, canActivate: [AuthenticatedGuard]},
       {path: 'profile', component: ProfileComponent, canActivate: [AuthenticatedGuard]},
+      {path: 'security', component: SecurityComponent, canActivate: [AuthenticatedGuard]},
       {path: 'voucher', component: VoucherComponent, canActivate: [AuthenticatedGuard]},
-      {path: 'security', component: SecurityComponent, canActivate: [AuthenticatedGuard]}
+      {path: 'aliases', component: AliasesComponent, canActivate: [AuthenticatedGuard]}
     ]
   },
   {path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard]},

src/app/app.module.ts

@@ -25,6 +25,7 @@ import {SecurityComponent, SecurityTotpDialog} from './pages/account/security/se
 import {VoucherComponent} from './pages/account/voucher/voucher.component';
 import {VoucherDialog} from './pages/account/voucher/voucher.component';
 import {InfoComponent} from './pages/account/info/info.component';
+import {AliasesComponent} from './pages/account/aliases/aliases.component';
 import {ProfileComponent} from './pages/account/profile/profile.component';
 import {PasswordComponent} from './pages/password/password.component';
 import {PasswordResetComponent} from './pages/password-reset/password-reset.component';
@@ -75,6 +76,7 @@ export class XhrInterceptor implements HttpInterceptor {
     VoucherComponent,
     VoucherDialog,
     InfoComponent,
+    AliasesComponent,
     ProfileComponent,
     PasswordComponent,
     PasswordResetComponent,

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

@@ -4,8 +4,9 @@
 <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>
+    <a mat-tab-link routerLink="voucher" routerLinkActive="active">{{'vouchers' | i18n}}</a>
+    <a mat-tab-link routerLink="aliases" routerLinkActive="active">{{'user.aliases' | i18n}}</a>
 </nav>
 
 <router-outlet></router-outlet>

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

@@ -0,0 +1,77 @@
+<h3>{{'user.aliases' | i18n}}</h3>
+
+<table mat-table matSort [dataSource]="aliases" (matSortChange)="sortData($event)">
+
+  <ng-container matColumnDef="alias">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="alias"> {{'user.aliases.alias' | i18n}} </th>
+    <td mat-cell *matCellDef="let alias"> {{ alias.alias}} </td>
+  </ng-container>
+
+  <ng-container matColumnDef="visibility">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header="visibility"> {{'visibility' | i18n}} </th>
+    <td mat-cell *matCellDef="let alias">
+      <mat-select [(ngModel)]="alias.visibility" (selectionChange)="updateAlias(alias)"
+        placeholder="{{'visibility' | i18n}}">
+        <mat-option *ngFor="let visibility of visibilities" [value]="visibility">
+          <mat-icon inline="true">{{'visibility.' + visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+          visibility | i18n}}
+        </mat-option>
+
+        <mat-select-trigger>
+          <mat-icon inline="true">{{'visibility.' + alias.visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+          alias.visibility | i18n}}
+        </mat-select-trigger>
+      </mat-select>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef class="align-right"> {{'user.aliases.delete' | i18n}} </th>
+    <td mat-cell *matCellDef="let alias" class="text-right">
+      <a mat-icon-button>
+        <mat-icon (click)="confirmDelete(alias)">delete</mat-icon>
+      </a>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="aliasesColumns"></tr>
+  <tr mat-row *matRowDef="let myRowData; columns: aliasesColumns"></tr>
+</table>
+
+<form [formGroup]="form" (ngSubmit)="create()" #formDirective="ngForm">
+  <mat-card>
+    <mat-card-content>
+      <p>{{'user.aliases.info' | i18n}}</p>
+      <p *ngIf="!aliasCreation">{{'user.aliases.noQuota' | i18n}}</p>
+      <div *ngIf="aliasCreation">
+        <p>{{'user.aliases.left' | i18n:aliasCreation}}</p>
+        <mat-form-field>
+          <input matInput placeholder="{{'user.aliases.alias' | i18n}}" formControlName="alias"
+            [(ngModel)]="alias.alias" required>
+          <mat-error>
+            {{'user.aliases.error' | i18n}}
+          </mat-error>
+        </mat-form-field>
+        <mat-form-field>
+          <mat-select [(ngModel)]="alias.visibility" formControlName="visibility" placeholder="{{'visibility' | i18n}}">
+            <mat-option *ngFor="let visibility of visibilities" [value]="visibility">
+              <mat-icon inline="true">{{'visibility.' + visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+              visibility | i18n}}
+            </mat-option>
+
+            <mat-select-trigger>
+              <mat-icon inline="true">{{'visibility.' + alias.visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+              alias.visibility | i18n}}
+            </mat-select-trigger>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </mat-card-content>
+    <mat-card-actions>
+      <button *ngIf="aliasCreation && !working" mat-raised-button color="primary" [disabled]="form.invalid">
+        {{'user.aliases.create' | i18n}}
+      </button>
+    </mat-card-actions>
+  </mat-card>
+
+</form>

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

@@ -0,0 +1,16 @@
+mat-form-field {
+  display: block;
+}
+
+.mat-header-cell,
+.mat-cell {
+  &.text-right {
+    text-align: right;
+  }
+}
+
+.align-right{
+  display: flex;
+  padding: 21px 0;
+  justify-content: flex-end;
+}

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

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

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

@@ -0,0 +1,130 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {QuotaService} from '../../../services/quota.service';
+import {I18nService} from '../../../services/i18n.service';
+import {Sort} from '@angular/material/sort';
+import {UserAliasService} from '../../../services/useralias.service';
+import {FormBuilder, FormGroup, Validators, NgForm} from '@angular/forms';
+import {MatDialog} from '@angular/material/dialog';
+import {ConfirmDialog} from '../../../ui/confirm/confirm.component';
+
+@Component({
+  selector: 'app-account-aliases',
+  templateUrl: './aliases.component.html',
+  styleUrls: ['./aliases.component.scss']
+})
+export class AliasesComponent implements OnInit {
+
+  form: FormGroup;
+  @ViewChild('formDirective') private formDirective: NgForm;
+  aliasCreation: number = 0;
+  aliases: any[] = [];
+  alias: any = {
+    visibility: "PROTECTED"
+  };
+  success: boolean;
+  working: boolean;
+
+  aliasesColumns = ["alias", "visibility", "delete"];
+  visibilities = ["PRIVATE", "PROTECTED", "PUBLIC"];
+
+  constructor(
+    private quotaService: QuotaService,
+    private formBuilder: FormBuilder,
+    private userAliasService: UserAliasService,
+    private i18n : I18nService,
+    public dialog: MatDialog) {}
+
+  ngOnInit(): void {
+
+    this.form = this.formBuilder.group({
+      alias: ['', Validators.required],
+      visibility: ['', Validators.required],
+    });
+
+    this.update();
+  }
+
+  create(): void {
+    this.working = true;
+    this.userAliasService.create(this.alias).subscribe(response => {
+      this.update();
+      this.formDirective.resetForm();
+      this.alias = {
+        visibility: "PROTECTED"
+      };
+      this.working = false;
+    }, (error) => {
+      this.working = false;
+      if(error.status == 409) {
+        let errors = {};
+        for(let code of error.error) {
+          errors[code.field] = errors[code.field] || {};
+          errors[code.field][code.code] = true;
+        }
+
+        for(let code in errors) {
+          this.form.get(code).setErrors(errors[code]);
+        }
+      }
+    })
+  }
+
+  updateAlias(alias) {
+    this.userAliasService.update(alias).subscribe((response: any) => {
+      alias = response;
+    })
+  }
+
+  update() {
+    this.aliasCreation = 0;
+    this.quotaService.quotas().subscribe((data: any) => {
+      for(let quota of data) {
+        if(quota.name == "alias_creation") {
+          this.aliasCreation = quota.value;
+        }
+      }
+    })
+
+    this.userAliasService.get().subscribe((data: any) => {
+      this.aliases = data;
+    })
+  }
+
+  confirmDelete(alias) {
+    const dialogRef = this.dialog.open(ConfirmDialog, {
+      data: {
+        'label': 'user.aliases.confirmDelete',
+        'args': [alias.alias]
+      }
+    })
+
+    dialogRef.afterClosed().subscribe(result => {
+      if(result) {
+        this.userAliasService.delete(alias.id).subscribe((result: any) => {
+          this.update();
+        })
+      }
+    });
+  }
+
+  sortData(sort: Sort) {
+    const data = this.aliases.slice();
+    if(!sort.active || sort.direction === '') {
+      this.aliases = data;
+      return;
+    }
+
+    this.aliases = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch(sort.active) {
+        case 'alias': return this.compare(a.alias, b.alias, isAsc);
+        case 'visibility': return this.compare(this.i18n.get('visibility.' + a.visibility, []), this.i18n.get('visibility.' + b.visibility, []), isAsc);
+        default: return 0;
+      }
+    });
+  }
+
+  compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+}

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

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

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

@@ -1,7 +1,6 @@
 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',
@@ -12,9 +11,8 @@ export class InfoComponent implements OnInit {
 
   permissions = [];
   quotas = [];
-  profileFields =  [];
 
-  constructor(private permissionService: PermissionService, private quotaService: QuotaService, private profileService : ProfileService) { }
+  constructor(private permissionService: PermissionService, private quotaService: QuotaService) {}
 
   ngOnInit(): void {
     this.permissionService.permissions().subscribe((data: any) => {
@@ -25,9 +23,6 @@ export class InfoComponent implements OnInit {
       this.quotas = data;
     })
 
-    this.profileService.getAll().subscribe((data: any) => {
-      this.profileFields = data;
-    })
   }
 
 }

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

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

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

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

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

@@ -25,7 +25,6 @@ export class SecurityComponent implements OnInit {
   passwordForm: FormGroup;
   statusForm: FormGroup;
   @ViewChild('passwordFormDirective') private passwordFormDirective: NgForm;
-  @ViewChild('statusFormDirective') private statusFormDirective: NgForm;
 
   constructor(
     private formBuilder: FormBuilder,

src/app/pages/register/register.component.html

@@ -34,9 +34,10 @@
 
             <mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail"
                 (change)="onPrimaryChange()">
-                {{'email.primary' | i18n}} <mat-icon inline=true
+                {{'email.primary' | i18n}} 
-                    matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
             </mat-slide-toggle>
+            <mat-icon #primaryHint="matTooltip" (click)="primaryHint.toggle()" inline="true"
+            matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
 
             <mat-form-field *ngIf="model.primaryEmail">
                 <input matInput type="email" placeholder="{{'email' | i18n}}" formControlName="email"

src/app/pages/register/register.component.ts

@@ -23,9 +23,9 @@ var openpgp = require('openpgp');
 export class RegisterComponent implements OnInit {
 
   form: FormGroup;
-  public missingToken: boolean;
+  missingToken: boolean;
-  public success: boolean;
+  success: boolean;
-  public working: boolean;
+  working: boolean;
   items = [];
   permissions = [];
   quotas = [];

src/app/pages/register/register.dialog.html

@@ -16,7 +16,7 @@
         i18n}}</a>
     <a mat-raised-button  (click)="copyKey(privkey)">{{'pgp.privateKey.copyKey' |
         i18n}}</a>
-    <button mat-icon-button [matTooltip]="'pgp.privateKey.help' | i18n" matTooltipPosition="after">
+    <button mat-icon-button  #privateKeyHelp="matTooltip" (click)="privateKeyHelp.toggle()" [matTooltip]="'pgp.privateKey.help' | i18n" matTooltipPosition="after">
         <mat-icon>help</mat-icon>
     </button>
 </mat-dialog-actions>

src/app/pages/services/services.component.html

@@ -1,5 +1,7 @@
 <h3>{{'services' | i18n}}</h3>
 
+<p *ngIf="!services || services.length == 0">{{'services.empty' | i18n}}</p>
+
 <div fxLayout="row wrap" fxLayoutGap="16px grid">
     <div fxFlex="33.33%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let service of services">
         <mat-card>

src/app/pages/user/user.component.html

@@ -2,8 +2,14 @@
 <mat-progress-bar *ngIf="!success && !error" mode="indeterminate"></mat-progress-bar>
 
 <div *ngIf="success">
-  <h3>{{username}}</h3>
+  <h3>{{model.username}}</h3>
-  <app-profilefields [profileFields]="profileFields"></app-profilefields>
+  <app-profilefields [username]="model.username"></app-profilefields>
+  <div *ngIf="model.aliases && model.aliases.length > 0">
+    <h4>{{'user.aliases' | i18n}}</h4>
+    <mat-list>
+      <mat-list-item *ngFor="let alias of model.aliases">{{alias}}</mat-list-item>
+    </mat-list>
+  </div>
 </div>
 
 <mat-card class="warn" *ngIf="error">

src/app/pages/user/user.component.ts

@@ -11,20 +11,19 @@ import {ProfileService} from '../../services/profile.service';
 export class UserComponent implements OnInit {
 
   username;
-  profileFields = [];
+  model: any;
   error = false;
   success = false;
 
   constructor(
     private profileService: ProfileService,
-    private router: Router,
     private route: ActivatedRoute) {}
 
   async ngOnInit() {
     this.username = this.route.snapshot.paramMap.get('username');
     this.profileService.getAllForUser(this.username).subscribe((data: any) => {
-      this.profileFields = data;
       this.success = true;
+      this.model = data;
     }, error => {
       this.error = error;
     })

src/app/services/i18n.service.ts

@@ -67,6 +67,7 @@ export class I18nService {
     }
 
     getInternal(key, args: string[], from): string {
+        key += '';
         if(!from) {
             return key;
         } else if(from[key]) {

src/app/services/useralias.service.ts

@@ -0,0 +1,30 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+import {environment} from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserAliasService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    get() {
+        return this.http.get(environment.apiUrl + "/users/aliases");
+    }
+
+    create(alias) {
+        return this.http.post(environment.apiUrl + "/users/aliases", alias);
+    }
+
+    update(alias) {
+        return this.http.patch(environment.apiUrl + "/users/aliases", alias);
+    }
+
+    delete(id) {
+        return this.http.delete(environment.apiUrl + "/users/aliases/" + id);
+    }
+
+}

src/app/ui/profilefields/profilefield.dialog.html

@@ -4,35 +4,52 @@
     <mat-form-field>
       <input matInput type="text" min="3" [(ngModel)]="profileField.name" formControlName="name"
         placeholder="{{'profileField.name' | i18n}}">
+        <mat-error>
+          {{'profileField.error.name' | i18n}}
+        </mat-error>
     </mat-form-field>
 
-
     <mat-form-field>
       <mat-select [(ngModel)]="profileField.type" formControlName="type" placeholder="{{'profileField.type' | i18n}}">
         <mat-option *ngFor="let type of types" [value]="type">
           {{'profileField.type.' + type | i18n}}
         </mat-option>
       </mat-select>
+      <mat-error>
+        {{'profileField.error.type' | i18n}}
+      </mat-error>
     </mat-form-field>
 
     <div [ngSwitch]="profileField.type">
       <mat-form-field *ngSwitchCase="'TEXT'">
         <input matInput type="text" max="255" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+        <mat-error>
+          {{'profileField.error.TEXT' | i18n}}
+        </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'DATE'">
         <input matInput [matDatepicker]="picker" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
+        <mat-error>
+          {{'profileField.error.DATE' | i18n}}
+        </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'URL'">
         <input matInput type="url" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+          <mat-error>
+            {{'profileField.error.URL' | i18n}}
+          </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'EMAIL'">
         <input matInput type="email" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+          <mat-error>
+            {{'profileField.error.EMAIL' | i18n}}
+          </mat-error>
       </mat-form-field>
       <mat-slide-toggle *ngSwitchCase="'BOOL'" (change)="booleanChange(profileField)"
         [checked]="profileField.value == 'true'">
@@ -41,31 +58,49 @@
       <mat-form-field *ngSwitchCase="'NUMBER'">
         <input matInput type="number" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
+          <mat-error>
+            {{'profileField.error.NUMBER' | i18n}}
+          </mat-error>
       </mat-form-field>
       <mat-form-field *ngSwitchCase="'BLOB'">
         <textarea matInput [(ngModel)]="profileField.blob" formControlName="blob"
           placeholder="{{'profileField.value' | i18n}}"></textarea>
+          <mat-error>
+            {{'profileField.error.BLOB' | i18n}}
+          </mat-error>
       </mat-form-field>
     </div>
 
 
     <mat-form-field>
       <mat-select [(ngModel)]="profileField.visibility" formControlName="visibility"
-        placeholder="{{'profileField.visibility' | i18n}}">
+        placeholder="{{'visibility' | i18n}}">
         <mat-option *ngFor="let visibility of visibilities" [value]="visibility">
-          {{'profileField.visibility.' + visibility | i18n}}
+          <mat-icon inline="true">{{'visibility.' + visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+          visibility | i18n}}
         </mat-option>
+
+        <mat-select-trigger>
+          <mat-icon inline="true">{{'visibility.' + profileField.visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' +
+          profileField.visibility | i18n}}
+        </mat-select-trigger>
       </mat-select>
+      <mat-error>
+        {{'profileField.error.visibility' | i18n}}
+      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <input matInput type="number" min="0" [(ngModel)]="profileField.index" formControlName="index"
         placeholder="{{'profileField.index' | i18n}}">
+        <mat-error>
+          {{'profileField.error.index' | i18n}}
+        </mat-error>
     </mat-form-field>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
-  <button [disabled]="form.invalid" mat-raised-button [mat-dialog-close]="profileField" color="accent">{{'save' |
+  <button [disabled]="form.invalid" mat-raised-button (click)="save(profileField)" color="accent">{{'save' |
     i18n}}</button>
 </mat-dialog-actions>

src/app/ui/profilefields/profilefields.component.html

@@ -24,14 +24,14 @@
     </ng-container>
 
     <ng-container matColumnDef="visibility" *ngIf="edit">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="visibility"> {{'profileField.visibility' | i18n}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="visibility"> {{'visibility' | i18n}} </th>
-        <td mat-cell *matCellDef="let profileField"> {{'profileField.visibility.' + profileField.visibility | i18n}}
+        <td mat-cell *matCellDef="let profileField"> <mat-icon inline="true">{{'visibility.' + profileField.visibility + '.icon' | i18n}}</mat-icon> {{'visibility.' + profileField.visibility | i18n}}
         </td>
     </ng-container>
 
     <ng-container matColumnDef="edit" *ngIf="edit">
-        <th mat-header-cell *matHeaderCellDef> {{'profileField.edit' | i18n}} </th>
+        <th mat-header-cell *matHeaderCellDef class="text-right"> {{'profileField.edit' | i18n}} </th>
-        <td mat-cell *matCellDef="let profileField">
+        <td mat-cell *matCellDef="let profileField" class="text-right">
             <a mat-icon-button>
                 <mat-icon (click)="openEdit(profileField)">edit</mat-icon>
             </a>
@@ -39,8 +39,8 @@
     </ng-container>
 
     <ng-container matColumnDef="delete" *ngIf="edit">
-        <th mat-header-cell *matHeaderCellDef> {{'profileField.delete' | i18n}} </th>
+        <th mat-header-cell *matHeaderCellDef class="align-right"> {{'profileField.delete' | i18n}} </th>
-        <td mat-cell *matCellDef="let profileField">
+        <td mat-cell *matCellDef="let profileField" class="text-right">
             <a mat-icon-button>
                 <mat-icon (click)="confirmDelete(profileField)">delete</mat-icon>
             </a>

src/app/ui/profilefields/profilefields.component.scss

@@ -1,3 +1,16 @@
 table {
   width: 100%;
 }
+
+.mat-header-cell,
+.mat-cell {
+  &.text-right {
+    text-align: right;
+  }
+}
+
+.align-right {
+  display: flex;
+  padding: 21px 0;
+  justify-content: flex-end;
+}

src/app/ui/profilefields/profilefields.component.ts

@@ -2,9 +2,9 @@ import {Component, OnInit, Inject, Input} from '@angular/core';
 import {Sort} from '@angular/material/sort';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {ConfirmDialog} from '../confirm/confirm.component';
 import {I18nService} from '../../services/i18n.service';
 import {ProfileService} from '../../services/profile.service';
-import {ConfirmDialog} from '../confirm/confirm.component';
 
 @Component({
   selector: 'app-profilefields',
@@ -13,9 +13,10 @@ import {ConfirmDialog} from '../confirm/confirm.component';
 })
 export class ProfileFieldsComponent implements OnInit {
 
-  @Input() profileFields: Array<any>;
+  @Input() username;
   @Input() edit;
   profileFieldColumns = ["name", "value"];
+  profileFields: Array<any> = [];
 
   constructor(private i18n: I18nService, private profileService: ProfileService, public dialog: MatDialog) {}
 
@@ -25,6 +26,20 @@ export class ProfileFieldsComponent implements OnInit {
       this.profileFieldColumns.push("edit");
       this.profileFieldColumns.push("delete");
     }
+    this.update();
+  }
+
+
+  update() {
+    if(this.username) {
+      this.profileService.getAllForUser(this.username).subscribe((data: any) => {
+        this.profileFields = data.profileFields;
+      })
+    } else {
+      this.profileService.getAll().subscribe((data: any) => {
+        this.profileFields = data;
+      })
+    }
   }
 
   sortData(sort: Sort) {
@@ -40,6 +55,7 @@ export class ProfileFieldsComponent implements OnInit {
         case 'name': return this.compare(this.i18n.get('profileField.name.' + a.name, []), this.i18n.get('profileField.name.' + b.name, []), isAsc);
         case 'value': return this.compare(a.value, b.value, isAsc);
         case 'index': return this.compare(a.index, b.index, isAsc);
+        case 'visibility': return this.compare(this.i18n.get('visibility.' + a.visibility, []), this.i18n.get('visibility.' + b.visibility, []), isAsc);
         default: return 0;
       }
     });
@@ -85,8 +101,7 @@ export class ProfileFieldsComponent implements OnInit {
     dialogRef.afterClosed().subscribe(result => {
       if(result) {
         this.profileService.delete(profileField.name).subscribe((result: any) => {
-          this.profileFields.splice(this.profileFields.indexOf(profileField), 1);
+          this.update();
-          this.profileFields = [...this.profileFields];
         })
       }
     });
@@ -100,10 +115,7 @@ export class ProfileFieldsComponent implements OnInit {
 
     dialogRef.afterClosed().subscribe(result => {
       if(result) {
-        this.profileService.createOrUpdate(result).subscribe((result: any) => {
+        this.update();
-          this.profileFields.push(result);
-          this.profileFields = [...this.profileFields];
-        });
       }
     });
 
@@ -132,6 +144,7 @@ export class ProfileFieldDialog {
   visibilities = ["PRIVATE", "PROTECTED", "PUBLIC"];
 
   constructor(
+    private profileService: ProfileService,
     private formBuilder: FormBuilder,
     public dialogRef: MatDialogRef<ProfileFieldDialog>,
     @Inject(MAT_DIALOG_DATA) public data: any) {
@@ -157,6 +170,25 @@ export class ProfileFieldDialog {
     }
   }
 
+
+  save(profileField) {
+    this.profileService.createOrUpdate(profileField).subscribe((result: any) => {
+      this.dialogRef.close(profileField);
+    }, (error) => {
+      if(error.status == 409) {
+        let errors = {};
+        for(let code of error.error) {
+          errors[code.field] = errors[code.field] || {};
+          errors[code.field][code.code] = true;
+        }
+
+        for(let code in errors) {
+          this.form.get(code).setErrors(errors[code]);
+        }
+      }
+    });
+  }
+
 }
 
 

src/assets/i18n/de-informal.json

@@ -7,7 +7,10 @@
   "email": {
     ".": "E-Mail Adresse",
     "invalid": "ungültige E-Mail Adresse",
-    "primary": "primäre E-Mail Adresse"
+    "primary": {
+      ".": "primäre E-Mail Adresse",
+      "hint": "Eine primäre E-Mail Adresse dient dazu eine andere Kontaktmöglichkeit als deine we.bstly Adresse anzugeben."
+    }
   },
   "greet": "Hallo {0}",
   "help": "Hilfe",
@@ -91,6 +94,32 @@
     "create": "Neues Profilfeld hinzufügen",
     "delete": "Löschen",
     "edit": "Bearbeiten",
+    "error": {
+      "BLOB": {
+        ".": "Kein gültiger Binärblob"
+      },
+      "BOOL": {
+        ".": "Kein gültiger Boolean"
+      },
+      "DATE": {
+        ".": "Kein gültiges Datum"
+      },
+      "EMAIL": {
+        ".": "Keine gültige E-Mail Adresse"
+      },
+      "name": "Name zu kurz oder ungültig",
+      "NUMBER": {
+        ".": "Keine gültige Nummer"
+      },
+      "TEXT": {
+        ".": "Textfeld zu lang"
+      },
+      "type": "Ungültiger Typ für dieses Profilfeld",
+      "URL": {
+        ".": "Keine gültige URL"
+      },
+      "visibility": "Keine gültige Sichtbarkeit für Profilfeld"
+    },
     "index": "Index",
     "name": {
       ".": "Key",
@@ -126,19 +155,7 @@
         ".": "URL"
       }
     },
-    "value": "Wert",
+    "value": "Wert"
-    "visibility": {
-      ".": "Sichtbarkeit",
-      "PRIVATE": {
-        ".": "Privat"
-      },
-      "PROTECTED": {
-        ".": "Geschützt"
-      },
-      "PUBLIC": {
-        ".": "Öffentlich"
-      }
-    }
   },
   "quotas": {
     ".": "Quotas",
@@ -207,6 +224,13 @@
   },
   "services": {
     ".": "Dienste",
+    "alias_creation": {
+      "icon": "alternate_email",
+      "subtitle": "Anlegen von alternativen Namen",
+      "text": "Du kannst zusätzlich zu deinem Usernamen noch alternative Namen anlegen.",
+      "title": "Alternative Namen"
+    },
+    "empty": "Du hast aktuell keine Berechtigungen zur Nutzung von Diensten.",
     "gitea": {
       "icon": "code",
       "subtitle": "Git-Repositories",
@@ -284,6 +308,17 @@
   },
   "user": {
     ".": "User",
+    "aliases": {
+      ".": "Alternative Namen",
+      "alias": "Alternativer Name",
+      "confirmDelete": "Möchtest du wirklich den alternativen Namen '{0}' löschen?",
+      "create": "Alternativen Namen anlegen",
+      "delete": "Löschen",
+      "error": "Dieser alternative Name ist leider nicht zulässig.",
+      "info": "Du kannst hier alternative Namen erstellen. Die Anzahl wird über eine Quota begrenzt.",
+      "left": "Du kannst noch {0} alternative(n) Namen anlegen.",
+      "noQuota": "Deine Quota für alternative Namen ist leider aufgebraucht."
+    },
     "unavailable": {
       ".": "Zugriff verweigert",
       "text": "Dieser Benutzer existiert nicht oder du hast keine Berechtigungen, um auf das Profil zuzugreifen."
@@ -294,6 +329,21 @@
     "error": "Bitte wähle einen anderen Usernamen aus.",
     "missing": "Bitte gebe einen Usernamen an."
   },
+  "visibility": {
+    ".": "Sichtbarkeit",
+    "PRIVATE": {
+      ".": "Privat",
+      "icon" : "lock"
+    },
+    "PROTECTED": {
+      ".": "Geschützt",
+      "icon" : "shield"
+    },
+    "PUBLIC": {
+      ".": "Öffentlich",
+      "icon" : "public"
+    }
+  },
   "voucher": {
     ".": "Gutscheincode",
     "code": "Code",

src/assets/i18n/en.json

@@ -7,7 +7,10 @@
   "email": {
     ".": "Email address",
     "invalid": "invalid email address",
-    "primary": "primary email address"
+    "primary": {
+      ".": "primary email address",
+      "hint": "A primary email address is used for contact you instead of you we.bstly address."
+    }
   },
   "greet": "Hello {0}",
   "help": "Help",
@@ -91,6 +94,32 @@
     "create": "Add new profile field",
     "delete": "Delete",
     "edit": "Edit",
+    "error": {
+      "BLOB": {
+        ".": "Invalid binary blob"
+      },
+      "BOOL": {
+        ".": "Invalid boolean"
+      },
+      "DATE": {
+        ".": "Invalid date"
+      },
+      "EMAIL": {
+        ".": "Invalid email address"
+      },
+      "name": "name invalid or too short",
+      "NUMBER": {
+        ".": "Invalid numeric"
+      },
+      "TEXT": {
+        ".": "Text too long"
+      },
+      "type": "Invalid type for this profile field",
+      "URL": {
+        ".": "Invalid URL"
+      },
+      "visibility": "Invalid visibility for profile field"
+    },
     "index": "Index",
     "name": {
       ".": "Key",
@@ -126,19 +155,7 @@
         ".": "URL"
       }
     },
-    "value": "Value",
+    "value": "Value"
-    "visibility": {
-      ".": "Visibility",
-      "PRIVATE": {
-        ".": "Private"
-      },
-      "PROTECTED": {
-        ".": "Protected"
-      },
-      "PUBLIC": {
-        ".": "Public"
-      }
-    }
   },
   "quotas": {
     ".": "Quotas",
@@ -207,6 +224,13 @@
   },
   "services": {
     ".": "Services",
+    "alias_creation": {
+      "icon": "alternate_email",
+      "subtitle": "Creation of Aliases",
+      "text": "You can add additional aliases besides your username.",
+      "title": "Aliases"
+    },
+    "empty" : "You have insufficient permissions to use any services.",
     "gitea": {
       "icon": "code",
       "subtitle": "Git-Repositories",
@@ -284,6 +308,17 @@
   },
   "user": {
     ".": "User",
+    "aliases": {
+      ".": "Aliases",
+      "alias": "Alias",
+      "confirmDelete": "Are you sure you want to delete your alias '{0}'?",
+      "create": "Add Alias",
+      "delete": "Delete",
+      "error": "This alias is invalid.",
+      "info": "You can add Aliases here. The number is limited due to a quota.",
+      "left": "You have {0} Alias(es) left.",
+      "noQuota": "Your quota for Aliases is depleted."
+    },
     "unavailable": {
       ".": "Access denied",
       "text": "The provided user does not exists or you have insufficient privileges to access profile."
@@ -294,6 +329,21 @@
     "error": "Please choose a different username.",
     "missing": "Please enter a valid username."
   },
+  "visibility": {
+    ".": "Visibility",
+    "PRIVATE": {
+      ".": "Private",
+      "icon" : "lock"
+    },
+    "PROTECTED": {
+      ".": "Protected",
+      "icon" : "shield"
+    },
+    "PUBLIC": {
+      ".": "Public",
+      "icon" : "public"
+    }
+  },
   "voucher": {
     ".": "Voucher",
     "code": "Code",

src/styles.scss

@@ -194,6 +194,16 @@ mat-sidenav-container {
   color: $warn;
 }
 
+.align-right{
+  display: flex;
+  padding: 21px 0;
+  justify-content: flex-end;
+}
+
+.mat-tooltip-trigger {
+  cursor: pointer;
+}
+
 mat-card.warn,
 mat-card.accent {