Angular web app

webapp/.gitignore

@@ -0,0 +1,43 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+typings
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Generated files
+app/**/*.js
+app/**/*.js.map
+/nbproject/private/

webapp/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Jason Watmore
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

webapp/README.md

@@ -0,0 +1,9 @@
+# Webapp 
+
+This is the front-end of our application. It is done using Angular 2
+
+## It's not fully working yet.
+
+## Steps to run it
+* npm install
+* npm start

webapp/app.css

@@ -0,0 +1,3 @@
+.help-block {
+    font-size: 12px;
+}

webapp/app/_guards/auth.guard.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+
+    constructor(private router: Router) { }
+
+    canActivate() {
+        if (localStorage.getItem('currentUser')) {
+            // logged in so return true
+            return true;
+        }
+
+        // not logged in so redirect to login page
+        this.router.navigate(['/login']);
+        return false;
+    }
+}

webapp/app/_guards/index.ts

@@ -0,0 +1 @@
+export * from './auth.guard';

webapp/app/_helpers/fake-backend.ts

@@ -0,0 +1,57 @@
+import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod } from '@angular/http';
+import { MockBackend, MockConnection } from '@angular/http/testing';
+
+export function fakeBackendFactory(backend: MockBackend, options: BaseRequestOptions) {
+    // configure fake backend
+    backend.connections.subscribe((connection: MockConnection) => {
+        let testUser = { username: 'test', password: 'test', firstName: 'Test', lastName: 'User' };
+
+        // wrap in timeout to simulate server api call
+        setTimeout(() => {
+
+            // fake authenticate api end point
+            if (connection.request.url.endsWith('/api/authenticate') && connection.request.method === RequestMethod.Post) {
+                // get parameters from post request
+                let params = JSON.parse(connection.request.getBody());
+
+                // check user credentials and return fake jwt token if valid
+                if (params.username === testUser.username && params.password === testUser.password) {
+                    connection.mockRespond(new Response(
+                        new ResponseOptions({ status: 200, body: { token: 'fake-jwt-token' } })
+                    ));
+                } else {
+                    connection.mockRespond(new Response(
+                        new ResponseOptions({ status: 200 })
+                    ));
+                }
+            }
+
+            // fake users api end point
+            if (connection.request.url.endsWith('/api/users') && connection.request.method === RequestMethod.Get) {
+                // check for fake auth token in header and return test users if valid, this security is implemented server side
+                // in a real application
+                if (connection.request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
+                    connection.mockRespond(new Response(
+                        new ResponseOptions({ status: 200, body: [testUser] })
+                    ));
+                } else {
+                    // return 401 not authorised if token is null or invalid
+                    connection.mockRespond(new Response(
+                        new ResponseOptions({ status: 401 })
+                    ));
+                }
+            }
+
+        }, 500);
+
+    });
+
+    return new Http(backend, options);
+}
+
+export let fakeBackendProvider = {
+    // use fake backend in place of Http service for backend-less development
+    provide: Http,
+    useFactory: fakeBackendFactory,
+    deps: [MockBackend, BaseRequestOptions]
+};

webapp/app/_helpers/index.ts

@@ -0,0 +1 @@
+export * from './fake-backend';

webapp/app/_models/index.ts

@@ -0,0 +1 @@
+export * from './user';

webapp/app/_models/user.ts

@@ -0,0 +1,6 @@
+export class User {
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+}

webapp/app/_services/authentication.service.ts

