Permalink
Browse files

rc6 update

  • Loading branch information...
1 parent 860a1b9 commit ccb4e7c92560d56d91a4088b9c6446a256850826 @chenkie chenkie committed Sep 10, 2016
Showing with 1,389 additions and 2,854 deletions.
  1. +8 −11 .gitignore
  2. +8 −20 README.md
  3. +14 −0 client/.editorconfig
  4. +8 −11 client/.gitignore
  5. +2 −2 client/LICENSE
  6. +55 −4 client/README.md
  7. +31 −0 client/app/app.component.css
  8. +25 −0 client/app/app.component.ts
  9. +36 −0 client/app/app.module.ts
  10. +43 −0 client/app/app.routing.ts
  11. +1 −1 client/{src/app/auth → app}/auth-guard.service.ts
  12. +12 −4 client/{src/app/auth → app}/auth.service.ts
  13. +1 −1 client/{src/app/secret-heroes/secret-heroes.css → app/dashboard.component.css}
  14. +9 −0 client/app/dashboard.component.html
  15. +30 −0 client/app/dashboard.component.ts
  16. +2 −2 client/{src/app/secret-hero-detail/secret-hero-detail.css → app/hero-detail.component.css}
  17. +2 −1 client/{src/app/hero-detail/hero-detail.html → app/hero-detail.component.html}
  18. +52 −0 client/app/hero-detail.component.ts
  19. +15 −0 client/app/hero-search.component.css
  20. +10 −0 client/app/hero-search.component.html
  21. +49 −0 client/app/hero-search.component.ts
  22. +19 −0 client/app/hero-search.service.ts
  23. +147 −0 client/app/hero.service.ts
  24. 0 client/{src/app/hero/hero.model.ts → app/hero.ts}
  25. +65 −0 client/app/heroes.component.css
  26. +22 −0 client/app/heroes.component.html
  27. +63 −0 client/app/heroes.component.ts
  28. +8 −0 client/app/main.ts
  29. +12 −0 client/app/rxjs-extensions.ts
  30. +2 −2 client/{src/app/hero-detail/hero-detail.css → app/secret-hero-detail.component.css}
  31. +2 −1 client/{src/app/secret-hero-detail/secret-hero-detail.html → app/secret-hero-detail.component.html}
  32. +53 −0 client/app/secret-hero-detail.component.ts
  33. +65 −0 client/app/secret-heroes.component.css
  34. +22 −0 client/app/secret-heroes.component.html
  35. +63 −0 client/app/secret-heroes.component.ts
  36. +10 −0 client/bs-config.js
  37. +0 −16 client/config/env/env.ts
  38. +0 −122 client/config/gulp/config.js
  39. +0 −75 client/config/gulp/tasks/build.js
  40. +0 −34 client/config/gulp/tasks/clean.js
  41. +0 −13 client/config/gulp/tasks/sass.js
  42. +0 −27 client/config/gulp/tasks/serve.js
  43. +0 −66 client/config/gulp/tasks/test.js
  44. +0 −95 client/config/gulp/tasks/typescript.js
  45. +0 −31 client/config/gulp/utils/dashboard.js
  46. +0 −7 client/config/gulp/utils/env-vars.js
  47. +0 −14 client/config/gulp/utils/env.js
  48. +0 −40 client/config/test/karma-test-shim.js
  49. +0 −91 client/config/test/karma.conf.js
  50. +0 −21 client/config/test/protractor.conf.js
  51. +0 −3 client/env.example.json
  52. +0 −9 client/gulpfile.js
  53. +30 −0 client/index.html
  54. +27 −88 client/package.json
  55. +0 −53 client/src/app/app.component.spec.ts
  56. +0 −15 client/src/app/app.component.ts
  57. +0 −4 client/src/app/app.html
  58. +0 −30 client/src/app/app.module.ts
  59. +0 −11 client/src/app/app.providers.ts
  60. +0 −21 client/src/app/app.routing.ts
  61. +0 −1 client/src/app/bundle.ts
  62. +0 −37 client/src/app/hero-detail/hero-detail.component.ts
  63. +0 −23 client/src/app/hero-detail/hero-detail.module.ts
  64. +0 −7 client/src/app/hero-detail/hero-detail.routes.ts
  65. +0 −2 client/src/app/hero-detail/index.ts
  66. +0 −28 client/src/app/hero/hero.service.ts
  67. +0 −33 client/src/app/heroes/heroes.component.ts
  68. +0 −60 client/src/app/heroes/heroes.css
  69. +0 −8 client/src/app/heroes/heroes.html
  70. +0 −21 client/src/app/heroes/heroes.module.ts
  71. +0 −7 client/src/app/heroes/heroes.routes.ts
  72. +0 −2 client/src/app/heroes/index.ts
  73. +0 −11 client/src/app/home/home.component.ts
  74. +0 −3 client/src/app/home/home.css
  75. +0 −10 client/src/app/home/home.html
  76. +0 −13 client/src/app/home/home.module.ts
  77. +0 −7 client/src/app/home/home.routes.ts
  78. +0 −3 client/src/app/home/index.ts
  79. +0 −12 client/src/app/main.ts
  80. +0 −2 client/src/app/secret-hero-detail/index.ts
  81. +0 −37 client/src/app/secret-hero-detail/secret-hero-detail.component.ts
  82. +0 −23 client/src/app/secret-hero-detail/secret-hero-detail.module.ts
  83. +0 −8 client/src/app/secret-hero-detail/secret-hero-detail.routes.ts
  84. +0 −2 client/src/app/secret-heroes/index.ts
  85. +0 −33 client/src/app/secret-heroes/secret-heroes.component.ts
  86. +0 −8 client/src/app/secret-heroes/secret-heroes.html
  87. +0 −21 client/src/app/secret-heroes/secret-heroes.module.ts
  88. +0 −8 client/src/app/secret-heroes/secret-heroes.routes.ts
  89. +0 −1 client/src/app/shared/constant/.gitignore
  90. +0 −12 client/src/app/shared/constant/env.model.ts
  91. +0 −7 client/src/app/shared/constant/index.ts
  92. +0 −5 client/src/app/shared/constant/main.ts
  93. +0 −2 client/src/app/shared/index.ts
  94. +0 −2 client/src/app/shared/navbar/index.ts
  95. +0 −14 client/src/app/shared/navbar/navbar.component.ts
  96. +0 −21 client/src/app/shared/navbar/navbar.html
  97. +0 −20 client/src/app/shared/navbar/navbar.module.ts
  98. BIN client/src/assets/fonts/Roboto/Roboto-Regular-webfont.eot
  99. +0 −1,063 client/src/assets/fonts/Roboto/Roboto-Regular-webfont.svg
  100. BIN client/src/assets/fonts/Roboto/Roboto-Regular-webfont.ttf
  101. BIN client/src/assets/fonts/Roboto/Roboto-Regular-webfont.woff
  102. BIN client/src/assets/images/ng2.jpg
  103. +0 −6 client/src/assets/styles/_bootstrap.variables.scss
  104. +0 −2 client/src/assets/styles/bootstrap.scss
  105. +0 −1 client/src/assets/styles/fonts.scss
  106. +0 −8 client/src/assets/styles/functions.scss
  107. +0 −7 client/src/assets/styles/main.scss
  108. +0 −25 client/src/assets/styles/mixins.scss
  109. +0 −12 client/src/assets/styles/module.scss
  110. +0 −4 client/src/assets/styles/overrides.scss
  111. +0 −4 client/src/assets/styles/variables.scss
  112. BIN client/src/favicon.ico
  113. +0 −53 client/src/index.html
  114. +0 −7 client/src/manual_typings/jasmine.d.ts
  115. +0 −84 client/src/systemjs.conf.js
  116. +0 −12 client/src/test/e2e/home/home.spec.ts
  117. +0 −4 client/src/test/test-helpers/global/env.ts
  118. +0 −15 client/src/test/test-helpers/global/matchers.ts
  119. +0 −10 client/src/test/test-helpers/setup.ts
  120. +5 −0 client/styles.css
  121. +61 −0 client/system-config.js
  122. +1 −0 client/system-config.js.map
  123. +74 −0 client/system-config.ts
  124. +4 −6 client/tsconfig.json
  125. +43 −42 client/tslint.json
  126. +3 −5 client/typings.json
  127. +21 −0 server/LICENSE
  128. +55 −4 server/README.md
  129. +4 −4 server/heroes.js
  130. +6 −4 server/package.json
  131. +89 −12 server/server.js
