import { Component , Injectable } from "@angular/core" ; import { CommBroker } from "../../services/CommBroker" ; import { Consts } from "../../Conts" ; import { Router } from "@angular/router" ; import "rxjs/add/observable/from" ; import "rxjs/add/observable/fromEvent" ; import "rxjs/add/operator/map" ; import "rxjs/add/operator/bufferCount" ; import "rxjs/add/operator/filter" ; import "rxjs/add/operator/scan" ; import "rxjs/add/operator/do" ; import "rxjs/add/observable/range" ; import { AppStore } from "angular2-redux-util" ; import { ToastrService } from "ngx-toastr" ; export class User { public id : string ; public name : string ; public pass : string ; public gender : string ; constructor ( obj ? ) { this . id = obj && obj . id || Math . random ( ) ; this . name = obj && obj . name || 'anonymous' ; this . pass = obj && obj . pass || '' ; this . gender = obj && obj . gender || 'male' ; } } @ Injectable ( ) @ Component ( { selector : 'LoginPanel' , template : `
        <div id="appLogin" style="">
            <form class="form-signin" role="form">
                <h2 class="form-signin-heading"></h2>
                <input #userName id="userName" type="text" value="{{user}}" class="form-control" data-localize="username" placeholder="Type anything" required autofocus>
                <input #userPass id="userPass" type="password" value="{{pass}}" class="form-control" data-localize="password" placeholder="Type anything" required>
                <label class="checkbox">
                    <input id="rememberMe" type="checkbox" checked value="remember-me">
                    <span> Remember me </span></label>
                <button id="loginButton" (click)="authUser(userName.value, userPass.value)" class="btn btn-lg btn-primary btn-block" type="submit">
                    Sign in
                </button>
                <hr class="hrThin"/>
                <a [routerLink]="['/ForgotPass']">Forgot password</a>
                <div id="languageSelectionLogin"></div>
            </form>
        </div>

        <!-- <a [routerLink]="['/EntryPanelNoId', {id: 123}']">To forgot pass</a> -->
        <!-- <a [routerLink]="['/App1']">Direct to App1</a><br/> -->
        <!-- <a [routerLink]="['/App2']">Direct to App2</a><br/> -->
        <small>I am Login component and I am inside EntryPanel</small>` } ) export class LoginPanel { user : string ; pass : string ; myRouter : Router ; unsub : Function ; constructor ( private appStore , router , private commBroker , public toastrService ) { this . myRouter = router ; var user = commBroker . getValue ( Consts . Values ( ) . USER_NAME ) ; this . user = user || '' ; this . pass = user || '' ; this . unsub = appStore . subscribe ( ( objectPath , oldVal , newVal ) => { console . log ( '%s changed from %s to %s' , objectPath , oldVal , newVal ) ; } , 'notify' , true ) ; } private authUser ( i_user , i_pass ) { this . onLogin ( ) ; } private onLogin ( ) { this . toastrService . warning ( "Please wait, Authenticating..." ) ; setTimeout ( ( e ) => { this . myRouter . navigate ( [ '/AppManager' ] ) ; } , 2000 ) ; event . preventDefault ( ) ; return false ; } public set loginName ( name ) { this . user = name ; } toString ( ) { } ngOnDestroy ( ) { this . unsub ( ) ; } }