Merge pull request #2 from jtamiace/login-frontend

login modal vue component

kolibri/auth/migrations/0003_auto_20160802_0011.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.7 on 2016-08-02 00:11
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('kolibriauth', '0002_auto_20160318_0557'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='role',
+            name='user',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='roles', to='kolibriauth.FacilityUser'),
+        ),
+    ]

kolibri/plugins/management/assets/src/vue/index.vue

@@ -1,6 +1,7 @@
 <template>
 
   <core-base>
+    <login-modal></login-modal>
     <user-roster></user-roster>
   </core-base>
 
@@ -13,6 +14,7 @@
     components: {
       'core-base': require('core-base'),
       'user-roster': require('./user-roster.vue'),
+      'login-modal': require('./login-modal.vue'),
     },
     vuex: {
       actions: require('../actions.js'),

kolibri/plugins/management/assets/src/vue/login-modal.vue

@@ -0,0 +1,83 @@
+<template>
+
+  <div class="login-modal">
+    <modal btntext="Login">
+      <div class="title" slot="header">
+        <div class="login-brand-box">
+          <img src="./kolibri-logo.svg">
+          <p id="login-brand">Kolibri</p>
+        </div>
+      </div>
+      <div slot="body">
+        <input type="text" class="login-form login-username" placeholder="Username">
+        <input type="text" class="login-form login-password" placeholder="Password">
+        <button class="login-button">Login</button>
+        <a href="#" id="login-forgot-pass">Forgot password?</a>
+      </div>
+      <div slot="footer"></div>
+    </modal>
+  </div>
+
+</template>
+
+
+<script>
+
+  module.exports = {
+    components: {
+      modal: require('./modal.vue'),
+    },
+	};
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  @require '~core-theme.styl'
+
+  .login-button
+    width: 300px
+    display: block
+    margin: 20px auto
+    padding: 8px
+    background: $core-action-normal
+    color: white
+    font-size: 16px
+    
+  .login-brand-box
+    text-align: center
+    margin: 15px auto
+    img, p
+      display: inline-block
+    img
+      min-width: 60px
+      height: auto
+
+  #login-brand
+    font-size: 50px
+    letter-spacing: 0.1em
+    font-weight: 100
+    color: $core-action-normal
+    
+  .login-form
+    width: 300px
+    margin: 0 auto
+    display: block
+    padding: 5px 10px
+    letter-spacing: 0.08em
+    border: none
+    border-bottom: 1px solid $core-text-default
+    &:focus
+      outline: none
+      border-bottom: 3px solid $core-action-normal
+    
+  .login-username
+    margin-bottom: 30px
+    
+  #login-forgot-pass
+    text-align: center
+    display: block
+    margin: auto
+
+</style>

kolibri/plugins/management/assets/src/vue/modal.vue

@@ -4,11 +4,11 @@
     <div class="modal" v-show="showModal" transition="modal">
       <div class="modal-wrapper">
         <div class="modal-container">
+          <a @click="closeModal" class="close-btn">X</a>
           <div class="modal-header">
             <slot name="header">
               Kolibri
             </slot>
-            <a @click="closeModal" class="close-btn">X</a>
           </div>
           <div class="modal-body">
             <slot name="body">