-
Welcome to the angular2 authentication sample!
+
Welcome to the Angular 2+ authentication sample!
Your JWT is:
{{ jwt }}
{{ decodedJwt | json }}
diff --git a/src/components/home/index.ts b/src/components/home/index.ts
new file mode 100644
index 0000000..ab5a522
--- /dev/null
+++ b/src/components/home/index.ts
@@ -0,0 +1 @@
+export * from './home.component';
diff --git a/src/components/login/index.ts b/src/components/login/index.ts
new file mode 100644
index 0000000..69c1644
--- /dev/null
+++ b/src/components/login/index.ts
@@ -0,0 +1 @@
+export * from './login.component';
diff --git a/src/components/login/login.component.ts b/src/components/login/login.component.ts
new file mode 100644
index 0000000..dfcd7cf
--- /dev/null
+++ b/src/components/login/login.component.ts
@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AUTH_TOKEN } from '../../common/token';
+import { BackendService } from '../../services/backend';
+
+@Component({
+ selector: 'login',
+ templateUrl: './login.template.html',
+ styleUrls: ['./login.style.css']
+})
+export class LoginComponent {
+ constructor(public router: Router, public backend: BackendService) {}
+
+ login(event, username, password) {
+ event.preventDefault();
+
+ const body = { username, password };
+ this.backend.login(body)
+ .subscribe(
+ (response: any) => {
+ localStorage.setItem(AUTH_TOKEN, response.id_token);
+ this.router.navigate(['home']);
+ },
+ error => {
+ alert(error.message);
+ console.log(error.message);
+ }
+ );
+ }
+
+ signup(event) {
+ event.preventDefault();
+ this.router.navigate(['signup']);
+ }
+}
diff --git a/src/login/login.css b/src/components/login/login.style.css
similarity index 100%
rename from src/login/login.css
rename to src/components/login/login.style.css
diff --git a/src/login/login.html b/src/components/login/login.template.html
similarity index 100%
rename from src/login/login.html
rename to src/components/login/login.template.html
diff --git a/src/components/signup/index.ts b/src/components/signup/index.ts
new file mode 100644
index 0000000..e79dd81
--- /dev/null
+++ b/src/components/signup/index.ts
@@ -0,0 +1 @@
+export * from './signup.component';
diff --git a/src/components/signup/signup.component.ts b/src/components/signup/signup.component.ts
new file mode 100644
index 0000000..cfad0f8
--- /dev/null
+++ b/src/components/signup/signup.component.ts
@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { AUTH_TOKEN } from '../../common/token';
+import { BackendService } from '../../services/backend';
+
+@Component({
+ selector: 'signup',
+ templateUrl: './signup.template.html',
+ styleUrls: ['./signup.style.css']
+})
+export class SignupComponent {
+ constructor(public router: Router, public backend: BackendService) {}
+
+ signup(event, username, password) {
+ event.preventDefault();
+
+ const body = { username, password };
+ this.backend.signup(body)
+ .subscribe(
+ (response: any) => {
+ localStorage.setItem(AUTH_TOKEN, response.id_token);
+ this.router.navigate(['home']);
+ },
+ error => {
+ alert(error.message);
+ console.log(error.message);
+ }
+ );
+ }
+
+ login(event) {
+ event.preventDefault();
+ this.router.navigate(['login']);
+ }
+}
diff --git a/src/signup/signup.css b/src/components/signup/signup.style.css
similarity index 100%
rename from src/signup/signup.css
rename to src/components/signup/signup.style.css
diff --git a/src/signup/signup.html b/src/components/signup/signup.template.html
similarity index 100%
rename from src/signup/signup.html
rename to src/components/signup/signup.template.html
diff --git a/src/home/home.ts b/src/home/home.ts
deleted file mode 100644
index 2b13d92..0000000
--- a/src/home/home.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Component } from '@angular/core';
-import { Http } from '@angular/http';
-import { Router } from '@angular/router';
-import { AuthHttp } from 'angular2-jwt';
-
-const styles = require('./home.css');
-const template = require('./home.html');
-
-@Component({
- selector: 'home',
- template: template,
- styles: [ styles ]
-})
-export class Home {
- jwt: string;
- decodedJwt: string;
- response: string;
- api: string;
-
- constructor(public router: Router, public http: Http, public authHttp: AuthHttp) {
- this.jwt = localStorage.getItem('id_token');
- this.decodedJwt = this.jwt && window.jwt_decode(this.jwt);
- }
-
- logout() {
- localStorage.removeItem('id_token');
- this.router.navigate(['login']);
- }
-
- callAnonymousApi() {
- this._callApi('Anonymous', 'http://localhost:3001/api/random-quote');
- }
-
- callSecuredApi() {
- this._callApi('Secured', 'http://localhost:3001/api/protected/random-quote');
- }
-
- _callApi(type, url) {
- this.response = null;
- if (type === 'Anonymous') {
- // For non-protected routes, just use Http
- this.http.get(url)
- .subscribe(
- response => this.response = response.text(),
- error => this.response = error.text()
- );
- }
- if (type === 'Secured') {
- // For protected routes, use AuthHttp
- this.authHttp.get(url)
- .subscribe(
- response => this.response = response.text(),
- error => this.response = error.text()
- );
- }
- }
-}
diff --git a/src/home/index.ts b/src/home/index.ts
deleted file mode 100644
index e20557b..0000000
--- a/src/home/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './home';
diff --git a/src/login/index.ts b/src/login/index.ts
deleted file mode 100644
index 6cc1e6e..0000000
--- a/src/login/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './login';
diff --git a/src/login/login.ts b/src/login/login.ts
deleted file mode 100644
index 4033e6d..0000000
--- a/src/login/login.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { Http } from '@angular/http';
-import { contentHeaders } from '../common/headers';
-
-const styles = require('./login.css');
-const template = require('./login.html');
-
-@Component({
- selector: 'login',
- template: template,
- styles: [ styles ]
-})
-export class Login {
- constructor(public router: Router, public http: Http) {
- }
-
- login(event, username, password) {
- event.preventDefault();
- let body = JSON.stringify({ username, password });
- this.http.post('http://localhost:3001/sessions/create', body, { headers: contentHeaders })
- .subscribe(
- response => {
- localStorage.setItem('id_token', response.json().id_token);
- this.router.navigate(['home']);
- },
- error => {
- alert(error.text());
- console.log(error.text());
- }
- );
- }
-
- signup(event) {
- event.preventDefault();
- this.router.navigate(['signup']);
- }
-}
diff --git a/src/services/backend/backend.service.ts b/src/services/backend/backend.service.ts
new file mode 100644
index 0000000..a3b5d3f
--- /dev/null
+++ b/src/services/backend/backend.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { contentHeaders } from '../../common/headers';
+
+@Injectable()
+export class BackendService {
+ constructor(private http: HttpClient) {}
+
+ public signup(body) {
+ return this.http
+ .post('http://localhost:3001/users', body, { headers: contentHeaders })
+ .share();
+ }
+
+ public login(body) {
+ return this.http
+ .post('http://localhost:3001/sessions/create', body, { headers: contentHeaders })
+ .share();
+ }
+
+ public callApi(url) {
+ return this.http
+ .get(url, { responseType: 'text' })
+ .share();
+ }
+}
diff --git a/src/services/backend/index.ts b/src/services/backend/index.ts
new file mode 100644
index 0000000..74ef395
--- /dev/null
+++ b/src/services/backend/index.ts
@@ -0,0 +1 @@
+export * from './backend.service';
diff --git a/src/signup/index.ts b/src/signup/index.ts
deleted file mode 100644
index 630f027..0000000
--- a/src/signup/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './signup';
diff --git a/src/signup/signup.ts b/src/signup/signup.ts
deleted file mode 100644
index 3a3c3df..0000000
--- a/src/signup/signup.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { Http } from '@angular/http';
-import { contentHeaders } from '../common/headers';
-
-const styles = require('./signup.css');
-const template = require('./signup.html');
-
-@Component({
- selector: 'signup',
- template: template,
- styles: [ styles ]
-})
-export class Signup {
- constructor(public router: Router, public http: Http) {
- }
-
- signup(event, username, password) {
- event.preventDefault();
- let body = JSON.stringify({ username, password });
- this.http.post('http://localhost:3001/users', body, { headers: contentHeaders })
- .subscribe(
- response => {
- localStorage.setItem('id_token', response.json().id_token);
- this.router.navigate(['home']);
- },
- error => {
- alert(error.text());
- console.log(error.text());
- }
- );
- }
-
- login(event) {
- event.preventDefault();
- this.router.navigate(['login']);
- }
-
-}
diff --git a/tsconfig.json b/tsconfig.json
index fa16fcc..52a66e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,21 +5,15 @@
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
- "sourceMap": true
+ "sourceMap": true,
+ "lib": [
+ "dom",
+ "es2015"
+ ]
},
- "files": [
- "typings/tsd.d.ts",
- "src/app.ts",
- "src/home/index.ts",
- "src/login/index.ts",
- "src/signup/index.ts",
- "src/index.ts",
- "src/common/headers.ts",
- "src/common/auth.guard.ts"
- ],
- "filesGlob": [
- "./src/**/*.ts",
- "!./node_modules/**/*.ts"
+ "exclude": [
+ "node_modules",
+ "dist"
],
"compileOnSave": false,
"buildOnSave": false,
diff --git a/tslint.json b/tslint.json
index f900e33..5c365b9 100644
--- a/tslint.json
+++ b/tslint.json
@@ -16,15 +16,11 @@
],
"no-arg": true,
"no-construct": true,
- "no-duplicate-key": true,
- "no-duplicate-variable": true,
"no-empty": false,
"no-eval": true,
"no-trailing-whitespace": true,
"no-unused-expression": true,
"no-unused-variable": false,
- "no-unreachable": true,
- "no-use-before-declare": true,
"one-line": [
true,
"check-open-brace",
diff --git a/typedoc.json b/typedoc.json
deleted file mode 100644
index 1a9f282..0000000
--- a/typedoc.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "mode": "modules",
- "out": "doc",
- "theme": "default",
- "ignoreCompilerErrors": "true",
- "experimentalDecorators": "true",
- "emitDecoratorMetadata": "true",
- "target": "ES5",
- "moduleResolution": "node",
- "preserveConstEnums": "true",
- "stripInternal": "true",
- "suppressExcessPropertyErrors": "true",
- "suppressImplicitAnyIndexErrors": "true",
- "module": "commonjs"
-}
\ No newline at end of file
diff --git a/typings.json b/typings.json
deleted file mode 100644
index b903cd2..0000000
--- a/typings.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "dependencies": {
- "es6-promise": "github:typings/typed-es6-promise#9243c53f70fb4909ed7cce3094bec221b9fb6d5f"
- },
- "devDependencies": {},
- "ambientDependencies": {
- "angular-protractor": "github:angular/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9",
- "es6-shim": "github:angular/DefinitelyTyped/es6-shim/es6-shim.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9",
- "hammerjs": "github:angular/DefinitelyTyped/hammerjs/hammerjs.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9",
- "jasmine": "github:angular/DefinitelyTyped/jasmine/jasmine.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9",
- "node": "github:angular/DefinitelyTyped/node/node.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9",
- "selenium-webdriver": "github:angular/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9",
- "webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4",
- "zone": "github:angular/DefinitelyTyped/zone/zone.d.ts#31e7317c9a0793857109236ef7c7f223305a8aa9"
- }
-}
\ No newline at end of file
diff --git a/typings/_custom/custom.d.ts b/typings/_custom/custom.d.ts
index 42be85c..f726ae4 100644
--- a/typings/_custom/custom.d.ts
+++ b/typings/_custom/custom.d.ts
@@ -1,3 +1,2 @@
///
-///
///
diff --git a/typings/_custom/webpack.d.ts b/typings/_custom/webpack.d.ts
deleted file mode 100644
index 3bd85f3..0000000
--- a/typings/_custom/webpack.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare var require: any;
-declare var __filename: string;
-declare var __dirname: string;
-declare var global: any;
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 87bf2aa..e9f52a7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,13 +1,12 @@
-var sliceArgs = Function.prototype.call.bind(Array.prototype.slice);
-var toString = Function.prototype.call.bind(Object.prototype.toString);
-var path = require('path');
-var webpack = require('webpack');
+'use strict';
+
+const path = require('path');
+const webpack = require('webpack');
// Webpack Plugins
-var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
+const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
module.exports = {
- devtool: 'source-map',
- // devtool: 'eval',
+ devtool: 'cheap-source-map',
//
entry: {
@@ -18,15 +17,11 @@ module.exports = {
'zone.js/dist/long-stack-trace-zone',
// Angular2
'@angular/common',
+ '@angular/common/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/core',
- '@angular/router',
- '@angular/http',
- // RxJS
- 'rxjs',
- // Other
- 'angular2-jwt'
+ '@angular/router'
],
'app': [
'./src/index'
@@ -35,43 +30,27 @@ module.exports = {
// Config for our build files
output: {
- path: root('build'),
+ path: path.join(__dirname, 'build'),
filename: '[name].js',
- // filename: '[name].[hash].js',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js'
- // publicPath: 'http://mycdn.com/'
},
resolve: {
- root: __dirname,
- extensions: [
- '',
- '.ts',
- '.js',
- '.json',
- '.css',
- '.html'
- ]
+ extensions: ['.ts', '.js', '.json', '.css', '.html']
},
module: {
- preLoaders: [ { test: /\.ts$/, loader: 'tslint-loader' } ],
loaders: [
+ {
+ test: /\.ts$/,
+ loader: 'tslint-loader',
+ enforce: 'pre'
+ },
// Support for .ts files.
{
test: /\.ts$/,
- loader: 'ts-loader',
- query: {
- 'ignoreDiagnostics': [
- 2403, // 2403 -> Subsequent variable declarations
- 2300, // 2300 Duplicate identifier
- 2304, // 2304 Cannot find name
- 2374, // 2374 -> Duplicate number index signature
- 2375 // 2375 -> Duplicate string index signature
- ]
- },
- exclude: [ /\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/ ]
+ loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
// Support for *.json files.
@@ -82,27 +61,18 @@ module.exports = {
// support for .html as raw text
{ test: /\.html$/, loader: 'raw-loader' },
- ],
- noParse: [
- /zone\.js\/dist\/.+/,
- /reflect-metadata/,
- /es(6|7)-.+/,
- /.zone-microtask/,
- /.long-stack-trace-zone/
]
},
plugins: [
+ new webpack.ContextReplacementPlugin(
+ /angular(\\|\/)core(\\|\/)@angular/,
+ path.join(__dirname, 'src')
+ ),
new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] })
],
- // Other module loader config
- tslint: {
- emitErrors: false,
- failOnHint: false
- },
-
// our Development Server configs
// our Webpack Development Server config
devServer: {
@@ -110,17 +80,3 @@ module.exports = {
publicPath: '/build'
}
};
-
-function getBanner() {
- return 'This is a sample that shows how to add authentication to an Angular 2 (ng2) app by @auth0';
-}
-
-function root(args) {
- args = sliceArgs(arguments, 0);
- return path.join.apply(path, [__dirname].concat(args));
-}
-function rootNode(args) {
- args = sliceArgs(arguments, 0);
- return root.apply(path, ['node_modules'].concat(args));
-}
-