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;
+  }

src/app/pages/apps/apps.component.html

@@ -0,0 +1,20 @@
+<h3>{{'apps' | i18n}}</h3>
+<mat-grid-list cols="2">
+    <mat-grid-tile *ngFor="let app of apps">
+        <mat-card>
+            <mat-card-header>
+                <mat-icon>{{'app.' + app.name + '.icon' | i18n}}</mat-icon>
+                <mat-card-title>{{'app.' + app.name + '.title'  | i18n}}</mat-card-title>
+                <mat-card-subtitle>{{'app.' + app.name + '.subtitle' | i18n}}</mat-card-subtitle>
+            </mat-card-header>
+            <mat-card-content>
+                <p>
+                    {{ 'app.' + app.name + '.text'  | i18n}}
+                </p>
+            </mat-card-content>
+            <mat-card-actions>
+                <a href="{{app.url}}" target="_blank" mat-raised-button color="primary">{{'app.goto'  | i18n}}</a>
+            </mat-card-actions>
+        </mat-card>
+    </mat-grid-tile>
+</mat-grid-list>

src/app/pages/apps/apps.component.scss

@@ -0,0 +1,4 @@
+mat-card {
+    width: 100%;
+    margin: 2em 2em;
+  }

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

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

src/app/pages/apps/apps.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { AppService } from './../../services/app.service';
+
+@Component({
+  selector: 'app-apps',
+  templateUrl: './apps.component.html',
+  styleUrls: ['./apps.component.scss']
+})
+export class AppsComponent implements OnInit {
+
+  apps = [];
+
+  constructor(private appService: AppService) { }
+
+  ngOnInit(): void {
+    this.appService.apps().subscribe((data: any) => {
+      this.apps = data;
+    })
+  }
+
+}

src/app/pages/form-login/form-login.component.html

@@ -0,0 +1,34 @@
+<form [formGroup]="form">
+    <form ngNoForm action="{{apiUrl}}/auth/login" method="POST">
+        <mat-card>
+            <mat-card-content>
+                <h2>{{'login.external' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+                </mat-icon></h2>
+                <mat-error *ngIf="loginInvalid">
+                    {{'login.invalid' | i18n}}
+                </mat-error>
+                <mat-form-field>
+                    <input id="username" name="username" matInput placeholder="{{'username' | i18n}}"
+                        formControlName="username" required>
+                    <mat-error>
+                        {{'username.missing' | i18n}}
+                    </mat-error>
+                </mat-form-field>
+                <mat-form-field>
+                    <input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
+                        formControlName="password" required>
+                    <mat-error>
+                        {{'password.invalid.hint' | i18n}}
+                    </mat-error>
+                </mat-form-field>
+            </mat-card-content>
+            <mat-card-actions>
+                <button type="submit" mat-raised-button color="primary"
+                    [disabled]="form.invalid">{{'login.external' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+                    </mat-icon></button>
+                <a routerLink="/password" aria-label="Enter tokens" mat-raised-button
+                    color="warn">{{'password.forgot' | i18n}}</a>
+            </mat-card-actions>
+        </mat-card>
+    </form>
+</form>

src/app/pages/form-login/form-login.component.scss

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

src/app/pages/form-login/form-login.component.spec.ts

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

src/app/pages/form-login/form-login.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { environment } from '../../../environments/environment';
+
+@Component({
+  selector: 'app-form-login',
+  templateUrl: './form-login.component.html',
+  styleUrls: ['./form-login.component.scss']
+})
+export class FormLoginComponent implements OnInit {
+
+  form: FormGroup;
+  public loginInvalid: boolean;
+  public apiUrl = environment.apiUrl;
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  async ngOnInit() {
+    this.form = this.formBuilder.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required]
+    });
+  }
+
+
+
+}

src/app/pages/home/home.component.html

@@ -0,0 +1,28 @@
+<app-html [template]="'about'"></app-html>
+
+<h3>F.A.Q. - Frequently Asked Questions</h3>
+<mat-accordion>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Question 1
+            </mat-panel-title>
+            <mat-panel-description>
+                Answers 1 summaray
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+        <p>TAnswer 1 detail</p>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Question 2
+            </mat-panel-title>
+            <mat-panel-description>
+                Answers 2 summaray
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+        <p>TAnswer 2 detail</p>
+    </mat-expansion-panel>
+</mat-accordion>

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

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

src/app/pages/home/home.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/login/login.component.html

@@ -0,0 +1,30 @@
+<form [formGroup]="form" (ngSubmit)="login()">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'login' | i18n}}</h2>
+            <mat-error *ngIf="loginInvalid">
+                {{'login.invalid' | i18n}}
+            </mat-error>
+            <mat-form-field>
+                <input id="username" name="username" matInput placeholder="{{'username' | i18n}}"
+                    formControlName="username" required>
+                <mat-error>
+                    {{'username.missing' | i18n}}
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field>
+                <input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
+                    formControlName="password" required>
+                <mat-error>
+                    {{'password.invalid.hint' | i18n}}
+                </mat-error>
+            </mat-form-field>
+        </mat-card-content>
+        <mat-card-actions>
+            <button type="submit" mat-raised-button color="primary"
+                [disabled]="form.invalid">{{'login' | i18n}}</button>
+            <a routerLink="/password" aria-label="Enter tokens" mat-raised-button
+                color="warn">{{'password.forgot' | i18n}}</a>
+        </mat-card-actions>
+    </mat-card>
+</form>

