Skip to content

Instantly share code, notes, and snippets.

@martonsagi

martonsagi/app.html

Last active November 1, 2016 10:08
Show Gist options
  • Save martonsagi/b9e8fee11e338e08bc5da7d4df68e2db to your computer and use it in GitHub Desktop.
Save martonsagi/b9e8fee11e338e08bc5da7d4df68e2db to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia NavBar Authentication Example
Raw
app.html
<template>
<require from="./nav-bar"></require>
<require from="./nav-bar-compose.html"></require>
<require from="./nav-bar-function.html"></require>
<nav-bar-function if.bind="mode === 'function'"
router.bind="router"
logged-in.bind="loggedIn"
toggle-login.call="toggleLogin()">
</nav-bar-function>
<nav-bar if.bind="mode === 'element'" router.bind="router"></nav-bar>
<compose if.bind="mode === 'compose'" view="./nav-bar-compose.html"></compose>
<label>Choose a solution:</label>
<select value.bind="mode" class="form-control">
<option value="function">HTML Only Element + Bindables</option>
<option value="element">Custom Element + EventAggregator</option>
<option value="compose">Compose + Inheritance</option>
</select>
<main>
<div class="page-host">
<router-view></router-view>
</div>
</main>
</template>
Raw
app.js
import {Redirect} from 'aurelia-router';
import { inject, bindable, observable } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';
@inject(EventAggregator)
export class App {
@bindable
loggedIn;
constructor(eventAggregator) {
this.eventAggregator = eventAggregator;
this.mode = 'function';
}
configureRouter(config, router) {
config.options.pushState = false;
config.map([
{
"route": ["", "home"],
"name": "home",
"moduleId": "home",
"nav": true,
"title": "Home"
},
{
"route": "dashboard",
"name": "private-page",
"moduleId": "private-page",
"nav": true,
"title": "Dashboard Page",
// this is going to be available within AuthorizeStep
"settings": {
"auth": true
}
},
{
"route": "login",
"name": "login",
"moduleId": "login",
"nav": true,
"title": "Login Page",
"settings": {
"publicOnly": true
}
},
{
"route": "register",
"name": "register",
"moduleId": "register",
"nav": true,
"title": "Register Page",
"settings": {
"publicOnly": true
}
}
]);
config.addPipelineStep('authorize', AuthorizeStep);
this.router = router;
this.loggedIn = false;
}
attached() {
this.eventAggregator.subscribe('nav::toggleLogin', (data) => {
AuthorizeStep.auth.isAuthenticated = data.loggedIn;
});
}
toggleLogin() {
let prom = new Promise((resolve) => {
setTimeout(() => {
this.loggedIn = !this.loggedIn;
AuthorizeStep.auth.isAuthenticated = this.loggedIn;
resolve();
}, 500);
});
return prom.then(() => {
console.log('login ok');
})
}
}
class AuthorizeStep {
// substitute auth magic
static auth = {
isAuthenticated: false
}
run(navigationInstruction, next) {
let isLoggedIn = AuthorizeStep.auth.isAuthenticated;
// currently active route config
let currentRoute = navigationInstruction.config;
// settings object will be preserved during navigation
let loginRequired = currentRoute.settings && currentRoute.settings.auth === true;
if (isLoggedIn === false && loginRequired === true) {
return next.cancel(new Redirect('login'));
}
let publicOnly = currentRoute.settings && currentRoute.settings.publicOnly === true;
if (isLoggedIn === true && publicOnly === true) {
return next.cancel(new Redirect('dashboard'));
}
return next();
}
}
Raw
home.html
<template>
Public Homepage
</template>
Raw
home.js
export class Home {
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
login.html
<template>
<div class="alert alert-info">Login form goes here</div>
</template>
Raw
login.js
export class Login {
}
Raw
nav-bar-compose.html
<template>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="top-menu">
<div>Compose</div>
<span repeat.for="row of router.navigation">
<a class="btn btn-default ${row.isActive ? 'btn-primary' : ''}" href.bind="row.href">${row.title}</a>
</span>
<span class="pull-right">
<button class="btn ${loggedIn ? 'btn-success' : 'btn-danger'}" click.delegate="toggleLogin()">
Toggle Login
</button>
</span>
</div>
</div>
</nav>
</template>
Raw
nav-bar-function.html
<template bindable="router,toggleLogin,loggedIn">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="top-menu">
<div>HTML Only Element</div>
<span repeat.for="row of router.navigation">
<a class="btn btn-default ${row.isActive ? 'btn-primary' : ''}" href.bind="row.href">${row.title}</a>
</span>
<span class="pull-right">
<a class="btn ${loggedIn ? 'btn-success' : 'btn-danger'}" click.trigger="toggleLogin()">
Toggle Login
</a>
</span>
</div>
</div>
</nav>
</template>
Raw
nav-bar.html
<template>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="top-menu">
<div>Custom Element</div>
<span repeat.for="row of router.navigation">
<a class="btn btn-default ${row.isActive ? 'btn-primary' : ''}" href.bind="row.href">${row.title}</a>
</span>
<span class="pull-right">
<button class="btn ${loggedIn ? 'btn-success' : 'btn-danger'}" click.delegate="toggleLogin()">
Toggle Login
</button>
</span>
</div>
</div>
</nav>
</template>
Raw
nav-bar.js
import { inject, bindable } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';
@inject(EventAggregator)
export class NavBar {
@bindable router;
loggedIn = false;
constructor(eventAggregator) {
this.eventAggregator = eventAggregator;
}
toggleLogin() {
this.loggedIn = !this.loggedIn;
this.eventAggregator.publish('nav::toggleLogin', { loggedIn: this.loggedIn });
}
}
Raw
private-page.html
<template>
This is a private page.
</template>
Raw
private-page.js
export class PrivatePage {
}
Raw
register.html
<template>
<div class="alert alert-warning">Registration form goes here</div>
</template>
Raw
register.js
export class Register {
}
Raw
style.css
body {
padding-top: 80px;
}
.top-menu {
padding: 8px;
}
main {
padding: 10px;
}
.page-host {
padding-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment