Skip to content

Commit aad6352

Browse files
chenkiechenkie
committed
Merge pull request #40 from chenkie/master
Update sample for use with beta 0
2 parents 78ecb66 + 2eb9dc2 commit aad6352

23 files changed

+295
-310
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# v0.0.1 - Update to Angular 2 Beta (2016-01-07)
2+
3+
* Upgraded to work with Angular 2 Beta 0
4+
* Removed Fetch API in favor of Angular 2 Http
5+
* Included [angular2-jwt](https://github.com/auth0/angular2-jwt) for authenticated API calls
6+

‎LICENSE renamed to ‎LICENSE.txt

File renamed without changes.

‎index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
<base href="/">
1212
<!-- styles -->
1313
<link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.css">
14-
<!-- Angular 2 -->
15-
<script type="text/javascript" src="/node_modules/whatwg-fetch/fetch.js"></script>
14+
<!-- Util -->
1615
<script type="text/javascript" src="/node_modules/jwt-decode/build/jwt-decode.js"></script>
1716
</head>
1817
<body>
@@ -24,7 +23,7 @@
2423
<!-- Commmon files to be cached -->
2524
<script src="/build/common.js"></script>
2625
<!-- Angular2 files -->
27-
<script src="/build/angular2.js"></script>
26+
<script src="/build/vendor.js"></script>
2827
<!-- App script -->
2928
<script src="/build/app.js"></script></body>
3029
</html>

‎package.json

+29-26
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular2-authentication-sample",
3-
"version": "0.0.0",
3+
"version": "0.0.1",
44
"description": "This is a sample that shows how to add authentication to an Angular 2 (ng2) app",
55
"main": "",
66
"scripts": {
@@ -15,40 +15,43 @@
1515
},
1616
"contributors": [
1717
"Martin Gontovnikas (http://gon.to) <[email protected]>",
18-
"PatrickJS <[email protected]>"
18+
"PatrickJS <[email protected]>",
19+
"Ryan Chenkie <[email protected]>"
1920
],
2021
"license": "MIT",
2122
"bugs": {
2223
"url": "https://github.com/auth0/angular2-authentication-sample/issues"
2324
},
2425
"homepage": "https://github.com/auth0/angular2-authentication-sample",
2526
"dependencies": {
26-
"angular2": "2.0.0-alpha.44",
27-
"raw-loader": "0.5.1",
28-
"reflect-metadata": "0.1.2",
29-
"rtts_assert": "2.0.0-alpha.37",
30-
"rx": "4.0.6",
31-
"zone.js": "0.5.8",
32-
"bootstrap": "3.3.5",
33-
"jwt-decode": "1.4.0",
34-
"whatwg-fetch": "0.10.0",
35-
"when": "3.7.3"
27+
"angular2": "2.0.0-beta.0",
28+
"angular2-jwt": "0.1.4",
29+
"bootstrap": "^3.3.6",
30+
"es6-promise": "^3.0.2",
31+
"es6-shim": "^0.33.3",
32+
"es7-reflect-metadata": "^1.4.0",
33+
"jwt-decode": "^1.5.0",
34+
"rxjs": "5.0.0-beta.0",
35+
"zone.js": "0.5.10"
3636
},
3737
"devDependencies": {
38-
"css-loader": "0.20.1",
38+
"css-loader": "^0.23.0",
3939
"exports-loader": "0.6.2",
40-
"expose-loader": "0.7.0",
41-
"file-loader": "0.8.4",
42-
"html-webpack-plugin": "1.6.2",
43-
"imports-loader": "0.6.5",
44-
"json-loader": "0.5.3",
45-
"loader-utils": "0.2.11",
46-
"style-loader": "0.12.4",
47-
"ts-loader": "0.5.6",
48-
"typescript": "1.6.2",
49-
"url-loader": "0.5.6",
50-
"webpack": "1.12.2",
51-
"webpack-dev-server": "1.12.1",
52-
"xtend": "4.0.0"
40+
"expose-loader": "^0.7.1",
41+
"file-loader": "^0.8.4",
42+
"imports-loader": "^0.6.4",
43+
"json-loader": "^0.5.3",
44+
"raw-loader": "0.5.1",
45+
"style-loader": "^0.13.0",
46+
"ts-loader": "^0.7.2",
47+
"tsconfig-lint": "^0.2.0",
48+
"tslint": "^3.2.0",
49+
"tslint-loader": "^2.1.0",
50+
"typedoc": "^0.3.12",
51+
"typescript": "^1.7.3",
52+
"typings": "^0.3.1",
53+
"url-loader": "^0.5.6",
54+
"webpack": "^1.12.9",
55+
"webpack-dev-server": "^1.12.1"
5356
}
5457
}

