add user-{add,edit}-dialog and assets/js/admin/users.js

2 files changed, 205 insertions, 61 deletions

diff --git a/data/assets/test/tab-users.js b/data/assets/js/admin/users.js
index d60e348..a5eef0f 100644
--- a/data/assets/test/tab-users.js
+++ b/data/assets/js/admin/users.js
@@ -1,5 +1,6 @@
 jQuery(function($) {
   "use strict";
+
   var TEMPLATES = new LuigiTemplate.Cache({
     user: [
       "<a ",
@@ -59,7 +60,7 @@ jQuery(function($) {
   }
 
   function reload() {
-    var btn = $('#reload'),
+    var btn = $('#users-reload'),
         list = $('#users');
 
     // show loading
@@ -88,17 +89,6 @@ jQuery(function($) {
     return false;
   }
 
-  // old test, not used any more
-  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-q').on('search-update', function() {
     filter();
   });
@@ -230,54 +220,7 @@ jQuery(function($) {
     return false;
   });
 
-  $('#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'))
-      return false;
-
-    // toggle loading
-    me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-
-    send('test/login', {
-      email:    $('#login-email').val(),
-      password: $('#login-password').val(),
-    }).always(function() {
-      // toggle loading
-      me.toggleClass('disabled').find('.loading').toggleClass('hidden');
-    }).fail(function(r) {
-      alert('Error ' + r.responseText);
-    }).done(function(r) {
-      console.log(r);
-      $('#login-dialog').modal('hide');
-    });
-
-    // stop event
-    return false;
-  });
-
-  $('#login-user, #login-password').keydown(function(ev) {
-    if (ev.which == 13) {
-      setTimeout(function() {
-        // trigger login
-        $('#login-confirm').click();
-      }, 10);
-
-      // stop event
-      return false;
-    }
-  });
-
-  $('#reload').click(reload);
+  $('#users-reload').click(reload);
 
   // load users
   $('#admin-tab-users').on('show.bs.tab', function() {
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
index fe0d28d..678b8c5 100644
--- a/src/views/admin-page.ecr
+++ b/src/views/admin-page.ecr
@@ -194,6 +194,207 @@
         </div><!-- tab-content -->
       </div><!-- col-md-12 -->
     </div><!-- container -->
+
+    <div id='user-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='user-add-name'>
+                Name
+              </label>
+
+              <input
+                type='text'
+                id='user-add-name'
+                class='form-control'
+                title='Enter name of user.'
+                placeholder='John Doe'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-add-email'>
+                Email Address
+              </label>
+
+              <input
+                type='text'
+                id='user-add-email'
+                class='form-control'
+                title='Enter user email.'
+                placeholder='johndoe@example.com'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-add-password'>
+                Password
+              </label>
+
+              <input
+                type='password'
+                id='user-add-password'
+                class='form-control'
+                title='Enter password.'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-add-role'>
+                Role
+              </label>
+
+              <select
+                id='user-add-role'
+                class='form-control'
+                title='Choose role of user.'
+              ><%=
+                # get_roles
+              %></select>
+            </div><!-- form-group -->
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              id='user-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>
+
+            <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 id='user-edit-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'></i>
+              Edit User
+            </h4><!-- modal-title -->
+          </div><!-- modal-header -->
+
+          <div class='modal-body'>
+            <div class='form-group'>
+              <label for='user-edit-name'>
+                Name
+              </label>
+
+              <input
+                type='text'
+                id='user-edit-name'
+                class='form-control'
+                title='Enter name of user.'
+                placeholder='John Doe'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-edit-email'>
+                Email Address
+              </label>
+
+              <input
+                type='text'
+                id='user-edit-email'
+                class='form-control'
+                title='Enter user email.'
+                placeholder='johndoe@example.com'
+              />
+            </div><!-- form-group -->
+
+            <div class='form-group'>
+              <label for='user-edit-role'>
+                Role
+              </label>
+
+              <select
+                id='user-edit-role'
+                class='form-control'
+                title='Choose role of user.'
+              ><%=
+                # get_roles
+              %></select>
+            </div><!-- form-group -->
+          </div><!-- modal-body -->
+
+          <div class='modal-footer'>
+            <button
+              id='user-edit-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-save'></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 -->
   </body>
 
   <%=
@@ -204,7 +405,7 @@
       assets/bootstrap-3.3.6/js/bootstrap.min.js
       assets/ckeditor-4.5.8-custom/ckeditor.js
       assets/js/search-field.js
-      assets/test/tab-users.js
+      assets/js/admin/users.js
       assets/test/tab-posts.js
     }
   %>