add add-dialog and edit-dialog

1 files changed, 214 insertions, 83 deletions

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 -->