add signout component

Author: igorrKurr

app/components/signout-link.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  currentUserObserver: function() {
+    if(this.get('currentUser')){
+      var currentUser = this.get('currentUser');
+      if(this.get('avatarAttribute')){
+        this.setProperties({
+          isAvatarPresent: !Ember.isEmpty(currentUser.get(this.get('avatarAttribute'))),
+          avatarUrl: currentUser.get(this.get('avatarAttribute')).get('thumb_url')
+        });
+      }
+      this.set('username', currentUser.get(this.get('nameAttribute')));
+    }
+  }.observes('currentUser'),
+  actions:{
+    signout: function(){
+      this.sendAction('signoutAction');
+    }
+  }
+});

app/styles/app.css

@@ -0,0 +1,26 @@
+{{#if currentUser}}
+  {{#if isAvatarPresent}}
+    <ul class="nav navbar-nav navbar-right">
+      <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+          <img {{bind-attr src=avatarUrl}} class="profile-image img-circle avatar"> {{username}} <b class="caret"></b></a>
+          <ul class="dropdown-menu">
+              <li>{{#link-to 'users.edit' currentUser}}<i class="glyphicon glyphicon-cog"></i> Account{{/link-to}}</li>
+              <li class="divider"></li>
+              <li><a {{ action 'signout' }} href="#"><i class="glyphicon glyphicon-log-out"></i> Sign-out</a></li>
+          </ul>
+      </li>
+    </ul>
+  {{else}}
+    <p class="navbar-text navbar-right">
+      <a {{ action 'signout' }} href="#">
+        Signout
+        <i class="glyphicon glyphicon-log-out"></i>
+      </a>
+    </p>
+    <p class="navbar-text navbar-right">
+      Signed in as&nbsp;
+      <span class='username'>{{username}}</span>
+    </p>
+  {{/if}}
+{{/if}}

app/templates/components/signout-link.hbs

@@ -3,5 +3,6 @@ module.exports = {
 
   included: function(app) {
     this.app = app;
+    app.import('vendor/signout-link.css');
   }
 };

index.js

@@ -43,7 +43,7 @@ module.exports = function(app) {
 
   appRouter.get('/users/:id', function(req, res) {
     if(req.params.id === 'admin'){
-      return res.send({user: {id: 1, name: 'testuser', lat: 50, long: 40, zoom: 3}});
+      return res.send({user: {id: 1, name: 'Admin', lat: 50, long: 40, zoom: 3, avatar_id: 1}, avatars: [{id: 1, thumb_url: 'http://placehold.it/50x50', url: 'http://placehold.it/350x350'}]});
     }
     res.send({user: {id: req.params.id, name: 'testuser', lat: 50, long: 40, zoom: 3}});
   });

server/mocks/app.js

@@ -8,13 +8,7 @@
         {{/each}}
       </ul>
       {{#if session.isAuthenticated}}
-      <p class="navbar-text navbar-right">
-        <a {{ action 'invalidateSession' }} href="#">
-          Signout
-          <i class="glyphicon glyphicon-log-out"></i>
-        </a>
-      </p>
-      <p class="navbar-text navbar-right">Signed in as <span class='username'>{{shared.currentUser.name}}</span></p>
+        {{signout-link signoutAction='invalidateSession' currentUser=shared.currentUser nameAttribute='name' avatarAttribute='avatar'}}
       {{/if}}
       </div>
     </div>