[Kimchi-devel] [PATCH 6/8] Applying new ui at Admin User Management Modal

27 Nov 2015

From: Andre Teodoro <andreteodoro.work@gmail.com>

Signed-off-by: Andre Teodoro <andreteodoro.work@gmail.com>
Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br>
---
 ui/js/host-admin.js           | 165 +++++++++++++++++++-----------------------
 ui/pages/host-admin.html.tmpl |  73 ++++++++++++-------
 2 files changed, 123 insertions(+), 115 deletions(-)

diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js
index 87a15ff..294131b 100644
--- a/ui/js/host-admin.js
+++ b/ui/js/host-admin.js
@@ -695,100 +695,85 @@ ginger.initUserManagement = function() {
             });
         }, function() {});
     };
-    $(".add-user", ".ginger .host-admin .user-manage").button({
-        icons: {
-            primary: "ui-icon-plusthick"
-        },
-        text: false
-    }).click(function(event) {
-        var clearUMSubmit = function() {
-            $("#kimchiuser").prop("checked", true);
-            $("#enableEditGroup").prop("checked", false);
-            $(".user-add-body .user-add-content .user-input", "#hostUserAdd").val("");
-            $(".user-add-content .user-input").attr("disabled", false);
-            $(".user-add-content .user-input[name='userGroup']").attr("disabled", true);
-            $("input", ".user-add-content .user-input").attr("disabled", false);
-            $("#user-submit").button("option", "disabled", true);
-            $("#user-cancel").button("option", "disabled", false);
-        };
-        $("#hostUserAdd").dialog({
-            modal: true,
-            width: "auto",
-            height: 300,
-            draggable: false,
-            resizable: false,
-            closeText: "X",
-            open: function() {
-                $("#kimchiuser").prop("checked", true);
-                $(".user-input[name='userName']", ".user-add-content").keyup(function() {
-                    var tmpVal = $(this).val();
-                    $(".user-input[name='userGroup']", ".user-add-content").val(tmpVal);
-                });
-                $("#enableEditGroup").click(function() {
-                    if ($(this).prop("checked")) {
-                        $(".user-input[name='userGroup']", ".user-add-content").attr("disabled", false);
-                    } else {
-                        $(".user-input[name='userGroup']", ".user-add-content").attr("disabled", true);
-                    }
-                });
-                $(".user-add-content .inputbox").keyup(function() {
-                    var sum = 0;
-                    $(".user-add-content .inputbox").each(function(index, data) {
-                        if ($(data).val() === "") {
-                            sum += 1;
-                        }
-                    })
-                    if (sum != 0) {
-                        $("#user-submit").button("option", "disabled", true);
-                    } else {
-                        $("#user-submit").button("option", "disabled", false);
-                    }
-                });
-                $("#user-submit", $(this)).button().click(function(event) {
-                    $(".user-add-content .user-input").attr("disabled", true);
-                    $("input", ".user-add-content .user-input").attr("disabled", true);
-                    $("#user-submit").button("option", "disabled", true);
-                    $("#user-cancel").button("option", "disabled", true);
-                    var userName = $(".user-add-content .user-input[name='userName']", ".user-add-body").val();
-                    var userPasswd = $(".user-add-content .user-input[name='userPasswd']", ".user-add-body").val();
-                    var userConfirmPasswd = $(".user-add-content .user-input[name='userConfirmPasswd']", ".user-add-body").val();
-                    var userGroup = $(".user-add-content .user-input[name='userGroup']", ".user-add-body").val();
-                    var userProfile = $(".user-add-content .user-input>[type='radio']:checked", ".user-add-body").val();
-                    var dataSubmit = {
-                        name: userName,
-                        password: userPasswd,
-                        group: userGroup,
-                        profile: userProfile
-                    };
-                    if (userPasswd === userConfirmPasswd) {
-                        ginger.addUser(dataSubmit, function() {
-                            $("#hostUserAdd").dialog("close");
-                            listUsers();
-                        }, function() {
-                            clearUMSubmit();
-                        });
-                    } else {
-                        wok.confirm({
-                            title: i18n['KCHAPI6006M'],
-                            content: i18n['GINUM0002E'],
-                            confirm: i18n['KCHAPI6002M'],
-                            cancel: i18n['KCHAPI6003M']
-                        }, function() {
-                            clearUMSubmit();
-                        }, function() {
-                            clearUMSubmit();
-                        });
-                    }
+
+    $('#hostUserAdd').on('show.bs.modal', function(event) {
+        $("#kimchiuser").prop("checked", true);
+        $("#hostUserAdd, .inputbox[name='userName']", ".modal-body").keyup(function() {
+            var tmpVal = $(this).val();
+            $("#hostUserAdd, .inputbox[name='userName']", ".modal-body").val(tmpVal);
+        });
+        $("#enableEditGroup").click(function() {
+            if ($(this).prop("checked")) {
+                $("#hostUserAdd, .inputbox[name='userGroup']", ".modal-body").attr("disabled", false);
+            } else {
+                $("#hostUserAdd, .inputbox[name='userGroup']", ".modal-body").attr("disabled", true);
+            }
+        });
+        $(".modal-body .inputbox").keyup(function() {
+            var sum = 0;
+            $(".modal-body .inputbox").each(function(index, data) {
+                if ($(data).val() === "") {
+                    sum += 1;
+                }
+            })
+            if (sum != 0) {
+                $("#user-submit").prop("disabled", true);
+            } else {
+                $("#user-submit").prop("disabled", false);
+            }
+        });
+        $("#user-submit", $(this)).button().click(function(event) {
+            $(".modal-body .inputbox").attr("disabled", true);
+            $(".modal-body input[type=radio]").attr("disabled", true);
+            $("#user-submit").prop("disabled", true);
+            $("#user-cancel").prop("disabled", true);
+
+            var userName = $("#hostUserAdd, .inputbox[name='userName']", ".modal-body").val();
+            var userPasswd = $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").val();
+            var userConfirmPasswd = $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").val();
+            var userGroup = $("#hostUserAdd, .inputbox[name='userGroup']", ".modal-body").val();
+            var userProfile = $(".modal-body input[type=radio]:checked").val();
+
+            var dataSubmit = {
+                name: userName,
+                password: userPasswd,
+                group: userGroup,
+                profile: userProfile
+            };
+            if (userPasswd === userConfirmPasswd) {
+                ginger.addUser(dataSubmit, function() {
+                    listUsers();
+                }, function() {
+                    clearUMSubmit();
+                    $('#hostUserAdd').modal('hide');
                 });
-                $("#user-cancel", $(this)).button().click(function(event) {
-                    $("#hostUserAdd").dialog("close");
+            } else {
+                wok.confirm({
+                    title: i18n['KCHAPI6006M'],
+                    content: i18n['GINUM0002E'],
+                    confirm: i18n['KCHAPI6002M'],
+                    cancel: i18n['KCHAPI6003M']
+                }, function() {
+                    clearUMSubmit();
+                }, function() {
+                    clearUMSubmit();
                 });
-            },
-            beforeClose: function() {
-                clearUMSubmit();
-                $("#user-submit").unbind("click");
             }
         });
+        $("#user-cancel", $(this)).button().click(function(event) {
+            $('#hostUserAdd').modal('hide')
+        });
+        var clearUMSubmit = function() {
+            $("#kimchiuser").prop("checked", true);
+            $("#enableEditGroup").prop("checked", false);
+            $(".modal-body .inputbox").val("");
+            $(".modal-body .inputbox").attr("disabled", false);
+            $(".modal-body input[type=radio]").attr("disabled", false);
+            $(".modal-body .inputbox").attr("disabled", false);
+            $("#hostUserAdd, .inputbox[name='userGroup']", ".modal-body").attr("disabled", true);
+            $("#user-submit").prop("disabled", true);
+            $("#user-cancel").prop("disabled", false);
+        };
     });
     listUsers();
 };
diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl
index 42d8bca..c141908 100644
--- a/ui/pages/host-admin.html.tmpl
+++ b/ui/pages/host-admin.html.tmpl
@@ -245,7 +245,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
             </h3>
             <ul id="users-ppc-content-area" class="panel-collapse collapse user-manage" role="tabpanel" aria-labelledby="headingOne">
                 <li class="header">
-                    <button class="btn btn-primary actBtn add-user" type="submit"><i class="fa fa-plus-circle"></i> $_("Add User")</button>
+                    <button class="btn btn-primary actBtn add-user" type="submit" data-toggle="modal" data-target="#hostUserAdd"><i class="fa fa-plus-circle"></i> $_("Add User")</button>
                 </li>
                 <li class="header">
                     <span class="column-username">$_("Name")</span><!--
@@ -317,34 +317,57 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
     </div>
 </div>
 
-<div id="hostUserAdd" title='$_("Add User")' class="ginger-dialog">
-    <div class="user-add-body">
-        <div class="user-add-label user-colume">
-            <div class="user-label">$_("User Name")</div>
-            <div class="user-label">$_("Password")</div>
-            <div class="user-label">$_("Confirm Password")</div>
-            <div class="user-label">$_("Group")</div>
-            <div class="user-label">$_("Profile")</div>
-        </div>
-        <div class="user-add-content user-colume">
-            <input class="user-input inputbox" name="userName" /><br>
-            <input class="user-input inputbox" name="userPasswd" type="password" /><br>
-            <input class="user-input inputbox" name="userConfirmPasswd" type="password" /><br>
-            <input class="user-input inputbox" name="userGroup" disabled /><input class="enable-combobox" id="enableEditGroup" type="checkbox" value=""><label class="enable-combobox">$_("Use Other")</label><br>
-            <div class="user-input">
-                <input id="kimchiuser" type="radio" name="userProfile" value="kimchiuser" /><label for="kimchiuser">$_("Kimchi User")</label>
-                <input id="virtuser" type="radio" name="userProfile" value="virtuser" /><label for="virtuser">$_("Virt User")</label>
-                <input id="admin" type="radio" name="userProfile" value="admin" /><label for="admin">$_("Administrator")</label>
-            </div>
-        </div>
-        <div class="user-manage-footer">
-            <button id="user-submit" disabled>$_("Submit")</button>
-            <button id="user-cancel">$_("Cancel")</button>
+<!-- User Management Modal - Add User -->
+<div class="modal fade host-modal" id="hostUserAdd" tabindex="-1" role="dialog" labelledby="addUserModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content" >
+          <div class="modal-header">
+            <h4 class="modal-title">$_("Add User")</h4>
+          </div>
+          <div class="modal-body">
+            <form id="form-user-add">
+                <div class="form-group">
+                    <label for="username-textbox">$_("User Name")</label>
+                    <input type="text" class="form-control inputbox" id="username-textbox" name="userName" />
+                </div>
+                <div class="form-group">
+                    <label for="password-textbox">$_("Password")</label>
+                    <input type="password" class="form-control inputbox" id="password-textbox" name="userPasswd" />
+                </div>
+                <div class="form-group">
+                    <label for="confirm-password-textbox">$_("Confirm Password")</label>
+                    <input type="password" class="form-control inputbox" id="confirm-password-textbox" name="userConfirmPasswd" />
+                </div>
+                <div class="form-group">
+                    <label for="usergroup-textbox">$_("Group")</label>
+                    <input type="text" class="form-control inputbox" id="usergroup-textbox" name="userGroup" disabled />
+                    <div class="checkbox">
+                        <label>
+                          <input type="checkbox" class="enable-combobox" id="enableEditGroup"> $_("Use Other")
+                        </label>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label>$_("Profile")</label>
+                    <div id="radio-buttons">
+                        <label class="radio-inline">
+                            <input type="radio" name="userProfile" id="kimchiuser" value="kimchiuser" > $_("Kimchi User")</label>
+                        <label class="radio-inline">
+                            <input type="radio" name="userProfile" id="virtuser" value="virtuser" > $_("Virt User")</label>
+                        <label class="radio-inline">
+                            <input type="radio" name="userProfile" id="admin" value="admin" > $_("Administrator")</label>
+                    </div>
+                </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button type="button" id="user-submit" class="btn btn-default" data-dismiss="modal" disabled>$_("Submit")</button>
+            <button type="button" id="user-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+          </div>
         </div>
     </div>
 </div>
 
-
 </div>
 <script id="backupItem" type="text/html">
     <li class="body" name="backupBodyItem" id="{identity}">
-- 
1.9.3

    

[Kimchi-devel] [PATCH 6/8] Applying new ui at Admin User Management Modal

sguimaraes943＠gmail.com