From d2eef88c1fe5e54de6ed4225689a6361e008db4e Mon Sep 17 00:00:00 2001
From: matthewhegarty <mrhegarty@gmail.com>
Date: Mon, 21 Nov 2016 22:58:37 +0000
Subject: [PATCH] 1.  Added json content-type header 2.  Enabled http.post call
 to handle error 3.  Enabled login component to catch errors and disallow
 authentication

---
 app/_services/authentication.service.ts | 34 ++++++++++++++++++++++---
 app/login/login.component.ts            | 26 +++++++++++++------
 systemjs.config.js                      |  1 +
 3 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/app/_services/authentication.service.ts b/app/_services/authentication.service.ts
index 7a6e9632..db5f3663 100644
--- a/app/_services/authentication.service.ts
+++ b/app/_services/authentication.service.ts
@@ -1,21 +1,33 @@
 import { Injectable } from '@angular/core';
-import { Http, Headers, Response } from '@angular/http';
-import { Observable } from 'rxjs';
+import {Http, Headers, Response, RequestOptions} from '@angular/http';
+import {Observable} from "rxjs";
 import 'rxjs/add/operator/map'
+import 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/catch';
 
 @Injectable()
 export class AuthenticationService {
+
+    //private url = 'http://localhost:8000/api-token-auth/';  // FOR REMOTE TESTING (also remove fake backend in app.module.ts)
+    private url = '/api/authenticate';                        // FOR LOCAL TESTING
+
+    private options: RequestOptions;
+
     public token: string;
 
     constructor(private http: Http) {
         // set token if saved in local storage
         var currentUser = JSON.parse(localStorage.getItem('currentUser'));
         this.token = currentUser && currentUser.token;
+
+        let headers = new Headers({ 'Content-Type': 'application/json' });
+        this.options = new RequestOptions({ headers: headers });
     }
 
     login(username: string, password: string): Observable<boolean> {
-        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
+        return this.http.post(this.url, JSON.stringify({ username: username, password: password }), this.options)
             .map((response: Response) => {
+
                 // login successful if there's a jwt token in the response
                 let token = response.json() && response.json().token;
                 if (token) {
@@ -31,7 +43,8 @@ export class AuthenticationService {
                     // return false to indicate failed login
                     return false;
                 }
-            });
+            })
+            .catch(this.handleError);
     }
 
     logout(): void {
@@ -39,4 +52,17 @@ export class AuthenticationService {
         this.token = null;
         localStorage.removeItem('currentUser');
     }
+
+    private handleError (error: Response | any) {
+        let errMsg: string;
+        if (error instanceof Response) {
+            const body = error.json() || '';
+            const err = body.error || JSON.stringify(body);
+            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+        } else {
+            errMsg = error.message ? error.message : error.toString();
+        }
+        console.error(errMsg);
+        return Observable.throw(errMsg);
+    }
 }
\ No newline at end of file
diff --git a/app/login/login.component.ts b/app/login/login.component.ts
index ab175fc8..bc2a810b 100644
--- a/app/login/login.component.ts
+++ b/app/login/login.component.ts
@@ -25,13 +25,23 @@ export class LoginComponent implements OnInit {
     login() {
         this.loading = true;
         this.authenticationService.login(this.model.username, this.model.password)
-            .subscribe(result => {
-                if (result === true) {
-                    this.router.navigate(['/']);
-                } else {
-                    this.error = 'Username or password is incorrect';
-                    this.loading = false;
-                }
-            });
+            .subscribe(
+                result => this.handleResponse(result),
+                error => this.handleError(error)
+            );
+    }
+
+    handleResponse(result: boolean) {
+        if (result === true) {
+            this.router.navigate(['/']);
+        } else {
+            this.error = 'Username or password is incorrect';
+            this.loading = false;
+        }
+    }
+
+    handleError(error: string) {
+        this.error = 'Error caught during authentication: ' + error;
+        this.loading = false;
     }
 }
diff --git a/systemjs.config.js b/systemjs.config.js
index 478fa932..c5e823f9 100644
--- a/systemjs.config.js
+++ b/systemjs.config.js
@@ -34,6 +34,7 @@
                 defaultExtension: 'js'
             },
             rxjs: {
+                main: 'bundles/Rx.js',
                 defaultExtension: 'js'
             }
         }