update

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 { }

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>

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

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!');
+  });
+});

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

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

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

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 { }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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", {});
+    }
+}

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

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

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

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", {});
+    }
+}

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>

src/app/ui/permissions/permissions.component.scss

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

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

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

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>

src/app/ui/quotas/quotas.component.scss

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

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

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

src/app/utils/html/html.component.html

@@ -0,0 +1 @@
+<div [innerHTML]="htmlTemplate"></div>

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

src/app/utils/html/html.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { I18nService } from './../../services/i18n.service';
+
+@Component({
+    selector: 'app-html',
+    templateUrl: './html.component.html',
+    styleUrls: ['./html.component.scss']
+})
+export class HtmlComponent implements OnInit {
+
+    htmlTemplate: any;
+    locale: String;
+    @Input() template;
+
+    constructor(private i18n: I18nService, private httpClient: HttpClient) {
+        this.locale = this.i18n.getLocale();
+    }
+
+    ngOnInit(): void {
+        const headers = new HttpHeaders()
+            .set('content-type', 'text/html');
+        this.httpClient.get(
+            './assets/templates/' + this.template + (this.locale ? "." + this.locale : "") + ".html",
+            {
+                headers: headers,
+                responseType: 'text'
+            }).subscribe(response => this.htmlTemplate = response);
+    }
+
+}

src/app/utils/i18n.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+
+import { I18nService } from './../services/i18n.service';
+
+@Pipe({
+    name: 'i18n'
+})
+export class I18nPipe implements PipeTransform {
+
+
+    constructor(private i18n: I18nService) {
+    }
+
+    transform(value: String, ...args: any[]): String {
+        return this.i18n.get(value, args);
+    }
+}

src/app/utils/matching.validator.ts

@@ -0,0 +1,22 @@
+import { FormGroup } from '@angular/forms';
+
+export function MatchingValidator(passwordName: string, password2Name: string) {
+
+    return (formGroup: FormGroup) => {
+
+        const password = formGroup.controls[passwordName];
+        const password2 = formGroup.controls[password2Name];
+
+        if (password2.errors && !password2.errors.matchingValidator) {
+            return;
+        }
+
+        if (password.value !== password2.value) {
+            password2.setErrors({ matchingValidator: true });
+        } else {
+            password2.setErrors(null);
+        }
+
+    }
+
+}

src/assets/i18n/de-informal.json

@@ -0,0 +1,117 @@
+{
+    "i18n.test.replace": "Wat!?! {0} {1} {2}",
+    "greet": "Hallo {0}",
+    "home": "Start",
+    "login": {
+        ".": "Login",
+        "external": "Login",
+        "invalid": "Falscher Username oder Passwort."
+    },
+    "not-found": {
+        ".": "Nicht gefunden",
+        "text": "Was geht ab!?"
+    },
+    "service-unavailable": {
+        ".": "Service nicht erreichbar",
+        "text": "Zurzeit scheint der Service nicht erreichbar zu sein. Wenn diese Meldung länger besteht, melde dich bitte unter admin@bstly.de!"
+    },
+    "logout": "Logout",
+    "account": "Account",
+    "token": "Token",
+    "ok": "Ok",
+    "tokens": {
+        ".": "Tokens",
+        "redeem": "Tokens einlösen",
+        "redeemed": "Das Token wurde bereits eingelöst.",
+        "get": "Tokens holen",
+        "enter": "Token eingeben",
+        "validate": "Prüfen",
+        "invalid" : "Das Token ist leider nicht gültig.",
+        "provide-valid" : "Bitte gebe ein gültiges Token ein."
+    },
+    "username": {
+        ".": "Username",
+        "missing": "Bitte gebe einen Usernamen an.",
+        "error" : "Bitte wähle einen anderen Usernamen aus."
+    },
+    "password": {
+        ".": "Passwort",
+        "forgot": "Passwort vergessen",
+        "request": "Neues Passwort anfordern",
+        "reset": "Passwort setzen",
+        "change": "Passwort ändern",
+        "changed": "Passwort erfolgreich geändert",
+        "current": "Akutelles Passwort",
+        "confirm": "Passwort bestätigen",
+        "not-match": "Passwörter stimmen nicht überein.",
+        "invalid": {
+            "hint": "Bitte gebe das Passwort in einem gültigen Format an."
+        },
+        "error" : {
+            "ILLEGAL_WHITESPACE" : "Bitte keine Leerzeichen verwenden.",
+            "INSUFFICIENT_DIGIT" : "Bitte mindestens eine Zahl eingeben.",
+            "INSUFFICIENT_UPPERCASE" : "Bitte mindestens einen Großbuchstaben eingeben.",
+            "INSUFFICIENT_LOWERCASE" : "Bitte mindestens einen Kleinbuchstaben eingeben.",
+            "INSUFFICIENT_SPECIAL" : "Bitte mindestens ein Sonderzeichen eingeben.",
+            "TOO_SHORT" : "Bitte ein längeres Passwort wählen."
+        }
+    },
+    "register": {
+        ".": "Registrierung",
+        "token.missing": "Du benötigst leider ein gültiges Token!"
+    },
+    "email": {
+        ".": "E-Mail Adresse",
+        "primary": "primäre E-Mail Adresse",
+        "invalid": "ungültige E-Mail Adresse"
+    },
+    "apps": "Apps",
+    "app": {
+        "goto": "Gehe zur App"
+    },
+    "locale": {
+        "en": {
+            "short": "EN",
+            "long": "Englisch"
+        },
+        "de-informal": {
+            "short": "DE",
+            "long": "German"
+        }
+    },
+    "info": {
+        ".": "Info"
+    },
+    "permissions": {
+        ".": "Berechtigungen",
+        "name": "Name",
+        "expires": "Gültig bis"
+    },
+    "quotas": {
+        ".": "Quotas",
+        "name": "Name",
+        "value": "Quota"
+    },
+    "voucher": {
+        ".": "Gutscheincode",
+        "type": "Typ",
+        "code": "Code"
+    },
+    "vouchers": {
+        ".": "Gutscheincodes",
+        "info": "Gutscheincodes für Add-Ons und Registrierung",
+        "registration": "Registrierung",
+        "add-on": "Add-On",
+        "temp": {
+            ".": "Temporäre Gutscheincodes",
+            "info": "Hier werden deine aktuell angefragten Gutscheincodes angezeigt. Bitte speichere diese sicher ab, da wir diese Codes nicht für dich speichern!"
+        },
+        "stored-safely": {
+            ".": "Da wir keine Verbindungen von Gutscheincodes zu deinem Account speichern, speichere diesen Code bitte selber sicher ab. Falls du die Seite verlässt oder neuläds ist der Code nicht mehr verfügbar!",
+            "confirm": "Ich habe den Code sicher abgespeicher!"
+        }
+    },
+    "security": {
+        ".": "Sicherheit"
+    }
+}

