import { Component , OnInit } from '@angular/core' ; import { NgForm } from '@angular/forms' ; import { Router } from '@angular/router' ; import { AuthService } from './auth.service' ; import { Store } from '@ngrx/store' ; import { State } from '../state/app.state' ; import { getMaskUserName } from './state/user.reducer' ; import * as UserActions from './state/user.actions' ; @ Component ( { templateUrl : './login.component.html' , styleUrls : [ './login.component.css' ] } ) export class LoginComponent implements OnInit { pageTitle = 'Log In' ; maskUserName : boolean ; constructor ( private store , private authService , private router ) { } ngOnInit ( ) { this . store . select ( getMaskUserName ) . subscribe ( maskUserName => this . maskUserName = maskUserName ) ; } cancel ( ) { this . router . navigate ( [ 'welcome' ] ) ; } checkChanged ( ) { this . store . dispatch ( UserActions . maskUserName ( ) ) ; } login ( loginForm ) { if ( loginForm && loginForm . valid ) { const userName = loginForm . form . value . userName ; const password = loginForm . form . value . password ; this . authService . login ( userName , password ) ; if ( this . authService . redirectUrl ) { this . router . navigateByUrl ( this . authService . redirectUrl ) ; } else { this . router . navigate ( [ '/products' ] ) ; } } } }