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

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