update

2021-01-12 19:29:00 +01:00
parent b7b4e2d032
commit 997a512e00
96 changed files with 2711 additions and 304 deletions
@@ -2,10 +2,17 @@ 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 { HomeComponent, ImprintComponent, PrivacyPolicyComponent } from './pages/home/home.component';
+import { HomeClubComponent } from './pages/home/club/home-club.component';
+import { HomeGeneralComponent } from './pages/home/general/home-general.component';
+import { HomePrivacyComponent } from './pages/home/privacy/home-privacy.component';
+import { HomeServicesComponent } from './pages/home/services/home-services.component';
 import { LoginComponent } from './pages/login/login.component';
+import { LoginTotpComponent } from './pages/login-totp/login-totp.component';
 import { FormLoginComponent } from './pages/form-login/form-login.component';
+import { FormLoginTotpComponent } from './pages/form-login-totp/form-login-totp.component';
 import { PasswordComponent } from './pages/password/password.component';
+import { PasswordResetComponent } from './pages/password-reset/password-reset.component';
 import { AccountComponent } from './pages/account/account.component';
 import { RegisterComponent } from './pages/register/register.component';
 import { TokensComponent } from './pages/tokens/tokens.component';
@@ -14,26 +21,33 @@ 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'; 
+import { NotfoundComponent } from './pages/notfound/notfound.component';

 const routes: Routes = [
-  { path: '', component: HomeComponent, canActivate: [AuthUpdateGuard], pathMatch: 'full', runGuardsAndResolvers: 'always' },
+  { path: '', redirectTo: "/general", pathMatch: 'full' },
+  {
+    path: '', component: HomeComponent, canActivate: [AuthUpdateGuard], runGuardsAndResolvers: 'always', children: [
+      { path: 'general', component: HomeGeneralComponent, canActivate: [AuthUpdateGuard] },
+      { path: 'privacy', component: HomePrivacyComponent, canActivate: [AuthUpdateGuard] },
+      { path: 'services', component: HomeServicesComponent, canActivate: [AuthUpdateGuard] },
+      { path: 'club', component: HomeClubComponent, canActivate: [AuthUpdateGuard] },
+    ]
+  },
+  { path: 'imprint', component: ImprintComponent, canActivate: [AuthUpdateGuard] },
+  { path: 'privacy-policy', component: PrivacyPolicyComponent, canActivate: [AuthUpdateGuard] },
  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
+  { path: 'login/totp', component: LoginTotpComponent, canActivate: [AnonymousGuard] },
  { path: 'external-login', component: FormLoginComponent, canActivate: [AnonymousGuard] },
+  { path: 'external-login/totp', component: FormLoginTotpComponent, canActivate: [AnonymousGuard] },
  { path: 'password', component: PasswordComponent, canActivate: [AnonymousGuard] },
+  { path: 'password-reset', component: PasswordResetComponent, 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: 'info', component: InfoComponent, canActivate: [AuthenticatedGuard] },
+      { path: 'voucher', component: VoucherComponent, canActivate: [AuthenticatedGuard] },
+      { path: 'security', component: SecurityComponent, canActivate: [AuthenticatedGuard] }
    ]
  },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
@@ -1,20 +1,21 @@
 <mat-toolbar color="primary">
-  <a href="javascript:" mat-icon-button aria-label="Menu">
+  <a href="javascript:" mat-icon-button>
    <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
  </a>
+  <mat-icon svgIcon="logo"></mat-icon>
  <span>
-    <mat-icon svgIcon="logo"></mat-icon> we.bstly
+    we.bstly
  </span>
  <span class="spacer"></span>
  <ng-container>

-    <button mat-button [matMenuTriggerFor]="menu">
+    <button *ngIf="locales.length > 1" 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>
+      <a *ngFor="let locale of locales" mat-menu-item
+        (click)="setLocale(locale)">{{'locale.' + locale + '.long' | i18n}}</a>
    </mat-menu>
  </ng-container>
 </mat-toolbar>
@@ -23,7 +24,7 @@
  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
    (click)="!isBiggerScreen() && opened=false">
    <mat-nav-list>
-      <a routerLink="/" aria-label="Home" mat-list-item>
+      <a routerLink="/general" mat-list-item>
        <mat-icon>home</mat-icon> {{'home' | i18n}}
      </a>
      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
@@ -35,10 +36,10 @@
      <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>
