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

From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- 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