Merge userManagement branch to master

Packages/lesiontracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html

@@ -4,7 +4,23 @@
             <img src="/images/logo.png">
             <h4 class="name">Open Health Imaging Foundation</h4>
         </a>
+        {{#if currentUser}}
+            <div id="userProfile" class="row-fluid">
+                <div class="dropdown clearfix">
+                    <ul class="nav nav-pills pull-right">
+                        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">{{fullName}}<b class="caret"></b></a>
+                            <ul class="dropdown-menu pull-right">
+                                <li><a href="changePassword" id="changePassword"><i class="fa fa-lock"></i>Change Password</a></li>
+                                <li class="divider"></li>
+                                <li><a href="#" id="logoutButton"><i class="fa fa-power-off"></i>Logout</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        {{/if}}
     </div>
+    {{> timeoutCountdownDialog}}
     {{ >optionsButton }}
     {{ >yield }}
 </template>

Packages/lesiontracker/client/components/lesionTrackerLayout/lesionTrackerLayout.js

@@ -0,0 +1,44 @@
+Template.lesionTrackerLayout.events({
+    'click #logoutButton': function() {
+        Meteor.logout(function(){
+            Router.go('/entrySignIn');
+        });
+    },
+    'click #changePassword': function() {
+        Router.go('/changePassword');
+    }
+});
+
+Template.lesionTrackerLayout.helpers({
+    'fullName': function() {
+        return Meteor.user().profile.fullName;
+    }
+});
+
+Template.lesionTrackerLayout.onCreated(function() {
+    // Show countdown dialog
+    var handle;
+    $(document).on('TriggerOpenTimeoutCountdownDialog', function (e, leftTime) {
+        // TODO: Show modal dialog
+        handle = setInterval(function() {
+            leftTime --;
+            // Set countdownDialogLeftTime session
+            Session.set("countdownDialogLeftTime", leftTime);
+            // Show dialog
+            if ($("#timeoutCountdownDialog").css("display") == "none") {
+                $("#timeoutCountdownDialog").css("display", "block");
+            }
+        }, 1000);
+
+    });
+
+    $(document).on('TriggerCloseTimeoutCountdownDialog', function (e) {
+        $("#timeoutCountdownDialog").css("display", "none");
+        if (handle) {
+            clearInterval(handle);
+            // Close the dialog
+            $("#timeoutCountdownDialog").css("display", "none");
+
+        }
+    });
+});

Packages/lesiontracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl

@@ -7,12 +7,35 @@
   @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait)
     width: 15%
 
-.navbar-brand
+  #userProfile
+    position: relative
+    float: right
+
+    .nav-pills > li > a:hover, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus
+      background-color: #eee
+      color: black
+
+    .dropdown-menu > li > a:hover
+      background-color: #eee
+
+    .dropdown-menu > li > a >i
+      margin-right: 5px
+
+    .dropdown-toggle
+      color: #C1C1C1
+
+    .divider
+      height: 2px
+      margin: 9px 2px
+      overflow: hidden
+      background-color: #e5e5e5
+      border-bottom: 1px solid #fff
+
+  .navbar-brand
     display: inline-block
     padding: 0
     margin-right: 5px
     height: 100%
-    width: 100%
 
     img
       height: 30px