D-Net

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

import {Observable}       from 'rxjs/Observable';

import {ActivatedRoute, Router} from '@angular/router';

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

import {User,Session} from './utils/helper.class';

import {RouterHelper} from '../utils/routerHelper.class';

@Component({

    selector: 'user',

    template: `

<div *ngIf="!server" class="uk-margin-top">

     <div *ngIf="errorCode == '1'" class="uk-alert uk-alert-warning">

      The requested page requires authentication. Please login.

    </div>

    <div *ngIf="errorCode == '2'" class="uk-alert uk-alert-warning">

      You are not authorized to use the requested page

    </div>

    <div *ngIf="errorCode == '3'" class="uk-alert uk-alert-warning">

      The session has expired. Please log in again or continue <a (click)="redirect();">browsing as a guest</a>.

    </div>

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

       <fieldset>

          <legend>Login Form</legend>

          <div class="-row">

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

          </div>

          <div class="-row">

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

          </div>

          <div class="-row">

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

          </div>

       </fieldset>

    </form>

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

    <div *ngIf="loggedIn">

        <div  class="uk-alert uk-alert-success">

        Hello {{user.fullname}}!

        </div>

        <button (click)="logout()" class=" uk-button uk-button-default">Log out</button>

    </div>

</div>

    `

})

export class UserComponent {

    public user: User;

    public loggedIn: boolean = false;

    public server: boolean = true;

    public errorMessage: string;

    public username: string = "";

    public password: string = "";

    private sub:any;private sublogin:any;

    public errorCode: string = "";

    public redirectUrl: string = "";

    public routerHelper:RouterHelper = new RouterHelper();

    constructor( private router: Router, private _loginService: LoginService, private  route: ActivatedRoute ) {}

    ngOnInit() {

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

        this.server = false;

      }

      this.loggedIn = Session.isLoggedIn();

      this.user = Session.getUser();

      this.errorMessage = "";

      this.sub =  this.route.queryParams.subscribe(params => {

        this.errorCode = params["errorCode"];

        this.redirectUrl = params["redirectUrl"];

        this.loggedIn = Session.isLoggedIn();

        this.user = Session.getUser();

        this.errorMessage = "";

      });

    }

    ngOnDestroy(){

      this.sub.unsubscribe();

      if(this.sublogin){

        this.sublogin.unsubscribe();

      }

    }

    logout(){

        if(Session.isLoggedIn()){

          Session.removeUser();

        }

        this.loggedIn = false;

        this.user = new User();

        this.username = "";

        this.password = "";

        this.redirect();

    }

    redirect(){

      if(this.redirectUrl && this.redirectUrl != null && this.redirectUrl != ""){

        this.redirectUrl = decodeURIComponent(this.redirectUrl);

        var baseUrl = this.redirectUrl;

        var queryParams = "";

        var paramsArray =[];

        var valuesArray =[];

        if(this.redirectUrl.indexOf('?') != -1){

          baseUrl = this.redirectUrl.split('?')[0];

          queryParams =  this.redirectUrl.split('?')[1];

        }

        if(queryParams != ""){

          var queryParamsArray = queryParams.split('&');

          for(var i = 0; i < queryParamsArray.length; i++){

            paramsArray.push(queryParamsArray[i].split("=")[0]);

            valuesArray.push(queryParamsArray[i].split("=")[1]);

          }

          this.router.navigate([baseUrl], { queryParams: this.routerHelper.createQueryParams(paramsArray,valuesArray)});

        }else{

          this.router.navigate([baseUrl]);

        }

      }else{

        this.router.navigate(['/search/find']);

      }

    }

    login() {

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

            data => {

                this.user = data;

                this.loggedIn = true;

                this.username = "";

                this.password = "";

                this.errorCode = "";

                this.redirect();

            },

            err => {

              console.log(err);

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

                  this.errorMessage = "Wrong username";

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

                  this.errorMessage = "Wrong password";

              }

              this.username = "";

              this.password = "";

              this.errorCode = "";

            }

        );

    }

}