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 { AuthenticationService } from 'src/app/services/authentication.service' ; import { ToastrService } from 'ngx-toastr' ; @ Component ( { selector : 'app-login-page' , templateUrl : './login-page.component.html' , styleUrls : [ './login-page.component.css' ] } ) export class LoginPageComponent implements OnInit { loginForm : FormGroup = this . formBuilder . group ( { username : [ '' , Validators . required ] , password : [ '' , Validators . required ] } ) ; loading = false ; submitted = false ; returnUrl : string = '' ; constructor ( private formBuilder , private route , private router , private authenticationService , private toastr ) { } ngOnInit ( ) { this . loginForm ; this . authenticationService . logout ( ) ; this . returnUrl = this . route . snapshot . queryParams [ 'returnUrl' ] || '/dashboard' ; } 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 . toastr . error ( error ) ; this . loading = false ; } ) ; } }