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

Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.html

@@ -0,0 +1,10 @@
+<template name="timeoutCountdownDialog">
+    <div id="timeoutCountdownDialog">
+        <div class="dialogHeader">
+            <h5>Session is about to expire!</h5>
+        </div>
+        <div class="dialogContent">
+            <p>You will be log out in {{leftTime}} {{secondsText}}.</p>
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.js

@@ -0,0 +1,9 @@
+
+Template.timeoutCountdownDialog.helpers({
+    leftTime: function(e) {
+        return Session.get("countdownDialogLeftTime");
+    },
+    secondsText: function() {
+        return Session.get("countdownDialogLeftTime") > 1? "seconds": "second";
+    }
+});

Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl

@@ -0,0 +1,15 @@
+#timeoutCountdownDialog
+  display: none
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  margin: auto
+  width: 20%
+  height: 15%
+  z-index: 100
+  border-radius: 5px
+  padding: 10px 20px 10px 20px
+  background-color: rgba(255,255,255,1)
+  outline: none