-Paket -TutorialFiles
Removed Paket files (could not get reliable builds; we may revisit once .NET core has stablizied); removed extraneous tutorial files; currently blocked getting Auth0 Lock to load from within Aurelia app
This commit is contained in:
Daniel J. Summers
@@ -100,6 +100,7 @@
|
||||
"aurelia-dependency-injection",
|
||||
"aurelia-event-aggregator",
|
||||
"aurelia-framework",
|
||||
"aurelia-fetch-client",
|
||||
"aurelia-history",
|
||||
"aurelia-history-browser",
|
||||
"aurelia-loader",
|
||||
@@ -151,6 +152,11 @@
|
||||
"resources": [
|
||||
"nprogress.css"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "auth0-lock",
|
||||
"path": "../node_modules/auth0-lock",
|
||||
"main": "lib/index"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -10,6 +10,8 @@
|
||||
"dependencies": {
|
||||
"aurelia-animator-css": "^1.0.1",
|
||||
"aurelia-bootstrapper": "^2.1.0",
|
||||
"aurelia-fetch-client": "^1.1.2",
|
||||
"auth0-lock": "^10.16.0",
|
||||
"bluebird": "^3.4.1",
|
||||
"bootstrap": "^3.3.7",
|
||||
"jquery": "^2.2.4",
|
||||
|
||||
1
src/app/scripts/vendor-bundle.js.map
Normal file
1
src/app/scripts/vendor-bundle.js.map
Normal file
File diff suppressed because one or more lines are too long
@@ -15,6 +15,8 @@
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li if.bind="!isAuthenticated()" click.delegate="logon()">Log On</li>
|
||||
<li if.bind="isAuthenticated()" click.delegate="logoff()">Log Off</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,66 @@
|
||||
import {Router, RouterConfiguration} from "aurelia-router"
|
||||
import {EventAggregator} from "aurelia-event-aggregator"
|
||||
import {inject} from "aurelia-framework"
|
||||
import {HttpClient} from "aurelia-fetch-client"
|
||||
import {PageTitle} from "./messages"
|
||||
import {WebAPI} from "./web-api"
|
||||
import {Auth0Lock} from "auth0-lock"
|
||||
|
||||
@inject(WebAPI, EventAggregator)
|
||||
@inject(EventAggregator, HttpClient)
|
||||
export class App {
|
||||
router: Router;
|
||||
pageTitle: string;
|
||||
|
||||
lock = new Auth0Lock('Of2s0RQCQ3mt3dwIkOBY5h85J9sXbF2n', 'djs-consulting.auth0.com', {
|
||||
oidcConformant: true,
|
||||
autoclose: true,
|
||||
auth: {
|
||||
redirectUrl: "http://localhost:8080/user/log-on",
|
||||
responseType: 'token id_token',
|
||||
audience: `https://djs-consulting.auth0.com/userinfo`,
|
||||
params: {
|
||||
scope: 'openid'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
constructor(public api: WebAPI, private ea: EventAggregator) {
|
||||
private setSession(authResult): void {
|
||||
// Set the time that the access token will expire at
|
||||
const expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime())
|
||||
localStorage.setItem('access_token', authResult.accessToken)
|
||||
localStorage.setItem('id_token', authResult.idToken)
|
||||
localStorage.setItem('expires_at', expiresAt)
|
||||
}
|
||||
|
||||
public logoff(): void {
|
||||
// Remove tokens and expiry time from localStorage
|
||||
localStorage.removeItem('access_token')
|
||||
localStorage.removeItem('id_token')
|
||||
localStorage.removeItem('expires_at')
|
||||
// Go back to the home route
|
||||
this.router.navigateToRoute("")
|
||||
}
|
||||
|
||||
public isAuthenticated(): boolean {
|
||||
// Check whether the current time is past the
|
||||
// access token's expiry time
|
||||
const expiresAt = JSON.parse(localStorage.getItem('expires_at'))
|
||||
return new Date().getTime() < expiresAt
|
||||
}
|
||||
|
||||
constructor(private ea: EventAggregator, private http: HttpClient) {
|
||||
this.ea.subscribe(PageTitle, msg => this.pageTitle = msg.title)
|
||||
var self = this
|
||||
this.lock.on('authenticated', (authResult) => {
|
||||
if (authResult && authResult.accessToken && authResult.idToken) {
|
||||
this.setSession(authResult)
|
||||
this.router.navigateToRoute("")
|
||||
}
|
||||
});
|
||||
this.lock.on('authorization_error', (err) => {
|
||||
this.router.navigateToRoute("")
|
||||
console.log(err)
|
||||
alert(`Error: ${err.error}. Check the console for further details.`)
|
||||
});
|
||||
}
|
||||
|
||||
configureRouter(config: RouterConfiguration, router: Router){
|
||||
@@ -18,10 +68,13 @@ export class App {
|
||||
config.options.pushState = true
|
||||
config.options.root = "/"
|
||||
config.map([
|
||||
{ route: "", moduleId: "home", name: "home", title: "Welcome" },
|
||||
{ route: 'contacts/:id', moduleId: 'contact-detail', name:'contacts' }
|
||||
{ route: "", moduleId: "home", name: "home", title: "Welcome" }
|
||||
])
|
||||
|
||||
this.router = router
|
||||
}
|
||||
|
||||
public logon() {
|
||||
this.lock.show()
|
||||
}
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Profile</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form role="form" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">First Name</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="first name" class="form-control" value.bind="contact.firstName">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Last Name</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="last name" class="form-control" value.bind="contact.lastName">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="email" class="form-control" value.bind="contact.email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Phone Number</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="phone number" class="form-control" value.bind="contact.phoneNumber">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-bar">
|
||||
<button class="btn btn-success" click.delegate="save()" disabled.bind="!canSave">Save</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,58 +0,0 @@
|
||||
import {inject} from 'aurelia-framework';
|
||||
import {EventAggregator} from 'aurelia-event-aggregator';
|
||||
import {WebAPI} from './web-api';
|
||||
import {ContactUpdated,ContactViewed} from './messages';
|
||||
import {areEqual} from './utility';
|
||||
|
||||
interface Contact {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
}
|
||||
|
||||
@inject(WebAPI, EventAggregator)
|
||||
export class ContactDetail {
|
||||
routeConfig;
|
||||
contact: Contact;
|
||||
originalContact: Contact;
|
||||
|
||||
constructor(private api: WebAPI, private ea: EventAggregator) { }
|
||||
|
||||
activate(params, routeConfig) {
|
||||
this.routeConfig = routeConfig;
|
||||
|
||||
return this.api.getContactDetails(params.id).then(contact => {
|
||||
this.contact = <Contact>contact;
|
||||
this.routeConfig.navModel.setTitle(this.contact.firstName);
|
||||
this.originalContact = JSON.parse(JSON.stringify(this.contact));
|
||||
this.ea.publish(new ContactViewed(this.contact));
|
||||
});
|
||||
}
|
||||
|
||||
get canSave() {
|
||||
return this.contact.firstName && this.contact.lastName && !this.api.isRequesting;
|
||||
}
|
||||
|
||||
save() {
|
||||
this.api.saveContact(this.contact).then(contact => {
|
||||
this.contact = <Contact>contact;
|
||||
this.routeConfig.navModel.setTitle(this.contact.firstName);
|
||||
this.originalContact = JSON.parse(JSON.stringify(this.contact));
|
||||
this.ea.publish(new ContactUpdated(this.contact));
|
||||
});
|
||||
}
|
||||
|
||||
canDeactivate() {
|
||||
if(!areEqual(this.originalContact, this.contact)){
|
||||
let result = confirm('You have unsaved changes. Are you sure you wish to leave?');
|
||||
|
||||
if(!result) {
|
||||
this.ea.publish(new ContactViewed(this.contact));
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div class="contact-list">
|
||||
<ul class="list-group">
|
||||
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
|
||||
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
|
||||
<h4 class="list-group-item-heading">${contact.firstName} ${contact.lastName}</h4>
|
||||
<p class="list-group-item-text">${contact.email}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,28 +0,0 @@
|
||||
import {EventAggregator} from 'aurelia-event-aggregator';
|
||||
import {WebAPI} from './web-api';
|
||||
import {ContactUpdated, ContactViewed} from './messages';
|
||||
import {inject} from 'aurelia-framework';
|
||||
|
||||
@inject(WebAPI, EventAggregator)
|
||||
export class ContactList {
|
||||
contacts;
|
||||
selectedId = 0;
|
||||
|
||||
constructor(private api: WebAPI, ea: EventAggregator) {
|
||||
ea.subscribe(ContactViewed, msg => this.select(msg.contact));
|
||||
ea.subscribe(ContactUpdated, msg => {
|
||||
let id = msg.contact.id;
|
||||
let found = this.contacts.find(x => x.id == id);
|
||||
Object.assign(found, msg.contact);
|
||||
});
|
||||
}
|
||||
|
||||
created() {
|
||||
this.api.getContactList().then(contacts => this.contacts = contacts);
|
||||
}
|
||||
|
||||
select(contact) {
|
||||
this.selectedId = contact.id;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,3 @@
|
||||
export class ContactUpdated {
|
||||
constructor(public contact) { }
|
||||
}
|
||||
|
||||
export class ContactViewed {
|
||||
constructor(public contact) { }
|
||||
}
|
||||
|
||||
export class PageTitle {
|
||||
constructor(public title: string) { }
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
let latency = 200;
|
||||
let id = 0;
|
||||
|
||||
function getId(){
|
||||
return ++id;
|
||||
}
|
||||
|
||||
let contacts = [
|
||||
{
|
||||
id:getId(),
|
||||
firstName:'John',
|
||||
lastName:'Tolkien',
|
||||
email:'tolkien@inklings.com',
|
||||
phoneNumber:'867-5309'
|
||||
},
|
||||
{
|
||||
id:getId(),
|
||||
firstName:'Clive',
|
||||
lastName:'Lewis',
|
||||
email:'lewis@inklings.com',
|
||||
phoneNumber:'867-5309'
|
||||
},
|
||||
{
|
||||
id:getId(),
|
||||
firstName:'Owen',
|
||||
lastName:'Barfield',
|
||||
email:'barfield@inklings.com',
|
||||
phoneNumber:'867-5309'
|
||||
},
|
||||
{
|
||||
id:getId(),
|
||||
firstName:'Charles',
|
||||
lastName:'Williams',
|
||||
email:'williams@inklings.com',
|
||||
phoneNumber:'867-5309'
|
||||
},
|
||||
{
|
||||
id:getId(),
|
||||
firstName:'Roger',
|
||||
lastName:'Green',
|
||||
email:'green@inklings.com',
|
||||
phoneNumber:'867-5309'
|
||||
}
|
||||
];
|
||||
|
||||
export class WebAPI {
|
||||
isRequesting = false;
|
||||
|
||||
getContactList(){
|
||||
this.isRequesting = true;
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
let results = contacts.map(x => { return {
|
||||
id:x.id,
|
||||
firstName:x.firstName,
|
||||
lastName:x.lastName,
|
||||
email:x.email
|
||||
}});
|
||||
resolve(results);
|
||||
this.isRequesting = false;
|
||||
}, latency);
|
||||
});
|
||||
}
|
||||
|
||||
getContactDetails(id){
|
||||
this.isRequesting = true;
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
let found = contacts.filter(x => x.id == id)[0];
|
||||
resolve(JSON.parse(JSON.stringify(found)));
|
||||
this.isRequesting = false;
|
||||
}, latency);
|
||||
});
|
||||
}
|
||||
|
||||
saveContact(contact){
|
||||
this.isRequesting = true;
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
let instance = JSON.parse(JSON.stringify(contact));
|
||||
let found = contacts.filter(x => x.id == contact.id)[0];
|
||||
|
||||
if(found){
|
||||
let index = contacts.indexOf(found);
|
||||
contacts[index] = instance;
|
||||
}else{
|
||||
instance.id = getId();
|
||||
contacts.push(instance);
|
||||
}
|
||||
|
||||
this.isRequesting = false;
|
||||
resolve(instance);
|
||||
}, latency);
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user