View
@@ -1,11 +1,8 @@
-env.json
-.idea/
-/node_modules
-/bower_components
-/build
-/report
-/typings
-/src/tmp
-.DS_Store
-/src/assets/styles/*.css
-npm-debug.log
+typings
+app/**/*.js
+app/**/*.map
+node_modules
+jspm_packages
+bower_components
+npm-debug.log
+.DS_Store
View
@@ -1,6 +1,6 @@
# Angular 2 Tour of Secret Heroes
-This is a fork of [John Papa's](https://twitter.com/John_Papa) [Angular 2 Tour of Heroes repo](https://github.com/johnpapa/angular2-tour-of-heroes) adapted to use [Anthony Budianto's Angular 2 Starter](https://github.com/antonybudianto/angular2-starter). The aim of it is to show how to add authenticaton to the heroes app using [JSON Web Tokens](https://jwt.io/introduction). JSON Web Tokens (JWT) are retrieved for users with [Auth0](https://auth0.com/signup) and are saved in local storage on a successful login. The user's JWT is then sent to the server in HTTP requests as an `Authorization` header.
+This is a fork of [John Papa's](https://twitter.com/John_Papa) [Angular 2 Tour of Heroes repo](https://github.com/johnpapa/angular2-tour-of-heroes). The aim of it is to show how to add authenticaton to the heroes app using [JSON Web Tokens](https://jwt.io/introduction). JSON Web Tokens (JWT) are retrieved for users with [Auth0](https://auth0.com/signup) and are saved in local storage on a successful login. The user's JWT is then sent to the server in HTTP requests as an `Authorization` header.
## Running the App
@@ -18,7 +18,7 @@ cd server && npm install
npm start
```
-You will need to remove the placeholder strings in `auth.service.ts` and `server.js` and put in your [Auth0](https://manage.auth0.com) (or your own) credentials.
+You will need to remove the placeholder `AUTH0_CLIENT_ID`, `AUTH0_DOMAIN`, and `AUTH0_SECRET` strings in `components/auth/auth.service.ts` and `server.js` and put in your [Auth0](https://manage.auth0.com) credentials.
## Do I Need to Use Auth0?
@@ -32,30 +32,18 @@ To demonstrate a full authentication setup, there are a number of differences be
### 1. Login and Logout Controls
-Two new controls--one for logging in and the other for logging out--have been added to the navbar in `shared/navbar/navbar.html`. Clicking these buttons will call methods that are exposed by another new addition: an `AuthService`. This service provides logic for opening up the [Auth0 Lock](https://auth0.com/lock) widget and saving the user's profile object and JWT in local storage.
+Two new controls--one for logging in and the other for logging out--have been added to the navbar in `app.component.ts`. Clicking these buttons will call methods that are exposed by another new addition: an `AuthService`. This service provides logic for opening up the [Auth0 Lock](https://auth0.com/lock) widget and saving the user's profile object and JWT in local storage.
### 2. Express Server
-Instead of storing the heroes data locally, it is now being served from a NodeJS app that uses Express. This app is in the `server` directory and it exposes four endpoints:
-
-**`GET` /api/public/heroes**
-* Returns a list of heroes that are available to be viewed without authentication.
-
-**`GET` /api/public/heroes/:id**
-* Returns a specific public hero based on its `id`.
-
-**`GET` /api/secret/heroes**
-* Returns a list of secret heroes that are available to be viewed **only** if the user is authenticated.
-
-**`GET` /api/secret/heroes/:id**
-* Returns a specific secret hero based on its `id`.
+Instead of storing the heroes data locally, it is now being served from a NodeJS app that uses Express. This app is in the `server` directory and it exposes endpoints for doing CRUD on the public and private heroes.
The server uses [**express-jwt**](https://github.com/auth0/express-jwt) to protect the secret hero endpoints. The middleware needs to be configured with your Auth0 (or your own) secret key and client ID.
```js
const authCheck = jwt({
- secret: new Buffer('YOUR_SECRET_KEY', 'base64'),
- audience: 'YOUR_CLIENT_ID'
+ secret: new Buffer('AUTH0_SECRET', 'base64'),
+ audience: 'AUTH0_CLIENT_ID'
});
```
@@ -68,9 +56,9 @@ There are a few additional components and corresponding routes to handle the sec
These routes are restricted with the `AuthGuard` provided in `auth/auth-guard.service.ts`.
-### 4. No More Mock Heroes
+### 4. No More In-Memory Data Service
-The `mock-heroes.ts` file has been removed because heroes are now being retrieved from the server.
+The `in-memory-data.service.ts` file has been removed because heroes are now being retrieved from the server.
## What is Auth0?
View
@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
View
@@ -1,11 +1,8 @@
-env.json
-.idea/
-/node_modules
-/bower_components
-/build
-/report
-/typings
-/src/tmp
-.DS_Store
-/src/assets/styles/*.css
-npm-debug.log
+typings
+app/**/*.js
+app/**/*.map
+node_modules
+jspm_packages
+bower_components
+npm-debug.log
+.DS_Store
View
@@ -1,6 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2015 Antony Budianto
+Copyright (c) 2016 Auth0, Inc. <support@auth0.com> (http://auth0.com)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.
View
@@ -1,13 +1,64 @@
-# Angular 2 Tour of Secret Heroes - Client
+# Angular 2 Tour of Secret Heroes
-To run the client side:
+This is a fork of [John Papa's](https://twitter.com/John_Papa) [Angular 2 Tour of Heroes repo](https://github.com/johnpapa/angular2-tour-of-heroes). The aim of it is to show how to add authenticaton to the heroes app using [JSON Web Tokens](https://jwt.io/introduction). JSON Web Tokens (JWT) are retrieved for users with [Auth0](https://auth0.com/signup) and are saved in local storage on a successful login. The user's JWT is then sent to the server in HTTP requests as an `Authorization` header.
+
+## Running the App
+
+Install the dependencies in both the **client** and **server** directories.
+
+```bash
+cd client && npm install
+npm start
+```
+
+Then in a new console tab:
```bash
-npm install
+cd server && npm install
npm start
```
-Refer back to the readme at the root of this repo for instructions on running the server side.
+You will need to remove the placeholder `AUTH0_CLIENT_ID`, `AUTH0_DOMAIN`, and `AUTH0_SECRET` strings in `components/auth/auth.service.ts` and `server.js` and put in your [Auth0](https://manage.auth0.com) credentials.
+
+## Do I Need to Use Auth0?
+
+Auth0 provides an extremely easy way to retrieve JWTs for your users so that you don't need to code any identity verification or token signing logic yourself. With Auth0 you can also use any social identity provider at the flip of a switch--no need to write any code.
+
+You can by all means write your own authentication layer for this demo too. Simply modify the [**express-jwt**](https://github.com/auth0/express-jwt) middleware (more on that below) to use your own secret key.
+
+## Differences from the Original
+
+To demonstrate a full authentication setup, there are a number of differences between this fork and the original.
+
+### 1. Login and Logout Controls
+
+Two new controls--one for logging in and the other for logging out--have been added to the navbar in `app.component.ts`. Clicking these buttons will call methods that are exposed by another new addition: an `AuthService`. This service provides logic for opening up the [Auth0 Lock](https://auth0.com/lock) widget and saving the user's profile object and JWT in local storage.
+
+### 2. Express Server
+
+Instead of storing the heroes data locally, it is now being served from a NodeJS app that uses Express. This app is in the `server` directory and it exposes endpoints for doing CRUD on the public and private heroes.
+
+The server uses [**express-jwt**](https://github.com/auth0/express-jwt) to protect the secret hero endpoints. The middleware needs to be configured with your Auth0 (or your own) secret key and client ID.
+
+```js
+const authCheck = jwt({
+ secret: new Buffer('AUTH0_SECRET', 'base64'),
+ audience: 'AUTH0_CLIENT_ID'
+});
+```
+
+### 3. Additional Components and Routes
+
+There are a few additional components and corresponding routes to handle the secret heroes. They are:
+
+* `SecretHeroesComponent`
+* `SecretHeroDetailComponent`
+
+These routes are restricted with the `AuthGuard` provided in `auth/auth-guard.service.ts`.
+
+### 4. No More In-Memory Data Service
+
+The `in-memory-data.service.ts` file has been removed because heroes are now being retrieved from the server.
## What is Auth0?
@@ -0,0 +1,31 @@
+a {
+ cursor: pointer
+}
+h1 {
+ font-size: 1.2em;
+ color: #999;
+ margin-bottom: 0;
+}
+h2 {
+ font-size: 2em;
+ margin-top: 0;
+ padding-top: 0;
+}
+nav a {
+ padding: 5px 10px;
+ text-decoration: none;
+ margin-top: 10px;
+ display: inline-block;
+ background-color: #eee;
+ border-radius: 4px;
+}
+nav a:visited, a:link {
+ color: #607D8B;
+}
+nav a:hover {
+ color: #039be5;
+ background-color: #CFD8DC;
+}
+nav a.router-link-active {
+ color: #039be5;
+}
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { AuthService } from './auth.service';
+
+@Component({
+ moduleId: module.id,
+ selector: 'my-app',
+ template: `
+ <h1>{{title}}</h1>
+ <nav>
+ <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
+ <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+ <a routerLink="/secret-heroes" *ngIf="authService.loggedIn()" routerLinkActive="active">Secret Heroes</a>
+ <a (click)=authService.login() *ngIf="!authService.loggedIn()">Log In</a>
+ <a (click)=authService.logout() *ngIf="authService.loggedIn()">Log Out</a>
+ </nav>
+ <router-outlet></router-outlet>
+ `,
+ styleUrls: ['app.component.css']
+})
+export class AppComponent {
+
+ title = 'Tour of Heroes';
+
+ constructor(private authService: AuthService) {}
+}
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { AUTH_PROVIDERS } from 'angular2-jwt';
+
+import './rxjs-extensions';
+import { AppComponent } from './app.component';
+import { routing, routedComponents } from './app.routing';
+import { HeroService } from './hero.service';
+import { HeroSearchComponent } from './hero-search.component';
+
+import { AuthService } from './auth.service';
+import { AuthGuard } from './auth-guard.service';
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ FormsModule,
+ routing,
+ HttpModule
+ ],
+ declarations: [
+ AppComponent,
+ HeroSearchComponent,
+ routedComponents
+ ],
+ providers: [
+ HeroService,
+ AUTH_PROVIDERS,
+ AuthService,
+ AuthGuard
+ ],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
@@ -0,0 +1,43 @@
+import { Routes, RouterModule, CanActivate } from '@angular/router';
+import { AuthGuard } from './auth-guard.service';
+
+import { DashboardComponent } from './dashboard.component';
+import { HeroesComponent } from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+
+import { SecretHeroesComponent } from './secret-heroes.component';
+import { SecretHeroDetailComponent } from './secret-hero-detail.component';
+
+const appRoutes: Routes = [
+ {
+ path: '',
+ redirectTo: '/dashboard',
+ pathMatch: 'full'
+ },
+ {
+ path: 'dashboard',
+ component: DashboardComponent
+ },
+ {
+ path: 'detail/:id',
+ component: HeroDetailComponent
+ },
+ {
+ path: 'heroes',
+ component: HeroesComponent
+ },
+ {
+ path: 'secret-heroes',
+ component: SecretHeroesComponent,
+ canActivate: [AuthGuard]
+ },
+ {
+ path: 'secret-detail/:id',
+ component: SecretHeroDetailComponent,
+ canActivate: [AuthGuard]
+ },
+];
+
+export const routing = RouterModule.forRoot(appRoutes);
+
+export const routedComponents = [DashboardComponent, HeroesComponent, HeroDetailComponent, SecretHeroesComponent, SecretHeroDetailComponent];
@@ -16,4 +16,4 @@ export class AuthGuard implements CanActivate {
return true;
}
-}
+}
@@ -1,16 +1,19 @@
import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
+import { Router } from '@angular/router';
+
+declare var Auth0Lock: any;
@Injectable()
export class AuthService {
lock = new Auth0Lock('AUTH0_CLIENT_ID', 'AUTH0_DOMAIN');
- constructor() {
- this.lock.on('authenticated', (authResult) => {
+ constructor(private router: Router) {
+ this.lock.on('authenticated', (authResult: any) => {
localStorage.setItem('id_token', authResult.idToken);
- this.lock.getProfile(authResult.idToken, (error, profile) => {
+ this.lock.getProfile(authResult.idToken, (error: any, profile: any) => {
if (error) {
console.log(error);
}
@@ -27,11 +30,16 @@ export class AuthService {
}
logout() {
+ // To log out, just remove the token and profile
+ // from local storage
localStorage.removeItem('profile');
localStorage.removeItem('id_token');
+
+ // Send the user back to the dashboard after logout
+ this.router.navigateByUrl('/dashboard');
}
loggedIn() {
return tokenNotExpired();
}
-}
+}
Oops, something went wrong.

0 comments on commit ccb4e7c

Please sign in to comment.