diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts
index 653b828616..28a1502baf 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import {Component} from "@angular/core";
 import {Principal} from "./principal";
-import {Response, RequestOptions, Headers, Http} from "@angular/http";
+import {Response} from "@angular/http";
 import {Observable} from "rxjs";
 import {NgForm} from "@angular/forms";
 import {Book} from "./book";
+import {HttpService} from "./http.service";
 
 @Component({
   selector: 'app-root',
@@ -22,12 +23,12 @@ export class AppComponent {
   private password: String = '';
 
 
-  principal: Principal = new Principal(false, []);
-  // principal: Principal = new Principal(true, [new Authority("ROLE_USER")]);
+  principal: Principal = new Principal(false, [], null);
+  // principal: Principal = new Principal(true, [new Authority("ROLE_USER")], {username: 'user', password: 'password'});
 
   loginFailed: boolean = false;
 
-  constructor(private http: Http){}
+  constructor(private httpService: HttpService){}
 
   ngOnInit(): void {
 
@@ -35,14 +36,8 @@ export class AppComponent {
 
   onLogin(form: NgForm) {
     this.loginFailed = false;
-    let headers = new Headers({'Content-Type': 'application/json'});
-    this.username = form.value.username;
-    this.password = form.value.password;
-
-    headers.append('Authorization','Basic ' + btoa(form.value.username + ':' + form.value.password));
-    headers.append('X-Requested-With','XMLHttpRequest');
-    let options = new RequestOptions({headers: headers});
-    this.http.get("/me", options)
+    this.credentials = {username: form.value.username, password: form.value.password};
+    this.httpService.login(this.credentials)
       .map((response: Response) => response.json())
       .catch((error: Response) => {
         if (error.status === 401) {
@@ -51,7 +46,7 @@ export class AppComponent {
         console.log(error);
         return Observable.throw(error);
       })
-      .map((data: any) => new Principal(data.authenticated, data.authorities))
+      .map((data: any) => new Principal(data.authenticated, data.authorities, this.credentials))
       .subscribe((principal: Principal) => {
         console.log(principal);
         this.principal = principal;
@@ -59,11 +54,7 @@ export class AppComponent {
   }
 
   onLogout() {
-    let headers = new Headers({'Content-Type': 'application/json'});
-    headers.append('Authorization','Basic ' + btoa(this.username + ':' + this.password));
-    headers.append('X-Requested-With','XMLHttpRequest');
-    let options = new RequestOptions({headers: headers});
-    this.http.post("/logout", '', options)
+    this.httpService.logout(this.principal.credentials)
       .catch((error: Response) => {
         console.log(error);
         return Observable.throw(error);
@@ -73,7 +64,7 @@ export class AppComponent {
           this.loginFailed = false;
           this.credentials.username = '';
           this.credentials.password = '';
-          this.principal = new Principal(false, []);
+          this.principal = new Principal(false, [], null);
         }
       });
   }
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts
index ca3046b7bc..663c4f7793 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.module.ts
@@ -8,6 +8,7 @@ import {RatingComponent} from "./rating/rating.component";
 import {ClickStopPropagationDirective} from "./click-stop-propagation.directive";
 import {BookDetailComponent} from "./book/book-detail/book-detail.component";
 import {BookListComponent} from "./book/book-list/book-list.component";
+import {HttpService} from "./http.service";
 
 @NgModule({
   declarations: [
@@ -23,7 +24,7 @@ import {BookListComponent} from "./book/book-list/book-list.component";
     HttpModule,
     NgbModule.forRoot()
   ],
-  providers: [],
+  providers: [HttpService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
index a64c40cfdb..af1fd10018 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/book/book-list/book-list.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit, Input, Output, EventEmitter} from "@angular/core";
 import {Principal} from "../../principal";
 import {Book} from "../../book";
+import {Http} from "@angular/http";
 
 @Component({
   selector: 'app-book-list',
@@ -19,7 +20,7 @@ export class BookListComponent implements OnInit {
   isAddNewBook: boolean = false;
   selectedBook: Book = null;
 
-  constructor() { }
+  constructor(private http: Http) { }
 
   ngOnInit() {
     this.loadBooks();
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/http.service.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/http.service.ts
new file mode 100644
index 0000000000..1b03c9d8e4
--- /dev/null
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/http.service.ts
@@ -0,0 +1,25 @@
+import {Injectable} from "@angular/core";
+import {Observable} from "rxjs";
+import {Response, Http, Headers, RequestOptions} from "@angular/http";
+
+@Injectable()
+export class HttpService {
+
+  constructor(private http: Http) { }
+
+  login(user: any): Observable<Response> {
+    let headers = new Headers({'Content-Type': 'application/json'});
+    headers.append('Authorization','Basic ' + btoa(user.username + ':' + user.password));
+    headers.append('X-Requested-With','XMLHttpRequest');
+    let options = new RequestOptions({headers: headers});
+    return this.http.get("/me", options)
+  }
+
+  logout(user: any): Observable<Response> {
+    let headers = new Headers({'Content-Type': 'application/json'});
+    headers.append('Authorization','Basic ' + btoa(user.username + ':' + user.password));
+    headers.append('X-Requested-With','XMLHttpRequest');
+    let options = new RequestOptions({headers: headers});
+    return this.http.post("/logout", '', options)
+  }
+}
diff --git a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/principal.ts b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/principal.ts
index 5003c231c2..a786c56c3e 100644
--- a/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/principal.ts
+++ b/spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/principal.ts
@@ -4,10 +4,12 @@
 export class Principal {
   public authenticated: boolean;
   public authorities: Authority[] = [];
+  public credentials: any;
 
-  constructor(authenticated: boolean, authorities: any[]) {
+  constructor(authenticated: boolean, authorities: any[], credentials: any) {
     this.authenticated = authenticated;
     authorities.map(auth => this.authorities.push(new Authority(auth.authority)))
+    this.credentials = credentials;
   }
 
   isAdmin() {