Make use of JWT configurable

config/environment.dev.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: false,
-  devHost:"http://localhost:3000"
+  baseApiUrl: "http://localhost:8080",
+  jwtEnabled: true
 };

src/app/+hotels/hotels.component.html

@@ -1,3 +1,74 @@
-<p>
-  hotels works!
-</p>
+<div class="panel panel-default">
+  <div class="panel-heading">
+      <h3>Find Hotels</h3>
+  </div>
+  <div class="panel-body">
+  <form [ngFormModel]="hotelForm"
+        (ngSubmit)="findHotels(hotelForm.value)"
+        class="form-inline"
+        [class.has-error]="!hotelForm.valid">
+
+    <div class="form-group"
+      [class.has-error]="!hotelForm.find('description').valid">
+      <label for="descriptionInput">Description</label>
+      <input type="text"
+             id="descriptionInput"
+             placeholder="optional keyword"
+             #desc="ngForm"
+             [ngFormControl]="hotelForm.controls['description']"
+             class="form-control">
+    </div>
+
+    <div class="form-group"
+        [class.has-error]="!hotelForm.find('location').valid">
+      <label for="locationInput">Location</label>
+      <input type="text"
+             id="locationInput"
+             placeholder="eg. 'London', 'France'..."
+             #loc="ngForm"
+             [ngFormControl]="hotelForm.controls['location']"
+             class="form-control">
+    </div>
+
+    <button type="submit" class="btn btn-primary btn-sm">Find Hotels</button>
+  </form>
+</div>
+</div>
+
+<div class="panel panel-default" *ngIf="data">
+    <div class="panel-heading">
+        <h3 class="panel-title">Matching POIs</h3>
+    </div>
+    <div class="panel-body">
+        <div *ngIf="data.length == 0">
+            No matching POI
+        </div>
+        <table *ngIf="data.length > 0" class="table table-striped">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Address</th>
+                    <th>Description</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let line of data">
+                    <td class="header">{{line.name}}</td>
+                    <td>{{line.address}}</td>
+                    <td>{{line.description}}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="panel-footer">
+        <span *ngIf="data.length">
+        {{data.length}} matching point of interests (note that some might not be hotels).</span>
+    </div>
+</div>
+
+<div class="has-error" *ngIf="error && error.message">
+    <div class="help-block">There was an error (<a data-toggle="collapse" data-target="#errorDetail">click for details</a>)
+    </div>
+
+    <div id="errorDetail" class="collapse">{{error | json}}</div>
+</div>

src/app/+hotels/hotels.component.ts

@@ -1,15 +1,72 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Injectable, Inject } from '@angular/core';
+import {
+  CORE_DIRECTIVES,
+  FORM_DIRECTIVES,
+  FormBuilder,
+  ControlGroup,
+  Validators
+} from '@angular/common';
+import { Response } from "@angular/http";
+
+import { UtilityService } from "../shared/utility.service";
+import { environment } from "../";
+import { Observable } from 'rxjs/Rx';
 
 @Component({
   moduleId: module.id,
   selector: 'app-hotels',
+  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
   templateUrl: 'hotels.component.html'
 })
+
+@Injectable()
+
 export class HotelsComponent implements OnInit {
 
-  constructor() {}
+  hotelForm: ControlGroup;
+  utility: UtilityService;
+  data;
+  error;
+
+  constructor(fb: FormBuilder, utility: UtilityService) {
+    this.hotelForm = fb.group({
+       'description': [''],
+      'location':  ['']
+    });
+    this.utility = utility;
+  }
 
   ngOnInit() {
   }
 
-}
+  findHotels(value: any): void {
+    console.log('you searched for hotel:', value);
+    var location = value.location;
+    var description = value.description;
+
+    var url = environment.baseApiUrl + "/api/hotel/";
+    var hasDescription = (description != null && description != "");
+    var hasLocation = (location != null && location != "");
+    if (hasDescription && hasLocation) {
+        url = url + description + "/" + location + "/";
+    } else if (hasLocation) {
+        url = url + "*/" + location + "/";
+    } else if (hasDescription) {
+        url = url + description + "/"
+    }
+
+    this.utility.makeGetRequestObs(url, [])
+    .map((response: Response) => response.json())
+    .subscribe(
+        (success) => {
+            console.log("DEBUG: found " + success.length + " matching hotels");
+            this.data = success;
+            this.error = null;
+        },
+        (error: Response) => {
+            this.data = null;
+            this.error = error.json();
+        }
+    );
+  }
+}

src/app/+login/login.component.html

@@ -7,7 +7,7 @@
         <form role="form" class="form-signin" name="loginForm" novalidate>
         <h3 class="form-signin-heading" [hidden]="!isNew">Please Take a Moment to Create an Account</h3>
         <h3 class="form-signin-heading" [hidden]="isNew">Please Enter Your Username and Password</h3>
