<form [formGroup]="form" class="form-horizontal" role="form" (submit)="onLoginSubmit()">
  <div class="row">
    <!--<div class="col-md-3"></div>-->
    <div class="col-md-12">
      <h2 class="page-header">Login Page</h2>
    </div>
  </div>
  <div class="row show-hide-message">
    <div [ngClass]="messageClass">
      {{message}}
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 field-label-responsive">
      <label for="username">Username</label>
    </div>
    <div class="col-md-6" [ngClass]="{'has-errors':form.controls.username.errors && form.controls.username.dirty,
     'has-success': form.controls.username.valid && form.controls.username.dirty }">
      <div class="form-group">
        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
          <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
          <input type="text" name="username" class="form-control" formControlName="username" id="username"
                 placeholder="Enter Username" required autofocus>
        </div>

        <ul class="help-block" style="color: red">
          <li *ngIf="form.controls.username.errors?.required && form.controls.username.dirty ">
            This field is required
          </li>
        </ul>
        <!--<ul class="help-block" style="color: red">

          <li
            *ngIf="(form.controls.username.errors?.minlength || form.controls.username.errors?.maxlength) && form.controls.username.dirty">
            Minimum Character:3, Maximum Character:15
          </li>
          <li *ngIf="form.controls.username.errors?.validateUsername && form.controls.username.dirty">
            Username must be atleast 3 characters but no more than 15
          </li>
          <li *ngIf="usernameMessage">{{usernameMessage}}</li>
        </ul>
-->
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-control-feedback">
        <span class="text-danger align-middle"></span>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3 field-label-responsive">
      <label for="password">Password</label>
    </div>
    <div class="col-md-6" [ngClass]="{'has-errors': form.controls.password.errors && form.controls.password.dirty,
     'has-success': form.controls.password.valid && form.controls.password.dirty }">
      <div class="form-group has-danger">
        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
          <div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-key"></i></div>
          <input type="password" name="password" class="form-control" formControlName="password" id="password"
                 placeholder="Password" required>
        </div>

      </div>
    </div>
    <div class="col-md-3">
      <div class="form-control-feedback">
                        <span class="text-danger align-middle">
                            <!--<i class="fa fa-close"> Example Error Message</i>-->
                        </span>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <button [disabled]="!form.valid || processing" type="submit" class="btn btn-success"><i class="fa fa-user-plus"></i> Signin</button>
    </div>
  </div>
</form>

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';
import { AuthService } from "../../services/auth.service";
import { Router } from "@angular/router";
import {AuthGuard} from "../../guards/auth.guard";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  message;
  messageClass;
  form;
  processing = false;
  previousUrl;

  constructor(
    private formBuilder: FormBuilder,
    private authService: AuthService,
    private router: Router,
    private authGuard: AuthGuard
  ) {
    this.createForm();
  }

  createForm() {
    this.form = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  disableForm() {
    this.form.controls['username'].disable();
    this.form.controls['password'].disable();
  }

  enableForm() {
    this.form.controls['username'].enable();
    this.form.controls['password'].enable();
  }

  onLoginSubmit() {
    this.processing = true;
    this.disableForm();
    const user = {
      username: this.form.get('username').value,
      password: this.form.get('password').value
    }
    this.authService.login(user).subscribe(data => {
      if(!data.success){
        this.messageClass = 'alert alert-danger';
        this.message = data.message;
        this.processing = false;
        this.enableForm();

      } else {
        this.messageClass = 'alert alert-success';
        this.message = data.message;
        this.authService.storeUserData(data.token, data.user);
        setTimeout(() => {
          if(this.previousUrl){
            this.router.navigate([this.previousUrl]);
          } else {
            this.router.navigate(['dashboard']);
          }
        },2000);

      }
    });
  }

  ngOnInit() {
    if(this.authGuard.redirectUrl){
      this.messageClass = 'alert alert-danger';
      this.message = 'You must be logged in to view that page.'
      this.previousUrl = this.authGuard.redirectUrl;
      this.authGuard.redirectUrl= undefined;
    }
  }

}

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired } from "angular2-jwt";

@Injectable()
export class AuthService {

  domain = "http://localhost:8080";
  authToken;
  user;
  options;

  constructor(private http: Http) {
  }

  createAuthenticationHeaders() {
    this.loadToken();
    this.options = new RequestOptions({
      headers: new Headers({
        'Content-Type': 'application/json',
        'authorization': this.authToken
      })
    })

  }

  loadToken() {
    const token = localStorage.getItem('token');
    this.authToken = token;
  }

  registerUser(user) {
    return this.http.post(this.domain + '/authentication/register', user).map(res => res.json());
  }

  checkUsername(username) {
    return this.http.get(this.domain + '/authentication/checkUsername/' + username).map(res => res.json());
  }

  checkEmail(email) {
    return this.http.get(this.domain + '/authentication/checkEmail/' + email).map(res => res.json());
  }

  login(user) {
    return this.http.post(this.domain + '/authentication/login', user).map(res => res.json());
  }

  logout() {
    this.authToken = null;
    this.user = null;
    localStorage.clear();
  }

  storeUserData(token, user) {
    localStorage.setItem('token', token);
    localStorage.setItem('user', JSON.stringify(user));
    this.authToken = token;
    this.user = user;
  }

