src/app/pages/login/login.component.ts

import { Component, OnInit, ViewChildren, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthenticationService } from '../../services/authentication.service';
import { SessionContext } from '../../common/session-context';
import { LoginCredentials } from '../../model/login-credentials';
import { User } from '../../model/user';
import { MessageService, MessageDefines } from '../../services/message.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, AfterViewInit {
  @ViewChildren('username') usernameInput;

  constructor(
    private router: Router,
    private authService: AuthenticationService,
    private sessionContext: SessionContext,
    private messageService: MessageService
  ) { }

  ngOnInit() {
    localStorage.clear();
  }

  ngAfterViewInit() {
    this.usernameInput.first.nativeElement.focus();
  }


  private onLogin(usr: string) {
   
    this.sessionContext.setCurrUser(usr);
    this.messageService.loginLogoff$.emit(MessageDefines.MSG_LOG_IN_SUCCEEDED);
   
    this.goToOverview();
  }

  private setError(showErr: boolean) {
    if (showErr) {
      document.getElementById('error-message').classList.remove('hidden');
    } else {
      document.getElementById('error-message').classList.add('hidden');
    }
  }

  public login(name: string, pw: string) {
    
    this.setError(false);
    const creds = new LoginCredentials();
    creds.userName = name;
    creds.password = pw;
    this.authService.login(creds)
      .subscribe(usr => this.onLogin(usr),
      error => {
        console.log(error);
        this.setError(true);
      });
  }

  public goToOverview() {
    this.router.navigate(['/overview']);
  }

}