feat(user): add user entity

Add user entity for logged in user which tracks auth state
and avoid dirty checking on auth service of aurelia-auth
plugin.

---

 config.js                                      |  3 +--
 src/resources/entities/logged-in-user.js       | 19 +++++++++++++++++++
 .../view-elements/navigation-side.html         |  4 ++--
 src/resources/view-elements/navigation-side.js | 13 ++++---------
 .../view-elements/navigation-top.html          |  6 +++---
 src/resources/view-elements/navigation-top.js  | 13 +++++--------
 src/view-models/news/view.js                   | 10 ++++------
 src/views/news/view.html                       |  4 ++--
 8 files changed, 40 insertions(+), 32 deletions(-)

Author: MarcScheib

config.js

@@ -12,7 +12,6 @@ System.config({
     "github:*": "jspm_packages/github/*",
     "npm:*": "jspm_packages/npm/*"
   },
-
   map: {
     "aurelia-animator-css": "npm:aurelia-animator-css@1.0.1",
     "aurelia-api": "npm:aurelia-api@3.0.0",
@@ -270,4 +269,4 @@ System.config({
       "indexof": "npm:indexof@0.0.1"
     }
   }
-});
+});

src/resources/entities/logged-in-user.js

@@ -0,0 +1,19 @@
+import {inject} from 'aurelia-framework';
+import {EventAggregator} from 'aurelia-event-aggregator';
+import {AuthService} from 'aurelia-authentication';
+
+@inject(EventAggregator, AuthService)
+export class LoggedInUser {
+  isLoggedIn = false;
+
+  constructor(eventAggregator, authService) {
+    this.authService = authService;
+    this.isLoggedIn = this.authService.isAuthenticated();
+    this.eventAggregator = eventAggregator;
+    this.eventAggregator.subscribe('authentication-change', this.authStateChanged.bind(this));
+  }
+
+  authStateChanged(authenticated) {
+    this.isLoggedIn = authenticated;
+  }
+}

src/resources/view-elements/navigation-side.html

@@ -16,8 +16,8 @@
       </a>
     </li>
   </ul>
-  <hr class="nav-separator" if.bind="isAuthenticated">
-  <ul class="nav-container" if.bind="isAuthenticated">
+  <hr class="nav-separator" if.bind="loggedInUser.isLoggedIn">
+  <ul class="nav-container" if.bind="loggedInUser.isLoggedIn">
     <li>
       <a href="#/news" class="nav-item-toggle">
         <i class="nav-item-icon fa fa-home fa-fw"></i> Settlement

src/resources/view-elements/navigation-side.js

@@ -1,16 +1,11 @@
 import {bindable, inject} from 'aurelia-framework';
-import {AuthService} from 'aurelia-authentication';
+import {LoggedInUser} from '../entities/logged-in-user';
 
-@inject(AuthService)
+@inject(LoggedInUser)
 export class NavigationSide {
-  _isAuthenticated = false;
   @bindable router = null;
 
-  constructor(auth) {
-    this.auth = auth;
-  }
-
-  get isAuthenticated() {
-    return this.auth.isAuthenticated();
+  constructor(loggedInUser) {
+    this.loggedInUser = loggedInUser;
   }
 }

src/resources/view-elements/navigation-top.html

@@ -3,17 +3,17 @@
     <nav-toggler></nav-toggler>
     <a class="navbar-brand" href="#">${router.title}</a>
     <ul class="nav navbar-nav pull-right">
-      <li class="nav-item" if.bind="!isAuthenticated">
+      <li class="nav-item" if.bind="!loggedInUser.isLoggedIn">
         <a class="nav-link" href="#/users/signup">
           <i class="fa fa-user fa-fw"></i> <span class="hidden-xs-down">Sign Up</span>
         </a>
       </li>
-      <li class="nav-item" if.bind="!isAuthenticated">
+      <li class="nav-item" if.bind="!loggedInUser.isLoggedIn">
         <a class="nav-link" href="#/auth/signin">
           <i class="fa fa-sign-in fa-fw"></i> <span class="hidden-xs-down">Sign In</span>
         </a>
       </li>
-      <li class="nav-item" if.bind="isAuthenticated">
+      <li class="nav-item" if.bind="loggedInUser.isLoggedIn">
         <a class="nav-link" href="#/auth/signout">
           <i class="fa fa-sign-out fa-fw"></i> <span class="hidden-xs-down">Sign Out</span>
         </a>

src/resources/view-elements/navigation-top.js

@@ -1,15 +1,12 @@
 import {bindable, inject} from 'aurelia-framework';
-import {AuthService} from 'aurelia-authentication';
 
-@inject(AuthService)
+import {LoggedInUser} from '../entities/logged-in-user';
+
+@inject(LoggedInUser)
 export class NavigationTop {
   @bindable router = null;
 
-  constructor(auth) {
-    this.auth = auth;
-  }
-
-  get isAuthenticated() {
-    return this.auth.isAuthenticated();
+  constructor(loggedInUser) {
+    this.loggedInUser = loggedInUser;
   }
 }

src/view-models/news/view.js

@@ -2,20 +2,22 @@ import {inject} from 'aurelia-framework';
 import {AuthService} from 'aurelia-authentication';
 import {NotificationService} from 'aurelia-notify';
 import {DataListController} from 'resources/features/data-list/controller';
+import {LoggedInUser} from 'resources/entities/logged-in-user';
 import {NewsService} from '../../services/news/news-service';
 import {NewsCommentsService} from '../../services/news/news-comments-service';
 
 const ENTER_KEY = 13;
 
-@inject(NewsService, NewsCommentsService, AuthService, NotificationService)
+@inject(NewsService, NewsCommentsService, AuthService, NotificationService, LoggedInUser)
 export class View {
   comments = [];
 
-  constructor(newsService, newsCommentsService, authService, notificationService) {
+  constructor(newsService, newsCommentsService, authService, notificationService, loggedInUser) {
     this.newsService = newsService;
     this.newsCommentsService = newsCommentsService;
     this.authService = authService;
     this.notificationService = notificationService;
+    this.loggedInUser = loggedInUser;
 
     this.dataListController = new DataListController(options => this.loadMore(options));
   }
@@ -74,8 +76,4 @@ export class View {
   loadMore(page) {
     return this.newsCommentsService.getAll(this.newsId, page);
   }
-
-  get isAuthenticated() {
-    return this.authService.isAuthenticated();
-  }
 }

src/views/news/view.html

@@ -24,7 +24,7 @@ <h4><a href="#/news/view/${news.id}">${news.title}</a></h4>
           </div>
 
           <div class="card-footer">
-            <div class="news-card-comment mb-1" if.bind="isAuthenticated">
+            <div class="news-card-comment mb-1" if.bind="loggedInUser.isLoggedIn">
               <a href="#/profiles/view/${user.id}" class="pull-left">
                 <!-- Todo: image path -->
                 <img alt="${user.username}" src="http://lr.local/img/avatar/${user.avatar}">
@@ -65,7 +65,7 @@ <h4><a href="#/news/view/${news.id}">${news.title}</a></h4>
               </div>
             </data-list>
 
-            <div class="news-card-comment" if.bind="isAuthenticated">
+            <div class="news-card-comment" if.bind="loggedInUser.isLoggedIn">
               <a href="">Comment...</a>
             </div>
           </div>