src/assets/i18n/en.json

@@ -0,0 +1,117 @@
+{
+    "i18n.test.replace": "yes no it's clear! {0} {1} {2}",
+    "greet": "Hello {0}",
+    "home": "Home",
+    "login": {
+        ".": "Login",
+        "external": "Login",
+        "invalid": "The username and password were not recognised."
+    },
+    "not-found": {
+        ".": "Not Found",
+        "text": "What's Up!?"
+    },
+    "service-unavailable": {
+        ".": "Service Unavailable",
+        "text": "Currently the service seems unavailable. If this message stays for long, please contact admin@bstly.de!"
+    },
+    "logout": "Logout",
+    "account": "Account",
+    "token": "Token",
+    "ok": "Ok",
+    "tokens": {
+        ".": "Tokens",
+        "redeem": "Redeem Tokens",
+        "redeemed": "The provided token is already redeemed.",
+        "get": "Get Tokens",
+        "enter": "Enter Token",
+        "validate": "Validate",
+        "invalid" : "The provided token is invalid.",
+        "provide-valid" : "Please provide a valid token"
+    },
+    "username": {
+        ".": "Username",
+        "missing": "Please provide a valid username.",
+        "error" : "Please choose another username."
+    },
+    "password": {
+        ".": "Password",
+        "forgot": "Forgot Password",
+        "request": "Request Password",
+        "reset": "Reset Password",
+        "change": "Change Password",
+        "changed": "Succeffuly changed Password!",
+        "current": "Current Password",
+        "confirm": "Confirm Password",
+        "not-match": "Password do not match.",
+        "invalid": {
+            "hint": "Please provide a valid password"
+        },
+        "error" : {
+            "ILLEGAL_WHITESPACE" : "Please do not use any whitespace!",
+            "INSUFFICIENT_DIGIT" : "Please provide at least one digit!",
+            "INSUFFICIENT_UPPERCASE" : "Please provide at leaste one uppercase character!",
+            "INSUFFICIENT_LOWERCASE" : "Please provide at leaste one lowercase character!",
+            "INSUFFICIENT_SPECIAL" : "Please provide at leaste one special character!",
+            "TOO_SHORT" : "Please choose a longer password!"
+        }
+    },
+    "register": {
+        ".": "Register",
+        "token.missing": "Please provide a valid token first!"
+    },
+    "email": {
+        ".": "E-Mail",
+        "primary": "Primary E-Mail",
+        "invalid": "invalid E-Mail"
+    },
+    "apps": "Apps",
+    "app": {
+        "goto": "Go To App"
+    },
+    "locale": {
+        "en": {
+            "short": "EN",
+            "long": "English"
+        },
+        "de-informal": {
+            "short": "DE",
+            "long": "Deutsch"
+        }
+    },
+    "info": {
+        ".": "Info"
+    },
+    "permissions": {
+        ".": "Permissions",
+        "name": "Name",
+        "expires": "Expires"
+    },
+    "quotas": {
+        ".": "Quotas",
+        "name": "Name",
+        "value": "Quota"
+    },
+    "voucher": {
+        ".": "Voucher",
+        "type": "Type",
+        "code": "Code"
+    },
+    "vouchers": {
+        ".": "Vouchers",
+        "info": "Add-On and Registration Vouchers",
+        "registration": "Registration",
+        "add-on": "Add-On",
+        "temp": {
+            ".": "Temporary Vouchers",
+            "info": "This list your currently requested vouchers! Please store them safely, the will not get stored for you!"
+        },
+        "stored-safely": {
+            ".": "Because we do not store any relation from your account to voucher codes, please store this voucher safely. It will not be available on refresh!",
+            "confirm": "I have saved my voucher safely!"
+        }
+    },
+    "security": {
+        ".": "Security"
+    }
+}

