hosseinakbarian/app.html

## app.html
<template>

      <require from="nav-bar"></require>

      <nav-bar router.bind="router"></nav-bar>

      <main>

        <div class="page-host">
          <router-view></router-view>
        </div>

      </main>

</template>

## 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;
  }

  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;
    });
  }

}

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();
  }

}

## home.html
<template>
  Public Homepage
</template>

## home.js
export class Home {
}

## 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>

## login.html
<template>
  <div class="alert alert-info">Login form goes here</div>
</template>

## login.js
export class Login {
}

## nav-bar.html
<template>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

      <div class="top-menu">
        <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>

## 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 });
  }

}

## private-page.html
<template>
  This is a private page.
</template>

## private-page.js
export class PrivatePage {
}

## register.html
<template>
  <div class="alert alert-warning">Registration form goes here</div>
</template>

## register.js
export class Register {
}

## style.css
body {
  padding-top: 50px;
}

.top-menu {
  padding: 8px;
}

main {
  padding: 10px;
}

.page-host {
  padding-top: 10px;
}
	<template>

	<require from="nav-bar"></require>

	<nav-bar router.bind="router"></nav-bar>

	<main>

	<div class="page-host">
	<router-view></router-view>
	</div>

	</main>

	</template>
	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;
	}

	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;
	});
	}

	}

	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();
	}

	}
	<!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>
	<template>
	<div class="alert alert-info">Login form goes here</div>
	</template>
	<template>
	<div class="alert alert-warning">Registration form goes here</div>
	</template>
	body {
	padding-top: 50px;
	}

	.top-menu {
	padding: 8px;
	}

	main {
	padding: 10px;
	}

	.page-host {
	padding-top: 10px;
	}