Creating a new package to deal with auth and a login form

Packages/ohif-core/client/components/base/wrappers/label.html

@@ -1,7 +1,7 @@
 <template name="wrapperLabel">
     {{#unless this.labelAsDiv}}
         <label class="wrapperLabel {{this.labelClass}}" {{clone this.labelTagAttributes}}>
-            {{#wrapperLabelContent}}
+            {{#wrapperLabelContent (extend this labelAfter=true)}}
                 {{>UI.contentBlock}}
             {{/wrapperLabelContent}}
         </label>

Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl

@@ -23,6 +23,10 @@
       outline: none
       padding: 8px 20px
 
+      i
+        font-size: 14px
+        margin-right: 4px
+
       svg
         display: inline-block
         max-width: 18px

Packages/ohif-design/package.js

@@ -33,6 +33,7 @@ Package.onUse(function(api) {
         'styles/common/webfonts.styl',
         'styles/common/keyframes.styl',
         'styles/common/global.styl',
+        'styles/common/form.styl',
         'styles/common/spacings.styl'
     ], 'client');
 

Packages/ohif-design/styles/common/form.styl

@@ -0,0 +1,39 @@
+@import "{ohif:design}/app"
+
+label.wrapperLabel
+  cursor: pointer
+  display: flex
+  flex-direction: column
+
+  .wrapperText
+    display: block
+    order: -1
+    transition(color 0.3s ease)
+
+.form-themed
+
+  input[type=text], input[type=password]
+    theme('background-color', '$uiGray')
+    theme('border-color', '$uiBorderColor')
+    theme('color', '$textPrimaryColor')
+    font-weight: normal
+    transition(background-color 0.3s ease\, border-color 0.3s ease)
+
+    &:active, &:focus
+      theme('background-color', '$uiGrayDark')
+      theme('border-color', '$activeColor')
+      box-shadow: none
+
+      & + .wrapperText
+        theme('color', '$activeColor')
+
+  .btn-primary
+    theme('background-color', '$activeColor')
+    theme('border-color', '$uiBorderColorActive')
+    theme('color', '$textColorActive')
+    transition(background-color 0.3s ease\, border-color 0.3s ease)
+
+    &:hover, &:active, &:focus, &:focus:active
+      theme('background-color', '$activeColor', 0.8)
+      theme('border-color', '$uiBorderColorActive', 0.8)
+      theme('color', '$textColorActive')

Packages/ohif-design/styles/components/states.styl

@@ -1,6 +1,10 @@
 @import "{ohif:design}/app"
 
-.state-error
+.form-themed .state-error, .state-error
+
+    &.wrapperLabel input + .wrapperText
+        theme('color', '$uiStateErrorText')
+
     &+.tooltip
 
         .tooltip-inner
@@ -21,9 +25,7 @@
         &.form-control, .form-control
             theme('background-color', '$uiStateError')
             theme('border-color', '$uiStateErrorBorder')
-            theme('color', '$uiStateErrorText')
 
         .select2-selection
             theme('background-color', '$uiStateError')
             theme('border-color', '$uiStateErrorBorder')
-            theme('color', '$uiStateErrorText')

Packages/ohif-measurements/client/components/longitudinal/longitudinalStudyListStudy/longitudinalStudyListStudy.js

@@ -11,7 +11,7 @@ Template.longitudinalStudyListStudy.replaces(defaultTemplate);
 // Add the TimepointName helper to the default template. The
 // HTML of this template is replaced with that of longitudinalStudyListStudy
 Template[defaultTemplate].helpers({
-    timepointName: function() {
+    timepointName() {
         const instance = Template.instance();
         const timepointApi = OHIF.studylist.timepointApi;
         if (!timepointApi) {
@@ -26,10 +26,10 @@ Template[defaultTemplate].helpers({
         return timepointApi.name(timepoint);
     },
 
-    reviewerTip: function() {
+    reviewerTip() {
         const instance = Template.instance();
         const timepointApi = OHIF.studylist.timepointApi;
-        if (!timepointApi) {
+        if (!timepointApi || !window.Reviewers) {
             return;
         }
 
@@ -38,7 +38,7 @@ Template[defaultTemplate].helpers({
             return;
         }
 
-        const timepointReviewers = Reviewers.findOne({ timepointId: timepoint.timepointId });
+        const timepointReviewers = window.Reviewers.findOne({ timepointId: timepoint.timepointId });
         if (!timepointReviewers) {
             return;
         }

Packages/ohif-user/client/components/index.js

@@ -0,0 +1,3 @@
+import './login/userLogin.html';
+import './login/userLogin.js';
+import './login/userLogin.styl';

Packages/ohif-user/client/components/login/userLogin.html

@@ -0,0 +1,15 @@
+<template name="userLogin">
+    <div class="user-login">
+        <div class="user-login-box">
+            <div class="user-login-logo">{{>section 'userLoginLogo'}}</div>
+            {{#form class='user-login-form form-themed p-a-2' schema=instance.schema api=instance.api hideValidationBox=true}}
+                <h3>Sign In</h3>
+                <hr class="m-h-2">
+                {{>inputText labelClass='form-group' key='username'}}
+                {{>inputPassword labelClass='form-group' key='password'}}
+                <hr class="m-t-0 m-b-2">
+                {{#button action='login' class='form-control btn btn-primary'}}Enter{{/button}}
+            {{/form}}
+        </div>
+    </div>
+</template>

Packages/ohif-user/client/components/login/userLogin.js

@@ -0,0 +1,31 @@
+import { Template } from 'meteor/templating';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+
+Template.userLogin.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.api = {
+        login() {
+            // Check if the form has valid data
+            const form = instance.$('form').data('component');
+            if (!form.validate()) {
+                return;
+            }
+
+            // Get the form data
+            const formData = form.value();
+            console.warn('>>>>Logged in!', formData);
+        }
+    };
+
+    instance.schema = new SimpleSchema({
+        username: {
+            type: String,
+            label: 'Username'
+        },
+        password: {
+            type: String,
+            label: 'Password'
+        }
+    });
+});

Packages/ohif-user/client/components/login/userLogin.styl

@@ -0,0 +1,80 @@
+@import "{ohif:design}/app"
+
+html, body
+  height: 100%
+
+.user-login
+  theme('color', '$textPrimaryColor')
+  height: 100%
+  position: relative
+  overflow: hidden
+
+  &:before, &:after
+    bottom: 0
+    content: ''
+    display: block
+    left: 0
+    position: absolute
+    width: 100%
+
+  &:before
+    theme('background-color', '$primaryBackgroundColor')
+    height: 100%
+    z-index: 1
+
+  &:after
+    theme('background-color', '$uiGrayDark')
+    animation(login-bg 0.5s ease 0.5s forwards)
+    bottom: -50%
+    height: 50%
+    z-index: 2
+
+  .user-login-box
+    animation(login-box 0.5s forwards)
+    left: 50%
+    position: absolute
+    width: 300px
+    z-index: 3
+
+    .user-login-logo
+      animation(login-logo 0.5s ease 0.5s forwards)
+      left: 0
+      position: absolute
+      top: 0
+      width: 100%
+      z-index: 1
+
+    .user-login-form
+      theme('background-color', '$uiGrayDarkest')
+      theme('border', '1px solid $uiBorderColor')
+      theme('color', '$textPrimaryColor')
+      border-radius: 3px
+      position: relative
+      z-index: 2
+
+      h3
+        margin: 0
+        text-align: center
+
+      .btn-primary
+        font-weight: bold
+
+@keyframes login-box
+  from
+    top: 100%
+    transform(translateX(-50%))
+  to
+    top: 50%
+    transform(translateX(-50%) translateY(-50%))
+
+@keyframes login-logo
+  from
+    transform(translateY(0))
+  to
+    transform(translateY(-100%))
+
+@keyframes login-bg
+  from
+    bottom: -50%
+  to
+    bottom: 0

Packages/ohif-user/client/index.js

@@ -0,0 +1,2 @@
+import './components';
+import './routes';

Packages/ohif-user/client/routes.js

@@ -0,0 +1,8 @@
+import { Router } from 'meteor/iron:router';
+
+Meteor.startup(() => {
+    Router.route('/login', function() {
+        this.layout('mainLayout');
+        this.render('userLogin');
+    }, { name: 'userLogin' });
+});

Packages/ohif-user/package.js

@@ -0,0 +1,25 @@
+Package.describe({
+    name: 'ohif:user',
+    summary: 'OHIF User Authentication Handling',
+    version: '0.0.1'
+});
+
+Package.onUse(function(api) {
+    api.versionsFrom('1.4');
+
+    // Meteor client and server packages
+    api.use('ecmascript');
+
+    // Meteor client-only packages
+    api.use([
+        'templating',
+        'stylus',
+        'iron:router'
+    ], 'client');
+
+    // OHIF dependencies
+    api.use('ohif:design');
+    api.use('ohif:core');
+
+    api.addFiles('client/index.js', 'client');
+});