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

@Component({
  templateUrl: './login.component.html',
})
export class LoginComponent {
  message: string;
  constructor(public authService: AuthService, public router: Router) {
    this.setMessage();
  }

  setMessage() {
    this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
  }

  login() {
    this.message = 'Trying to log in ...';

    this.authService.login().subscribe(() => {
      this.setMessage();
      if (this.authService.isLoggedIn) {
        // Get the redirect URL from our auth service
        // If no redirect has been set, use the default
        let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/home';

        // Redirect the user
        this.router.navigate([redirect]);
      }
    });
  }

  logout() {
    this.authService.logout();
    this.setMessage();
  }


}

<h1>Please login to proceed</h1>
<br />
<br />
<form >
    <table border="0">
        <tr>
            <td>
                <div class="form-group">
                    <label for="uname" style="display: inline-block">Username:* &emsp;</label>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input style="display: inline-block" id="uname" type="text" class="form-control"
                           placeholder="Username">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group">
                    <label for="pwd" style="display: inline-block">Password:* &emsp;</label>
                </div>
            </td>
            <td>
                <div class="form-group">
                    <input style="display: inline-block" type="password" class="form-control"
                            placeholder="Password">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <p style="color: red">* Required Fields</p>
            </td>
        </tr>
        <tr>
            <td>
                <p>
                    <button  class="btn btn-info" (click)="login()" *ngIf="!authService.isLoggedIn">Login</button>
               </p>
            </td>
    </table>
</form>