AngularAuthenticationService

This project was generated with Angular CLI version 1.4.1. This is only a TEST.

##Install with NPM $ npm install angular-authentication-service

##app.module.ts

import { Component, OnInit } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { AuthenticationService, User, LogIn, GlobalVarsService } from 'angular-authentication-service';

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
// Observable class extensions
import 'rxjs/add/observable/of';

// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  user: User;
  credentials: LogIn;

  constructor(private router: Router,private authenticationservice: AuthenticationService) {
    this.authenticationservice.AuthURI = 'https://adx-pnjsas3.cunninghampathology.com:8000/authenticate';
  }

  ngOnInit(): void {
    // reset login status
    this.user = new User;
    this.credentials = new LogIn;

    this.credentials.username = "dgil";
    this.credentials.password = "Needles2017.";
    this.credentials.app = "cvn";
    this.authenticationservice.login(this.credentials).subscribe(data => {
      if (data) {
        this.user = data;
        localStorage.setItem('token', data.access_token);
      } else {
        localStorage.setItem('token', '');
      }
    }, err => {
      console.log('error: ', err);
    });
  }

}

##Component Module Usage

import { FormControl, FormControlName, FormGroup, Validators } from '@angular/forms';
import { AuthenticationService,User,LogIn,GlobalVarsService } from 'angular-authentication-service';

export class LoginComponent implements OnInit {
    @Input() loading: boolean = false;
    user: User;
    credentials: LogIn;

    @Input() error: string = '';

    form = new FormGroup({
        username: new FormControl('', [Validators.required, Validators.minLength(3)]),
        password: new FormControl('', [Validators.required, Validators.minLength(8)])
    });

    get username(): any { return this.form.get('username'); }
    get password(): any { return this.form.get('password'); }

    constructor(private globalservice: GlobalVarsService,private authenticationservice: AuthenticationService){

    }

    ngOnInit() {
        // reset login status
        this.user = new User;
        this.credentials = new LogIn;
        this.credentials.app = "MyAppName";
        this.loading = false;
        this.error = '';
    }

    login(): void {
        this.loading = true;
        this.authenticationservice.AuthURI = '/api/authenticate';

        this.authenticationservice.login(this.credentials).subscribe(data => {
            if (data) {
                this.user = data;
                this.globalservice.UserData = data;
                localStorage.setItem('token', data.access_token);
                this.globalservice.isAuthenticated = true;
                //this.router.navigate(['home']);
            } else {
                this.newFunction();
                this.loading = false;
                localStorage.setItem('token', '');
                this.globalservice.isAuthenticated = false;
            }
        }, err => {
            this.handleError(err);
        });

    }

    handleError = function (err) {
        this.loading = false;

        if (err.status) {
            this.error = err.status + ': ' + err.statusText;
        } else {
            this.error = err.message;
        }

        localStorage.setItem('token', '');
        this.globalservice.authenticated(false);
    }
}

##HTML Template Usage

<md-card style="width:250px;height:250px;margin-top:15%;margin-left:40%;">
  <form [formGroup]="form" (ngSubmit)="!form.invalid && login()">
    <md-card-title>Login</md-card-title>
    <div fxLayout.gt-sm="row">
      <md-form-field>
        <input mdInput type="text" [(ngModel)]="credentials.username" formControlName="username" placeholder="User Name">
        <md-error *ngIf="username.invalid" class="help-block">Username is required</md-error>
      </md-form-field>
    </div>
    <div fxLayout.gt-sm="row">
      <md-form-field>
        <input mdInput type="password" [(ngModel)]="credentials.password" formControlName="password" placeholder="Password">
        <md-error *ngIf="password.invalid" class="help-block">Password is required</md-error>
      </md-form-field>
    </div>
    <div fxLayout.gt-sm="row">
      <button type="submit" md-raised-button>Login</button>
      <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
      />
    </div>
    <div style="width:300px;height:300px;">{{error}}</div>
  </form>
</md-card>