From 1475fe9ef2e0a1211cdaf92ecbc55bf547a73de0 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 22 Mar 2017 19:43:21 -0300
Subject: [PATCH] Creating a new package to deal with auth and a login form

---
 .../components/base/wrappers/label.html       |  2 +-
 .../bootstrap/dropdown/dropdown.styl          |  4 +
 Packages/ohif-design/package.js               |  1 +
 Packages/ohif-design/styles/common/form.styl  | 39 +++++++++
 .../ohif-design/styles/components/states.styl |  8 +-
 .../longitudinalStudyListStudy.js             |  8 +-
 Packages/ohif-user/client/components/index.js |  3 +
 .../client/components/login/userLogin.html    | 15 ++++
 .../client/components/login/userLogin.js      | 31 +++++++
 .../client/components/login/userLogin.styl    | 80 +++++++++++++++++++
 Packages/ohif-user/client/index.js            |  2 +
 Packages/ohif-user/client/routes.js           |  8 ++
 Packages/ohif-user/package.js                 | 25 ++++++
 13 files changed, 218 insertions(+), 8 deletions(-)
 create mode 100644 Packages/ohif-design/styles/common/form.styl
 create mode 100644 Packages/ohif-user/client/components/index.js
 create mode 100644 Packages/ohif-user/client/components/login/userLogin.html
 create mode 100644 Packages/ohif-user/client/components/login/userLogin.js
 create mode 100644 Packages/ohif-user/client/components/login/userLogin.styl
 create mode 100644 Packages/ohif-user/client/index.js
 create mode 100644 Packages/ohif-user/client/routes.js
 create mode 100644 Packages/ohif-user/package.js

diff --git a/Packages/ohif-core/client/components/base/wrappers/label.html b/Packages/ohif-core/client/components/base/wrappers/label.html
index 09e19aa42..10f5f9e4d 100644
--- a/Packages/ohif-core/client/components/base/wrappers/label.html
+++ b/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>
diff --git a/Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl b/Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl
index 8b969585c..48bb05088 100644
--- a/Packages/ohif-core/client/components/bootstrap/dropdown/dropdown.styl
+++ b/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
diff --git a/Packages/ohif-design/package.js b/Packages/ohif-design/package.js
index de8ed9fcc..86c5356e7 100644
--- a/Packages/ohif-design/package.js
+++ b/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');
 
diff --git a/Packages/ohif-design/styles/common/form.styl b/Packages/ohif-design/styles/common/form.styl
new file mode 100644
index 000000000..90353efc3
--- /dev/null
+++ b/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')
diff --git a/Packages/ohif-design/styles/components/states.styl b/Packages/ohif-design/styles/components/states.styl
index fff0c9a56..c2a39dd8f 100644
--- a/Packages/ohif-design/styles/components/states.styl
+++ b/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')
diff --git a/Packages/ohif-measurements/client/components/longitudinal/longitudinalStudyListStudy/longitudinalStudyListStudy.js b/Packages/ohif-measurements/client/components/longitudinal/longitudinalStudyListStudy/longitudinalStudyListStudy.js
index da03cfe74..4ee08a1a7 100644
--- a/Packages/ohif-measurements/client/components/longitudinal/longitudinalStudyListStudy/longitudinalStudyListStudy.js
+++ b/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;
         }
diff --git a/Packages/ohif-user/client/components/index.js b/Packages/ohif-user/client/components/index.js
new file mode 100644
index 000000000..91ac1ca9f
--- /dev/null
+++ b/Packages/ohif-user/client/components/index.js
@@ -0,0 +1,3 @@
+import './login/userLogin.html';
+import './login/userLogin.js';
+import './login/userLogin.styl';
diff --git a/Packages/ohif-user/client/components/login/userLogin.html b/Packages/ohif-user/client/components/login/userLogin.html
new file mode 100644
index 000000000..bbd7fab42
--- /dev/null
+++ b/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>
diff --git a/Packages/ohif-user/client/components/login/userLogin.js b/Packages/ohif-user/client/components/login/userLogin.js
new file mode 100644
index 000000000..30c82b1c3
--- /dev/null
+++ b/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'
+        }
+    });
+});
diff --git a/Packages/ohif-user/client/components/login/userLogin.styl b/Packages/ohif-user/client/components/login/userLogin.styl
new file mode 100644
index 000000000..9c2d89877
--- /dev/null
+++ b/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
diff --git a/Packages/ohif-user/client/index.js b/Packages/ohif-user/client/index.js
new file mode 100644
index 000000000..be7fc3b83
--- /dev/null
+++ b/Packages/ohif-user/client/index.js
@@ -0,0 +1,2 @@
+import './components';
+import './routes';
diff --git a/Packages/ohif-user/client/routes.js b/Packages/ohif-user/client/routes.js
new file mode 100644
index 000000000..73dbcc687
--- /dev/null
+++ b/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' });
+});
diff --git a/Packages/ohif-user/package.js b/Packages/ohif-user/package.js
new file mode 100644
index 000000000..8e27ff0ec
--- /dev/null
+++ b/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');
+});