src/assets/i18n/unset.json

@@ -0,0 +1 @@
+{}

src/assets/icons/logo.svg

@@ -0,0 +1,183 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="180mm"
+   height="180mm"
+   viewBox="0 0 637.79528 637.79527"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="logo.svg"
+   inkscape:export-filename="/home/lurkars/ownCloud/Bastelei/development/bstl_ui/build/gfx/bstl.png"
+   inkscape:export-xdpi="24.190475"
+   inkscape:export-ydpi="24.190475">
+  <defs
+     id="defs4">
+    <marker
+       inkscape:stockid="Arrow1Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow1Lend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4410"
+         d="M 0,0 5,-5 -12.5,0 5,5 Z"
+         style="fill:#7560ff;fill-opacity:1;fill-rule:evenodd;stroke:#7560ff;stroke-width:1.00000003pt;stroke-opacity:1"
+         transform="matrix(-0.8,0,0,-0.8,-10,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="-75.221162"
+     inkscape:cy="305.4019"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1848"
+     inkscape:window-height="1016"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-49.288974,-360.43866)"
+     style="display:inline">
+    <g
+       id="g4145"
+       style="stroke:#ebb400;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       transform="translate(0,-15.000001)">
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path4154"
+         d="m 468.57022,631.84443 -42.94501,131.608"
+         style="fill:none;fill-rule:evenodd;stroke:#ebb400;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path4156"
+         d="M 355.63121,547.02142 660.78242,768.72229"
+         style="fill:none;fill-rule:evenodd;stroke:#ebb400;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#006100;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 563.03718,392.90301 492.79039,606.93332 674.34654,739.73223"
+       id="path4158"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#5e45ff;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 546.82821,387.53706 -286.72601,207.38363 44.34514,139.99727 125.28725,-0.48581 -72.0052,221.3299"
+       id="path4152"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <g
+       id="g4141"
+       style="stroke:#c1008d;stroke-width:20;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       transform="translate(0,-15.000001)">
+      <path
+         sodipodi:nodetypes="cc"
+         inkscape:connector-curvature="0"
+         id="path4150"
+         d="M 85.517039,769.35462 298.59321,768.46556"
+         style="fill:none;fill-rule:evenodd;stroke:#c1008d;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="cccc"
+         inkscape:connector-curvature="0"
+         id="path4148"
+         d="M 347.86433,949.1813 89.095578,757.90563 249.71676,642.08318 Z"
+         style="fill:none;fill-rule:evenodd;stroke:#c1008d;stroke-width:20;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <path
+       sodipodi:type="star"
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:18.2419529;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path4138"
+       sodipodi:sides="5"
+       sodipodi:cx="360"
+       sodipodi:cy="583.79077"
+       sodipodi:r1="294.93686"
+       sodipodi:r2="238.60893"
+       sodipodi:arg1="0.95054684"
+       sodipodi:arg2="1.5788654"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 531.42857,823.79077 184.72078,820.9931 80.242919,490.38988 362.37983,288.86351 641.2279,494.91659 Z"
+       inkscape:transform-center-x="0.32354069"
+       inkscape:transform-center-y="30.570376"
+       transform="matrix(-1.096361,0.00529662,-0.00529662,-1.096361,766.69563,1285.6526)" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="template"
+     style="display:none"
+     transform="translate(-49.288974,-52.170936)">
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 663.78063,451.04608 185.86807,102.14254"
+       id="path4446"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 551.54329,102.64762 71.720831,450.1401"
+       id="path4448"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 186.37315,102.14255 180.8173,564.9278"
+       id="path4450"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 551.54329,103.15269 366.93791,666.81782"
+       id="path4452"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 72.730983,451.15025 590.686697,0.25254"
+       id="path4454"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>

src/assets/templates/about.de-informal.html

@@ -0,0 +1,3 @@
+<h2>we.bstly</h2>
+<p>Willkommen zur digitalen Bastelei.</p>
+<p></p>

src/assets/templates/about.en.html

@@ -0,0 +1,3 @@
+<h2>we.bstly</h2>
+
+<p>Welcome to the digital tinkering.</p>

src/assets/templates/test.en.html

@@ -0,0 +1 @@
+<h1>Hello you lalala</h1>