[Kimchi-devel] [PATCH 6/8] Applying new ui at Admin User Management Modal
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Fri Nov 27 19:47:55 UTC 2015
From: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
Signed-off-by: samhenri <samuel.guimaraes at 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
More information about the Kimchi-devel
mailing list