‎src/app/LoggedInOutlet.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
1+
import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core';
22
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';
33
import {Login} from '../login/login';
44

55
@Directive({
66
selector: 'router-outlet'
77
})
88
export class LoggedInRouterOutlet extends RouterOutlet {
9-
publicRoutes:any;
10-
private parentRouter:Router;
9+
publicRoutes: any;
10+
private parentRouter: Router;
1111

12-
constructor(_elementRef:ElementRef, _loader:DynamicComponentLoader,
13-
_parentRouter:Router, @Attribute('name') nameAttr:string) {
12+
constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
13+
_parentRouter: Router, @Attribute('name') nameAttr: string) {
1414
super(_elementRef, _loader, _parentRouter, nameAttr);
1515

1616
this.parentRouter = _parentRouter;

‎src/app/app.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {View, Component} from 'angular2/angular2';
1+
import {View, Component} from 'angular2/core';
22
import {Location, RouteConfig, RouterLink, Router} from 'angular2/router';
33

44
import {LoggedInRouterOutlet} from './LoggedInOutlet';
@@ -8,7 +8,6 @@ import {Signup} from '../signup/signup';
88

99
let template = require('./app.html');
1010

11-
1211
@Component({
1312
selector: 'auth-app'
1413
})
@@ -17,11 +16,12 @@ let template = require('./app.html');
1716
directives: [ LoggedInRouterOutlet ]
1817
})
1918
@RouteConfig([
20-
{ path: '/', redirectTo: '/home' },
21-
{ path: '/home', as: 'Home', component: Home },
22-
{ path: '/login', as: 'Login', component: Login },
23-
{ path: '/signup', as: 'Signup', component: Signup }
19+
{ path: '/', redirectTo: ['/Home'] },
20+
{ path: '/home', component: Home, as: 'Home' },
21+
{ path: '/login', component: Login, as: 'Login' },
22+
{ path: '/signup', component: Signup, as: 'Signup' }
2423
])
24+
2525
export class App {
2626
constructor(public router: Router) {
2727
}

‎src/common/BrowserDomAdapter.ts

-3
This file was deleted.

‎src/common/headers.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Headers } from 'angular2/http';
2+
3+
export const contentHeaders = new Headers();
4+
contentHeaders.append('Accept', 'application/json');
5+
contentHeaders.append('Content-Type', 'application/json');

‎src/common/jitInjectables.ts

-7
This file was deleted.

‎src/home/home.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div>
22
<div class="home jumbotron centered">
33
<h1>Welcome to the angular2 authentication sample!</h1>
4-
<h2 *ng-if="jwt">Your JWT is:</h2>
5-
<pre *ng-if="jwt" class="jwt"><code>{{ jwt }}</code></pre>
6-
<pre *ng-if="jwt" class="jwt"><code>{{ decodedJwt | json }}</code></pre>
4+
<h2 *ngIf="jwt">Your JWT is:</h2>
5+
<pre *ngIf="jwt" class="jwt"><code>{{ jwt }}</code></pre>
6+
<pre *ngIf="jwt" class="jwt"><code>{{ decodedJwt | json }}</code></pre>
77
<p>Click any of the buttons to call an API and get a response</p>
88
<p><a class="btn btn-primary btn-lg" role="button" (click)="callAnonymousApi()">Call Anonymous API</a></p>
99
<p><a class="btn btn-primary btn-lg" role="button" (click)="callSecuredApi()">Call Secure API</a></p>
1010
<p><a class="btn btn-primary btn-lg" role="button" (click)="logout()">Logout</a></p>
11-
<h2 *ng-if="response">The response of calling the <span class="red">{{api}}</span> API is:</h2>
12-
<h3 *ng-if="response">{{response}}</h3>
11+
<h2 *ngIf="response">The response of calling the <span class="red">{{api}}</span> API is:</h2>
12+
<h3 *ngIf="response">{{response}}</h3>
1313
</div>
1414
</div>

‎src/home/home.ts

+25-25
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
1+
import { Component, View } from 'angular2/core';
2+
import { CORE_DIRECTIVES } from 'angular2/common';
3+
import { Http, Headers } from 'angular2/http';
4+
import { AuthHttp } from 'angular2-jwt';
25
import { Router } from 'angular2/router';
36

4-
import {status, text} from '../utils/fetch'
5-
67
let styles = require('./home.css');
78
let template = require('./home.html');
89

