refactor(client): use HttpClient, new angular-jwt

Author: Awk34

Diff for: templates/app/_package.json

@@ -58,7 +58,6 @@
     "@angular/compiler": "^5.0.1",
     "@angular/core": "^5.0.1",
     "@angular/forms": "^5.0.1",
-    "@angular/http": "^5.0.1",
     "@angular/platform-browser": "^5.0.1",
     "@angular/platform-browser-dynamic": "^5.0.1",
     "@angular/router": "^5.0.1",

Diff for: templates/app/client/app/app.module.js

@@ -5,13 +5,6 @@ import {
     Provider,<% } %>
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import {
-    Http,
-    HttpModule,
-    BaseRequestOptions,<% if(filters.ts || filters.flow) { %>
-    RequestOptions,
-    RequestOptionsArgs,<% } %>
-} from '@angular/http';
 import { HttpClientModule } from '@angular/common/http';
 import {
     removeNgStyles,
@@ -22,40 +15,18 @@ import {
 import { UIRouterModule } from 'ui-router-ng2';<% } %>
 <%_ if (filters.ngroute) { -%>
 import { RouterModule, Routes } from '@angular/router';<% } %>
-import { AuthHttp, AuthConfig } from 'angular2-jwt';
 
 import { AppComponent } from './app.component';
 import { MainModule } from './main/main.module';
 import { DirectivesModule } from '../components/directives.module';<% if(filters.auth) { %>
+import { JwtModule } from '@auth0/angular-jwt';
 import { AccountModule } from './account/account.module';
 import { AdminModule } from './admin/admin.module';<% } %>
 
 import constants from './app.constants';
 
-export function getAuthHttp(http) {
-    return new AuthHttp(new AuthConfig({
-        noJwtError: true,
-        globalHeaders: [{'Accept': 'application/json'}],
-        tokenGetter: (() => localStorage.getItem('id_token')),
-    }), http);
-}
-
-let providers: Provider[] = [{
-    provide: AuthHttp,
-    useFactory: getAuthHttp,
-    deps: [Http]
-}];
-
-if(constants.env === 'development') {
-    @Injectable()
-    class HttpOptions extends BaseRequestOptions {
-        merge(options: RequestOptionsArgs): RequestOptions {
-            options.url = `http://localhost:9000${options.url}`;
-            return super.merge(options);
-        }
-    }
-
-    providers.push({ provide: RequestOptions, useClass: HttpOptions });
+export function tokenGetter() {
+    return localStorage.getItem('id_token');
 }
 
 const appRoutes: Routes = [{ path: '',
@@ -64,11 +35,14 @@ const appRoutes: Routes = [{ path: '',
 }];
 
 @NgModule({
-    providers,
     imports: [
         BrowserModule,
-        HttpModule,
-        HttpClientModule,
+        HttpClientModule,<% if(filters.auth) { %>
+        JwtModule.forRoot({
+            config: {
+                tokenGetter,
+            }
+        }),<% } %>
         <%_ if (filters.uirouter) { -%>
         UIRouterModule.forRoot(),<% } %>
         <%_ if (filters.ngroute) { -%>
@@ -81,7 +55,7 @@ const appRoutes: Routes = [{ path: '',
     declarations: [
         AppComponent,
     ],
-    bootstrap: [AppComponent]
+    bootstrap: [AppComponent],
 })
 export class AppModule {
     static parameters = [ApplicationRef];

Diff for: templates/app/client/components/auth(auth)/auth.service.js

@@ -1,9 +1,8 @@
 import { Injectable, EventEmitter, Output } from '@angular/core';
-import { AuthHttp } from 'angular2-jwt';
 import { UserService } from './user.service';
-import { Http } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import 'rxjs/add/operator/toPromise';
-import { safeCb, extractData } from '../util';
+import { safeCb } from '../util';
 import constants from '../../app/app.constants';
 
 // @flow
@@ -12,22 +11,18 @@ class User {
     name = '';
     email = '';
     role = '';
-    $promise = undefined;
 }
 
 @Injectable()
 export class AuthService {
     _currentUser: User = new User();
     @Output() currentUserChanged = new EventEmitter(true);
     userRoles = constants.userRoles || [];
-    Http;
-    AuthHttp;
     UserService;
 
-    static parameters = [Http, AuthHttp, UserService];
-    constructor(<%= private() %>http: Http, <%= private() %>authHttp: AuthHttp, <%= private() %>userService: UserService) {
-        this.Http = http;
-        this.AuthHttp = authHttp;
+    static parameters = [HttpClient, UserService];
+    constructor(<%= private() %>http: HttpClient, <%= private() %>userService: UserService) {
+        this.http = http;
         this.UserService = userService;
 
         if(localStorage.getItem('id_token')) {
@@ -69,12 +64,11 @@ export class AuthService {
      * @return {Promise}
      */
     login({email, password}, callback) {
-        return this.Http.post('/auth/local', {
+        return this.http.post('/auth/local', {
             email,
             password
         })
             .toPromise()
-            .then(extractData)
             .then(res => {
                 localStorage.setItem('id_token', res.token);
                 return this.UserService.get().toPromise();

Diff for: templates/app/client/components/auth(auth)/user.service.js

@@ -1,7 +1,6 @@
 // @flow
 import { Injectable } from '@angular/core';
-import { Response } from '@angular/http';
-import { AuthHttp } from 'angular2-jwt';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
@@ -15,42 +14,27 @@ type UserType = {
     email?: string;
 };
 
-function handleError(err) {
-    return Observable.throw(err.json() || 'Server error');
-}
-
 @Injectable()
 export class UserService {
-    AuthHttp;
-
-    static parameters = [AuthHttp];
-    constructor(<%= private() %>authHttp: AuthHttp) {
-        this.AuthHttp = authHttp;
+    static parameters = [HttpClient];
+    constructor(<%= private() %>http: HttpClient) {
+        this.http = http;
     }
 
     query(): Observable<UserType[]> {
-        return this.AuthHttp.get('/api/users/')
-            .map((res: Response) => res.json())
-            .catch(handleError);
+        return this.http.get('/api/users/');
     }
     get(user<% if(filters.ts) { %>: UserType<% } %> = {id: 'me'}): Observable<UserType> {
-        return this.AuthHttp.get(`/api/users/${user.id || user._id}`)
-            .map((res: Response) => res.json())
-            .catch(handleError);
+        return this.http.get(`/api/users/${user.id || user._id}`);
     }
     create(user: UserType) {
-        return this.AuthHttp.post('/api/users/', user)
-            .map((res: Response) => res.json())
-            .catch(handleError);
+        return this.http.post('/api/users/', user);
     }
     changePassword(user, oldPassword, newPassword) {
-        return this.AuthHttp.put(`/api/users/${user.id || user._id}/password`, {oldPassword, newPassword})
-            .map((res: Response) => res.json())
-            .catch(handleError);
+        return this.http.put(`/api/users/${user.id || user._id}/password`, {oldPassword, newPassword});
     }
     remove(user) {
-        return this.AuthHttp.delete(`/api/users/${user.id || user._id}`)
-            .map(() => user)
-            .catch(handleError);
+        return this.http.delete(`/api/users/${user.id || user._id}`)
+            .map(() => user);
     }
 }

Diff for: templates/app/client/components/util.js

@@ -6,7 +6,6 @@ import {
     isFunction,
     noop,
 } from 'lodash';
-import { Response } from '@angular/http';
 
 /**
  * Return a callback or noop function
@@ -60,8 +59,3 @@ export function isSameOrigin(url, origins) {
     });
     return origins.length >= 1;
 }
-
-export function extractData(res: Response) {
-    if(!res.text()) return {};
-    return res.json() || { };
-}