From e83b5348ff52bc9e32c2fc932e9fb0cbc51648b5 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 13 Mar 2017 18:24:34 -0300
Subject: [PATCH] Adapting header to the new structure

---
 LesionTracker/.meteor/packages                |  1 +
 LesionTracker/.meteor/versions                |  1 +
 LesionTracker/client/components/app/app.html  | 30 +++----
 LesionTracker/client/components/app/app.js    | 49 ++++++++++-
 LesionTracker/client/components/app/app.styl  | 83 ++++++++++---------
 .../client/components/base/mixins/action.js   |  7 +-
 .../client/components/base/mixins/dropdown.js | 47 +++++++++--
 .../bootstrap/dropdown/backdrop.html          |  3 -
 .../bootstrap/dropdown/dropdown.styl          | 20 ++++-
 .../components/bootstrap/dropdown/form.html   | 10 ++-
 .../client/components/bootstrap/index.js      |  1 -
 .../ohif-core/client/ui/dropdown/dropdown.js  | 28 ++++---
 .../ohif-design/styles/imports/variables.styl |  1 +
 .../client/components/header/header.html      | 14 ++++
 .../client/components/header/header.js        | 37 +++++++++
 .../client/components/header/header.styl      | 23 +++++
 .../ohif-header/client/components/index.js    |  3 +
 Packages/ohif-header/client/index.js          |  1 +
 Packages/ohif-header/client/lib/header.js     | 35 ++++++++
 Packages/ohif-header/components/header.html   | 12 ---
 Packages/ohif-header/components/header.styl   | 31 -------
 Packages/ohif-header/index.js                 |  2 -
 Packages/ohif-header/main.js                  | 11 +++
 Packages/ohif-header/package.js               |  7 +-
 .../client/active-entry/index.js              |  3 +
 .../client/components/index.js                | 15 ++++
 Packages/ohif-user-management/client/index.js |  4 +
 .../ohif-user-management/client/lib/audit.js  |  6 ++
 .../client/lib/changePassword.js              |  6 ++
 .../client/lib/getName.js                     |  9 ++
 .../ohif-user-management/client/lib/index.js  |  4 +
 .../ohif-user-management/client/lib/logout.js |  9 ++
 Packages/ohif-user-management/main.js         | 10 +++
 Packages/ohif-user-management/package.js      | 26 ++----
 34 files changed, 395 insertions(+), 154 deletions(-)
 delete mode 100644 Packages/ohif-core/client/components/bootstrap/dropdown/backdrop.html
 create mode 100644 Packages/ohif-header/client/components/header/header.html
 create mode 100644 Packages/ohif-header/client/components/header/header.js
 create mode 100644 Packages/ohif-header/client/components/header/header.styl
 create mode 100644 Packages/ohif-header/client/components/index.js
 create mode 100644 Packages/ohif-header/client/index.js
 create mode 100644 Packages/ohif-header/client/lib/header.js
 delete mode 100644 Packages/ohif-header/components/header.html
 delete mode 100644 Packages/ohif-header/components/header.styl
 delete mode 100644 Packages/ohif-header/index.js
 create mode 100644 Packages/ohif-header/main.js
 create mode 100644 Packages/ohif-user-management/client/active-entry/index.js
 create mode 100644 Packages/ohif-user-management/client/components/index.js
 create mode 100644 Packages/ohif-user-management/client/index.js
 create mode 100644 Packages/ohif-user-management/client/lib/audit.js
 create mode 100644 Packages/ohif-user-management/client/lib/changePassword.js
 create mode 100644 Packages/ohif-user-management/client/lib/getName.js
 create mode 100644 Packages/ohif-user-management/client/lib/index.js
 create mode 100644 Packages/ohif-user-management/client/lib/logout.js
 create mode 100644 Packages/ohif-user-management/main.js

diff --git a/LesionTracker/.meteor/packages b/LesionTracker/.meteor/packages
index 96b1071bb..bd7e226c3 100644
--- a/LesionTracker/.meteor/packages
+++ b/LesionTracker/.meteor/packages
@@ -28,6 +28,7 @@ aldeed:simple-schema          # Third party package to deal with schemas
 # OHIF Packages
 ohif:design
 ohif:core
+ohif:header
 ohif:cornerstone
 ohif:viewerbase
 ohif:study-list
diff --git a/LesionTracker/.meteor/versions b/LesionTracker/.meteor/versions
index 1bc3ff4fd..76156043d 100644
--- a/LesionTracker/.meteor/versions
+++ b/LesionTracker/.meteor/versions
@@ -92,6 +92,7 @@ ohif:cornerstone@0.0.1
 ohif:design@0.0.1
 ohif:dicom-services@0.0.1
 ohif:hanging-protocols@0.0.1
