update

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