ahmedomarjee · May 7, 2018 23:34 · Oct 4, 2016 · Oct 4, 2016
diff --git a/app.js b/app.js
@@ -24,11 +24,11 @@ export class App {
         "title": "Home"
       },
       {
-        "route": "private-page",
+        "route": "dashboard",
         "name": "private-page",
         "moduleId": "private-page",
         "nav": true,
-        "title": "Private page",
+        "title": "Dashboard Page",
         // this is going to be available within AuthorizeStep
         "settings": {
           "auth": true
@@ -39,7 +39,20 @@ export class App {
         "name": "login",
         "moduleId": "login",
         "nav": true,
-        "title": "Login Page"
+        "title": "Login Page",
+        "settings": {
+          "publicOnly": true
+        }
+      },
+      {
+        "route": "register",
+        "name": "register",
+        "moduleId": "register",
+        "nav": true,
+        "title": "Register Page",
+        "settings": {
+          "publicOnly": true
+        }
       }
     ]);
 
@@ -73,10 +86,15 @@ class AuthorizeStep {
     // settings object will be preserved during navigation
     let loginRequired = currentRoute.settings && currentRoute.settings.auth === true;
 
-    if (!isLoggedIn && loginRequired === 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();
   }
 

diff --git a/register.html b/register.html
@@ -0,0 +1,3 @@
+<template>
+  <div class="alert alert-warning">Registration form goes here</div>
+</template>
diff --git a/register.js b/register.js
@@ -0,0 +1,2 @@
+export class Register {
+}
diff --git a/app.html b/app.html
@@ -0,0 +1,15 @@
+<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>
diff --git a/app.js b/app.js
@@ -0,0 +1,83 @@
+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": "private-page",
+        "name": "private-page",
+        "moduleId": "private-page",
+        "nav": true,
+        "title": "Private page",
+        // this is going to be available within AuthorizeStep
+        "settings": {
+          "auth": true
+        }
+      },
+      {
+        "route": "login",
+        "name": "login",
+        "moduleId": "login",
+        "nav": true,
+        "title": "Login Page"
+      }
+    ]);
+
+    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 && loginRequired === true) {
+        return next.cancel(new Redirect('login'));
+    }
+
+    return next();
+  }
+
+}
diff --git a/home.html b/home.html
@@ -0,0 +1,3 @@
+<template>
+  Public Homepage
+</template>
diff --git a/home.js b/home.js
@@ -0,0 +1,2 @@
+export class Home {
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!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>
diff --git a/login.html b/login.html
@@ -0,0 +1,3 @@
+<template>
+  <div class="alert alert-info">Login form goes here</div>
+</template>
diff --git a/login.js b/login.js
@@ -0,0 +1,2 @@
+export class Login {
+}
diff --git a/nav-bar.html b/nav-bar.html
@@ -0,0 +1,17 @@
+<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>
diff --git a/nav-bar.js b/nav-bar.js
@@ -0,0 +1,19 @@
+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 });
+  }
+
+}
diff --git a/private-page.html b/private-page.html
@@ -0,0 +1,3 @@
+<template>
+  This is a private page.
+</template>
diff --git a/private-page.js b/private-page.js
@@ -0,0 +1,2 @@
+export class PrivatePage {
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,15 @@
+body {
+  padding-top: 50px;
+}
+
+.top-menu {
+  padding: 8px;
+}
+
+main {
+  padding: 10px;
+}
+
+.page-host {
+  padding-top: 10px;
+}
No results found