+ohif:header@0.0.1
 ohif:lesiontracker@0.0.1
 ohif:log@0.0.1
 ohif:measurements@0.0.1
diff --git a/LesionTracker/client/components/app/app.html b/LesionTracker/client/components/app/app.html
index 17784434d..5fd7a1ab7 100644
--- a/LesionTracker/client/components/app/app.html
+++ b/LesionTracker/client/components/app/app.html
@@ -1,24 +1,26 @@
 <template name="app">
-    <div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
-        <div class="clearfix">
-            <a target='_blank'
-               class="brandSection pull-left"
-               href="http://ohif.org">
-                <svg class="logoImage">
-                    <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
-                </svg>
-                <div class="logoText">Open Health Imaging Foundation</div>
-            </a>
+    {{#header brandHref='http://ohif.org' headerClasses=instance.headerClasses}}
+        {{#section 'brand'}}
+            <svg class="logo-image">
+                <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
+            </svg>
+            <div class="logo-text">Open Health Imaging Foundation</div>
+        {{/section}}
+        {{#section 'headerAfterBrand'}}
             {{#if studyListToggleText}}
                 <a class="btn studyListLinkSection pull-left js-toggle-studyList" id="{{dasherize studyListToggleText}}-btn">
                     {{studyListToggleText}}
                 </a>
             {{/if}}
-            <div class="userAccountSection pull-right">
-                {{>userAccountMenu}}
+        {{/section}}
+        {{#section 'headerMenu'}}
+            <span class="user-name pull-left m-r-1">{{userName}}</span>
+            <div class="menu-toggle pull-right">
+                <i class="fa fa-cog"></i>
+                <span class="caret-down"></span>
             </div>
-        </div>
-    </div>
+        {{/section}}
+    {{/header}}
     <div id="studylistTabs" class="tab-content">
         <div class="tab-pane active" id="studylistTab">
             <div class="studylistContainer">
diff --git a/LesionTracker/client/components/app/app.js b/LesionTracker/client/components/app/app.js
index 776f5887a..3e705fcad 100644
--- a/LesionTracker/client/components/app/app.js
+++ b/LesionTracker/client/components/app/app.js
@@ -1,3 +1,6 @@
+import { Template } from 'meteor/templating';
+import { Session } from 'meteor/session';
+import { ReactiveVar } from 'meteor/reactive-var';
 import { OHIF } from 'meteor/ohif:core';
 
 const studylistContentId = 'studylistTab';
@@ -7,12 +10,50 @@ const viewerContentId = 'viewerTab';
 // If there is currently any Session data for this object,
 // use this to repopulate the variable
 Template.app.onCreated(() => {
+    const instance = Template.instance();
+    instance.headerClasses = new ReactiveVar('');
+
     ViewerData = Session.get('ViewerData') || {};
+
+    OHIF.header.setDropdownItems([{
+        action: OHIF.user.audit,
+        text: 'View Audit Log',
+        iconClasses: 'log',
+        iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#log',
+        separatorAfter: true
+    }, {
+        action: () => OHIF.ui.showDialog('themeSelectorModal'),
+        text: 'Themes',
+        iconClasses: 'theme',
+        iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#theme',
+        separatorAfter: true
+    }, {
+        action: () => OHIF.ui.showDialog('serverInformationModal'),
+        text: 'Server Information',
+        iconClasses: 'server',
+        iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#server',
+        separatorAfter: true
+    }, {
+        action: OHIF.user.changePassword,
+        text: 'Change Password',
+        iconClasses: 'password',
+        iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#password'
+    }, {
+        action: OHIF.user.logout,
+        text: 'Logout',
+        iconClasses: 'logout',
+        iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#logout'
+    }]);
+
+    instance.autorun(() => {
+        const contentId = Session.get('activeContentId');
+        instance.headerClasses.set(contentId === viewerContentId ? '' : 'header-big');
+    });
 });
 
 Template.app.onRendered(() => {
     const contentId = Session.get('activeContentId');
-    if(contentId === viewerContentId) {
+    if (contentId === viewerContentId) {
         switchToTab(contentId);
     }
 });
@@ -56,9 +97,11 @@ Template.app.events({
 });
 
 Template.app.helpers({
+    userName: OHIF.user.getName,
+
     studyListToggleText() {
         const contentId = Session.get('activeContentId');
-        
+
         // If the Viewer has not been opened yet, 'Back to viewer' should
         // not be displayed
         const viewerContentExists = !!Object.keys(ViewerData).length;
@@ -82,4 +125,4 @@ Template.app.helpers({
     }
 });
 
-Session.set('defaultSignInMessage', 'Tumor tracking in your browser.');
\ No newline at end of file
+Session.set('defaultSignInMessage', 'Tumor tracking in your browser.');
diff --git a/LesionTracker/client/components/app/app.styl b/LesionTracker/client/components/app/app.styl
index 1788a6498..8527ea9cf 100644
--- a/LesionTracker/client/components/app/app.styl
+++ b/LesionTracker/client/components/app/app.styl
@@ -1,45 +1,46 @@
 @import "{ohif:design}/app"
 
-$expandedHeight = 160px
+body>.header
 
-.logoImage
-  display: inline-block
-  height: 100%
-  float: left
-
-.topBar
-  height: $topBarHeight
-  padding: 10px 10px 0
-  theme('color', '$textPrimaryColor')
-  theme('background-color', '$primaryBackgroundColor')
-  transition(all 0.5s ease)
-
-  &>.clearfix
-    position: relative
-
-  .brandSection
+  .brand
     height: 30px
     display: inline-block
     text-decoration: none
 
-    .logoImage
+    .logo-image
+      display: inline-block
+      fill: transparent
+      float: left
+      height: 100%
       margin: 0 8px 0 0
       width: 30px
 
-    .logoText
+    .logo-text
       display: inline-block
       font-family: $logoFontFamily
+      font-size: 14px
       font-weight: $logoFontWeight
       theme('color', '$textPrimaryColor')
       line-height: 30px
 
-  .studyListLinkSection
-    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
-    margin: 3px 0 0 10px
-    padding: 0 0 0 10px
-    
-    &#back-to-viewer-btn
-      border-left: 0
+  .header-menu
+    .user-name
+      font-size: 13px
+
+    .menu-toggle
+      theme('border-left', 'solid 1px $defaultColor')
+      display: inline-block
+      height: 18px
+      padding: 0 8px
+
+      .fa
+        theme('color', '$defaultColor')
+        font-size: 17px
+        line-height: 18px
+
+      .caret-down
+        theme('color', '$uiGrayLight')
+        margin: 0 4px 4px 2px
 
   .btn
     theme('color', '$textSecondaryColor')
@@ -54,23 +55,29 @@ $expandedHeight = 160px
     &:active
       theme('color', '$activeColor')
 
-  &.studyList
-    background-color: rgba(21, 25, 30, 0.7)
-    height: $expandedHeight
+  .studyListLinkSection
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+    margin: 3px 0 0 10px
+    padding: 0 0 0 10px
+
+    &#back-to-viewer-btn
+      border-left: 0
+
+  &.header-big
     padding-left: $studyListPadding
     padding-right: $studyListPadding
 
-    .brandSection
-      height: 100%
-      width: 80%
-      line-height: $expandedHeight - 10px
+    .brand
+        height: 100%
+        width: 80%
+        line-height: $topBarExpandedHeight - 10px
 
-      .logoImage
-        width: 50px
-        margin: 0 20px 0 0
+        .logo-image
+          margin: 0 20px 0 0
+          width: 50px
 
-      .logoText
-        font-size: 30px
+        .logo-text
+          font-size: 30px
 
     .studyListLinkSection
       border: none
diff --git a/Packages/ohif-core/client/components/base/mixins/action.js b/Packages/ohif-core/client/components/base/mixins/action.js
index 799cf7620..6e48bf5ff 100644
--- a/Packages/ohif-core/client/components/base/mixins/action.js
+++ b/Packages/ohif-core/client/components/base/mixins/action.js
@@ -31,14 +31,17 @@ OHIF.mixins.action = new OHIF.Mixin({
 
                 // Stop here calling the action if it's a function
                 if (typeof action === 'function') {
-                    return action.call(this, params);
+                    component.actionResult = action.call(this, params);
+                    return component.actionResult;
                 }
 
                 // Stop here if no API or action was defined
                 if (!api || !action || typeof api[action] !== 'function') return;
 
                 // Call the defined action function
-                api[action].call(this, params);
+                component.actionResult = api[action].call(this, params);
+
+                return component.actionResult;
             }
         }
     }
diff --git a/Packages/ohif-core/client/components/base/mixins/dropdown.js b/Packages/ohif-core/client/components/base/mixins/dropdown.js
index 7956860ac..ce2cd94c7 100644
--- a/Packages/ohif-core/client/components/base/mixins/dropdown.js
+++ b/Packages/ohif-core/client/components/base/mixins/dropdown.js
@@ -1,6 +1,7 @@
 import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { Blaze } from 'meteor/blaze';
+import { $ } from 'meteor/jquery';
 import { OHIF } from 'meteor/ohif:core';
 
 /*
@@ -11,7 +12,7 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
     composition: {
         onRendered() {
             const instance = Template.instance();
-            const { event, centered } = instance.data.options;
+            const { event, centered, marginTop } = instance.data.options;
 
             // Destroy the Blaze created view (either created with template calls or with renderWithData)
             instance.destroyView = () => {
@@ -22,6 +23,12 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
                 }
             };
 
+            // Stop here and destroy the view if no items was given
+            if (!instance.data.items.length) {
+                instance.data.promiseReject();
+                return instance.destroyView();
+            }
+
             // Get the dropdown element to enable position manipulation
             const $dropdown = instance.$('.dropdown');
             const dropdown = $dropdown[0];
@@ -29,20 +36,22 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
 
             dropdown.oncontextmenu = () => false;
 
-            const cssBefore = {
-                'z-index': 10000
-            };
+            const cssBefore = { 'z-index': 10000 };
             if (event) {
                 cssBefore.position = 'fixed';
                 $dropdownMenu.bounded();
             }
 
-            $dropdownMenu.css(cssBefore).focus();
+            if (marginTop) {
+                cssBefore['margin-top'] = marginTop;
+            }
+
+            $dropdownMenu.css(cssBefore);
 
             // Postpone visibility change to allow CSS transitions
             Meteor.defer(() => {
-                // Show the dropdown
-                $dropdown.addClass('open');
+                // Show the dropdown and focus the first option
+                $dropdown.addClass('open').find('a:first').focus();
 
                 // Change the dropdown position if mouse event was given
                 if (event) {
@@ -62,9 +71,18 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
         },
 
         events: {
-            'click .form-action.disabled'(event, instance) {
-                event.preventDefault();
+            'click .form-action'(event, instance) {
                 event.stopPropagation();
+                const $target = $(event.currentTarget);
+                const isDisabled = $target.hasClass('disabled');
+                if (isDisabled) {
+                    instance.data.promiseReject();
+                } else {
+                    const component = $target.data('component');
+                    instance.data.promiseResolve(component.actionResult);
+                }
+
+                instance.destroyView();
             },
 
             'click .dropdown'(event, instance) {
@@ -73,8 +91,19 @@ OHIF.mixins.dropdown = new OHIF.Mixin({
                     event.preventDefault();
                     event.stopPropagation();
                 } else {
+                    instance.data.promiseReject();
                     instance.destroyView();
                 }
+            },
+
+            'blur .dropdown'(event, instance) {
+                Meteor.defer(() => {
+                    const $focus = $(':focus');
+                    if (!$focus.length || !$.contains(event.currentTarget, $focus[0])) {
+                        instance.data.promiseReject();
+                        instance.destroyView();
+                    }
+                });
             }
         }
     }
diff --git a/Packages/ohif-core/client/components/bootstrap/dropdown/backdrop.html b/Packages/ohif-core/client/components/bootstrap/dropdown/backdrop.html
deleted file mode 100644
index 46321f386..000000000
--- a/Packages/ohif-core/client/components/bootstrap/dropdown/backdrop.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<template name="dropdownBackdrop">
-    <div class="dropdown-backdrop"></div>
-</template>
diff --git a/Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl b/Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl
index d1f9ab14f..fa065b9d4 100644
--- a/Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl
+++ b/Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl
@@ -1,3 +1,19 @@
+@import "{ohif:design}/app"
+
 .dropdown
-  ul.dropdown-menu li
-    cursor: pointer
+  outline: none
+
+  ul.dropdown-menu
+
+    li.divider
+      margin: 4px 0
+
+    li a
+      outline: none
+      padding: 8px 20px
+
+      svg
+        display: inline-block
+        max-width: 18px
+        max-height: 18px
+        vertical-align: middle
diff --git a/Packages/ohif-core/client/components/bootstrap/dropdown/form.html b/Packages/ohif-core/client/components/bootstrap/dropdown/form.html
index d5dd7d4d9..907efd360 100644
--- a/Packages/ohif-core/client/components/bootstrap/dropdown/form.html
+++ b/Packages/ohif-core/client/components/bootstrap/dropdown/form.html
@@ -1,6 +1,5 @@
 <template name="dropdownForm">
     {{#form (extend this mixins='dropdown' class='dropdown' hideValidationBox=true)}}
-        {{>dropdownBackdrop}}
         <ul class="dropdown-menu {{this.options.menuClasses}}">
             {{#if UI.contentBlock}}
                 {{>UI.contentBlock}}
@@ -11,8 +10,13 @@
                     {{/if}}
                     <li class="{{#if item.disabled}}disabled{{/if}}">
                         {{#link item}}
-                            {{#if item.iconClasses}}
-                                <i class="{{item.iconClasses}}"></i>
+                            {{#if item.icon}}
+                                <i class="{{item.icon}} {{item.iconClasses}}"></i>
+                            {{/if}}
+                            {{#if item.iconSvgUse}}
+                                <svg class="{{item.iconClasses}}">
+                                    <use xlink:href={{absoluteUrl item.iconSvgUse}}></use>
+                                </svg>
                             {{/if}}
                             {{#if item.text}}
                                 <span>{{item.text}}</span>
diff --git a/Packages/ohif-core/client/components/bootstrap/index.js b/Packages/ohif-core/client/components/bootstrap/index.js
index 3fef3385d..a85beb554 100644
--- a/Packages/ohif-core/client/components/bootstrap/index.js
+++ b/Packages/ohif-core/client/components/bootstrap/index.js
@@ -15,7 +15,6 @@ import './dialog/simple.js';
 import './dialog/unsavedChangesDialog.html';
 import './dialog/unsavedChangesDialog.js';
 
-import './dropdown/backdrop.html';
 import './dropdown/form.html';
 
 import './form/button.html';
diff --git a/Packages/ohif-core/client/ui/dropdown/dropdown.js b/Packages/ohif-core/client/ui/dropdown/dropdown.js
index 423feb766..17392bc7b 100644
--- a/Packages/ohif-core/client/ui/dropdown/dropdown.js
+++ b/Packages/ohif-core/client/ui/dropdown/dropdown.js
@@ -3,27 +3,31 @@ import { Blaze } from 'meteor/blaze';
 import { OHIF } from 'meteor/ohif:core';
 
 OHIF.ui.showDropdown = (items=[], options={}) => {
+    let promiseResolve;
+    let promiseReject;
+    const promise = new Promise((resolve, reject) => {
+        promiseResolve = resolve;
+        promiseReject = reject;
+    });
+
     // Prepare the method to destroy the view
     let view;
     const destroyView = () => Blaze.remove(view);
+
+    // Create the data object that the dropdown will receive
     const templateData = {
         items,
         options,
-        destroyView
+        destroyView,
+        promise,
+        promiseResolve,
+        promiseReject
     };
 
     // Render the dialog with the given template and data
     const parentElement = options.parentElement || document.body;
     view = Blaze.renderWithData(Template.dropdownForm, templateData, parentElement);
-};
 
-Meteor.startup(() => {
-    OHIF.ui.showDropdown([{
-        text: 'test 1',
-        action: () => console.warn('test1Clicked'),
-        separatorAfter: true
-    }, {
-        text: 'test 2',
-        action: () => console.warn('test2Clicked')
-    }]);
-});
+    // Return the promise to allow callbacks stacking from outside
+    return promise;
+};
diff --git a/Packages/ohif-design/styles/imports/variables.styl b/Packages/ohif-design/styles/imports/variables.styl
index cf5b08fe2..e38c7f22b 100644
--- a/Packages/ohif-design/styles/imports/variables.styl
+++ b/Packages/ohif-design/styles/imports/variables.styl
@@ -2,6 +2,7 @@
 
 // Sizes
 $topBarHeight = 40px
+$topBarExpandedHeight = 160px
 $toolbarHeight = 78px
 $toolbarDrawerHeight = 62px
 $studiesSidebarMenuWidth = 307px
diff --git a/Packages/ohif-header/client/components/header/header.html b/Packages/ohif-header/client/components/header/header.html
new file mode 100644
index 000000000..a61b4ad15
--- /dev/null
+++ b/Packages/ohif-header/client/components/header/header.html
@@ -0,0 +1,14 @@
+<template name="header">
+    <div class="header noselect {{reactive headerClasses}}">
+        <div class="clearfix">
+            <a target='_blank' class="brand pull-left" href="{{choose this.brandHref '/'}}">
+                {{>section 'brand'}}
+            </a>
+            {{>section 'headerAfterBrand'}}
+            <a href='#' class="header-menu pull-right">
+                {{>section 'headerMenu'}}
+            </a>
+        </div>
+        {{>UI.contentBlock}}
+    </div>
+</template>
diff --git a/Packages/ohif-header/client/components/header/header.js b/Packages/ohif-header/client/components/header/header.js
new file mode 100644
index 000000000..acdbc1b3d
--- /dev/null
+++ b/Packages/ohif-header/client/components/header/header.js
@@ -0,0 +1,37 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { $ } from 'meteor/jquery';
+import { OHIF } from 'meteor/ohif:core';
+
+Template.header.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.dropdownOpen = new ReactiveVar(false);
+    instance.dropdownItems = [];
+    instance.autorun(() => {
+        OHIF.header.dropdownObserver.depend();
+        instance.dropdownItems = OHIF.header.getDropdownItems();
+    });
+});
+
+Template.header.events({
+    'mousedown .header-menu'(event, instance) {
+        if (instance.dropdownOpen.get()) {
+            event.preventDefault();
+            return $(event.currentTarget).focus();
+        }
+    },
+
+    'click .header-menu'(event, instance) {
+        event.preventDefault();
+        if (instance.dropdownOpen.get()) return;
+        instance.dropdownOpen.set(true);
+        const closeHandler = () => Meteor.setTimeout(() => instance.dropdownOpen.set(false), 200);
+        OHIF.ui.showDropdown(instance.dropdownItems, {
+            parentElement: event.currentTarget,
+            menuClasses: 'dropdown-menu-right',
+            marginTop: '25px'
+        }).then(closeHandler).catch(closeHandler);
+    }
+});
diff --git a/Packages/ohif-header/client/components/header/header.styl b/Packages/ohif-header/client/components/header/header.styl
new file mode 100644
index 000000000..885e72192
--- /dev/null
+++ b/Packages/ohif-header/client/components/header/header.styl
@@ -0,0 +1,23 @@
+@import "{ohif:design}/app"
+
+body>.header
+  height: $topBarHeight
+  padding: 10px 10px 0
+  theme('color', '$textPrimaryColor')
+  theme('background-color', '$primaryBackgroundColor')
+  transition(all 0.5s ease)
+
+  &>.clearfix
+    position: relative
+
+  .header-menu
+    padding: 4px 0
+    font-size: 13px
+    font-weight: 400
+    line-height: 18px
+    text-decoration: none
+    theme('color', '$defaultColor')
+
+  &.header-big
+    height: $topBarExpandedHeight
+    background-color: rgba(21, 25, 30, 0.7)
diff --git a/Packages/ohif-header/client/components/index.js b/Packages/ohif-header/client/components/index.js
new file mode 100644
index 000000000..2ed540fd4
--- /dev/null
+++ b/Packages/ohif-header/client/components/index.js
@@ -0,0 +1,3 @@
+import './header/header.html';
+import './header/header.js';
+import './header/header.styl';
diff --git a/Packages/ohif-header/client/index.js b/Packages/ohif-header/client/index.js
new file mode 100644
index 000000000..758f32245
--- /dev/null
+++ b/Packages/ohif-header/client/index.js
@@ -0,0 +1 @@
+import './components';
diff --git a/Packages/ohif-header/client/lib/header.js b/Packages/ohif-header/client/lib/header.js
new file mode 100644
index 000000000..64d7779b5
--- /dev/null
+++ b/Packages/ohif-header/client/lib/header.js
@@ -0,0 +1,35 @@
+import { Tracker } from 'meteor/tracker';
+import { _ } from 'meteor/underscore';
+
+export class Header {
+    constructor() {
+        this.dropdownObserver = new Tracker.Dependency();
+        this._dropdownItems = [];
+        this.dropdownObserver.changed();
+    }
+
+    clearDropDownItems() {
+        this._dropdownItems = [];
+        this.dropdownObserver.changed();
+    }
+
+    setDropdownItems(items) {
+        this._dropdownItems = items;
+        this.dropdownObserver.changed();
+    }
+
+    addDropdownItem(item) {
+        this._dropdownItems.push(item);
+        this.dropdownObserver.changed();
+    }
+
+    removeDropdownItem(item) {
+        this._dropdownItems = _.without(this._dropdownItems, item);
+        this.dropdownObserver.changed();
+    }
+
+    getDropdownItems() {
+        this.dropdownObserver.depend();
+        return this._dropdownItems;
+    }
+}
diff --git a/Packages/ohif-header/components/header.html b/Packages/ohif-header/components/header.html
deleted file mode 100644
index 5c2ba39d0..000000000
--- a/Packages/ohif-header/components/header.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<template name="header">
-    <div class="header noselect {{headerClasses}}">
-        <div class="clearfix">
-            <a target='_blank' class="brand pull-left" href="{{choose this.brandHref '/'}}">
-                {{>section 'brand'}}
-            </a>
-            <div class="header-menu pull-right">
-                
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/Packages/ohif-header/components/header.styl b/Packages/ohif-header/components/header.styl
deleted file mode 100644
index 7aef70132..000000000
--- a/Packages/ohif-header/components/header.styl
+++ /dev/null
@@ -1,31 +0,0 @@
-$expandedHeight = 160px
-
-.header
-  height: $topBarHeight
-  padding: 10px 10px 0
-  theme('color', '$textPrimaryColor')
-  theme('background-color', '$primaryBackgroundColor')
-  transition(all 0.5s ease)
-
-  &>.clearfix
-    position: relative
-
-  .brand
-    background-image: url(/packages/pim_webviewer/assets/logo.svg)
-    background-repeat: no-repeat
-    background-size: 100%
-    display: block
-    font-size: 9px
-    height: 3.5em
-    text-decoration: none
-    width: 34.6em
-
-  &.studyList
-    background-color: rgba(21, 25, 30, 0.7)
-    height: $expandedHeight
-    padding-left: $studyListPadding
-    padding-right: $studyListPadding
-
-    .brand
-      font-size: 16px
-      margin-top: 44px
diff --git a/Packages/ohif-header/index.js b/Packages/ohif-header/index.js
deleted file mode 100644
index fd2f325d4..000000000
--- a/Packages/ohif-header/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './components/header.html';
-import './components/header.styl';
diff --git a/Packages/ohif-header/main.js b/Packages/ohif-header/main.js
new file mode 100644
index 000000000..b2eb639d6
--- /dev/null
+++ b/Packages/ohif-header/main.js
@@ -0,0 +1,11 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Header } from './client/lib/header';
+
+/*
+ * Defines the base OHIF header object
+ */
+const header = new Header();
+
+OHIF.header = header;
+
+export { header };
diff --git a/Packages/ohif-header/package.js b/Packages/ohif-header/package.js
index 860b55274..640b5c340 100644
--- a/Packages/ohif-header/package.js
+++ b/Packages/ohif-header/package.js
@@ -9,11 +9,16 @@ Package.onUse(function(api) {
 
     // Meteor packages
     api.use('ecmascript');
+    api.use('templating');
+    api.use('underscore');
     api.use('stylus');
 
     // OHIF dependencies
     api.use('ohif:core', 'client');
 
+    // Main module
+    api.mainModule('main.js', 'client');
+
     // Client imports
-    api.addFiles('index.js', 'client');
+    api.addFiles('client/index.js', 'client');
 });
diff --git a/Packages/ohif-user-management/client/active-entry/index.js b/Packages/ohif-user-management/client/active-entry/index.js
new file mode 100644
index 000000000..237c42983
--- /dev/null
+++ b/Packages/ohif-user-management/client/active-entry/index.js
@@ -0,0 +1,3 @@
+import './activeEntry.styl';
+import './activeEntry.js';
+import './activeEntrySignIn.js';
diff --git a/Packages/ohif-user-management/client/components/index.js b/Packages/ohif-user-management/client/components/index.js
new file mode 100644
index 000000000..b5bda169d
--- /dev/null
+++ b/Packages/ohif-user-management/client/components/index.js
@@ -0,0 +1,15 @@
+import './emailVerification/emailVerification.html';
+import './emailVerification/emailVerification.styl';
+import './emailVerification/emailVerification.js';
+
+import './hipaaLogPage/hipaaLogPage.styl';
+import './hipaaLogPage/hipaaLogPage.js';
+
+import './lastLoginModal/lastLoginModal.html';
+
+import './timeoutCountdownDialog/timeoutCountdownDialog.html';
+import './timeoutCountdownDialog/timeoutCountdownDialog.js';
+
+import './userAccountMenu/userAccountMenu.html';
+import './userAccountMenu/userAccountMenu.styl';
+import './userAccountMenu/userAccountMenu.js';
diff --git a/Packages/ohif-user-management/client/index.js b/Packages/ohif-user-management/client/index.js
new file mode 100644
index 000000000..f4fc9803c
--- /dev/null
+++ b/Packages/ohif-user-management/client/index.js
@@ -0,0 +1,4 @@
+import './active-entry';
+import './components';
+import './lib';
+import './subscriptions';
diff --git a/Packages/ohif-user-management/client/lib/audit.js b/Packages/ohif-user-management/client/lib/audit.js
new file mode 100644
index 000000000..bd37bbbff
--- /dev/null
+++ b/Packages/ohif-user-management/client/lib/audit.js
@@ -0,0 +1,6 @@
+import { Router } from 'meteor/iron:router';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.user.audit = () => {
+    Router.go('/audit');
+};
diff --git a/Packages/ohif-user-management/client/lib/changePassword.js b/Packages/ohif-user-management/client/lib/changePassword.js
new file mode 100644
index 000000000..897a81cbc
--- /dev/null
+++ b/Packages/ohif-user-management/client/lib/changePassword.js
@@ -0,0 +1,6 @@
+import { Router } from 'meteor/iron:router';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.user.changePassword = () => {
+    Router.go('/changePassword');
+};
diff --git a/Packages/ohif-user-management/client/lib/getName.js b/Packages/ohif-user-management/client/lib/getName.js
new file mode 100644
index 000000000..2f0190a27
--- /dev/null
+++ b/Packages/ohif-user-management/client/lib/getName.js
@@ -0,0 +1,9 @@
+import { Meteor } from 'meteor/meteor';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.user.getName = () => {
+    const nameSplit = Meteor.user().profile.fullName.split(' ');
+    const lastName = nameSplit[nameSplit.length - 1];
+    nameSplit[nameSplit.length - 1] = lastName.substr(0, 1) + '.';
+    return nameSplit.join(' ');
+};
diff --git a/Packages/ohif-user-management/client/lib/index.js b/Packages/ohif-user-management/client/lib/index.js
new file mode 100644
index 000000000..641dc9e03
--- /dev/null
+++ b/Packages/ohif-user-management/client/lib/index.js
@@ -0,0 +1,4 @@
+import './audit';
+import './changePassword';
+import './getName';
+import './logout';
diff --git a/Packages/ohif-user-management/client/lib/logout.js b/Packages/ohif-user-management/client/lib/logout.js
new file mode 100644
index 000000000..0ac0fe7f1
--- /dev/null
+++ b/Packages/ohif-user-management/client/lib/logout.js
@@ -0,0 +1,9 @@
+import { Meteor } from 'meteor/meteor';
+import { Router } from 'meteor/iron:router';
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.user.logout = () => {
+    Meteor.logout(function() {
+        Router.go('/entrySignIn');
+    });
+};
diff --git a/Packages/ohif-user-management/main.js b/Packages/ohif-user-management/main.js
new file mode 100644
index 000000000..8bd1d0f1b
--- /dev/null
+++ b/Packages/ohif-user-management/main.js
@@ -0,0 +1,10 @@
+import { OHIF } from 'meteor/ohif:core';
+
+/*
+ * Defines the base OHIF user object
+ */
+const user = {};
+
+OHIF.user = user;
+
+export { user };
diff --git a/Packages/ohif-user-management/package.js b/Packages/ohif-user-management/package.js
index 6c429ddbb..118cbbd48 100644
--- a/Packages/ohif-user-management/package.js
+++ b/Packages/ohif-user-management/package.js
@@ -25,33 +25,17 @@ Package.onUse(function(api) {
     api.use('ohif:core');
     api.use('ohif:study-list');
 
+    // Main module
+    api.mainModule('main.js', ['client', 'server']);
+
     // Load icons
     api.addAssets('assets/user-menu-icons.svg', 'client');
 
     api.addFiles('both/collections.js', ['client', 'server']);
     //api.addFiles('both/schema/reviewers.js', ['client', 'server']);
 
-    api.addFiles('client/components/userAccountMenu/userAccountMenu.html', 'client');
-    api.addFiles('client/components/userAccountMenu/userAccountMenu.styl', 'client');
-    api.addFiles('client/components/userAccountMenu/userAccountMenu.js', 'client');
-
-    api.addFiles('client/active-entry/activeEntry.styl', 'client');
-    api.addFiles('client/active-entry/activeEntry.js', 'client');
-    api.addFiles('client/active-entry/activeEntrySignIn.js', 'client');
-
-    api.addFiles('client/subscriptions.js', 'client');
-
-    api.addFiles('client/components/emailVerification/emailVerification.html', 'client');
-    api.addFiles('client/components/emailVerification/emailVerification.styl', 'client');
-    api.addFiles('client/components/emailVerification/emailVerification.js', 'client');
-
-    api.addFiles('client/components/hipaaLogPage/hipaaLogPage.styl', 'client');
-    api.addFiles('client/components/hipaaLogPage/hipaaLogPage.js', 'client');
-
-    api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.html', 'client');
-    api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.js', 'client');
-
-    api.addFiles('client/components/lastLoginModal/lastLoginModal.html', 'client');
+    // Client imports
+    api.addFiles('client/index.js', 'client');
 
     api.addFiles('server/createDemoUser.js', [ 'server' ]);
     api.addFiles('server/reviewers.js', [ 'server' ]);