+      <a routerLink="/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>
+      <a href="https://we.bstly.de" target="_blank" mat-list-item>
        <mat-icon>shopping_cart</mat-icon> {{'tokens.get' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
        </mat-icon>
      </a>
@@ -46,6 +47,17 @@
        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
      </a>
    </mat-nav-list>
+
+    <span class="spacer"></span>
+
+    <mat-nav-list>
+      <a routerLink="/imprint" mat-list-item style="font-size: 0.7em;">
+        {{'imprint' | i18n}}
+      </a>
+      <a routerLink="/privacy-policy" mat-list-item style="font-size: 0.7em;">
+        {{'privacy-policy' | i18n}}
+      </a>
+    </mat-nav-list>
  </mat-sidenav>

  <!-- Main content -->
@@ -1,33 +0,0 @@
-.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;
-  }
-}
@@ -16,11 +16,12 @@ export class AppComponent {
  opened = true;
  title = 'we.bstly';
  currentLocale: String;
+  locales;
  auth;

  constructor(private i18n: I18nService, private authService: AuthService, private router: Router, private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
    this.currentLocale = this.i18n.getLocale();
-  
+    this.locales = this.i18n.getLocales();
    this.authService.auth.subscribe(data => {
      this.auth = data;
    })
@@ -45,7 +46,6 @@ export class AppComponent {
  logout() {
    this.authService.logout().subscribe(data => {
      this.router.navigate([""]);
-      console.log("ja?");
    })
  }

@@ -6,24 +6,31 @@ 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 { QRCodeModule } from 'angularx-qrcode';

 import { I18nPipe } from './utils/i18n.pipe';
-import { HomeComponent } from './pages/home/home.component';
+import { HomeComponent, ImprintComponent, PrivacyPolicyComponent } from './pages/home/home.component';
+import { HomeClubComponent } from './pages/home/club/home-club.component';
+import { HomeGeneralComponent } from './pages/home/general/home-general.component';
+import { HomePrivacyComponent } from './pages/home/privacy/home-privacy.component';
+import { HomeServicesComponent } from './pages/home/services/home-services.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 { LoginTotpComponent } from './pages/login-totp/login-totp.component';
 import { FormLoginComponent } from './pages/form-login/form-login.component';
+import { FormLoginTotpComponent } from './pages/form-login-totp/form-login-totp.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 { SecurityComponent, SecurityTotpDialog } 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 { PasswordResetComponent } from './pages/password-reset/password-reset.component';
+import { RegisterComponent, 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';
@@ -34,7 +41,7 @@ import { I18nService } from './services/i18n.service';


 export function init_app(i18n: I18nService) {
-  return () => i18n.fetch(i18n.getLocale());
+  return () => i18n.fetch(i18n.getLocale()).then(response => { }, error => { });
 }

@Injectable()
@@ -52,19 +59,27 @@ export class XhrInterceptor implements HttpInterceptor {
  declarations: [
    I18nPipe,
    AppComponent,
-    HomeComponent,
+    HomeComponent, ImprintComponent, PrivacyPolicyComponent,
+    HomeClubComponent,
+    HomeGeneralComponent,
+    HomePrivacyComponent,
+    HomeServicesComponent,
    AccountComponent,
    LoginComponent,
+    LoginTotpComponent,
    FormLoginComponent,
+    FormLoginTotpComponent,
    TokensComponent,
    AppsComponent,
    PermissionsComponent,
    QuotasComponent,
    SecurityComponent,
+    SecurityTotpDialog,
    VoucherComponent,
    VoucherDialog,
    InfoComponent,
    PasswordComponent,
+    PasswordResetComponent,
    RegisterComponent,
    RegisterDialog,
    UsernameDialog,
@@ -80,6 +95,7 @@ export class XhrInterceptor implements HttpInterceptor {
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
+    QRCodeModule,
  ],
  exports: [MaterialModule],
  providers: [{ provide: APP_INITIALIZER, useFactory: init_app, deps: [I18nService], multi: true }, { provide: HTTP_INTERCEPTORS, useClass: XhrInterceptor, multi: true }],
@@ -1,4 +1,4 @@
-<h2>{{'greet' | i18n:auth.name}} <mat-icon aria-hidden="false" aria-label="Smile">sentiment_satisfied_alt</mat-icon>
+<h2>{{'greet' | i18n:auth.name}} <mat-icon>sentiment_satisfied_alt</mat-icon>
 </h2>

 <nav mat-tab-nav-bar>
@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>{{'security.2fa.totp.enable' | i18n}}</h1>
+<div mat-dialog-content>
+
+    {{'security.2fa.totp.hint' | i18n}}
+
+    <qrcode *ngIf="data.qrData" [qrdata]="data.qrData" [width]="400" [errorCorrectionLevel]="'M'" title="{{data.qrData}}"></qrcode>
+
+    {{'security.2fa.totp.activate' | i18n}}
+    <mat-form-field>
+        <input matInput placeholder="{{'security.2fa.totp.code' | i18n}}" [formControl]="code" required>
+    </mat-form-field>
+</div>
+<div mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
+    <button [disabled]="code.invalid" mat-raised-button [mat-dialog-close]="code.value" cdkFocusInitial color="accent">{{'security.2fa.totp.enable' | i18n}}</button>
+</div>
@@ -1,4 +1,4 @@
-<form [formGroup]="form" (ngSubmit)="changePassword()" #formDirective="ngForm">
+<form [formGroup]="passwordForm" (ngSubmit)="changePassword()" #passwordFormDirective="ngForm">
    <mat-card>
        <mat-card-content>
            <h2>{{'password.change' | i18n}}</h2>
@@ -6,22 +6,22 @@
                {{'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">
+                <input matInput type="password" placeholder="{{'password.current' | i18n}}"
+                    formControlName="oldPassword" [(ngModel)]="model.old">
+                <mat-error *ngFor="let error of passwordForm.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">
+                <mat-error *ngFor="let error of passwordForm.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">
+                <input matInput type="password" length="6" placeholder="{{'password.confirm' | i18n}}"
+                    formControlName="password2" [(ngModel)]="model.password2">
                <mat-error>
                    {{'password.not-match' | i18n}}
                </mat-error>
@@ -29,9 +29,20 @@
        </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">
+            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="passwordForm.invalid">
                {{'password.change' | i18n}}
            </button>
        </mat-card-actions>
    </mat-card>
-</form>
+</form>
+
+<mat-card>
+    <mat-card-content>
+        <h2>{{'security.2fa' | i18n}}</h2>
+        <p>{{'security.2fa.info' | i18n}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+        <button *ngIf="!totp" (click)="createTotp()" mat-raised-button color="accent">{{'security.2fa.totp.create' | i18n}}</button>
+        <button *ngIf="totp" (click)="removeTotp()" mat-raised-button color="warn">{{'security.2fa.totp.remove' | i18n}}</button>
+    </mat-card-actions>
+</mat-card>
@@ -1,3 +1,3 @@
 mat-form-field {
-  display: block;
+  display: inline;
 }
@@ -1,6 +1,8 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl, Validators, NgForm } from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

+import { AuthService } from './../../../services/auth.service';
 import { UserService } from './../../../services/user.service';
 import { MatchingValidator } from './../../../utils/matching.validator';

@@ -15,28 +17,39 @@ export class SecurityComponent implements OnInit {
  model: any = {};
  public working: boolean;
  public success: boolean;
-  form: FormGroup;
-  @ViewChild('formDirective') private formDirective: NgForm;
+  public totp: boolean = false;

-  constructor(private formBuilder: FormBuilder, private userService: UserService) { }
+  passwordForm: FormGroup;
+  @ViewChild('passwordFormDirective') private passwordFormDirective: NgForm;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private userService: UserService,
+    private authService: AuthService,
+    public dialog: MatDialog) { }

  ngOnInit(): void {
-    this.form = this.formBuilder.group({
+    this.passwordForm = this.formBuilder.group({
      oldPassword: ['', Validators.required],
      password: ['', Validators.required],
      password2: ['', Validators.required]
    }, {
      validator: MatchingValidator('password', 'password2')
    });
+
+    this.authService.isTotpEnabled().subscribe(response => {
+      this.totp = true;
+    }, error => {
+      this.totp = false;
+    })
  }

-
  changePassword() {
-    if (this.form.valid && !this.working) {
+    if (this.passwordForm.valid && !this.working) {
      this.working = true;

      this.userService.password(this.model).subscribe((result: any) => {
-        this.formDirective.resetForm();
+        this.passwordFormDirective.resetForm();
        this.success = true;
        this.working = false;
      }, (error) => {
@@ -49,11 +62,68 @@ export class SecurityComponent implements OnInit {
          }

          for (let code in errors) {
-            this.form.get(code).setErrors(errors[code]);
+            this.passwordForm.get(code).setErrors(errors[code]);
          }
        }
      })
    }
  }

+  createTotp() {
+    this.authService.createTotp().subscribe((result: any) => {
+      const dialogRef = this.dialog.open(SecurityTotpDialog, {
+        closeOnNavigation: false,
+        disableClose: true,
+        data: result
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.authService.enableTotp(result).subscribe((result: any) => {
+            this.totp = true;
+          })
+        } else {
+          this.authService.removeTotp().subscribe((result: any) => {
+            this.totp = false;
+          })
+        }
+      });
+    })
+  }
+
+
+  enableTotp() {
+    const dialogRef = this.dialog.open(SecurityTotpDialog, {
+      closeOnNavigation: false,
+      disableClose: true,
+      data: {}
+    });
+  }
+
+  removeTotp() {
+    this.authService.removeTotp().subscribe((result: any) => {
+      this.totp = false;
+    })
+  }
+
 }
+
+
+@Component({
+  selector: 'app-security-totp-dialog',
+  templateUrl: 'security-totp.dialog.html',
+  styleUrls: ['./security.component.scss']
+})
+export class SecurityTotpDialog {
+
+  code: FormControl;
+
+  constructor(
+    public dialogRef: MatDialogRef<SecurityTotpDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  ngOnInit(): void {
+    this.code = new FormControl('', [Validators.required, Validators.pattern("[0-9]{6}")]);
+  }
+}
@@ -57,7 +57,6 @@ export class VoucherComponent implements OnInit {
        data: this.model
      });
    }, error => {
-      console.log(error);
    })
  }

@@ -1,20 +1,17 @@
 <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>
+
+<mat-card *ngFor="let app of apps">
+    <mat-card-header>
+        <mat-icon>{{'apps.' + app.name + '.icon' | i18n}}</mat-icon>
+        <mat-card-title>{{'apps.' + app.name + '.title'  | i18n}}</mat-card-title>
+        <mat-card-subtitle>{{'apps.' + app.name + '.subtitle' | i18n}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+        <p>
+            {{ 'apps.' + app.name + '.text'  | i18n}}
+        </p>
+    </mat-card-content>
+    <mat-card-actions>
+        <a href="{{app.url}}" target="_blank" mat-raised-button color="primary">{{'apps.goto'  | i18n}}</a>
+    </mat-card-actions>
+</mat-card>
@@ -1,4 +0,0 @@
-mat-card {
-    width: 100%;
-    margin: 2em 2em;
-  }
@@ -0,0 +1,28 @@
+<form [formGroup]="form">
+    <form ngNoForm action="{{apiUrl}}/auth/formlogin/totp" method="POST">
+        <mat-card>
+            <mat-card-content>
+                <h2>{{'security.2fa.totp.external' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+                </mat-icon></h2>
+                <mat-error *ngIf="loginInvalid">
+                    {{'security.2fa.totp.invalid' | i18n}}
+                </mat-error>
+                <mat-form-field>
+                    <input id="code" name="code" matInput placeholder="{{'security.2fa.totp.code' | i18n}}"
+                        formControlName="code" required>
+                    <mat-error>
+                        {{'security.2fa.totp.missing' | i18n}}
+                    </mat-error>
+                </mat-form-field>
+                <mat-slide-toggle id="keep" name="keep" formControlName="keep">
+                    {{'security.2fa.totp.keepSession' | i18n}}
+                </mat-slide-toggle>
+            </mat-card-content>
+            <mat-card-actions>
+                <button type="submit" mat-raised-button color="primary"
+                    [disabled]="form.invalid">{{'security.2fa.totp.login' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+                    </mat-icon></button>
+            </mat-card-actions>
+        </mat-card>
+    </form>
+</form>
@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormLoginTotpComponent } from './form-login-totp.component';
+
+describe('FormLoginTotpComponent', () => {
+  let component: FormLoginTotpComponent;
+  let fixture: ComponentFixture<FormLoginTotpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormLoginTotpComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormLoginTotpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -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-totp',
+  templateUrl: './form-login-totp.component.html',
+  styleUrls: ['./form-login-totp.component.scss']
+})
+export class FormLoginTotpComponent implements OnInit {
+
+  form: FormGroup;
+  public loginInvalid: boolean;
+  public apiUrl = environment.apiUrl;
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  async ngOnInit() {
+    this.form = this.formBuilder.group({
+      code: ['', Validators.required],
+      keep : ['']
+    });
+  }
+
+
+
+}
@@ -1,9 +1,10 @@
 <form [formGroup]="form">
-    <form ngNoForm action="{{apiUrl}}/auth/login" method="POST">
+    <form ngNoForm action="{{apiUrl}}/auth/formlogin" method="POST">
        <mat-card>
            <mat-card-content>
                <h2>{{'login.external' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
-                </mat-icon></h2>
+                    </mat-icon>
+                </h2>
                <mat-error *ngIf="loginInvalid">
                    {{'login.invalid' | i18n}}
                </mat-error>
@@ -21,13 +22,15 @@
                        {{'password.invalid.hint' | i18n}}
                    </mat-error>
                </mat-form-field>
+                <mat-slide-toggle id="keep" name="keep" formControlName="keep">
+                    {{'login.keepSession' | i18n}}
+                </mat-slide-toggle>
            </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>
+                <a routerLink="/password" mat-raised-button color="warn">{{'password.forgot' | i18n}}</a>
            </mat-card-actions>
        </mat-card>
    </form>
@@ -19,7 +19,8 @@ export class FormLoginComponent implements OnInit {
  async ngOnInit() {
    this.form = this.formBuilder.group({
      username: ['', Validators.required],
-      password: ['', Validators.required]
+      password: ['', Validators.required],
+      keep : ['']
    });
  }

@@ -0,0 +1,29 @@
+<mat-accordion>
+    <mat-expansion-panel expanded>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.club.membership' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'club/membership'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.club.about' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'club/about'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.club.charter' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'club/charter'"></app-html>
+    </mat-expansion-panel>
+
+</mat-accordion>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeClubComponent } from './home-club.component';
+
+describe('HomeClubComponent', () => {
+  let component: HomeClubComponent;
+  let fixture: ComponentFixture<HomeClubComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomeClubComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeClubComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-home-club',
+  templateUrl: './home-club.component.html'
+})
+export class HomeClubComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,28 @@
+<mat-accordion>
+    <mat-expansion-panel expanded>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.general.what' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'general/what'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.general.you' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'general/you'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.general.we' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'general/we'"></app-html>
+    </mat-expansion-panel>
+</mat-accordion>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeGeneralComponent } from './home-general.component';
+
+describe('HomeGeneralComponent', () => {
+  let component: HomeGeneralComponent;
+  let fixture: ComponentFixture<HomeGeneralComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomeGeneralComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeGeneralComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-home-general',
+  templateUrl: './home-general.component.html'
+})
+export class HomeGeneralComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -1,28 +1,15 @@
 <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>
+<nav mat-tab-nav-bar>
+    <a mat-tab-link routerLink="general" routerLinkActive #rlag="routerLinkActive"
+        [active]="rlag.isActive">{{'home.general' | i18n}}</a>
+    <a mat-tab-link routerLink="services" routerLinkActive #rlas="routerLinkActive"
+        [active]="rlas.isActive">{{'home.services' | i18n}}</a>
+    <a mat-tab-link routerLink="privacy" routerLinkActive #rlap="routerLinkActive"
+        [active]="rlap.isActive">{{'home.privacy' | i18n}}</a>
+    <a mat-tab-link routerLink="club" routerLinkActive #rlac="routerLinkActive"
+        [active]="rlac.isActive">{{'home.club' | i18n}}</a>
+</nav>

-    <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>
+<p></p>
+<router-outlet></router-outlet>
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';

-
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
@@ -15,3 +14,31 @@ export class HomeComponent implements OnInit {
  }

 }
+
+@Component({
+  selector: 'app-imprint',
+  templateUrl: './home.imprint.html'
+})
+export class ImprintComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
+
+@Component({
+  selector: 'app-privacy-policy',
+  templateUrl: './home.privacy-policy.html'
+})
+export class PrivacyPolicyComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1 @@
+<app-html [template]="'imprint'"></app-html>
@@ -0,0 +1 @@
+<app-html [template]="'privacy-policy'"></app-html>
@@ -0,0 +1,57 @@
+<h3> {{'home.privacy.design' | i18n}}</h3>
+
+<mat-accordion>
+    <mat-expansion-panel expanded hideToggle disabled>
+        <app-html [template]="'privacy/design'"></app-html>
+    </mat-expansion-panel>
+</mat-accordion>
+
+<h3>{{'home.privacy.services' | i18n}}</h3>
+
+<mat-accordion>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Webserver
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'privacy/webserver'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Pretix
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'privacy/pretix'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                we.bstly
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'privacy/we-bstly'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Nextcloud
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'privacy/nextcloud'"></app-html>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.services.email' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'privacy/email'"></app-html>
+    </mat-expansion-panel>
+</mat-accordion>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePrivacyComponent } from './home-privacy.component';
+
+describe('HomePrivacyComponent', () => {
+  let component: HomePrivacyComponent;
+  let fixture: ComponentFixture<HomePrivacyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomePrivacyComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomePrivacyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-home-privacy',
+  templateUrl: './home-privacy.component.html'
+})
+export class HomePrivacyComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,523 @@
+<h3>{{'home.services.active' | i18n}}</h3>
+
+<mat-accordion>
+    <mat-expansion-panel expanded>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                we.bstly
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/active/we-bstly'"></app-html>
+
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="webstly">we.bstly</mat-chip>
+            <mat-menu #webstly="matMenu">
+                <a href="https://git.bstly.de/_Bastler/we.bstly" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://www.bstly.de" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Nextcloud
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/active/nextcloud'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="nextcloud">Nextcloud</mat-chip>
+            <mat-menu #nextcloud="matMenu">
+                <a href="https://github.com/nextcloud/server" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://nextcloud.com" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="nextcloud_collabora">Collabora Online</mat-chip>
+            <mat-menu #nextcloud_collabora="matMenu">
+                <a href="https://github.com/CollaboraOnline/online" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://www.collaboraoffice.com/code/" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+        <br>
+        <mat-accordion>
+            <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Apps
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-panel-description>
+                    <mat-chip-list>
+                        <mat-chip>Accessibility</mat-chip>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_announcementcenter">Announcement center
+                        </mat-chip>
+                        <mat-menu #nextcloud_app_announcementcenter="matMenu">
+                            <a href="https://github.com/nextcloud/announcementcenter" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_apporder">AppOrder</mat-chip>
+                        <mat-menu #nextcloud_app_apporder="matMenu">
+                            <a href="https://github.com/juliushaertl/apporder" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_calendar">Calendar</mat-chip>
+                        <mat-menu #nextcloud_app_calendar="matMenu">
+                            <a href="https://apps.nextcloud.com/apps/calendar" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_checksum">Checksum</mat-chip>
+                        <mat-menu #nextcloud_app_checksum="matMenu">
+                            <a href="https://github.com/westberliner/owncloud-checksum/" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_collabora">Collabora Online</mat-chip>
+                        <mat-menu #nextcloud_app_collabora="matMenu">
+                            <a href="https://github.com/nextcloud/richdocuments" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip>Collaborative tags</mat-chip>
+
+                        <mat-chip>Comments</mat-chip>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_contacts">Contacts</mat-chip>
+                        <mat-menu #nextcloud_app_contacts="matMenu">
+                            <a href="https://github.com/nextcloud/contacts" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_contacts">Contacts</mat-chip>
+                        <mat-menu #nextcloud_app_contacts="matMenu">
+                            <a href="https://github.com/nextcloud/contacts" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_custom_menu">Custom menu</mat-chip>
+                        <mat-menu #nextcloud_app_custom_menu="matMenu">
+                            <a href="https://gitnet.fr/deblan/side_menu" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_data_request">Data Request</mat-chip>
+                        <mat-menu #nextcloud_app_data_request="matMenu">
+                            <a href="https://github.com/nextcloud/data_request" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_deck">Deck</mat-chip>
+                        <mat-menu #nextcloud_app_deck="matMenu">
+                            <a href="https://github.com/nextcloud/deck" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip>Default encryption module</mat-chip>
+
+                        <mat-chip>Deleted files</mat-chip>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_external_sites">External sites</mat-chip>
+                        <mat-menu #nextcloud_app_external_sites="matMenu">
+                            <a href="https://github.com/nextcloud/external" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip>Federation</mat-chip>
+
+                        <mat-chip>File sharing</mat-chip>
+
+                        <mat-chip>First run wizard</mat-chip>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_notifications">Notifications</mat-chip>
+                        <mat-menu #nextcloud_app_notifications="matMenu">
+                            <a href="https://github.com/nextcloud/notifications" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_oidc">OpenID Connect Login</mat-chip>
+                        <mat-menu #nextcloud_app_oidc="matMenu">
+                            <a href="https://github.com/pulsejet/nextcloud-single-openid-connect" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_password_policy">Password policy
+                        </mat-chip>
+                        <mat-menu #nextcloud_app_password_policy="matMenu">
+                            <a href="https://github.com/nextcloud/password_policy" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_pdf">PDF viewer</mat-chip>
+                        <mat-menu #nextcloud_app_pdf="matMenu">
+                            <a href="https://github.com/nextcloud/files_pdfviewer" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_photos">Photos</mat-chip>
+                        <mat-menu #nextcloud_app_photos="matMenu">
+                            <a href="https://github.com/nextcloud/photos" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_polls">Polls</mat-chip>
+                        <mat-menu #nextcloud_app_polls="matMenu">
+                            <a href="https://github.com/nextcloud/polls" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_privacy">Privacy</mat-chip>
+                        <mat-menu #nextcloud_app_privacy="matMenu">
+                            <a href="https://github.com/nextcloud/privacy" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_quota">Quota warning</mat-chip>
+                        <mat-menu #nextcloud_app_quota="matMenu">
+                            <a href="https://github.com/nextcloud/quota_warning" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_rightclick">Right click</mat-chip>
+                        <mat-menu #nextcloud_app_rightclick="matMenu">
+                            <a href="https://github.com/nextcloud/files_rightclick" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip>Share by mail</mat-chip>
+
+                        <mat-chip>Support</mat-chip>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_talk">Talk</mat-chip>
+                        <mat-menu #nextcloud_app_talk="matMenu">
+                            <a href="https://github.com/nextcloud/spreed" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_tasks">Tasks</mat-chip>
+                        <mat-menu #nextcloud_app_tasks="matMenu">
+                            <a href="https://github.com/nextcloud/tasks/" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_terms">Terms of services</mat-chip>
+                        <mat-menu #nextcloud_app_terms="matMenu">
+                            <a href="https://github.com/nextcloud/terms_of_service/" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_text">Text</mat-chip>
+                        <mat-menu #nextcloud_app_text="matMenu">
+                            <a href="https://github.com/nextcloud/text" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip>Theming</mat-chip>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_2fagateway">Two-Factor Gateway</mat-chip>
+                        <mat-menu #nextcloud_app_2fagateway="matMenu">
+                            <a href="https://github.com/nextcloud/twofactor_gateway" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_2fatotp">Two-Factor TOTP Provider
+                        </mat-chip>
+                        <mat-menu #nextcloud_app_2fatotp="matMenu">
+                            <a href="https://github.com/nextcloud/twofactor_totp" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+
+                        <mat-chip>Versions</mat-chip>
+
+                        <mat-chip selected [matMenuTriggerFor]="nextcloud_app_videoplayer">Video player</mat-chip>
+                        <mat-menu #nextcloud_app_videoplayer="matMenu">
+                            <a href="https://github.com/nextcloud/files_videoplayer" target="_blank" mat-menu-item>
+                                <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                            </a>
+                        </mat-menu>
+                    </mat-chip-list>
+
+                </mat-panel-description>
+            </mat-expansion-panel>
+        </mat-accordion>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                {{'home.services.email' | i18n}}
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/active/email'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="dovecot">Dovecot</mat-chip>
+            <mat-menu #dovecot="matMenu">
+                <a href="https://github.com/dovecot/core" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://www.dovecot.org" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+
+            <mat-chip color="accent" selected [matMenuTriggerFor]="postfix">Postfix</mat-chip>
+            <mat-menu #postfix="matMenu">
+                <a href="http://www.postfix.org/download.html" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="http://www.postfix.org" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+
+            <mat-chip color="accent" selected [matMenuTriggerFor]="rspamd">Rspamd</mat-chip>
+            <mat-menu #rspamd="matMenu">
+                <a href="https://github.com/rspamd/rspamd" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://www.rspamd.com" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+
+            <mat-chip color="accent" selected [matMenuTriggerFor]="rainloop">RainLoop Webmail</mat-chip>
+            <mat-menu #rainloop="matMenu">
+                <a href="https://github.com/RainLoop/rainloop-webmail" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://www.rainloop.net" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+</mat-accordion>
+
+<h3>{{'home.services.planned' | i18n}}</h3>
+
+<mat-accordion>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Matrix
+                ✅
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/planned/matrix'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="synapse">Synapse</mat-chip>
+            <mat-menu #synapse="matMenu">
+                <a href="https://github.com/matrix-org/synapse/" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://matrix.org/docs/projects/server/synapse" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+
+            <mat-chip color="accent" selected [matMenuTriggerFor]="element-web">Element Web</mat-chip>
+            <mat-menu #element-web="matMenu">
+                <a href="https://github.com/vector-im/element-web" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://element.io/" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Gitea
+                ✅
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/planned/gitea'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="gitea">Gitea</mat-chip>
+            <mat-menu #gitea="matMenu">
+                <a href="https://github.com/go-gitea/gitea" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://gitea.io/" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Jitsi Meet
+                ❔
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/planned/jitsi-meet'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="jitsi">Jitsi Meet</mat-chip>
+            <mat-menu #jitsi="matMenu">
+                <a href="https://github.com/jitsi/jitsi-meet" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://jitsi.org/jitsi-meet/" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Wireguard
+                ⚠️
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/planned/wireguard'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="wireguard">Wireguard</mat-chip>
+            <mat-menu #wireguard="matMenu">
+                <a href="https://www.wireguard.com/repositories/" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://www.wireguard.com" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                PiHole
+                ❔
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/planned/pihole'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="pihole">Pi-Hole</mat-chip>
+            <mat-menu #pihole="matMenu">
+                <a href="https://github.com/pi-hole/pi-hole" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://pi-hole.net" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                BigBlueButton
+                ⚠️
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/planned/bigbluebutton'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="bigbluebutton">BigBlueButton</mat-chip>
+            <mat-menu #bigbluebutton="matMenu">
+                <a href="https://github.com/bigbluebutton/bigbluebutton" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://bigbluebutton.org" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Bitwarden
+                ⚠️
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-html [template]="'services/planned/bitwarden'"></app-html>
+
+        <span>{{'software' | i18n}}:</span>
+        <mat-chip-list>
+            <mat-chip color="accent" selected [matMenuTriggerFor]="bitwarden">Bitwarden</mat-chip>
+            <mat-menu #bitwarden="matMenu">
+                <a href="https://github.com/bitwarden/server" target="_blank" mat-menu-item>
+                    <mat-icon>code</mat-icon> {{'sourcecode' | i18n}}
+                </a>
+                <a href="https://bitwarden.com/" target="_blank" mat-menu-item>
+                    <mat-icon>public</mat-icon> {{'homepage' | i18n}}
+                </a>
+            </mat-menu>
+        </mat-chip-list>
+    </mat-expansion-panel>
+</mat-accordion>
+
+<p>{{'home.services.legend' | i18n}}
+    <mat-list>
+        <mat-list-item>{{'home.services.legend.ready' | i18n}}</mat-list-item>
+        <mat-list-item>{{'home.services.legend.not-ready' | i18n}}</mat-list-item>
+        <mat-list-item>{{'home.services.legend.not-available' | i18n}}</mat-list-item>
+    </mat-list>
+</p>
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeServicesComponent } from './home-services.component';
+
+describe('HomeServicesComponent', () => {
+  let component: HomeServicesComponent;
+  let fixture: ComponentFixture<HomeServicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomeServicesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-home-services',
+  templateUrl: './home-services.component.html'
+})
+export class HomeServicesComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}
@@ -0,0 +1,24 @@
+<form [formGroup]="form" (ngSubmit)="loginTotp()">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'security.2fa.totp' | i18n}}</h2>
+            <mat-error *ngIf="loginInvalid">
+                {{'security.2fa.totp.invalid' | i18n}}
+            </mat-error>
+            <mat-form-field>
+                <input id="code" name="code" matInput placeholder="{{'security.2fa.totp.code' | i18n}}" formControlName="code"
+                    required>
+                <mat-error>
+                    {{'security.2fa.totp.missing' | i18n}}
+                </mat-error>
+            </mat-form-field>
+            <mat-slide-toggle id="keep" name="keep" formControlName="keep">
+                {{'security.2fa.totp.keepSession' | i18n}}
+            </mat-slide-toggle>
+        </mat-card-content>
+        <mat-card-actions>
+            <button type="submit" mat-raised-button color="primary"
+                [disabled]="form.invalid">{{'security.2fa.totp.login' | i18n}}</button>
+        </mat-card-actions>
+    </mat-card>
+</form>
@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginTotpComponent } from './login-totp.component';
+
+describe('LoginTotpComponent', () => {
+  let component: LoginTotpComponent;
+  let fixture: ComponentFixture<LoginTotpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginTotpComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginTotpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService } from '../../services/auth.service';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { environment } from '../../../environments/environment';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login-totp.component.html',
+  styleUrls: ['./login-totp.component.scss']
+})
+export class LoginTotpComponent implements OnInit {
+
+  form: FormGroup;
+  public loginInvalid: boolean;
+  public apiUrl = environment.apiUrl;
+  targetRoute = '/account/info';
+
+  constructor(private formBuilder: FormBuilder, private authService: AuthService, private router: Router, private route: ActivatedRoute) { }
+
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      code: ['', Validators.required],
+      keep: ['']
+    });
+
+    this.route.queryParams.subscribe(params => {
+      if (params['target']) {
+        this.targetRoute = params['target'];
+      }
+    });
+  }
+
+  async loginTotp() {
+    this.loginInvalid = false;
+    if (this.form.valid) {
+
+      const totpModel = {
+        code: this.form.get('code').value,
+        keep: this.form.get('keep').value
+      };
+
+      this.authService.loginTotp(totpModel).subscribe((response: any) => {
+        this.router.navigate([this.targetRoute]);
+      }, error => {
+        this.loginInvalid = true;
+      });
+
+    }
+  }
+
+}
@@ -19,12 +19,14 @@
                    {{'password.invalid.hint' | i18n}}
                </mat-error>
            </mat-form-field>
