login.component.html

<div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circular'; strategy:'overlay'; color:'accent'">

  <div layout="column" layout-fill>
    <md-toolbar color="primary" class="md-whiteframe-z1">
      <span>Login</span>
    </md-toolbar>
    <div class="md-content" layout-padding flex>
      <div layout-gt-xs="row" layout-align-gt-xs="center start" class="margin">
        <div flex-gt-xs="50">


          <form [formGroup]="_loginForm" (submit)="_login($event)">
            <md-card tdMediaToggle="gt-xs" [mediaClasses]="['push-top-lg']">
              <md-card-title>
                <md-icon class="md-icon-logo" svgIcon="assets:covalent"></md-icon>
                Login
              </md-card-title>
              <md-card-subtitle>Sign in via your current developer account</md-card-subtitle>
              <md-card-subtitle *ngIf="_errorMessage" style="color: red;">{{_errorMessage}}</md-card-subtitle>
              <md-divider></md-divider>
              <md-card-content>
                <div layout="row">
                  <md-input-container flex>
                    <input mdInput placeholder="Email" type="email"
                           formControlName="email">
                    <span md-prefix><md-icon>email</md-icon></span>
                    <md-hint align="start">
                    <span [hidden]="!_loginForm.controls.email.errors?.required || _loginForm.controls.email.pristine"
                          class="tc-red-600">Email is Required</span>
                      <span [hidden]="_loginForm.controls.email.errors?.incorrectMailFormat !== true
                      || _loginForm.controls.email.pristine"
                            class="tc-red-600">Email is not valid</span>
                    </md-hint>
                  </md-input-container>
                </div>
                <div layout="row">
                  <md-input-container flex>
                    <input mdInput placeholder="Password" type="password"
                           formControlName="password">
                    <span md-prefix><md-icon>lock</md-icon></span>
                    <md-hint align="start">
                    <span
                      [hidden]="!_loginForm.controls.password.errors?.required || _loginForm.controls.password.pristine"
                      class="tc-red-600">Password is Required</span>
                    </md-hint>
                  </md-input-container>
                </div>
              </md-card-content>
              <md-divider></md-divider>
              <md-card-actions layout="row">
                <button flex md-raised-button color="primary" [disabled]="!_loginForm.valid" type="submit">
                  Sign In
                </button>
              </md-card-actions>
            </md-card>
          </form>

        </div>
      </div>
    </div>
  </div>

</div>

login.component.scss

:host /deep/ {
    .md-input-prefix {
        width: 44px;
        text-align: center;
    }
    md-divider {
        display: block;
        border-top-style: solid;
        border-top-width: 1px;
    }
}

login.component.ts

import {Component, AfterViewInit} from '@angular/core';
import {Router} from '@angular/router';

import {TdLoadingService} from '@covalent/core';
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
import {GlobalValidator} from "../shared/global.validator";
import {LoginService} from "./login.service";

@Component({
  selector: 'qs-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent {

  private _loginForm: FormGroup;
  private _errorMessage: string = "";
  overlayStarSyntax: boolean = false;


  constructor(private _fb: FormBuilder,
              private _loginService: LoginService,
              private _router: Router,
              private _loadingService: TdLoadingService) {
    this._initLoginForm();
  }

  _login(event): void {
    console.log(this._loginForm.value);
    this._loadingService.register('overlayStarSyntax');

    if (event.isTrusted && this._loginForm.valid && this._loginForm.dirty) {
      this._loginService.login(this._loginForm.value)
        .subscribe(
          res => {
            console.log(res);
            if (res.success) {
              console.log('Logged in');

              this._loadingService.resolve('overlayStarSyntax');


              this._router.navigate(['/leaf-admin']);
            }
          },
          error => {
            if (error.status === 401) {
              console.log(JSON.parse(error._body).reason);
              this._errorMessage = JSON.parse(error._body).reason;
            }
            if (error.status === 400) {
              console.log(JSON.parse(error._body).reason);
              this._errorMessage = "Looks like input data is wrong";
            }
            if (error.status === 409) {
              console.log(JSON.parse(error._body).reason);
              this._errorMessage = JSON.parse(error._body).reason;
            }
            if (error.status === 500) {
              this._errorMessage = "Something went wrong";
            }
            this._loadingService.resolve('overlayStarSyntax');

          }
        )
    } else {
      console.log("Event is not trusted or form is not dirty");
    }

  }

  _initLoginForm() {
    this._loginForm = this._fb.group({
      email: ['', Validators.compose([Validators.required, GlobalValidator.mailFormat])],
      password: ['', Validators.required]
    });
  }
}

login.module.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
import {ReactiveFormsModule} from "@angular/forms";
import {CommonModule} from "@angular/common";
import {RouterModule, Routes} from "@angular/router";

import {LoginComponent} from "./login.component";
import {CovalentCoreModule, CovalentLoadingModule} from "@covalent/core";

const routes: Routes = [
  {path: '', component: LoginComponent}
];

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    CovalentCoreModule,
    CovalentLoadingModule
  ],
  declarations: [LoginComponent],
  providers: []
})