@@ -0,0 +1,50 @@
+import {Injectable} from '@angular/core';
+import {Http, Headers, Response, RequestOptions} from '@angular/http';
+import {Observable} from 'rxjs';
+import 'rxjs/add/operator/map'
+
+@Injectable()
+export class AuthenticationService {
+    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;
+    }
+
+    login(username: string, password: string): Observable<boolean> {
+        let credentials = 'password=1234&username=apssouza22@gmail.com&grant_type=password&scope=write&client_secret=123456&client_id=todo-app';
+        let headers = new Headers({
+            'Content-Type' : 'application/x-www-form-urlencoded'
+            'Accept': 'application/json',
+            'Access-Control-Allow-Origin': '*'
+        });
+
+        let options = new RequestOptions({headers: headers});
+        return this.http.post(
+            'http://todo-app:123456@localhost:8016/accounts/oauth/test',
+            credentials,
+            options
+        )
+            .map((response: Response) => {
+                console.log(response);
+                // login successful if there's a jwt token in the response
+                let token = response.json() && response.json().token;
+                if (token) {
+                    this.token = token;
+                    localStorage.setItem(
+                        'currentUser', JSON.stringify({username: username, token: token})
+                    );
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+    }
+
+    logout(): void {
+        this.token = null;
+        localStorage.removeItem('currentUser');
+    }
+}

webapp/app/_services/index.ts

@@ -0,0 +1,2 @@
+export * from './authentication.service';
+export * from './user.service';

webapp/app/_services/todo.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions, Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import 'rxjs/add/operator/map'
+
+import { AuthenticationService } from './index';
+import { User } from '../_models/index';
+
+@Injectable()
+export class UserService {
+    constructor(
+        private http: Http,
+        private authenticationService: AuthenticationService) {
+    }
+
+    getUsers(): Observable<User[]> {
+        // add authorization header with jwt token
+        let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });
+        let options = new RequestOptions({ headers: headers });
+
+        // get users from api
+        return this.http.get('localhost:8018/todos', options)
+            .map((response: Response) => response.json());
+    }
+}

webapp/app/_services/user.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions, Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import 'rxjs/add/operator/map'
+
+import { AuthenticationService } from './index';
+import { User } from '../_models/index';
+
+@Injectable()
+export class UserService {
+    constructor(
+        private http: Http,
+        private authenticationService: AuthenticationService) {
+    }
+
+    getUsers(): Observable<User[]> {
+        // add authorization header with jwt token
+        let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });
+        let options = new RequestOptions({ headers: headers });
+
+        // get users from api
+        return this.http.get('localhost:8018/users', options)
+            .map((response: Response) => response.json());
+    }
+}

webapp/app/app.component.html

@@ -0,0 +1,18 @@
+<!-- main app container -->
+<div class="jumbotron">
+    <div class="container">
+        <div class="col-sm-8 col-sm-offset-2">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>
+
+<!-- credits -->
+<div class="text-center">
+    <p>
+        <a href="http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial" target="_top">Angular 2 JWT Authentication Example & Tutorial</a>
+    </p>
+    <p>
+        <a href="http://jasonwatmore.com" target="_top">JasonWatmore.com</a>
+    </p>
+</div>

webapp/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'app',
+    templateUrl: 'app.component.html'
+})
+
+export class AppComponent { }

webapp/app/app.module.ts

@@ -0,0 +1,44 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+// used to create fake backend
+import { fakeBackendProvider } from './_helpers/index';
+import { MockBackend, MockConnection } from '@angular/http/testing';
+import { BaseRequestOptions } from '@angular/http';
+
+import { AppComponent }  from './app.component';
+import { routing }        from './app.routing';
+
+import { AuthGuard } from './_guards/index';
+import { AuthenticationService, UserService } from './_services/index';
+import { LoginComponent } from './login/index';
+import { HomeComponent } from './home/index';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        routing
+    ],
+    declarations: [
+        AppComponent,
+        LoginComponent,
+        HomeComponent
+    ],
+    providers: [
+        AuthGuard,
+        AuthenticationService,
+        UserService,
+
+        // providers used to create fake backend
+        //fakeBackendProvider,
+        //MockBackend,
+        //BaseRequestOptions
+    ],
+    bootstrap: [AppComponent]
+})
+
+export class AppModule { }

webapp/app/app.routing.ts

@@ -0,0 +1,15 @@
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoginComponent } from './login/index';
+import { HomeComponent } from './home/index';
+import { AuthGuard } from './_guards/index';
+
+const appRoutes: Routes = [
+    { path: 'login', component: LoginComponent },
+    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
+
+    // otherwise redirect to home
+    { path: '**', redirectTo: '' }
+];
+
+export const routing = RouterModule.forRoot(appRoutes);

webapp/app/home/home.component.html

@@ -0,0 +1,11 @@
+<div class="col-md-6 col-md-offset-3">
+    <h1>Home</h1>
+    <p>You're logged in with JWT!!</p>
+    <div>
+        Users from secure api end point:
+        <ul>
+            <li *ngFor="let user of users">{{user.firstName}} {{user.lastName}}</li>
+        </ul>
+    </div>
+    <p><a [routerLink]="['/login']">Logout</a></p>
+</div>