+            <mat-slide-toggle id="keep" name="keep" formControlName="keep">
+                {{'login.keepSession' | i18n}}
+            </mat-slide-toggle>
        </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>
+            <a routerLink="/password" mat-raised-button color="warn">{{'password.forgot' | i18n}}</a>
        </mat-card-actions>
    </mat-card>
 </form>
@@ -1,7 +1,7 @@
 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 { Router, ActivatedRoute } from '@angular/router';

 import { environment } from './../../../environments/environment';

@@ -15,27 +15,40 @@ export class LoginComponent implements OnInit {
  form: FormGroup;
  public loginInvalid: boolean;
  public apiUrl = environment.apiUrl;
+  targetRoute = '/account/info';
  loginModel = {};

-  constructor(private formBuilder: FormBuilder, private authService: AuthService, private router: Router) { }
+  constructor(private formBuilder: FormBuilder, private authService: AuthService, private router: Router, private route: ActivatedRoute) { }

  async ngOnInit() {
    this.form = this.formBuilder.group({
      username: ['', Validators.required],
-      password: ['', Validators.required]
+      password: ['', Validators.required],
+      keep: ['']
+    });
+
+    this.route.queryParams.subscribe(params => {
+      if (params['target']) {
+        this.targetRoute = params['target'];
+      }
    });
  }

  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"]);
+
+      const loginModel = {
+        username: this.form.get('username').value,
+        password: this.form.get('password').value,
+        keep: this.form.get('keep').value
+      };
+
+      this.authService.login(loginModel).subscribe((response: any) => {
+        this.router.navigate([this.targetRoute]);
      }, error => {
-        if (error.status == 302) {
-          console.log(error);
+        if (error.status == 428) {
+          this.router.navigate(["/login/totp"], { queryParams: { target: this.targetRoute } });
        } else {
          this.loginInvalid = true;
        }
@@ -0,0 +1,43 @@
+<form [formGroup]="form" (ngSubmit)="passwordReset()" *ngIf="!success">
+    <mat-card>
+        <mat-card-content>
+            <h2>{{'password.reset' | i18n}}</h2>
+            <mat-error *ngIf="tokenInvalid">
+                {{'password.reset.tokenInvalid' | i18n}}
+            </mat-error>
+            <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" length="6" 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>
+            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+                {{'password.reset' | i18n}}
+            </button>
+
+            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
+        </mat-card-actions>
+    </mat-card>
+</form>
+
+<mat-card *ngIf="success">
+    <mat-card-content>
+        <h2>{{'password.reset.success.title' | i18n}}</h2>
+        <p>{{'password.reset.success.text' | i18n}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+        <a routerLink="/login" mat-raised-button color="primary">
+            {{'password.reset.login' | i18n}}
+        </a>
+    </mat-card-actions>
+</mat-card>
@@ -0,0 +1,3 @@
+mat-form-field {
+  display: block;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PasswordResetComponent } from './password-reset.component';
+
+describe('PasswordResetComponent', () => {
+  let component: PasswordResetComponent;
+  let fixture: ComponentFixture<PasswordResetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PasswordResetComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordResetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,65 @@
+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';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-password-reset',
+  templateUrl: './password-reset.component.html',
+  styleUrls: ['./password-reset.component.scss']
+})
+export class PasswordResetComponent implements OnInit {
+
+  form: FormGroup;
+  model: any = {};
+  public working: boolean;
+  public success: boolean;
+  public tokenInvalid: boolean = false;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      password: ['', Validators.required],
+      password2: ['', Validators.required]
+    }, {
+      validator: MatchingValidator('password', 'password2')
+    });
+
+    this.route.queryParams.subscribe(params => {
+      if (params.token) {
+        this.model.token = params.token;
+      }
+    });
+
+  }
+
+  passwordReset() {
+    this.working = true;
+    this.authService.passwordReset(this.model).subscribe(response => {
+      this.success = true;
+    }, (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]);
+        }
+      } else {
+        this.tokenInvalid = true;
+      }
+    })
+  }
+
+}
@@ -1,4 +1,4 @@
-<form [formGroup]="form" (ngSubmit)="passwordReset()">
+<form [formGroup]="form" (ngSubmit)="passwordRequest()">
    <mat-card>
        <mat-card-content>
            <h2>{{'password.request' | i18n}}</h2>
