<app-login>

  </app-login>

<div class="page-header" >
   <div class="container">
    <h1>Smrt File Comparison Tool</h1>



      <div *ngIf="authService.getUser()" class="navLinks">
        <a  [routerLink]="['/home']"> Home</a>
        <a [routerLink]="['/about']"> About App</a>
        <a [routerLink]="['/copybook']"> View CopyBooks</a>

        <a [routerLink]="['/datadictionary']">View Data Dictionaries</a>

        <a [routerLink]="['/compare']">Compare Two smrt files</a>

        <a [routerLink]="['/datafileview']">View Data Files</a>

        <a [routerLink]="['/login']">Login</a>
        <a [routerLink]="['/protected']">Protected</a>
    </div>


  </div>
</div>

<div id="content">
  <div class="container">
   <router-outlet></router-outlet>
  </div>
</div>

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  message: string;

  constructor(public authService: AuthService) {
    this.message = '';
  }

  login(username: string, password: string): boolean {
    this.message = '';
    if (!this.authService.login(username, password)) {
      this.message = 'Incorrect credentials.';
      setTimeout(function() {
        this.message = '';
      }.bind(this), 2500);
    }
    return false;
  }

  logout(): boolean {
    this.authService.logout();
    return false;
  }

}

<h1>Login</h1>

<div class="alert alert-danger" role="alert" *ngIf="message">
  {{ message }}
</div>

<form class="form-inline" *ngIf="!authService.getUser()">
  <div class="form-group">
    <label for="username">User: (type <em>user</em>)</label>
    <input class="form-control" name="username" #username>
  </div>

  <div class="form-group">
    <label for="password">Password: (type <em>password</em>)</label>
    <input class="form-control" type="password" name="password" #password>
  </div>

  <a class="btn btn-default" (click)="login(username.value, password.value)">
    Submit
  </a>
</form>

<div class="well" *ngIf="authService.getUser()">
  Logged in as <b>{{ authService.getUser() }}</b>
  <a href (click)="logout()">Log out</a>
</div>