src/app/pages/login/login.component.scss

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

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

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

src/app/pages/login/login.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService } from './../../services/auth.service';
+import { Router } from '@angular/router';
+
+import { environment } from './../../../environments/environment';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  form: FormGroup;
+  public loginInvalid: boolean;
+  public apiUrl = environment.apiUrl;
+  loginModel = {};
+
+  constructor(private formBuilder: FormBuilder, private authService: AuthService, private router: Router) { }
+
+  async ngOnInit() {
+    this.form = this.formBuilder.group({
+      username: ['', Validators.required],
+      password: ['', Validators.required]
+    });
+  }
+
+  async login() {
+    this.loginInvalid = false;
+    if (this.form.valid) {
+      const username = this.form.get('username').value;
+      const password = this.form.get('password').value;
+      this.authService.login(username, password).subscribe((response: any) => {
+        this.router.navigate(["/account/info"]);
+      }, error => {
+        if (error.status == 302) {
+          console.log(error);
+        } else {
+          this.loginInvalid = true;
+        }
+      });
+
+    }
+  }
+
+}

src/app/pages/notfound/notfound.component.html

@@ -0,0 +1,11 @@
+<mat-card>
+    <mat-card-header>
+        <mat-card-title>404</mat-card-title>
+        <mat-card-subtitle>{{'not-found' | i18n}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+        <p>
+            {{'not-found.text' | i18n}}
+        </p>
+    </mat-card-content>
+</mat-card>

src/app/pages/notfound/notfound.component.scss

@@ -0,0 +1,15 @@
+@import './../../../variables.scss';
+
+mat-card-header {
+  background-color: $accent !important;
+  padding: 16px ;
+  padding-bottom: 0;
+}
+
+mat-card {
+  padding: 0;
+}
+
+mat-card-content {
+  padding: 16px;
+}

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

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

src/app/pages/notfound/notfound.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-notfound',
+  templateUrl: './notfound.component.html',
+  styleUrls: ['./notfound.component.scss']
+})
+export class NotfoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/password/password.component.html

@@ -0,0 +1,24 @@
+<form [formGroup]="form" (ngSubmit)="passwordReset()">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'password.request' | i18n}}</h2>
+            <mat-form-field>
+                <input matInput placeholder="{{'username' | i18n}}" formControlName="username" [(ngModel)]="model.username">
+                <mat-error>
+                    {{'username.missing' | i18n}}
+                </mat-error>
+            </mat-form-field>
+            
+            <mat-form-field>
+                <mat-label>{{'pgp-key.private' | i18n}}</mat-label>
+                <textarea matInput formControlName="privateKey" placeholder="Private Key"
+                    [(ngModel)]="model.privateKey"></textarea>
+            </mat-form-field>
+        </mat-card-content>
+        <mat-card-actions>
+            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+                {{'password.reset' | i18n}}
+            </button>
+        </mat-card-actions>
+    </mat-card>
+</form>