@@ -10,15 +10,17 @@
            </mat-form-field>
            
            <mat-form-field>
-                <mat-label>{{'pgp-key.private' | i18n}}</mat-label>
+                <mat-label>{{'pgp.privateKey' | 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}}
+                {{'password.request' | i18n}}
            </button>
+
+            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
        </mat-card-actions>
    </mat-card>
 </form>
@@ -2,7 +2,7 @@ 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';
+import { Router } from '@angular/router';

 var openpgp = require('openpgp');
@Component({
@@ -16,37 +16,39 @@ export class PasswordComponent implements OnInit {
  public working: boolean;
  form: FormGroup;

-  constructor(private formBuilder: FormBuilder, private authService: AuthService) { }
+  constructor(private formBuilder: FormBuilder, private authService: AuthService, private router: Router) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      username: ['', Validators.required],
-      privateKey: ['', Validators.required]
+      privateKey: ['']
    });
  }

-  async passwordReset() {
+  async passwordRequest() {
+    this.working = true;
    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 => {    })
- */
+    this.authService.passwordRequest(this.model.username).subscribe(async response => {
+
+      if (privateKey) {
+        const message = await openpgp.message.readArmored(response);
+
+        const decrypted = await openpgp.decrypt({
+          message: message,
+          privateKeys: [privateKey]
+        });
+        this.working = false;
+        this.router.navigate(['/password-reset'], { queryParams: { token: decrypted.data.trim() } });
+      } else {
+        this.working = false;
+      }
+    })
+
  }

 }