  getProfile() {
    this.createAuthenticationHeaders();
    return this.http.get(this.domain + '/authentication/profile', this.options).map(res => res.json());
  }


  getPublicProfile(username) {
    this.createAuthenticationHeaders();
    return this.http.get(this.domain + '/authentication/publicProfile/' + username, this.options).map(res => res.json());
  }

  loggedIn() {
    return tokenNotExpired();
  }
}

<button id="btn1" onclick="document.getElementById('id01').style.display='block'" style="width:auto; display: none ">Login</button>

<form [formGroup]="form" class="modal-content animate" role="form" (submit)="onLoginSubmit()" *ngIf="!authAdminService.loggedIn()">
  <div class="imgcontainer">
    <img src="../../assets/livegujarati_logo.png" alt="Avatar" class="avatar">
  </div>
  <div class="row show-hide-message" style="margin: 0">
    <div [ngClass]="messageClass">
      {{message}}
    </div>
  </div>

  <div class="container">
    <label><b>Username</b></label>
    <div [ngClass]="{'has-errors':form.controls.username.errors && form.controls.username.dirty,
     'has-success': form.controls.username.valid && form.controls.username.dirty }">
      <input type="text" name="username" class="form-control" formControlName="username" id="username"
             placeholder="Enter Username" required autofocus>
      <ul class="help-block" style="color: red">
        <li *ngIf="form.controls.username.errors?.required && form.controls.username.dirty ">
          This field is required
        </li>
      </ul>
    </div>

    <label><b>Password</b></label>
    <div [ngClass]="{'has-errors': form.controls.password.errors && form.controls.password.dirty,
     'has-success': form.controls.password.valid && form.controls.password.dirty }">
      <input type="password" name="password" class="form-control" formControlName="password" id="password"
             placeholder="Password" required>
    </div>

    <button [disabled]="!form.valid || processing" type="submit" class="btn btn-success"><i class="fa fa-user-plus"></i> Signin</button>
    <input type="checkbox" checked="checked"> Remember me
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

import {Component, OnInit} from '@angular/core';
    import {FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';
    import { Router } from "@angular/router";
    import {AdminAuthGuard} from "../guards/admin.auth.guard";
    import {AuthadminService} from "../adminservices/authadmin.service";

    @Component({
      selector: 'app-admin-login',
      templateUrl: './admin-login.component.html',
      styleUrls: ['./admin-login.component.css']
    })
    export class AdminLoginComponent implements OnInit {
      message;
      messageClass;
      form;
      processing = false;
      previousUrl;

      constructor(
        private formBuilder: FormBuilder,
        private authAdminService: AuthadminService,
        private router: Router,
        private adminAuthGuard: AdminAuthGuard
      ) {
        this.createForm();
      }

      createForm() {
        this.form = this.formBuilder.group({
          username: ['', Validators.required],
          password: ['', Validators.required]
        });
      }

      disableForm() {
        this.form.controls['username'].disable();
        this.form.controls['password'].disable();
      }

      enableForm() {
        this.form.controls['username'].enable();
        this.form.controls['password'].enable();
      }

      onLoginSubmit() {
        this.processing = true;
        this.disableForm();
        const user = {
          username: this.form.get('username').value,
          password: this.form.get('password').value
        }
        this.authAdminService.admindashboard(user).subscribe(data => {
          if(!data.success){
            this.messageClass = 'alert alert-danger';
            this.message = data.message;
            this.processing = false;
            this.enableForm();

          } else {
            this.messageClass = 'alert alert-success';
            this.message = data.message;
            this.authAdminService.storeUserData(data.token, data.user);
            setTimeout(() => {
              if(this.previousUrl){
                this.router.navigate(['admin/admin-login']);

              } else {

                this.router.navigate(['admin/admin-dashboard']);

              }
            },2000);

          }
        });
      }

      ngOnInit() {
        if(this.adminAuthGuard.redirectUrl){
          this.messageClass = 'alert alert-danger';
          this.message = 'You must be logged in to view that page.'
          this.previousUrl = this.adminAuthGuard.redirectUrl;
          this.adminAuthGuard.redirectUrl= undefined;
        }
      }

    }

**authadmin.service.ts**

import { Injectable } from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired } from "angular2-jwt";

@Injectable()
export class AuthadminService {

  domain = "http://localhost:8080";
  authAdminToken;
  user;
  options;

  constructor(private http: Http) {
  }

  createAuthenticationHeaders() {
    this.loadToken();
    this.options = new RequestOptions({
      headers: new Headers({
        'Content-Type': 'application/json',
        'authorization': this.authAdminToken
      })
    })

  }

  loadToken() {
    const token = localStorage.getItem('token');
    this.authAdminToken = token;
  }

  admindashboard(user)
  {
    return this.http.post(this.domain + '/authentication/admin', user).map(res => res.json());
  }
  logout() {
    this.authAdminToken = null;
    this.user = null;
    localStorage.clear();
  }

  storeUserData(token, user) {
    localStorage.setItem('token', token);
    localStorage.setItem('user', JSON.stringify(user));
    this.authAdminToken = token;
    this.user = user;
  }

    getAdminProfile() {
      this.createAuthenticationHeaders();
      return this.http.get(this.domain + '/authentication/adminProfile', this.options).map(res => res.json());
    }


  loggedIn() {
    return tokenNotExpired();
  }
}