src/app/pages/password/password.component.scss

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

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

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

src/app/pages/password/password.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { AuthService } from './../../services/auth.service';
+import { MatchingValidator } from './../../utils/matching.validator';
+
+var openpgp = require('openpgp');
+@Component({
+  selector: 'app-password',
+  templateUrl: './password.component.html',
+  styleUrls: ['./password.component.scss']
+})
+export class PasswordComponent implements OnInit {
+
+  model: any = {};
+  public working: boolean;
+  form: FormGroup;
+
+  constructor(private formBuilder: FormBuilder, private authService: AuthService) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      username: ['', Validators.required],
+      privateKey: ['', Validators.required]
+    });
+  }
+
+  async passwordReset() {
+    const { keys: [privateKey] } = await openpgp.key.readArmored(this.model.privateKey);
+
+
+    console.log(privateKey.isPrivate());
+
+    const model = {
+      username: this.model.username
+    }
+
+    /*
+ 
+     const message = await openpgp.message.readArmored(encrypted);
+ 
+     const decrypted = await openpgp.decrypt({
+       message: message,
+       privateKeys: [privateKey]
+     });
+ 
+     console.log(decrypted);
+     //  this.authService.passwordReset(model).subscribe(async response => {    })
+ */
+  }
+
+}

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

@@ -0,0 +1,62 @@
+<form [formGroup]="form" (ngSubmit)="register()">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'register' | i18n}}</h2>
+            <mat-error *ngIf="missingToken">
+                <a routerLink="/tokens" aria-label="Enter tokens">{{'register.token.missing' | i18n}}</a>
+            </mat-error>
+            <mat-form-field>
+                <input matInput placeholder="{{'username' | i18n}}" formControlName="username"
+                    [(ngModel)]="model.username">
+                <mat-error>
+                    {{'username.error' | i18n}}
+                </mat-error>
+                <a mat-button matSuffix mat-icon-button (click)="genUsername()">
+                    <mat-icon>autorenew</mat-icon>
+                </a>
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput type="email" placeholder="{{'email' | i18n}}" formControlName="email"
+                    [(ngModel)]="model.email">
+                <mat-error>
+                    {{'email.invalid' | i18n}}
+                </mat-error>
+            </mat-form-field>
+            <mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail" *ngIf="model.email">
+                {{'email.primary' | i18n}}
+            </mat-slide-toggle>
+            <mat-form-field>
+                <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
+                    [(ngModel)]="model.password">
+                <mat-error>
+                    <div *ngFor="let error of form.get('password').errors | keyvalue">
+                        {{'password.error.' + error.key | i18n}}<br>
+                    </div>
+                </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-list *ngIf="items && items[0]">
+                <mat-list-item *ngFor="let item of items">
+                    <mat-icon mat-list-icon>plus_one</mat-icon>
+                    {{ item.name[currentLocale] || 'missing' }}
+                </mat-list-item>
+            </mat-list>
+
+            <mat-divider></mat-divider>
+        </mat-card-content>
+        <mat-card-actions>
+            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+                {{'register' | i18n}}
+            </button>
+
+            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
+        </mat-card-actions>
+    </mat-card>
+</form>

src/app/pages/register/register.component.scss

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

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

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

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

