import { Component , OnDestroy } from "@angular/core" ; import { Account } from "../../types/Account" ; import { Credentials } from "../../types/Credentials" ; import { AuthenticationSandbox } from "../../authentication.sandbox" ; import { Router } from "@angular/router" ; import { Subscription } from "rxjs/Subscription" ; @ Component ( { selector : "authentication" , template : `
    <div class="container">
        <panel [header]="'You are not authenticated!'">
            <login *ngIf="curTab === 0" (authenticate)="login($event)" [isBusy]="isBusy$|async"></login>
            <register *ngIf="curTab === 1" (authenticate)="register($event)" [isBusy]="isBusy$|async"></register>
            <a href="javascript:void(0)" (click)="enableTab(1)" *ngIf="curTab===0">I don't have an account yet</a>
            <a href="javascript:void(0)" (click)="enableTab(0)" *ngIf="curTab===1">I have an account already</a>
        </panel>
    </div>
      ` } ) export class AuthenticationContainer implements OnDestroy { curTab : number = 0 ; subscriptions : Array < Subscription > = [ ] ; isBusy$ = this . sb . isBusy$ ; constructor ( private sb , private router ) { } enableTab ( tabIndex ) { this . curTab = tabIndex ; } login ( credentials ) { this . subscriptions . push ( this . sb . login ( credentials ) . subscribe ( ( ) => { this . router . navigate ( [ "/" ] ) ; } ) ) ; } register ( account ) { this . subscriptions . push ( this . sb . register ( account ) . subscribe ( ( ) => { this . router . navigate ( [ "/" ] ) ; } ) ) ; } ngOnDestroy ( ) { this . subscriptions . forEach ( sub => sub . unsubscribe ( ) ) ; } }