-        <div class="alert alert-warning" role="alert" [hidden]="!loginError">{{loginError}}</div>
+        <div class="alert alert-warning" role="alert" [hidden]="!loginError">{{loginError | json}}</div>
         <input type="text" placeholder="Please Enter Your Email Address" required [(ngModel)]="username" (keyup)="loginError=null" class="form-control" />
         <input type="password" placeholder="Enter a password" required="" [(ngModel)]="password" (keyup)="loginError=null" class="form-control" />
         <label class="checkbox">

src/app/environment.ts

@@ -3,5 +3,7 @@
 // The build system defaults to the dev environment
 
 export const environment = {
-  production: false
+  production: false,
+  baseApiUrl: "http://localhost:3000",
+  jwtEnabled: true
 };

src/app/shared/auth.service.ts

@@ -35,14 +35,20 @@ export class AuthService {
 
 login(email: string, password: string) {
   return new Promise((resolve, reject) => {
-    this.utility.makeGetRequest(environment.devHost + "/api/user/login", [email, md5(password)]).then((result) => {
+    this.utility.makeGetRequest(environment.baseApiUrl + "/api/user/login", [email, md5(password)]).then((result) => {
       if (result) {
-        let cToken = result as IToken;
-        if (cToken.status != "success") {
-          reject(cToken.status);
+        if (environment.jwtEnabled) {
+            let cToken = result as IToken;
+            if (cToken.status != "success") {
+              reject(cToken.status);
+            }
+            localStorage.setItem("user", this.jwt.decodeToken(cToken.token).user);
+            resolve();
+        } else {
+            let user = result as any;
+            localStorage.setItem("user", user.name);
+            resolve();
         }
-        localStorage.setItem("user", this.jwt.decodeToken(cToken.token).user);
-        resolve();
       } else {
         reject("User Error");
       }
@@ -55,15 +61,21 @@ login(email: string, password: string) {
 register(email: string, password:string) {
   let cUser: IUser = { user: email, password: md5(password) };
   return new Promise((resolve, reject) => {
-    this.utility.makePostRequest(environment.devHost + "/api/user/login", [], cUser).then((result) => {
-      if (result) {
-        let cToken = result as IToken;
-        if (cToken.status != "success") {
-          reject(cToken.status);
-        }
-        localStorage.setItem("user", this.jwt.decodeToken(cToken.token).user);
-        resolve();
+    this.utility.makePostRequest(environment.baseApiUrl + "/api/user/login", [], cUser).then((response) => {
+      let result = response as any;
+      if (environment.jwtEnabled && result.data.token) {
+          try {
+              var store = this.jwt.decodeToken(result.data.token).user
+              localStorage.setItem("user", store);
+              resolve();
+          } catch (e) {
+              reject("Backend created account but returned a malformed token: " + e);
+          }
+      } else if (result.data.name) {
+          localStorage.setItem("user", result.data.name);
+          resolve();
       } else {
+        console.log("DEBUG: registration failure, got " + JSON.stringify(result.data));
         reject("Registration Failure");
       }
     }, (error) => {

src/app/shared/utility.service.ts

@@ -1,5 +1,8 @@
 import { Injectable, Inject } from "@angular/core";
-import { Http, Request, RequestMethod, Headers, URLSearchParams, HTTP_PROVIDERS } from "@angular/http";
+import { Http, Request, RequestMethod, Headers, URLSearchParams, HTTP_PROVIDERS, Response } from "@angular/http";
+import { Observable } from 'rxjs/Rx';
+import 'rxjs/add/operator/do'
+import 'rxjs/add/operator/map'
 
 @Injectable()
 
@@ -61,19 +64,35 @@ export class UtilityService {
         });
     }
 
-    makeGetRequest(url: string, params: Array<string>) {
+    makeGetRequestObs(url: string, params: Array<string>) {
         var fullUrl: string = url;
         if(params && params.length > 0) {
             fullUrl = fullUrl + "/" + params.join("/");
         }
         console.log("DEBUG: GET FULL URL:",fullUrl);
+        return this.http.get(fullUrl)
+        .do((success) => {
+            console.log("DEBUG: GET RESPONSE:",fullUrl,":",success.json());
+        },
+        (error) => {
+                console.log("DEBUG: GET ERROR:",fullUrl,":",error);
+            })
+    }
+
+    private extractData(res: Response) {
+        let body = res.json();
+        return body.data || { };
+    }
+
+    makeGetRequest(url: string, params: Array<string>) {
+        let obs = this.makeGetRequestObs(url, params);
         return new Promise((resolve, reject) => {
-            this.http.get(fullUrl)
+            obs
+            .map(this.extractData)
             .subscribe((success) => {
-                console.log("DEBUG: GET RESPONSE:",fullUrl,":",success.json());
-                resolve(success.json());
+                resolve(success);
             }, (error) => {
-                reject(error.json());
+                reject(error);
             });
         });
     }