@@ -1,9 +1,9 @@
-<form [formGroup]="form" (ngSubmit)="register()">
+<form [formGroup]="form" (ngSubmit)="register()" *ngIf="!success">
    <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>
+                <a routerLink="/tokens">{{'register.token.missing' | i18n}}</a>
            </mat-error>
            <mat-form-field>
                <input matInput placeholder="{{'username' | i18n}}" formControlName="username"
@@ -59,4 +59,16 @@
            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
        </mat-card-actions>
    </mat-card>
-</form>
+</form>
+
+<mat-card *ngIf="success">
+    <mat-card-content>
+        <h2>{{'register.success.title' | i18n}}</h2>
+        <p>{{'register.success.text' | i18n}}</p>
+    </mat-card-content>
+    <mat-card-actions>
+        <a routerLink="/login" mat-raised-button color="primary">
+            {{'register.login' | i18n}}
+        </a>
+    </mat-card-actions>
+</mat-card>
@@ -22,6 +22,7 @@ export class RegisterComponent implements OnInit {

  form: FormGroup;
  public missingToken: boolean;
+  public success: boolean;
  public working: boolean;
  items = [];
  currentLocale: String;
@@ -73,22 +74,38 @@ export class RegisterComponent implements OnInit {
    if (this.form.valid && !this.working) {
      this.working = true;
      let pgpOption = {
-        userIds: [{ name: this.model.username, email: this.model.email }],
-        numBits: 4096,
+        userIds: [{ name: this.model.username, email: this.model.username + "@we.bstly.de" }],
+        curve: "ed25519",
      }

      var pubKey, privKey
      openpgp.generateKey(pgpOption).then((key) => {
-        privKey = key.privateKeyArmored
-        pubKey = key.publicKeyArmored
+        privKey = key.privateKeyArmored;
+        pubKey = key.publicKeyArmored;
        this.model.publicKey = pubKey;
        this.userService.register(this.model).subscribe((result: any) => {
          result.privateKey = privKey;
+
+          var element = document.createElement('a');
+          element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(privKey));
+          element.setAttribute('download', result.username + ".private.key");
+          element.style.display = 'none';
+          document.body.appendChild(element);
+          element.click();
+          document.body.removeChild(element);
+
          const dialogRef = this.dialog.open(RegisterDialog, {
            closeOnNavigation: false,
            disableClose: true,
            data: result
          });
+
+          dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+              this.success = true;
+            }
+          });
+
          this.working = false;
        }, (error) => {
          this.working = false;
@@ -106,7 +123,6 @@ export class RegisterComponent implements OnInit {
            }
          }
        })
