update

2020-11-02 08:29:52 +01:00 · 2020-11-02 08:29:52 +01:00 · b7b4e2d032
commit b7b4e2d032
126 changed files with 18263 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,18 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
--- a/README.md
+++ b/README.md
@ -0,0 +1,27 @@
+# WeBstlyAngular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/angular.json
+++ b/angular.json
@ -0,0 +1,128 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "we-bstly-angular": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/we-bstly-angular",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "we-bstly-angular:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "we-bstly-angular:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "we-bstly-angular:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "we-bstly-angular:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "we-bstly-angular:serve:production"
+            }
+          }
+        }
+      }
+    }},
+  "defaultProject": "we-bstly-angular"
+}
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@ -0,0 +1,36 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
+  }
+};
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('we-bstly-angular app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
+  }
+
+  getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  }
+}
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2018",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
--- a/karma.conf.js
+++ b/karma.conf.js
@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/we-bstly-angular'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/messages.xlf
+++ b/messages.xlf
@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en-US" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="51858f7cee391e44c0bb9ef6f6245fa2e79f2c40" datatype="html">
+        <source><x id="INTERPOLATION" equiv-text="{{currentLocale}}"/></source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">10</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="a0843de0a64adcc7ee6a946408b6876cd8abdcae" datatype="html">
+        <source>English</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">14</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="f0122b157c4f5c7549a55110ddc09bd1387a94d2" datatype="html">
+        <source>Deutsch</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">15</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="92eee6be6de0b11c924e3ab27db30257159c0a7c" datatype="html">
+        <source>Home</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">25</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="6765b4c916060f6bc42d9bb69e80377dbcb5e4e9" datatype="html">
+        <source>Login</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">28</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="4c78c0da1bcd65bc0598c4d9474bde165de27d7a" datatype="html">
+        <source>Apps</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">31</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="29881a45dafbe5aa05cd9d0441a4c0c2fb06df92" datatype="html">
+        <source>Account</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">34</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="c8222fe3bb3794f7450c6c9287c94cf9083356dc" datatype="html">
+        <source>Redeem tokens</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">37</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="aa487b2eb3f204d966327f3ea1c8a1b137133038" datatype="html">
+        <source>Get tokens</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">40</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="bb694b49d408265c91c62799c2b3a7e3151c824d" datatype="html">
+        <source>Logout</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/app.component.html</context>
+          <context context-type="linenumber">43</context>
+        </context-group>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,52 @@
+{
+  "name": "we-bstly-angular",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~10.1.5",
+    "@angular/cdk": "^10.2.4",
+    "@angular/common": "~10.1.5",
+    "@angular/compiler": "~10.1.5",
+    "@angular/core": "~10.1.5",
+    "@angular/forms": "~10.1.5",
+    "@angular/material": "^10.2.4",
+    "@angular/platform-browser": "~10.1.5",
+    "@angular/platform-browser-dynamic": "~10.1.5",
+    "@angular/router": "~10.1.5",
+    "openpgp": "^4.10.8",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
+    "unique-names-generator": "^4.3.1",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^0.1002.0",
+    "@angular/cli": "~10.1.6",
+    "@angular/compiler-cli": "~10.1.5",
+    "@angular/localize": "^10.1.5",
+    "@types/jasmine": "~3.5.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.12.67",
+    "@types/openpgp": "^4.4.14",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.2"
+  }
+}
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -0,0 +1,49 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AuthGuard, AuthUpdateGuard, AuthenticatedGuard, AnonymousGuard } from './auth/auth.guard';
+import { HomeComponent } from './pages/home/home.component';
+import { LoginComponent } from './pages/login/login.component';
+import { FormLoginComponent } from './pages/form-login/form-login.component';
+import { PasswordComponent } from './pages/password/password.component';
+import { AccountComponent } from './pages/account/account.component';
+import { RegisterComponent } from './pages/register/register.component';
+import { TokensComponent } from './pages/tokens/tokens.component';
+import { AppsComponent } from './pages/apps/apps.component';
+import { InfoComponent } from './pages/account/info/info.component';
+import { VoucherComponent } from './pages/account/voucher/voucher.component';
+import { SecurityComponent } from './pages/account/security/security.component';
+import { UnavailableComponent } from './pages/unavailable/unavailable.component';
+import { NotfoundComponent } from './pages/notfound/notfound.component'; 
+
+const routes: Routes = [
+  { path: '', component: HomeComponent, canActivate: [AuthUpdateGuard], pathMatch: 'full', runGuardsAndResolvers: 'always' },
+  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
+  { path: 'external-login', component: FormLoginComponent, canActivate: [AnonymousGuard] },
+  { path: 'password', component: PasswordComponent, canActivate: [AnonymousGuard] },
+  { path: 'apps', component: AppsComponent, canActivate: [AuthenticatedGuard] },
+  {
+    path: 'account', component: AccountComponent, canActivate: [AuthenticatedGuard], children: [
+
+      {
+        path: 'info', component: InfoComponent, canActivate: [AuthenticatedGuard]
+      },
+      {
+        path: 'voucher', component: VoucherComponent, canActivate: [AuthenticatedGuard]
+      },
+      {
+        path: 'security', component: SecurityComponent, canActivate: [AuthenticatedGuard]
+      }
+    ]
+  },
+  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
+  { path: 'tokens', component: TokensComponent, canActivate: [AuthGuard] },
+  { path: 'unavailable', component: UnavailableComponent },
+  { path: '**', component: NotfoundComponent, pathMatch: 'full' },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -0,0 +1,57 @@
+<mat-toolbar color="primary">
+  <a href="javascript:" mat-icon-button aria-label="Menu">
+    <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
+  </a>
+  <span>
+    <mat-icon svgIcon="logo"></mat-icon> we.bstly
+  </span>
+  <span class="spacer"></span>
+  <ng-container>
+
+    <button mat-button [matMenuTriggerFor]="menu">
+      <mat-icon>language</mat-icon>
+      <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <a mat-menu-item (click)="setLocale('en')">{{'locale.en.long' | i18n}}</a>
+      <a mat-menu-item (click)="setLocale('de-informal')">{{'locale.de-informal.long' | i18n}}</a>
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+
+<mat-sidenav-container>
+  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
+    (click)="!isBiggerScreen() && opened=false">
+    <mat-nav-list>
+      <a routerLink="/" aria-label="Home" mat-list-item>
+        <mat-icon>home</mat-icon> {{'home' | i18n}}
+      </a>
+      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
+        <mat-icon>login</mat-icon> {{'login' | i18n}}
+      </a>
+      <a *ngIf="auth && auth.authenticated" routerLink="/account/info" routerLinkActive="active" mat-list-item>
+        <mat-icon>account_circle</mat-icon> {{'account' | i18n}}
+      </a>
+      <a *ngIf="auth && auth.authenticated" routerLink="/apps" routerLinkActive="active" mat-list-item>
+        <mat-icon>widgets</mat-icon> {{'apps' | i18n}}
+      </a>
+      <a routerLink="/tokens" aria-label="Enter tokens" mat-list-item>
+        <mat-icon>card_giftcard</mat-icon> {{'tokens.redeem' | i18n}}
+      </a>
+      <a href="https://we.bstly.de" target="_blank" aria-label="Go to we.bstly.de" mat-list-item>
+        <mat-icon>shopping_cart</mat-icon> {{'tokens.get' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+        </mat-icon>
+      </a>
+      <a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
+        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
+      </a>
+    </mat-nav-list>
+  </mat-sidenav>
+
+  <!-- Main content -->
+  <mat-sidenav-content>
+    <div class="container">
+      <router-outlet></router-outlet>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@ -0,0 +1,33 @@
+.spacer {
+  flex: 1 1 auto;
+}
+
+mat-sidenav-container {
+  height: 100%;
+  max-height: 100%;
+}
+
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+  margin-bottom: 15px;
+
+  @media screen and (min-width: 576px) {
+    width: 540px;
+  }
+
+  @media screen and (min-width: 768px) {
+    width: 580px;
+  }
+
+  @media screen and (min-width: 992px) {
+    width: 820px;
+  }
+
+  @media screen and (min-width: 1200px) {
+    width: 1000px;
+  }
+}
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'we-bstly-angular'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('we-bstly-angular');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('we-bstly-angular app is running!');
+  });
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -0,0 +1,69 @@
+import { Component, HostListener } from '@angular/core';
+
+import { AuthService } from './services/auth.service';
+import { I18nService } from './services/i18n.service';
+import { Router } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+
+export class AppComponent {
+  opened = true;
+  title = 'we.bstly';
+  currentLocale: String;
+  auth;
+
+  constructor(private i18n: I18nService, private authService: AuthService, private router: Router, private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
+    this.currentLocale = this.i18n.getLocale();
+  
+    this.authService.auth.subscribe(data => {
+      this.auth = data;
+    })
+
+    iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
+  }
+
+  ngOnInit() {
+    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    if (width < 768) {
+      this.opened = false;
+    } else {
+      this.opened = true;
+    }
+  }
+
+  setLocale(locale) {
+    localStorage.setItem("bstly.locale", locale);
+    window.location.reload();
+  }
+
+  logout() {
+    this.authService.logout().subscribe(data => {
+      this.router.navigate([""]);
+      console.log("ja?");
+    })
+  }
+
+  isBiggerScreen() {
+    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+    if (width < 768) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if (event.target.innerWidth < 768) {
+      this.opened = false;
+    } else {
+      this.opened = true;
+    }
+  }
+}
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -0,0 +1,89 @@
+
+import { NgModule, Injectable, APP_INITIALIZER } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppRoutingModule } from './app-routing.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule, HttpInterceptor, HttpHandler, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { MaterialModule } from './material/material.module';
+
+import { I18nPipe } from './utils/i18n.pipe';
+import { HomeComponent } from './pages/home/home.component';
+import { AccountComponent } from './pages/account/account.component';
+import { AppsComponent } from './pages/apps/apps.component';
+import { AppComponent } from './app.component';
+import { LoginComponent } from './pages/login/login.component';
+import { FormLoginComponent } from './pages/form-login/form-login.component';
+import { TokensComponent } from './pages/tokens/tokens.component';
+import { PermissionsComponent } from './ui/permissions/permissions.component';
+import { QuotasComponent } from './ui/quotas/quotas.component';
+import { SecurityComponent } from './pages/account/security/security.component';
+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 { PasswordComponent } from './pages/password/password.component';
+import { RegisterComponent } from './pages/register/register.component';
+import { RegisterDialog } from './pages/register/register.component';
+import { UsernameDialog } from './pages/register/username-dialog/username.dialog';
+import { UnavailableComponent } from './pages/unavailable/unavailable.component';
+import { NotfoundComponent } from './pages/notfound/notfound.component';
+import { HtmlComponent } from './utils/html/html.component';
+
+
+import { I18nService } from './services/i18n.service';
+
+
+export function init_app(i18n: I18nService) {
+  return () => i18n.fetch(i18n.getLocale());
+}
+
+@Injectable()
+export class XhrInterceptor implements HttpInterceptor {
+
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    const xhr = req.clone({
+      headers: req.headers.set('X-Requested-With', 'XMLHttpRequest').set('Content-Type', 'application/json;charset=UTF-8'), withCredentials: true
+    });
+    return next.handle(xhr);
+  }
+}
+
+@NgModule({
+  declarations: [
+    I18nPipe,
+    AppComponent,
+    HomeComponent,
+    AccountComponent,
+    LoginComponent,
+    FormLoginComponent,
+    TokensComponent,
+    AppsComponent,
+    PermissionsComponent,
+    QuotasComponent,
+    SecurityComponent,
+    VoucherComponent,
+    VoucherDialog,
+    InfoComponent,
+    PasswordComponent,
+    RegisterComponent,
+    RegisterDialog,
+    UsernameDialog,
+    UnavailableComponent,
+    NotfoundComponent,
+    HtmlComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MaterialModule,
+    HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  exports: [MaterialModule],
+  providers: [{ provide: APP_INITIALIZER, useFactory: init_app, deps: [I18nService], multi: true }, { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true }],
+  bootstrap: [AppComponent],
+})
+export class AppModule {
+}
--- a/src/app/auth/auth.guard.ts
+++ b/src/app/auth/auth.guard.ts
@ -0,0 +1,84 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import {
+    CanActivate,
+    ActivatedRouteSnapshot,
+    RouterStateSnapshot
+} from '@angular/router';
+
+import { AuthService } from '../services/auth.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthUpdateGuard implements CanActivate {
+    constructor(private authService: AuthService) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+        this.authService.getAuth().catch(function (error) { });
+        return true;
+    }
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+    constructor(private authService: AuthService, private router: Router) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+        const that = this;
+        return this.authService.getAuth().then(response => {
+            return true;
+        }).catch(function (error) {
+            that.router.navigateByUrl('/unavailable');
+            return false;
+        });
+    }
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthenticatedGuard implements CanActivate {
+    constructor(private authService: AuthService, private router: Router) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+        const that = this;
+        return this.authService.getAuth().then((data: any) => {
+            if (!data.authenticated) {
+                this.router.navigateByUrl('/login');
+                return false;
+            }
+            return true;
+        }).catch(function (error) {
+            that.router.navigateByUrl('/unavailable');
+            return false;
+        });
+    }
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AnonymousGuard implements CanActivate {
+    constructor(private authService: AuthService, private router: Router) { }
+
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+        const that = this;
+        return this.authService.getAuth().then((data: any) => {
+            if (data.authenticated) {
+                this.router.navigateByUrl('/account/info');
+                return false;
+            }
+            return true;
+        }).catch(function (error) {
+            that.router.navigateByUrl('/unavailable');
+            return false;
+        });
+    }
+
+}
--- a/src/app/material/material.module.ts
+++ b/src/app/material/material.module.ts
@ -0,0 +1,124 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// Material Form Controls
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+// Material Navigation
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+// Material Layout
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatListModule } from '@angular/material/list';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatTreeModule } from '@angular/material/tree';
+// Material Buttons & Indicators
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
+// Material Popups & Modals
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+// Material Data tables
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule
+  ],
+  exports: [
+    MatAutocompleteModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatCardModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatListModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatTreeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBadgeModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatBottomSheetModule,
+    MatDialogModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule
+  ]
+})
+export class MaterialModule { }
--- a/src/app/pages/account/account.component.html
+++ b/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>
--- a/src/app/pages/account/account.component.scss
+++ b/src/app/pages/account/account.component.scss
--- a/src/app/pages/account/account.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/account/account.component.ts
+++ b/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 {
+  }
+
+}
--- a/src/app/pages/account/info/info.component.html
+++ b/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>
--- a/src/app/pages/account/info/info.component.scss
+++ b/src/app/pages/account/info/info.component.scss
@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
--- a/src/app/pages/account/info/info.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/account/info/info.component.ts
+++ b/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;
+    })
+  }
+
+}
--- a/src/app/pages/account/security/security.component.html
+++ b/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>
--- a/src/app/pages/account/security/security.component.scss
+++ b/src/app/pages/account/security/security.component.scss
@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
--- a/src/app/pages/account/security/security.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/account/security/security.component.ts
+++ b/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]);
+          }
+        }
+      })
+    }
+  }
+
+}
--- a/src/app/pages/account/voucher/voucher.component.html
+++ b/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>
--- a/src/app/pages/account/voucher/voucher.component.scss
+++ b/src/app/pages/account/voucher/voucher.component.scss
@ -0,0 +1,3 @@
+table {
+    width: 100%;
+}
--- a/src/app/pages/account/voucher/voucher.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/account/voucher/voucher.component.ts
+++ b/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();
+  }
+
+}
--- a/src/app/pages/account/voucher/voucher.dialog.html
+++ b/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> 
--- a/src/app/pages/account/voucher/voucher.dialog.scss
+++ b/src/app/pages/account/voucher/voucher.dialog.scss
@ -0,0 +1,3 @@
+mat-form-field {
+    display: block;
+  }
--- a/src/app/pages/apps/apps.component.html
+++ b/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>
--- a/src/app/pages/apps/apps.component.scss
+++ b/src/app/pages/apps/apps.component.scss
@ -0,0 +1,4 @@
+mat-card {
+    width: 100%;
+    margin: 2em 2em;
+  }
--- a/src/app/pages/apps/apps.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/apps/apps.component.ts
+++ b/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;
+    })
+  }
+
+}
--- a/src/app/pages/form-login/form-login.component.html
+++ b/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>
--- a/src/app/pages/form-login/form-login.component.scss
+++ b/src/app/pages/form-login/form-login.component.scss
@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
--- a/src/app/pages/form-login/form-login.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/form-login/form-login.component.ts
+++ b/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]
+    });
+  }
+
+
+
+}
--- a/src/app/pages/home/home.component.html
+++ b/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>
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
--- a/src/app/pages/home/home.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/home/home.component.ts
+++ b/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 {
+  }
+
+}
--- a/src/app/pages/login/login.component.html
+++ b/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>
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
--- a/src/app/pages/login/login.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/login/login.component.ts
+++ b/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;
+        }
+      });
+
+    }
+  }
+
+}
--- a/src/app/pages/notfound/notfound.component.html
+++ b/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>
--- a/src/app/pages/notfound/notfound.component.scss
+++ b/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;
+}
--- a/src/app/pages/notfound/notfound.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/notfound/notfound.component.ts
+++ b/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 {
+  }
+
+}
--- a/src/app/pages/password/password.component.html
+++ b/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>
--- a/src/app/pages/password/password.component.scss
+++ b/src/app/pages/password/password.component.scss
@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
--- a/src/app/pages/password/password.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/password/password.component.ts
+++ b/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 => {    })
+ */
+  }
+
+}
--- a/src/app/pages/register/register.component.html
+++ b/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>
--- a/src/app/pages/register/register.component.scss
+++ b/src/app/pages/register/register.component.scss
@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
--- a/src/app/pages/register/register.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/register/register.component.ts
+++ b/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"]);
+  }
+
+}
--- a/src/app/pages/register/register.dialog.html
+++ b/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>
--- a/src/app/pages/register/register.dialog.scss
+++ b/src/app/pages/register/register.dialog.scss
@ -0,0 +1,8 @@
+mat-form-field {
+  display: block;
+}
+
+textarea {
+  width: 100%;
+  min-height: 200px;
+}
--- a/src/app/pages/register/username-dialog/username.dialog.html
+++ b/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>
--- a/src/app/pages/register/username-dialog/username.dialog.scss
+++ b/src/app/pages/register/username-dialog/username.dialog.scss
--- a/src/app/pages/register/username-dialog/username.dialog.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/register/username-dialog/username.dialog.ts
+++ b/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);
+    }
+
+}
--- a/src/app/pages/tokens/tokens.component.html
+++ b/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>
--- a/src/app/pages/tokens/tokens.component.scss
+++ b/src/app/pages/tokens/tokens.component.scss
@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
--- a/src/app/pages/tokens/tokens.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/tokens/tokens.component.ts
+++ b/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;
+    })
+  }
+
+}
--- a/src/app/pages/unavailable/unavailable.component.html
+++ b/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>
--- a/src/app/pages/unavailable/unavailable.component.scss
+++ b/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;
+}
--- a/src/app/pages/unavailable/unavailable.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/pages/unavailable/unavailable.component.ts
+++ b/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 {
+  }
+
+}
--- a/src/app/services/app.service.ts
+++ b/src/app/services/app.service.ts
@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AppService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    apps() {
+        return this.http.get(environment.apiUrl + "/apps");
+    }
+
+}
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, of } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+import { environment } from './../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AuthService {
+
+    auth: BehaviorSubject<any> = new BehaviorSubject(undefined);
+
+    constructor(private http: HttpClient) {
+    }
+
+    getAuth() {
+        return this.authMe().toPromise().then((data: any) => {
+            this.auth.next(data);
+            return data;
+        }, error => {
+            throw new Error(error);
+        });
+    }
+
+    authMe() {
+        return this.http.get(environment.apiUrl + "/auth/me");
+    }
+
+    login(username, password) {
+        return this.http.post(environment.apiUrl + "/auth/login", { username: username, password: password });
+    }
+
+    logout() {
+        return this.http.post(environment.apiUrl + "/auth/logout", {});
+    }
+
+    passwordRequest() {
+        return this.http.post(environment.apiUrl + "/auth/password/request", {});
+    }
+
+    passwordReset(model) {
+        const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
+        return this.http.post(environment.apiUrl + "/auth/password/reset", model,
+            { headers, responseType: 'text' });
+    }
+
+}
--- a/src/app/services/i18n.service.ts
+++ b/src/app/services/i18n.service.ts
@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { isEmpty } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class I18nService {
+
+    locale: String;
+    i18n: any;
+
+    constructor(private http: HttpClient) {
+        let browserLocale = navigator.language;
+
+        if (browserLocale.indexOf("-") != -1) {
+            browserLocale = browserLocale.split("-")[0];
+        }
+
+        let locale = localStorage.getItem("bstly.locale") || browserLocale || 'en';
+
+        if (locale == 'de') {
+            locale = 'de-informal';
+        }
+
+        this.setLocale(locale);
+    }
+
+    getLocale() {
+        return this.locale;
+    }
+
+    setLocale(locale) {
+        this.locale = locale;
+    }
+
+    async fetch(locale) {
+        this.i18n = await this.http.get("./assets/i18n/" + locale + ".json").toPromise();
+    }
+
+    get(key, args: any[]): String {
+        return this.getInternal(key, args, this.i18n);
+    }
+
+    getInternal(key, args: any[], from): String {
+        if (!from) {
+            return key;
+        } else if (from[key]) {
+            if (from[key]["."]) {
+                return this.insertArguments(from[key]["."], args);
+            }
+            return this.insertArguments(from[key], args);
+        } else {
+            let keys = key.split(".");
+            if (from[keys[0]]) {
+                key = keys.slice(1, keys.length).join(".");
+                return this.getInternal(key, args, from[keys[0]])
+            }
+        }
+
+        return key;
+    }
+
+    insertArguments(label: String, args: any[]) {
+        if (args) {
+            for (let index in args) {
+                label = label.replace(`{${index}}`, args[index]);
+            }
+        }
+        return label;
+    }
+
+}
--- a/src/app/services/item.service.ts
+++ b/src/app/services/item.service.ts
@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ItemService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    items() {
+        return this.http.get(environment.apiUrl + "/items");
+    }
+
+    redeemSecret(secret) {
+        return this.http.put(environment.apiUrl + "/items", JSON.stringify(secret));
+    }
+
+    removeSecret(secret: String) {
+        return this.http.request('delete', environment.apiUrl + "/items", {
+            body: JSON.stringify(secret)
+        });
+    }
+
+    redeem() {
+        return this.http.post(environment.apiUrl + "/items", {});
+    }
+}
--- a/src/app/services/permission.service.ts
+++ b/src/app/services/permission.service.ts
@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class PermissionService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    permissions() {
+        return this.http.get(environment.apiUrl + "/permissions");
+    }
+ 
+    permissionsNew() {
+        return this.http.get(environment.apiUrl + "/permissions/new");
+    }
+
+
+}
--- a/src/app/services/quota.service.ts
+++ b/src/app/services/quota.service.ts
@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class QuotaService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    quotas() {
+        return this.http.get(environment.apiUrl + "/quotas");
+    }
+ 
+    quotasNew() {
+        return this.http.get(environment.apiUrl + "/quotas/new");
+    }
+
+
+}
--- a/src/app/services/user.service.ts
+++ b/src/app/services/user.service.ts
@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    register(userModel) {
+        return this.http.post(environment.apiUrl + "/users", userModel);
+    }
+
+    password(passwordModel) {
+        return this.http.patch(environment.apiUrl + "/users/password", passwordModel);
+    }
+
+    update(userModel) {
+        return this.http.patch(environment.apiUrl + "/users", userModel);
+    }
+}
--- a/src/app/services/voucher.service.ts
+++ b/src/app/services/voucher.service.ts
@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { environment } from '../../environments/environment';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class VoucherService {
+
+    constructor(private http: HttpClient) {
+    }
+
+    registration() {
+        return this.http.post(environment.apiUrl + "/vouchers/registration", {});
+    }
+
+    addon() {
+        return this.http.post(environment.apiUrl + "/vouchers/addon", {});
+    }
+}
--- a/src/app/ui/permissions/permissions.component.html
+++ b/src/app/ui/permissions/permissions.component.html
@ -0,0 +1,14 @@
+<table mat-table [dataSource]="permissions">
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> {{'permissions.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let permission"> {{permission.name}} <mat-icon *ngIf="permission.addon" aria-hidden="false" aria-label="Add-on">add_circle</mat-icon></td>
+    </ng-container>
+
+    <ng-container matColumnDef="expires">
+        <th mat-header-cell *matHeaderCellDef> {{'permissions.expires' | i18n}} </th>
+        <td mat-cell *matCellDef="let permission">{{permission.expires | date}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="permissionColumns"></tr>
+    <tr mat-row *matRowDef="let myRowData; columns: permissionColumns"></tr>
+</table>
--- a/src/app/ui/permissions/permissions.component.scss
+++ b/src/app/ui/permissions/permissions.component.scss
@ -0,0 +1,3 @@
+table {
+    width: 100%;
+}
--- a/src/app/ui/permissions/permissions.component.spec.ts
+++ b/src/app/ui/permissions/permissions.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PermissionsComponent } from './permissions.component';
+
+describe('PermissionsComponent', () => {
+  let component: PermissionComponent;
+  let fixture: ComponentFixture<PermissionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PermissionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PermissionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/ui/permissions/permissions.component.ts
+++ b/src/app/ui/permissions/permissions.component.ts
@ -0,0 +1,18 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-permissions',
+  templateUrl: './permissions.component.html',
+  styleUrls: ['./permissions.component.scss']
+})
+export class PermissionsComponent implements OnInit {
+
+  @Input() permissions;
+  permissionColumns = ["name", "expires"];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
--- a/src/app/ui/quotas/quotas.component.html
+++ b/src/app/ui/quotas/quotas.component.html
@ -0,0 +1,15 @@
+<table mat-table [dataSource]="quotas">
+
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> {{'quotas.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota"> {{quota.name}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="quota">
+        <th mat-header-cell *matHeaderCellDef> {{'quotas.value' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota">{{quota.value}} {{quota.unit}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="quotaColumns"></tr>
+    <tr mat-row *matRowDef="let myRowData; columns: quotaColumns"></tr>
+</table>
--- a/src/app/ui/quotas/quotas.component.scss
+++ b/src/app/ui/quotas/quotas.component.scss
@ -0,0 +1,3 @@
+table {
+    width: 100%;
+}
--- a/src/app/ui/quotas/quotas.component.spec.ts
+++ b/src/app/ui/quotas/quotas.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuotasComponent } from './quotas.component';
+
+describe('QuotasComponent', () => {
+  let component: QuotasComponent;
+  let fixture: ComponentFixture<QuotasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ QuotasComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(QuotasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/ui/quotas/quotas.component.ts
+++ b/src/app/ui/quotas/quotas.component.ts
@ -0,0 +1,17 @@
+import { Component, OnInit, Input  } from '@angular/core';
+
+@Component({
+  selector: 'app-quotas',
+  templateUrl: './quotas.component.html',
+  styleUrls: ['./quotas.component.scss']
+})
+export class QuotasComponent implements OnInit {
+
+  @Input() quotas;
+  quotaColumns = ["name", "quota"];
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
--- a/src/app/utils/html/html.component.html
+++ b/src/app/utils/html/html.component.html
@ -0,0 +1 @@
+<div [innerHTML]="htmlTemplate"></div>
--- a/src/app/utils/html/html.component.scss
+++ b/src/app/utils/html/html.component.scss
--- a/src/app/utils/html/html.component.spec.ts
+++ b/src/app/utils/html/html.component.spec.ts
@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HtmlComponent } from './html.component';
+
+describe('HtmlComponent', () => {
+  let component: HtmlComponent;
+  let fixture: ComponentFixture<HtmlComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HtmlComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HtmlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/Show More
+++ b/Show More