@@ -16,12 +17,12 @@ let template = require('./home.html');
1617
styles: [styles]
1718
})
1819
export class Home {
19-
jwt:string;
20-
decodedJwt:string;
21-
response:string;
22-
api:string;
20+
jwt: string;
21+
decodedJwt: string;
22+
response: string;
23+
api: string;
2324

24-
constructor(public router:Router) {
25+
constructor(public router: Router, public http: Http, public authHttp: AuthHttp) {
2526
this.jwt = localStorage.getItem('jwt');
2627
this.decodedJwt = this.jwt && window.jwt_decode(this.jwt);
2728
}
@@ -41,22 +42,21 @@ export class Home {
4142

4243
_callApi(type, url) {
4344
this.response = null;
44-
this.api = type;
45-
window.fetch(url, {
46-
method: 'GET',
47-
headers: {
48-
'Accept': 'application/json',
49-
'Content-Type': 'application/json',
50-
'Authorization': 'bearer ' + this.jwt
51-
}
52-
})
53-
.then(status)
54-
.then(text)
55-
.then((response) => {
56-
this.response = response;
57-
})
58-
.catch((error) => {
59-
this.response = error.message;
60-
});
45+
if (type === 'Anonymous') {
46+
// For non-protected routes, just use Http
47+
this.http.get(url)
48+
.subscribe(
49+
response => this.response = response.text(),
50+
error => this.response = error.text()
51+
);
52+
}
53+
if (type === 'Secured') {
54+
// For protected routes, use AuthHttp
55+
this.authHttp.get(url)
56+
.subscribe(
57+
response => this.response = response.text(),
58+
error => this.response = error.text()
59+
);
60+
}
6161
}
6262
}

‎src/index.ts

+14-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import { bootstrap, FORM_PROVIDERS } from 'angular2/angular2';
1+
import { bootstrap } from 'angular2/platform/browser';
2+
import { provide } from 'angular2/core';
3+
import { FORM_PROVIDERS } from 'angular2/common';
24
import { ROUTER_PROVIDERS } from 'angular2/router';
3-
import { HTTP_PROVIDERS } from 'angular2/http';
5+
import { Http, HTTP_PROVIDERS } from 'angular2/http';
6+
import { AuthConfig, AuthHttp } from 'angular2-jwt';
47

58
import { App } from './app/app';
69

@@ -9,6 +12,14 @@ bootstrap(
912
[
1013
FORM_PROVIDERS,
1114
ROUTER_PROVIDERS,
12-
HTTP_PROVIDERS
15+
HTTP_PROVIDERS,
16+
provide(AuthHttp, {
17+
useFactory: (http) => {
18+
return new AuthHttp(new AuthConfig({
19+
tokenName: 'jwt'
20+
}), http);
21+
},
22+
deps: [Http]
23+
})
1324
]
1425
);

‎src/login/login.ts

+18-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import {Component, View} from 'angular2/angular2';
1+
import { Component, View } from 'angular2/core';
22
import { Router, RouterLink } from 'angular2/router';
3-
import {status, json} from '../utils/fetch'
3+
import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
4+
import { Http, Headers } from 'angular2/http';
5+
import { contentHeaders } from '../common/headers';
46

57
let styles = require('./login.css');
68
let template = require('./login.html');
@@ -9,36 +11,28 @@ let template = require('./login.html');
911
selector: 'login'
1012
})
1113
@View({
12-
directives: [RouterLink],
14+
directives: [RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES ],
1315
template: template,
1416
styles: [ styles ]
1517
})
1618
export class Login {
17-
constructor(public router: Router) {
19+
constructor(public router: Router, public http: Http) {
1820
}
1921

2022
login(event, username, password) {
2123
event.preventDefault();
22-
window.fetch('http://localhost:3001/sessions/create', {
23-
method: 'POST',
24-
headers: {
25-
'Accept': 'application/json',
26-
'Content-Type': 'application/json'
27-
},
28-
body: JSON.stringify({
29-
username, password
30-
})
31-
})
32-
.then(status)
33-
.then(json)
34-
.then((response:any) => {
35-
localStorage.setItem('jwt', response.id_token);
36-
this.router.parent.navigateByUrl('/home');
37-
})
38-
.catch((error) => {
39-
alert(error.message);
40-
console.log(error.message);
41-
});
24+
let body = JSON.stringify({ username, password });
25+
this.http.post('http://localhost:3001/sessions/create', body, { headers: contentHeaders })
26+
.subscribe(
27+
response => {
28+
localStorage.setItem('jwt', response.json().id_token);
29+
this.router.parent.navigateByUrl('/home');
30+
},
31+
error => {
32+
alert(error.text());
33+
console.log(error.text());
34+
}
35+
);
4236
}
4337

4438
signup(event) {

0 commit comments

Comments
 (0)