-
      })
    }
  }
@@ -124,9 +140,4 @@ export class RegisterDialog {
    public dialogRef: MatDialogRef<RegisterDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

-  onOkClick(): void {
-    this.dialogRef.close();
-    this.router.navigate(["/login"]);
-  }
-
 }
@@ -1,18 +1,20 @@
 <h1 mat-dialog-title>{{data.username}}</h1>
 <div mat-dialog-content>
-    <h3>Permissions</h3>
+    <h3>{{'permissions' | i18n}}</h3>
    <app-permissions [permissions]="data.permissions"></app-permissions>
-    <h3>Quotas</h3>
+    <h3>{{'quotas' | i18n}}</h3>
    <app-quotas [quotas]="data.quotas"></app-quotas>
+    <h3>{{'pgp.privateKey' | i18n}}</h3>
    <mat-form-field>
-        <mat-label>Private PGP key</mat-label>
+        <qrcode [qrdata]="data.privateKey" [width]="400" [errorCorrectionLevel]="'M'"></qrcode>
+        <mat-label>{{'pgp.privateKey' | i18n}}</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!
+        {{'pgp.privateKey.confirmStore' | i18n}}
    </mat-slide-toggle>

-    <button mat-button (click)="onOkClick()" [disabled]="!data.confirmClose">Ok</button>
+    <button mat-button [disabled]="!data.confirmClose" [mat-dialog-close]="true">{{'ok' | i18n}}</button>
 </div>
