update

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

@@ -0,0 +1,10 @@
+<h2>{{'greet' | i18n:auth.name}} <mat-icon aria-hidden="false" aria-label="Smile">sentiment_satisfied_alt</mat-icon>
+</h2>
+
+<nav mat-tab-nav-bar>
+    <a mat-tab-link routerLink="info" routerLinkActive="active">{{'info' | 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>
+
+<router-outlet></router-outlet>

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

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

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+import { AuthService } from './../../services/auth.service';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+
+  auth;
+
+  constructor(private authService: AuthService) {
+    this.authService.auth.subscribe(data => {
+      this.auth = data;
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+}

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

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

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

@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}

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

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

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

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { PermissionService } from './../../../services/permission.service';
+import { QuotaService } from './../../../services/quota.service';
+
+@Component({
+  selector: 'app-account-info',
+  templateUrl: './info.component.html',
+  styleUrls: ['./info.component.scss']
+})
+export class InfoComponent implements OnInit {
+
+  permissions = [];
+  quotas = [];
+
+  constructor(private permissionService: PermissionService, private quotaService: QuotaService) { }
+
+  ngOnInit(): void {
+    this.permissionService.permissions().subscribe((data: any) => {
+      this.permissions = data;
+    })
+
+    this.quotaService.quotas().subscribe((data: any) => {
+      this.quotas = data;
+    })
+  }
+
+}

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

@@ -0,0 +1,37 @@
+<form [formGroup]="form" (ngSubmit)="changePassword()" #formDirective="ngForm">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'password.change' | i18n}}</h2>
+            <mat-hint *ngIf="success">
+                {{'password.changed' | i18n}}
+            </mat-hint>
+            <mat-form-field>
+                <input matInput type="password" placeholder="{{'password.current' | i18n}}" formControlName="oldPassword"
+                    [(ngModel)]="model.old">
+                <mat-error *ngFor="let error of form.get('oldPassword').errors | keyvalue">
+                    {{error.key}}
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
+                    [(ngModel)]="model.password">
+                <mat-error *ngFor="let error of form.get('password').errors | keyvalue">
+                    {{error.key}}
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
+                    [(ngModel)]="model.password2">
+                <mat-error>
+                    {{'password.not-match' | i18n}}
+                </mat-error>
+            </mat-form-field>
+        </mat-card-content>
+        <mat-card-actions>
+            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
+            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+                {{'password.change' | i18n}}
+            </button>
+        </mat-card-actions>
+    </mat-card>
+</form>

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

@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}

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

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

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

@@ -0,0 +1,59 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
+
+import { UserService } from './../../../services/user.service';
+import { MatchingValidator } from './../../../utils/matching.validator';
+
+@Component({
+  selector: 'app-account-security',
+  templateUrl: './security.component.html',
+  styleUrls: ['./security.component.scss']
+})
+export class SecurityComponent implements OnInit {
+
+
+  model: any = {};
+  public working: boolean;
+  public success: boolean;
+  form: FormGroup;
+  @ViewChild('formDirective') private formDirective: NgForm;
+
+  constructor(private formBuilder: FormBuilder, private userService: UserService) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      oldPassword: ['', Validators.required],
+      password: ['', Validators.required],
+      password2: ['', Validators.required]
+    }, {
+      validator: MatchingValidator('password', 'password2')
+    });
+  }
+
+
+  changePassword() {
+    if (this.form.valid && !this.working) {
+      this.working = true;
+
+      this.userService.password(this.model).subscribe((result: any) => {
+        this.formDirective.resetForm();
+        this.success = true;
+        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]);
+          }
+        }
+      })
+    }
+  }
+
+}

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