export class LoginModule {
}

login.service.ts

import {Injectable} from "@angular/core";
import {Http, Headers, RequestOptions} from "@angular/http";
import {Observable} from "rxjs";
import 'rxjs/add/operator/map';
import {ConfigService} from "../shared/services/config.service";
import {JwtHelper} from "angular2-jwt";
import {ExtendedHttpService} from "../shared/services/extended-http.service";

@Injectable()
export class LoginService {

  constructor(private _http: ExtendedHttpService, private jwtHelper: JwtHelper) {

  }

  public isAuthorized(): boolean {

    if (localStorage.getItem("id_token")) {
      return true;
    } else {
      return false;
    }

  }

  public logout(): boolean {
    localStorage.removeItem("id_token");
    localStorage.removeItem("profile");
    localStorage.removeItem("refresh_token");
    localStorage.removeItem("dev_id");

    return true;
  }

  public getUserProfile() {
    return localStorage.getItem("profile") ? JSON.parse(localStorage.getItem("profile")) : {};
  }

  public setUserProfile(profile) {
    localStorage.setItem("profile", JSON.stringify(profile));
    console.log("User Profile Set");
  }

  public login(userData): Observable<any> {
    const url = ConfigService.authServerApiUrl + "/developers/login";
    const body = JSON.stringify(userData);
    const headers = new Headers({
      "Content-Type": "application/json"
    });

    const options = new RequestOptions({
      headers: headers
    });

    return this._http.post(url, body, options)
      .map(response => {
        if (response.status !== 201) {
          return Observable.throw("Error from server");
        }
        const res = response.json();

        if (!res.data.access_token || !res.data.refresh_token || !res.data.developer_id) {
          this.logout();
          return Observable.throw("Session is not set");
        }

        localStorage.setItem("id_token", res.data.access_token);
        this.setUserProfile(this.jwtHelper.decodeToken(res.data.access_token));
        localStorage.setItem("refresh_token", res.data.refresh_token);
        localStorage.setItem("dev_id", res.data.developer_id);

        console.log("LOCAL STORAGE: session set");
        return res;

      }).catch((error): any => {
        return Observable.throw(error || 'Login Service Error');
      });
  }

  public refreshtoken() {
    console.log("inside it");
    if (!localStorage.getItem("refresh_token") || !localStorage.getItem("dev_id")) {
      console.log("logout");

      this.logout();
      return false;
      // return Observable.throw("refresh token not found");
    }

    const dev_id = localStorage.getItem("dev_id");
    const refresh_token = localStorage.getItem("refresh_token");

    const url = ConfigService.authServerApiUrl + "/" + dev_id + "/token";
    const headers = new Headers({
      "Content-Type": "application /json",
      "Authorization": refresh_token
    });
    const options = new RequestOptions({
      headers: headers
    });

    this._http.get(url, options)
      .map(response => {
        if (response.status !== 201) {
          return false;
          // return Observable.throw("Error from server");
        }
        const res = response.json();

        if (!res.data.access_token || !res.data.developer_id) {
          this.logout();

          return false;// return Observable.throw("Session is not set");
        }

        localStorage.setItem("id_token", res.data.access_token);
        this.setUserProfile(this.jwtHelper.decodeToken(res.data.access_token));
        localStorage.setItem("dev_id", res.data.developer_id);

        console.log("SESSION REFRESHED");
        return true;

      }).catch((error): any => {
      return false;
      // return Observable.throw(error || 'Login Service Error');
    });

  }
}