feat(news): add news comment condition to news view

Add news comment condition to the news view based on user
authentication. Only logged in users are able to see the comment
functionality.

---

 scss/include/modules/_news.scss |  6 ++++++
 src/view-models/news/view.js    | 10 ++++++++--
 src/views/news/view.html        |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

Author: MarcScheib

scss/include/modules/_news.scss

@@ -17,6 +17,12 @@
 }
 
 .news-card-comment {
+  margin-top: 15px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
   img {
     margin-right: 10px;
     width: 32px;

src/view-models/news/view.js

@@ -1,10 +1,12 @@
 import {inject} from 'aurelia-framework';
+import {AuthService} from 'aurelia-auth';
 import {NewsService} from '../../services/news/news-service';
 
-@inject(NewsService)
+@inject(NewsService, AuthService)
 export class View {
-  constructor(newsService) {
+  constructor(newsService, authService) {
     this.newsService = newsService;
+    this.authService = authService;
   }
 
   activate(params, routeConfig) {
@@ -17,4 +19,8 @@ export class View {
         this.news = null;
       });
   }
+
+  get isAuthenticated() {
+    return this.authService.isAuthenticated();
+  }
 }

src/views/news/view.html

@@ -21,8 +21,8 @@ <h4><a href="#/news/view/${news.id}">${news.title}</a></h4>
             </div>
             <div class="card-text">${news.text}</div>
           </div>
-          <div class="card-footer">
-            <div class="news-card-comment">
+          <div class="card-footer" if.bind="isAuthenticated">
+            <div class="news-card-comment" if.bind="isAuthenticated">
               <!-- Todo: add logged in user data -->
               <a href="#/profiles/view/${news.user_id}" class="pull-left">
                 <img alt="${news.user.username}" src="http://lr.local/img/avatar/${news.user.avatar}">