import { Component , OnInit } from '@angular/core' ; import { Router , ActivatedRoute } from '@angular/router' ; import { FormBuilder , FormGroup , Validators } from '@angular/forms' ; import { first } from 'rxjs/operators' ; import { AlertService , AuthenticationService } from '@app/_services' ; @ Component ( { templateUrl : 'login.component.html' } ) export class LoginComponent implements OnInit { loginForm : FormGroup ; loading = false ; submitted = false ; returnUrl : string ; constructor ( private formBuilder , private route , private router , private authenticationService , private alertService ) { if ( this . authenticationService . currentUserValue ) { this . router . navigate ( [ '/' ] ) ; } } ngOnInit ( ) { this . loginForm = this . formBuilder . group ( { username : [ '' , Validators . required ] , password : [ '' , Validators . required ] } ) ; this . returnUrl = this . route . snapshot . queryParams [ 'returnUrl' ] || '/' ; } get f ( ) { return this . loginForm . controls ; } onSubmit ( ) { this . submitted = true ; if ( this . loginForm . invalid ) { return ; } this . loading = true ; this . authenticationService . login ( this . f . username . value , this . f . password . value ) . pipe ( first ( ) ) . subscribe ( data => { this . router . navigate ( [ this . returnUrl ] ) ; } , error => { this . alertService . error ( error ) ; this . loading = false ; } ) ; } }