move login to dialog, clean up user list header

2 files changed, 127 insertions, 81 deletions

diff --git a/data/stuff/test/auth.js b/data/stuff/test/auth.js
index f14f0b1..5e98425 100644
--- a/data/stuff/test/auth.js
+++ b/data/stuff/test/auth.js
@@ -229,7 +229,16 @@ jQuery(function($) {
     return false;
   });
 
-  $('#login').click(function() {
+  $('#login-dialog').on('show.bs.modal', function() {
+    $('#login-email').val('');
+    $('#login-password').val('');
+  });
+
+  $('#login-dialog').on('shown.bs.modal', function() {
+    $('#login-email').focus();
+  });
+
+  $('#login-confirm').click(function() {
     var me = $(this);
 
     if (me.hasClass('disabled'))
@@ -248,6 +257,7 @@ jQuery(function($) {
       alert('Error ' + r.responseText);
     }).done(function(r) {
       console.log(r);
+      $('#login-dialog').modal('hide');
     });
 
     // stop event
@@ -258,7 +268,7 @@ jQuery(function($) {
     if (ev.which == 13) {
       setTimeout(function() {
         // trigger login
-        $('#login').click();
+        $('#login-confirm').click();
       }, 10);
 
       // stop event
diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr
index 00cc918..0e044f7 100644
--- a/src/guff/views/ecrs/test/auth.ecr
+++ b/src/guff/views/ecrs/test/auth.ecr
@@ -23,19 +23,6 @@
           <i class='fa fa-users'></i>
           Users
         </b>
-
-        <div class='btn-group btn-group-xs pull-right'>
-          <a
-            href='#'
-            class='btn btn-primary btn-xs'
-            title='Create new user.'
-            data-toggle='modal'
-            data-target='#add-dialog'
-          >
-            <i class='fa fa-user-plus'></i>
-            Add User
-          </a><!-- btn -->
-        </div><!-- btn-group -->
       </div><!-- panel-heading -->
 
       <div class='panel-heading'>
@@ -43,6 +30,32 @@
           <div class='btn-group btn-group-sm'>
             <a
               href='#'
+              class='btn btn-primary'
+              title='Create new user.'
+              data-toggle='modal'
+              data-target='#add-dialog'
+            >
+              <i class='fa fa-user-plus'></i>
+              Add User
+            </a><!-- btn -->
+          </div><!-- btn-group -->
+
+          <div class='btn-group btn-group-sm'>
+            <a
+              href='#'
+              class='btn btn-default'
+              title='Test login dialog.'
+              data-toggle='modal'
+              data-target='#login-dialog'
+            >
+              <i class='fa fa-lock'></i>
+              Test Login
+            </a><!-- btn -->
+          </div><!-- btn-group -->
+
+          <div class='hidden btn-group btn-group-sm'>
+            <a
+              href='#'
               class='btn btn-default'
               title='Filter users by role.'
               data-toggle='dropdown'
@@ -58,6 +71,16 @@
           <div class='btn-group btn-group-sm pull-right'>
             <a
               href='#'
+              class='btn btn-default search-toggle'
+              title='Toggle search field.'
+            >
+              <i class='fa fa-search'></i>
+            </a><!-- btn-->
+          </div><!-- btn-group -->
+
+          <div class='btn-group btn-group-sm pull-right'>
+            <a
+              href='#'
               id='reload'
               class='btn btn-default'
               title='Reload users.'
@@ -71,16 +94,6 @@
               </span>
             </a><!-- #reload -->
           </div><!-- btn-group -->
-
-          <div class='btn-group btn-group-sm pull-right'>
-            <a
-              href='#'
-              class='btn btn-default search-toggle'
-              title='Toggle search field.'
-            >
-              <i class='fa fa-search'></i>
-            </a><!-- btn-->
-          </div><!-- btn-group -->
         </div><!-- btn-toolbar -->
       </div><!-- panel-heading -->
 
@@ -95,6 +108,7 @@
             id='filter-q'
             class='form-control'
             title='Enter search terms'
+            data-search-delay='500'
           />
         </div><!-- input-group -->
       </div><!-- panel-heading -->
@@ -106,62 +120,6 @@
         </span><!-- list-group-item -->
       </div><!-- list-group -->
     </div><!-- panel -->
-
-    <div class='panel panel-default'>
-      <div class='panel-heading'>
-        <b>
-          <i class='fa fa-lock'></i>
-          Login
-        </b>
-      </div><!-- panel-heading -->
-
-      <div class='panel-body'>
-        <div class='form-group'>
-          <label for='login-email'>
-            Email
-          </label>
-
-          <input
-            type='text'
-            id='login-email'
-            class='form-control'
-            title='Enter email address.'
-            placeholder='foo@example.com'
-          />
-        </div><!-- form-group -->
-
-        <div class='form-group'>
-          <label for='login-password'>
-            Password
-          </label>
-
-          <input
-            type='password'
-            id='login-password'
-            class='form-control'
-            title='Enter password.'
-          />
-        </div><!-- form-group -->
-
-        <div class='form-group'>
-          <button
-            id='login'
-            class='btn btn-primary'
-            title='Log in.'
-          >
-            <span class='hidden loading'>
-              <i class='fa fa-spinner fa-spin'></i>
-              Please Wait...
-            </span>
-
-            <span class='loading'>
-              <i class='fa fa-unlock-alt'></i>
-              Log In
-            </span>
-          </button>
-        </div><!-- form-group -->
-      </div><!-- panel-body -->
-    </div><!-- panel -->
   </div><!-- col-md-8 -->
 </div><!-- container -->
 
@@ -365,3 +323,81 @@
     </div><!-- modal-content -->
   </div><!-- modal-dialog -->
 </div><!-- modal -->
+
+<div id='login-dialog' class='modal fade' role='dialog'>
+  <div class='modal-dialog' role='document'>
+    <div class='modal-content'>
+      <div class='modal-header'>
+        <button
+          type='button'
+          class='close'
+          data-dismiss='modal'
+          aria-label='Close'
+        >
+          <span aria-hidden='true'>
+            &times;
+          </span>
+        </button><!-- close -->
+
+        <h4 class='modal-title'>
+          <i class='fa fa-lock'></i>
+          Log In
+        </h4><!-- modal-title -->
+      </div><!-- modal-header -->
+
+      <div class='modal-body'>
+        <div class='form-group'>
+          <label for='login-email'>
+            Email Address
+          </label>
+
+          <input
+            type='text'
+            id='login-email'
+            class='form-control'
+            title='Enter your email address.'
+          />
+        </div><!-- form-group -->
+
+        <div class='form-group'>
+          <label for='login-password'>
+            Password
+          </label>
+
+          <input
+            type='password'
+            id='login-password'
+            class='form-control'
+            title='Enter your password.'
+          />
+        </div><!-- form-group -->
+      </div><!-- modal-body -->
+
+      <div class='modal-footer'>
+        <button
+          id='login-confirm'
+          class='btn btn-primary'
+          title='Log in.'
+        >
+          <span class='hidden loading'>
+            <i class='fa fa-spinner fa-spin'></i>
+            Please Wait...
+          </span>
+
+          <span class='loading'>
+            <i class='fa fa-unlock-alt'></i>
+            Log In
+          </span>
+        </button>
+
+        <button
+          class='btn btn-default'
+          data-dismiss='modal'
+          title='Close dialog.'
+        >
+          &times; Close
+        </button>
+      </div><!-- modal-footer -->
+    </div><!-- modal-content -->
+  </div><!-- modal-dialog -->
+</div><!-- modal -->