@@ -0,0 +1,32 @@
+<mat-card>
+    <mat-card-content>
+        <p>{{'vouchers.info' | i18n}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+        <button mat-raised-button color="primary" (click)="registration()" [disabled]="!hasRegistration">
+            {{'vouchers.registration' | i18n}}
+        </button>
+        <button mat-raised-button color="accent" (click)="addon()">
+            {{'vouchers.add-on' | i18n}}
+        </button>
+    </mat-card-actions>
+</mat-card>
+
+<div *ngIf="vouchers && vouchers[0]">
+    <h3>{{'vouchers.temp' | i18n}}</h3>
+    <p>{{'vouchers.temp.info' | i18n}}</p>
+    <table mat-table [dataSource]="voucherSource">
+        <ng-container matColumnDef="type">
+            <th mat-header-cell *matHeaderCellDef> {{'voucher.type' | i18n}} </th>
+            <td mat-cell *matCellDef="let voucher">{{voucher.type}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="code">
+            <th mat-header-cell *matHeaderCellDef> {{'voucher.code' | i18n}} </th>
+            <td mat-cell *matCellDef="let voucher">{{voucher.code}}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="voucherColumns"></tr>
+        <tr mat-row *matRowDef="let myRowData; columns: voucherColumns"></tr>
+    </table>
+</div>

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

@@ -0,0 +1,3 @@
+table {
+    width: 100%;
+}

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

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

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

@@ -0,0 +1,81 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+
+import { VoucherService } from './../../../services/voucher.service';
+import { QuotaService } from './../../../services/quota.service';
+
+@Component({
+  selector: 'app-account-voucher',
+  templateUrl: './voucher.component.html',
+  styleUrls: ['./voucher.component.scss']
+})
+export class VoucherComponent implements OnInit {
+
+  public hasRegistration: boolean = false;
+  model: any = {};
+  vouchers = [];
+  voucherSource = new MatTableDataSource<any>();
+  voucherColumns = ['type', 'code'];
+
+  constructor(private voucherService: VoucherService, private quotaService: QuotaService, public dialog: MatDialog) { }
+
+  ngOnInit(): void {
+    this.voucherSource.data = this.vouchers;
+    this.quotaService.quotas().subscribe((data: any) => {
+      this.hasRegistration = data && data.some(function (quota) {
+        return quota.name == "registration_vouchers" && quota.value > 0;
+      })
+    })
+  }
+
+  registration() {
+    this.voucherService.registration().toPromise().then(data => {
+      this.model.type = "registration";
+      this.model.code = data;
+      this.vouchers.push(this.model);
+      this.voucherSource.data = this.vouchers;
+      const dialogRef = this.dialog.open(VoucherDialog, {
+        closeOnNavigation: false,
+        disableClose: true,
+        data: this.model
+      });
+    }, error => {
+
+    })
+  }
+
+  addon() {
+    this.voucherService.addon().subscribe((data: any) => {
+      this.model.type = "add-on";
+      this.model.code = data;
+      this.vouchers.push(this.model);
+      this.voucherSource.data = this.vouchers;
+      const dialogRef = this.dialog.open(VoucherDialog, {
+        closeOnNavigation: false,
+        disableClose: true,
+        data: this.model
+      });
+    }, error => {
+      console.log(error);
+    })
+  }
+
+}
+
+
+@Component({
+  selector: 'app-voucher-dialog',
+  templateUrl: 'voucher.dialog.html',
+  styleUrls: ['./voucher.dialog.scss']
+})
+export class VoucherDialog {
+
+  constructor(public dialogRef: MatDialogRef<VoucherDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  onOkClick(): void {
+    this.dialogRef.close();
+  }
+
+}

src/app/pages/account/voucher/voucher.dialog.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>{{'voucher' | i18n}}</h1>
+<div mat-dialog-content>
+    <p>{{'vouchers.stored-safely' | i18n}}</p>
+    <span>{{'vouchers.' + data.type | i18n}}: {{data.code}}</span>
+</div>
+<div mat-dialog-actions>
+    <mat-slide-toggle [(ngModel)]="data.confirmClose">
+        {{'vouchers.stored-safely.confirm' | i18n}}
+    </mat-slide-toggle>
+
+    <button mat-button (click)="onOkClick()" [disabled]="!data.confirmClose">{{'ok' | i18n}}</button>
+</div> 

src/app/pages/account/voucher/voucher.dialog.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+    display: block;
+  }