add add-dialog and edit-dialog

2 files changed, 239 insertions, 94 deletions

diff --git a/data/stuff/test/auth.js b/data/stuff/test/auth.js
index 6f10fbf..5876a41 100644
--- a/data/stuff/test/auth.js
+++ b/data/stuff/test/auth.js
@@ -60,6 +60,16 @@ jQuery(function($) {
     return false;
   }
 
+  function set_user(user_id) {
+    return send('test/set_user', {
+      user_id: user_id,
+    }).fail(function(r) {
+      alert('Error ' + r.responseText);
+    }).done(function(r) {
+      // do nothing
+    });
+  }
+
   $('#users').on('click', 'a.list-group-item', function() {
     var me = $(this);
 
@@ -70,25 +80,27 @@ jQuery(function($) {
     // show spinner
     me.addClass('disabled').find('.loading').toggleClass('hidden');
 
-    send('test/set_user', {
-      user_id: me.data('user_id'),
-    }).always(function() {
+    set_user(me.data('user_id')).always(function() {
       // hide spinner
       me.removeClass('disabled').find('.loading').toggleClass('hidden');
     }).fail(function(r) {
-      alert('Error ' + r.responseText);
       // restore old highlight
       me.removeClass('active');
       last.addClass('active');
-    }).done(function(r) {
-      // do nothing
     });
 
     // stop event
     return false;
   });
 
-  $('#create-user').click(function() {
+  $('#add-dialog').on('show.bs.modal', function() {
+    $.each(['name', 'email', 'password'], function(i, id) {
+      $('#add-' + id).val('');
+    });
+    $('#add-role').val('guest');
+  });
+
+  $('#add-confirm').click(function() {
     var me = $(this);
 
     if (me.hasClass('disabled'))
@@ -98,11 +110,11 @@ jQuery(function($) {
     me.toggleClass('disabled').find('.loading').toggleClass('hidden');
 
     send('test/add_user', {
-      name:     $('#user-name').val(),
+      name:     $('#add-name').val(),
+      email:    $('#add-email').val(),
+      password: $('#add-password').val(),
+      role:     $('#add-role').val(),
       active:   't',
-      email:    $('#user-email').val(),
-      password: $('#user-password').val(),
-      role:     $('#user-role').val(),
     }).always(function() {
       // toggle loading
       me.toggleClass('disabled').find('.loading').toggleClass('hidden');
@@ -110,6 +122,8 @@ jQuery(function($) {
       alert('Error ' + r.responseText);
     }).done(function(r) {
       console.log(r);
+      reload();
+      $('#add-dialog').modal('hide');
     });
 
     // stop event
diff --git a/src/guff/views/ecrs/test/auth.ecr b/src/guff/views/ecrs/test/auth.ecr
index ec6e9a8..b683c5c 100644
--- a/src/guff/views/ecrs/test/auth.ecr
+++ b/src/guff/views/ecrs/test/auth.ecr
@@ -7,15 +7,16 @@
       <a
         href='/test/auth'
         class='navbar-brand'
-      ><%=
-        h(TITLE)
-      %></a><!-- navbar-brand -->
+      >
+        <i class='fa fa-bomb'></i>
+        <%= h(TITLE) %>
+      </a><!-- navbar-brand -->
     </div><!-- navbar-default -->
   </div><!-- container-fluid -->
 </div><!-- navbar -->
 
 <div class='container'>
-  <div class='col-md-6'>
+  <div class='col-md-8 col-md-offset-2'>
     <div class='panel panel-default'>
       <div class='panel-heading'>
         <b>
@@ -23,20 +24,35 @@
           Users
         </b>
 
-        <a
-          href='#'
-          id='reload'
-          class='btn btn-default btn-xs pull-right'
-          title='Reload users.'
-        >
-          <span class='loading'>
-            <i class='fa fa-refresh'></i>
-          </span>
+        <div class='btn-group btn-group-xs pull-right'>
+          <a
+            href='#'
+            id='reload'
+            class='btn btn-default btn-xs'
+            title='Reload users.'
+          >
+            <span class='loading'>
+              <i class='fa fa-refresh'></i>
+            </span>
 
-          <span class='loading hidden'>
-            <i class='fa fa-spinner fa-spin'></i>
-          </span>
-        </a><!-- #reload -->
+            <span class='loading hidden'>
+              <i class='fa fa-spinner fa-spin'></i>
+            </span>
+          </a><!-- #reload -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-xs pull-right'>
+          <a
+            href='#'
+            class='btn btn-primary btn-xs'
+            title='Add 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 id='users' class='list-group'>
@@ -46,26 +62,95 @@
         </span><!-- list-group-item -->
       </div><!-- list-group -->
     </div><!-- panel -->
-  </div><!-- col-md-6 -->
 
-  <div class='col-md-6'>
     <div class='panel panel-default'>
       <div class='panel-heading'>
         <b>
-          <i class='fa fa-user-plus'></i>
-          Create User
+          <i class='fa fa-lock'></i>
+          Login
         </b>
       </div><!-- panel-heading -->
 
       <div class='panel-body'>
         <div class='form-group'>
-          <label for='user-name'>
+          <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 -->
+
+<div id='add-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-user-plus'></i>
+          Add User
+        </h4><!-- modal-title -->
+      </div><!-- modal-header -->
+
+      <div class='modal-body'>
+        <div class='form-group'>
+          <label for='add-name'>
             Name
           </label>
 
           <input
             type='text'
-            id='user-name'
+            id='add-name'
             class='form-control'
             title='Enter name of user.'
             placeholder='John Doe'
@@ -73,13 +158,13 @@
         </div><!-- form-group -->
 
         <div class='form-group'>
-          <label for='user-email'>
+          <label for='add-email'>
             Email Address
           </label>
 
           <input
             type='text'
-            id='user-email'
+            id='add-email'
             class='form-control'
             title='Enter user email.'
             placeholder='johndoe@example.com'
@@ -87,106 +172,152 @@
         </div><!-- form-group -->
 
         <div class='form-group'>
-          <label for='user-password'>
+          <label for='add-password'>
             Password
           </label>
 
           <input
             type='password'
-            id='user-password'
+            id='add-password'
             class='form-control'
             title='Enter password.'
           />
         </div><!-- form-group -->
 
         <div class='form-group'>
-          <label for='user-role'>
+          <label for='add-role'>
             Role
           </label>
 
           <select
-            id='user-role'
+            id='add-role'
             class='form-control'
             title='Choose role of user.'
           ><%=
             get_roles
           %></select>
         </div><!-- form-group -->
+      </div><!-- modal-body -->
 
-        <div class='form-group'>
-          <button
-            id='create-user'
-            class='btn btn-primary'
-            title='Create user.'
-          >
-            <span class='hidden loading'>
-              <i class='fa fa-spinner fa-spin'></i>
-              Please Wait...
-            </span>
+      <div class='modal-footer'>
+        <button
+          id='add-confirm'
+          class='btn btn-primary'
+          title='Create new user.'
+        >
+          <span class='hidden loading'>
+            <i class='fa fa-spinner fa-spin'></i>
+            Please Wait...
+          </span>
 
-            <span class='loading'>
-              <i class='fa fa-user-plus'></i>
-              Create User
-            </span>
-          </button>
-        </div><!-- form-group -->
-      </div><!-- panel-body -->
-    </div><!-- panel -->
+          <span class='loading'>
+            <i class='fa fa-user-plus'></i>
+            Create User
+          </span>
+        </button>
 
-    <div class='panel panel-default'>
-      <div class='panel-heading'>
-        <b>
-          <i class='fa fa-lock'></i>
-          Login
-        </b>
-      </div><!-- panel-heading -->
+        <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 -->
 
-      <div class='panel-body'>
+<div id='edit-user' 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-user'></i>
+          Edit User
+        </h4><!-- modal-title -->
+      </div><!-- modal-header -->
+
+      <div class='modal-body'>
         <div class='form-group'>
-          <label for='login-email'>
-            Email
+          <label for='edit-name'>
+            Name
           </label>
 
           <input
             type='text'
-            id='login-email'
+            id='edit-name'
             class='form-control'
-            title='Enter email address.'
-            placeholder='foo@example.com'
+            title='Enter name of user.'
+            placeholder='John Doe'
           />
         </div><!-- form-group -->
 
         <div class='form-group'>
-          <label for='login-password'>
-            Password
+          <label for='edit-email'>
+            Email Address
           </label>
 
           <input
-            type='password'
-            id='login-password'
+            type='text'
+            id='edit-email'
             class='form-control'
-            title='Enter password.'
+            title='Enter user email.'
+            placeholder='johndoe@example.com'
           />
         </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>
+          <label for='edit-role'>
+            Role
+          </label>
 
-            <span class='loading'>
-              <i class='fa fa-unlock-alt'></i>
-              Log In
-            </span>
-          </button>
+          <select
+            id='edit-role'
+            class='form-control'
+            title='Choose role of user.'
+          ><%=
+            get_roles
+          %></select>
         </div><!-- form-group -->
-      </div><!-- panel-body -->
-    </div><!-- panel -->
-  </div><!-- col-md-6 -->
-</div><!-- container -->
+      </div><!-- modal-body -->
+
+      <div class='modal-footer'>
+        <button
+          id='edit-user-confirm'
+          class='btn btn-primary'
+          title='Update user.'
+        >
+          <span class='hidden loading'>
+            <i class='fa fa-spinner fa-spin'></i>
+            Please Wait...
+          </span>
+
+          <span class='loading'>
+            <i class='fa fa-user'></i>
+            Save Changes
+          </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 -->