@@ -49,8 +49,6 @@ export class UsernameDialog {
        };

        this.username = uniqueNamesGenerator(config);
-
-        console.log(this.username);
    }

    toggle(dict) {
@@ -46,7 +46,8 @@
        <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">
+        <a *ngIf="!auth.authenticated" routerLink="/login" [queryParams]="{ target:'tokens' }" mat-raised-button
+            color="primary">
            <mat-icon>login</mat-icon> {{'login' | i18n}}
        </a>
    </mat-card-actions>
@@ -36,7 +36,7 @@ export class TokensComponent implements OnInit {
    private route: ActivatedRoute) {

    this.currentLocale = this.i18n.getLocale();
-    
+
    this.authService.auth.subscribe(data => {
      this.auth = data;
    })
@@ -97,7 +97,7 @@ export class TokensComponent implements OnInit {
  redeem() {
    if (this.auth.authenticated) {
      this.itemService.redeem().subscribe((data: any) => {
-
+        this.router.navigate(["/account/info"]);
      })
    }
  }
@@ -27,22 +27,41 @@ export class AuthService {
        return this.http.get(environment.apiUrl + "/auth/me");
    }

-    login(username, password) {
-        return this.http.post(environment.apiUrl + "/auth/login", { username: username, password: password });
+    login(loginModel) {
+        return this.http.post(environment.apiUrl + "/auth/login", loginModel);
    }

    logout() {
        return this.http.post(environment.apiUrl + "/auth/logout", {});
    }

-    passwordRequest() {
-        return this.http.post(environment.apiUrl + "/auth/password/request", {});
+    passwordRequest(username) {
+        const headers = new HttpHeaders().set('Content-Type', 'text/plain; charset=utf-8');
+        return this.http.post(environment.apiUrl + "/auth/password/request", username, { headers, responseType: 'text' });
    }

    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' });
+        return this.http.post(environment.apiUrl + "/auth/password/reset", model);
    }

+    isTotpEnabled() {
+        return this.http.get(environment.apiUrl + "/auth/totp");
+    }
+
+    createTotp() {
+        return this.http.put(environment.apiUrl + "/auth/totp", {});
+    }
+
+    enableTotp(code) {
+        return this.http.patch(environment.apiUrl + "/auth/totp", code);
+    }
+
+    removeTotp() {
+        return this.http.delete(environment.apiUrl + "/auth/totp");
+    }
+
+    loginTotp(totpModel) {
+        return this.http.post(environment.apiUrl + "/auth/login/totp", totpModel);
+    }
 }
@@ -8,6 +8,7 @@ import { isEmpty } from 'rxjs/operators';
 export class I18nService {

    locale: String;
+    locales = ["de-informal"];
    i18n: any;

    constructor(private http: HttpClient) {
@@ -17,15 +18,24 @@ export class I18nService {
            browserLocale = browserLocale.split("-")[0];
        }

-        let locale = localStorage.getItem("bstly.locale") || browserLocale || 'en';
+        let locale = localStorage.getItem("bstly.locale") || browserLocale || this.locales[0];

        if (locale == 'de') {
            locale = 'de-informal';
        }

+        if (this.locales.indexOf(locale) == -1) {
+            locale = this.locales[0];
+        }
+
+
        this.setLocale(locale);
    }

+    getLocales() {
+        return this.locales;
+    }
+
    getLocale() {
        return this.locale;
    }
@@ -15,6 +15,10 @@ export class UserService {
        return this.http.post(environment.apiUrl + "/users", userModel);
    }

+    checkModel(userModel) {
+        return this.http.post(environment.apiUrl + "/users/model", userModel);
+    }
+
    password(passwordModel) {
        return this.http.patch(environment.apiUrl + "/users/password", passwordModel);
    }
@@ -1,11 +1,13 @@
-<table mat-table [dataSource]="permissions">
+<table mat-table matSort [dataSource]="permissions" (matSortChange)="sortData($event)">
    <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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'permissions.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let permission"> {{'permissions.' + permission.name | i18n}}
+            <mat-icon *ngIf="permission.addon">add_circle</mat-icon>
+        </td>
    </ng-container>

    <ng-container matColumnDef="expires">
-        <th mat-header-cell *matHeaderCellDef> {{'permissions.expires' | i18n}} </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="expires"> {{'permissions.expires' | i18n}} </th>
        <td mat-cell *matCellDef="let permission">{{permission.expires | date}}</td>
    </ng-container>

@@ -1,4 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { I18nService } from './../../services/i18n.service';

@Component({
  selector: 'app-permissions',
@@ -7,12 +9,33 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class PermissionsComponent implements OnInit {

+
  @Input() permissions;
  permissionColumns = ["name", "expires"];

-  constructor() { }
+  constructor(private i18n: I18nService) { }

  ngOnInit(): void {
  }

+  sortData(sort: Sort) {
+    const data = this.permissions.slice();
+    if (!sort.active || sort.direction === '') {
+      this.permissions = data;
+      return;
+    }
+
+    this.permissions = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'name': return this.compare(this.i18n.get('permissions.' + a.name,[]), this.i18n.get('permissions.' + b.name,[]), isAsc);
+        case 'expires': return this.compare(a.expires, b.expires, isAsc);
+        default: return 0;
+      }
+    });
+  }
+
+  compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
 }
@@ -1,13 +1,21 @@
-<table mat-table [dataSource]="quotas">
+<table mat-table matSort [dataSource]="quotas" (matSortChange)="sortData($event)">

    <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{'quotas.name' | i18n}} </th>
-        <td mat-cell *matCellDef="let quota"> {{quota.name}} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'quotas.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota"> {{'quotas.' + quota.name | i18n}} </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>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="value"> {{'quotas.value' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota"> {{quota.value}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="quotaUnit">
+        <th mat-header-cell *matHeaderCellDef> {{'quotas.unit' | i18n}} </th>
+        <td mat-cell *matCellDef="let quota"> 
+            <span *ngIf="quota.unit">{{'quotas.unit.' + quota.unit | i18n}}</span>
+            <span *ngIf="!quota.unit">#</span>
+        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="quotaColumns"></tr>
@@ -1,4 +1,6 @@
-import { Component, OnInit, Input  } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { I18nService } from './../../services/i18n.service';

@Component({
  selector: 'app-quotas',
@@ -7,11 +9,34 @@ import { Component, OnInit, Input  } from '@angular/core';
 })
 export class QuotasComponent implements OnInit {

+
  @Input() quotas;
-  quotaColumns = ["name", "quota"];
-  constructor() { }
+  quotaColumns = ["name", "quota", "quotaUnit"];
+
+  constructor(private i18n: I18nService) { }

  ngOnInit(): void {
  }

+  sortData(sort: Sort) {
+    const data = this.quotas.slice();
+    if (!sort.active || sort.direction === '') {
+      this.quotas = data;
+      return;
+    }
+
+    this.quotas = data.sort((a, b) => {
+      const isAsc = sort.direction === 'asc';
+      switch (sort.active) {
+        case 'name': return this.compare(this.i18n.get('quotas.' + a.name, []), this.i18n.get('quotas.' + b.name,[]), isAsc);
+        case 'value': return this.compare(a.value, b.value, isAsc);
+        default: return 0;
+      }
+    });
+  }
+
+  compare(a: number | string | String, b: number | string | String, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+  }
+
 }
@@ -22,7 +22,7 @@ export class HtmlComponent implements OnInit {
        const headers = new HttpHeaders()
            .set('content-type', 'text/html');
        this.httpClient.get(
-            './assets/templates/' + this.template + (this.locale ? "." + this.locale : "") + ".html",
+            './assets/templates/' + (this.locale ? this.locale + "/" : "") + this.template + ".html",
            {
                headers: headers,
                responseType: 'text'
				`@@ -0,0 +1 @@`
				`<app-html [template]="'imprint'"></app-html>`
				`@@ -0,0 +1 @@`
				`<app-html [template]="'privacy-policy'"></app-html>`