@@ -0,0 +1,132 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+
+
+import { UserService } from './../../services/user.service';
+import { ItemService } from './../../services/item.service';
+import { I18nService } from './../../services/i18n.service';
+import { MatchingValidator } from './../../utils/matching.validator';
+
+import { uniqueNamesGenerator, Config, adjectives, colors, animals } from 'unique-names-generator';
+
+var openpgp = require('openpgp');
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent implements OnInit {
+
+  form: FormGroup;
+  public missingToken: boolean;
+  public working: boolean;
+  items = [];
+  currentLocale: String;
+  model: any = {
+    username: '',
+    password: '',
+    password2: '',
+  };
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private userService: UserService,
+    private itemService: ItemService,
+    private i18n: I18nService,
+    public dialog: MatDialog) {
+    this.currentLocale = this.i18n.getLocale();
+  }
+
+  async ngOnInit() {
+    this.form = this.formBuilder.group({
+      username: ['', Validators.required],
+      email: ['', Validators.email],
+      primaryEmail: [false, Validators.nullValidator],
+      password: ['', Validators.required],
+      password2: ['', Validators.required]
+    }, {
+      validator: MatchingValidator('password', 'password2')
+    });
+
+    this.itemService.items().subscribe((data: any) => {
+      this.items = data;
+    });
+  }
+
+
+  genUsername() {
+    const config: Config = {
+      dictionaries: [adjectives, colors, animals],
+      separator: "",
+      style: "capital",
+      length: 3
+    };
+
+    this.model.username = uniqueNamesGenerator(config);
+  }
+
+  register() {
+    this.missingToken = false;
+    if (this.form.valid && !this.working) {
+      this.working = true;
+      let pgpOption = {
+        userIds: [{ name: this.model.username, email: this.model.email }],
+        numBits: 4096,
+      }
+
+      var pubKey, privKey
+      openpgp.generateKey(pgpOption).then((key) => {
+        privKey = key.privateKeyArmored
+        pubKey = key.publicKeyArmored
+        this.model.publicKey = pubKey;
+        this.userService.register(this.model).subscribe((result: any) => {
+          result.privateKey = privKey;
+          const dialogRef = this.dialog.open(RegisterDialog, {
+            closeOnNavigation: false,
+            disableClose: true,
+            data: result
+          });
+          this.working = false;
+        }, (error) => {
+          this.working = false;
+          if (error.status == 401) {
+            this.missingToken = true;
+          } else 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]);
+            }
+          }
+        })
+
+      })
+    }
+  }
+}
+
+
+@Component({
+  selector: 'app-register-dialog',
+  templateUrl: 'register.dialog.html',
+  styleUrls: ['./register.dialog.scss']
+})
+export class RegisterDialog {
+
+  constructor(private router: Router,
+    public dialogRef: MatDialogRef<RegisterDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) { }
+
+  onOkClick(): void {
+    this.dialogRef.close();
+    this.router.navigate(["/login"]);
+  }
+
+}

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

@@ -0,0 +1,18 @@
+<h1 mat-dialog-title>{{data.username}}</h1>
+<div mat-dialog-content>
+    <h3>Permissions</h3>
+    <app-permissions [permissions]="data.permissions"></app-permissions>
+    <h3>Quotas</h3>
+    <app-quotas [quotas]="data.quotas"></app-quotas>
+    <mat-form-field>
+        <mat-label>Private PGP key</mat-label>
+        <textarea matInput readonly [(ngModel)]="data.privateKey"></textarea>
+    </mat-form-field>
+</div>
+<div mat-dialog-actions>
+    <mat-slide-toggle [(ngModel)]="data.confirmClose">
+        I have saved my private key securely!
+    </mat-slide-toggle>
+
+    <button mat-button (click)="onOkClick()" [disabled]="!data.confirmClose">Ok</button>
+</div>

src/app/pages/register/register.dialog.scss

@@ -0,0 +1,8 @@
+mat-form-field {
+  display: block;
+}
+
+textarea {
+  width: 100%;
+  min-height: 200px;
+}

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

@@ -0,0 +1,17 @@
+<h1 mat-dialog-title>{{'username.generate' | i18n}}</h1>
+<div mat-dialog-content>
+
+
+  <mat-form-field>
+    <mat-chip-list #chipList [multiple]="true" [selectable]="true" cdkDropList cdkDropListOrientation="horizontal"
+      (cdkDropListDropped)="drop($event)">
+      <mat-chip *ngFor="let dict of dicts" cdkDrag [selected]="dict.selected" (click)="toggle(dict)">
+        {{dict.name}}
+      </mat-chip>
+    </mat-chip-list>
+  </mat-form-field>
+
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onOkClick()">Ok</button>
+</div>

src/app/pages/register/username-dialog/username.dialog.spec.ts

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

src/app/pages/register/username-dialog/username.dialog.ts

