D-Net

import {Component, ElementRef} from '@angular/core';

import {Observable}       from 'rxjs/Observable';

import {LoginService} from '../services/login.service';

import {User} from '../utils/entities/user';

@Component({

    selector: 'login',

    template: `

    <!--form *ngIf="!loggedIn" class="uk-form uk-width-medium-1-3"-->

    <form *ngIf="!loggedIn" class="uk-form uk-flex uk-flex-center">

       <fieldset>

          <legend>Login Form</legend>

          <div class="uk-form-row">

             <input placeholder="Text input" type="text" name="username" [(ngModel)]="username">

          </div>

          <div class="uk-form-row">

             <input placeholder="Password input" type="password" name="password" [(ngModel)]="password">

          </div>

          <div class="uk-form-row">

             <button (click)="login()" class="uk-button">Login</button>

          </div>

       </fieldset>

    </form>

    <div *ngIf="!loggedIn && errorMessage.length > 0" class="uk-alert uk-alert-danger">{{errorMessage}}</div>

    <div *ngIf="loggedIn" class="uk-alert uk-alert-success">

        Hello {{user.fullname}}!

    </div>

        <!--div class="container-fluid">

            <div *ngIf="!loggedIn">

                <div *ngIf="errorMessage.length > 0" class="alert alert-danger" role="alert">

                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

                    {{errorMessage}}

                </div>

                <div class="row">

                    <div class="input-group">

                        <label>Username:</label>

                        <input [(ngModel)]="user.username" type="username">

                    </div>

                </div>

                <div class="row">

                    <div class="input-group">

                        <label for="password">Password:</label>

                        <input [(ngModel)]="user.password" type="password">

                    </div>

                </div>

                <button class="btn" (click)="login()"

                    type="submit">Login

                </button>

            </div>

            <div *ngIf="loggedIn">

                Hello {{user.fullname}}!

            </div>

        </div-->

    `

})

export class LoginComponent {

    private user: User;

    private loggedIn: boolean;

    private errorMessage: string;

    private username: string = "";

    private password: string = "";

    constructor( private _loginService: LoginService ) {}

    ngOnInit() {

        this.loggedIn = false;

        if( typeof localStorage !== 'undefined') {

            if(localStorage.getItem("user")) {

                this.user = JSON.parse(localStorage.getItem("user"));

                this.loggedIn = true;

            }

        }

        /*if(this.loggedIn == undefined) {

            this.user = new User();

            this.loggedIn = false;

        }*/

        this.errorMessage = "";

    }

    login() {

        this._loginService.authenticate(/*this.user*/this.username, this.password).subscribe(

            data => {

                this.user = data;

                this.loggedIn = true;

            },

            err => {

              console.log(err);

              if(err.status == "404") {

                  this.errorMessage = "Wrong username";

              } else if(err.status == "401") {

                  this.errorMessage = "Wrong password";

              }

            }

        );

    }

}