@@ -0,0 +1,64 @@
+
+
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+
+
+import { uniqueNamesGenerator, Config, adjectives, colors, animals } from 'unique-names-generator';
+
+@Component({
+    selector: 'app-username-dialog',
+    templateUrl: './username.dialog.html',
+    styleUrls: ['./username.dialog.scss']
+})
+export class UsernameDialog {
+
+    dicts: any[] = [
+        {
+            name: 'adjectives',
+            dict: adjectives,
+            selected: true
+        }, {
+            name: 'colors',
+            dict: colors,
+            selected: true
+        }, {
+            name: 'animals',
+            dict: animals,
+            selected: true
+        }
+
+    ];
+
+    username: String;
+
+    constructor(public dialogRef: MatDialogRef<UsernameDialog>) {
+    }
+
+    onOkClick(): void {
+
+        let dictsToUse = this.dicts.filter(dict => dict.selected);
+
+        const config: Config = {
+            dictionaries: dictsToUse.map(dict => dict.dict),
+            separator: "",
+            style: "capital",
+            length: dictsToUse.length
+        };
+
+        this.username = uniqueNamesGenerator(config);
+
+        console.log(this.username);
+    }
+
+    toggle(dict) {
+        dict.selected = !dict.selected;
+    }
+
+    drop(event: CdkDragDrop<any[]>) {
+        moveItemInArray(this.dicts, event.previousIndex, event.currentIndex);
+    }
+
+}

src/app/pages/tokens/tokens.component.html

@@ -0,0 +1,62 @@
+<form [formGroup]="form" (ngSubmit)="redeemSecret()" #formDirective="ngForm">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'tokens.enter' | i18n}}</h2>
+            <mat-error *ngIf="tokenInvalid">
+                {{'tokens.invalid' | i18n}}
+            </mat-error>
+            <mat-error *ngIf="tokenRedeemed">
+                {{'tokens.redeemed' | i18n}}
+            </mat-error>
+            <mat-form-field>
+                <input matInput placeholder="{{'token' | i18n}}" formControlName="token">
+                <mat-error>
+                    {{'tokens.provide-valid' | i18n}}
+                </mat-error>
+            </mat-form-field>
+        </mat-card-content>
+        <mat-card-actions>
+            <button mat-raised-button color="primary" [disabled]="form.invalid">{{'tokens.validate' | i18n}}</button>
+        </mat-card-actions>
+    </mat-card>
+</form>
+
+
+<mat-card *ngIf="items && items[0]">
+    <mat-card-content>
+
+        <mat-list>
+            <mat-list-item *ngFor="let item of items">
+                <mat-icon mat-list-icon>plus_one</mat-icon>
+                {{ item.name[currentLocale] || 'missing' }}
+                <button mat-icon-button (click)="removeSecret(item.secret)">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </mat-list-item>
+        </mat-list>
+
+        <mat-divider></mat-divider>
+
+    </mat-card-content>
+    <mat-card-actions>
+        <button *ngIf="auth.authenticated" mat-raised-button color="accent" (click)="redeem()">
+            <mat-icon>redeem</mat-icon> {{'tokens.redeem' | i18n}}
+        </button>
+
+        <a *ngIf="!auth.authenticated" routerLink="/register" mat-raised-button color="accent">
+            <mat-icon>how_to_reg</mat-icon> {{'register' | i18n}}
+        </a>
+        <a *ngIf="!auth.authenticated" routerLink="/login" mat-raised-button color="primary">
+            <mat-icon>login</mat-icon> {{'login' | i18n}}
+        </a>
+    </mat-card-actions>
+</mat-card>
+
+<div *ngIf="permissions && permissions[0]">
+    <h3>{{'permissions' | i18n}}</h3>
+    <app-permissions [permissions]="permissions"></app-permissions>
+</div>
+<div *ngIf="quotas && quotas[0]">
+    <h3>{{'quotas' | i18n}}</h3>
+    <app-quotas [quotas]="quotas"></app-quotas>
+</div>

src/app/pages/tokens/tokens.component.scss

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

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

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

src/app/pages/tokens/tokens.component.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { AuthService } from './../../services/auth.service';
+import { ItemService } from './../../services/item.service';
+import { I18nService } from './../../services/i18n.service';
+import { PermissionService } from './../../services/permission.service';
+import { QuotaService } from './../../services/quota.service';
+
+@Component({
+  selector: 'app-tokens',
+  templateUrl: './tokens.component.html',
+  styleUrls: ['./tokens.component.scss']
+})
+export class TokensComponent implements OnInit {
+
+  form: FormGroup;
+  @ViewChild('formDirective') private formDirective: NgForm;
+  public tokenInvalid: boolean;
+  public tokenRedeemed: boolean;
+  auth;
+  items = [];
+  permissions = [];
+  quotas = [];
+  currentLocale: String;
+
+  constructor(private formBuilder: FormBuilder,
+    private authService: AuthService,
+    private itemService: ItemService,
+    private i18n: I18nService,
+    private permissionService: PermissionService,
+    private quotaService: QuotaService,
+    private router: Router,
+    private route: ActivatedRoute) {
+
+    this.currentLocale = this.i18n.getLocale();
+    
+    this.authService.auth.subscribe(data => {
+      this.auth = data;
+    })
+
+    this.update();
+  }
+
+  async ngOnInit() {
+    this.form = this.formBuilder.group({
+      token: ['', Validators.required]
+    });
+
+    this.route.queryParams.subscribe(params => {
+      if (params.token) {
+        this.itemService.redeemSecret(params.token).subscribe((data: any) => {
+          this.update();
+          this.router.navigate(
+            ['.'],
+            { relativeTo: this.route }
+          );
+        }, error => {
+          this.form.get('token').patchValue(params.token);
+          if (error.status == 410) {
+            this.tokenRedeemed = true;
+          } else {
+            this.tokenInvalid = true;
+          }
+        })
+      }
+    });
+  }
+
+  redeemSecret() {
+    this.tokenInvalid = false;
+    this.tokenRedeemed = false;
+    if (this.form.valid) {
+      const secret = this.form.get('token').value;
+      this.itemService.redeemSecret(secret).subscribe((data: any) => {
+        this.formDirective.resetForm();
+        this.update();
+      }, error => {
+        if (error.status == 410) {
+          this.tokenRedeemed = true;
+        } else {
+          this.tokenInvalid = true;
+        }
+      })
+    }
+  }
+
+  removeSecret(secret: String) {
+    this.itemService.removeSecret(secret).subscribe((data: any) => {
+      this.update();
+    }, error => {
+    })
+  }
+
+  redeem() {
+    if (this.auth.authenticated) {
+      this.itemService.redeem().subscribe((data: any) => {
+
+      })
+    }
+  }
+
+  update() {
+    this.authService.getAuth().then(response => {
+      this.itemService.items().subscribe((data: any) => {
+        this.items = data;
+      });
+
+      this.permissionService.permissionsNew().subscribe((data: any) => {
+        this.permissions = data;
+      })
+
+      this.quotaService.quotasNew().subscribe((data: any) => {
+        this.quotas = data;
+      })
+    }).catch(function (error) { });;
+  }
+
+  canRegister() {
+    return this.permissions && this.permissions.some(function (permission) {
+      return !permission.addon;
+    })
+  }
+
+}

src/app/pages/unavailable/unavailable.component.html

@@ -0,0 +1,11 @@
+<mat-card>
+    <mat-card-header>
+        <mat-card-title>503</mat-card-title>
+        <mat-card-subtitle>{{'service-unavailable' | i18n}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+        <p>
+            {{'service-unavailable.text' | i18n}}
+        </p>
+    </mat-card-content>
+</mat-card>

src/app/pages/unavailable/unavailable.component.scss

@@ -0,0 +1,15 @@
+@import './../../../variables.scss';
+
+mat-card-header {
+  background-color: $warn !important;
+  padding: 16px ;
+  padding-bottom: 0;
+}
+
+mat-card {
+  padding: 0;
+}
+
+mat-card-content {
+  padding: 16px;
+}

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

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

src/app/pages/unavailable/unavailable.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-unavailable',
+  templateUrl: './unavailable.component.html',
+  styleUrls: ['./unavailable.component.scss']
+})
+export class UnavailableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}