[PATCH] [Ginger] Bug fix #378: Change confirmation dialog of password mismatch in Add User window

[bia...@linux.vnet.ibm.com]

From: Bianca Carvalho <bia...@linux.vnet.ibm.com>

Changed 'user add' and 'user change password' features to remove confirmation
window, now password validation show if it doesn't match right after the user
type it.

Signed-off-by: Bianca Carvalho <bia...@linux.vnet.ibm.com>
---
ui/js/host-admin.js | 78 +++++++++++++++++---------------------
ui/pages/i18n.json.tmpl | 2 -
ui/pages/tabs/host-admin.html.tmpl | 2 +
3 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js
index cccb54b..35b28b3 100644
--- a/ui/js/host-admin.js
+++ b/ui/js/host-admin.js
@@ -656,6 +656,7 @@ ginger.initUserManagement = function() {
});

$('#hostUserAdd').on('show.bs.modal', function(event) {
+ $(".password-not-match").hide();
var enableFields = function() {
$("#user-cancel").prop("disabled", false);
$(".modal-body .inputbox").attr("disabled", false);
@@ -707,6 +708,8 @@ ginger.initUserManagement = function() {
});
$(".modal-body .inputbox", "#hostUserAdd").keyup(function() {
var sum = 0;
+ var userPasswd = $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").val();
+ var userConfirmPasswd = $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").val();
$(".modal-body .inputbox", "#hostUserAdd").not("[name='userGroup']").each(function(index, data) {
if ($(data).val() === "") {
sum += 1;
@@ -717,6 +720,20 @@ ginger.initUserManagement = function() {
} else {
$("#user-submit").prop("disabled", false);
}
+ if (userPasswd === userConfirmPasswd) {
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().addClass('has-success');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().addClass('has-success');
+ $(".password-not-match").hide();
+ } else {
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().addClass('has-error');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().addClass('has-error');
+ $(".password-not-match").show();
+ $("#user-submit").prop("disabled", true);
+ }
});
$("#user-submit").on('click', function(event) {
event.preventDefault();
@@ -755,18 +772,6 @@ ginger.initUserManagement = function() {
wok.message.error(data.responseJSON.reason,'#alert-user-modal');
enableFields();
});
- } else {
- wok.confirm({
- content: i18n['GINUM0002E'],
- confirm: i18n['GINUM0004M'],
- cancel: i18n['GINUM0005M']
- }, function() {
- clearPasswords();
- }, function() {
- clearUMSubmit();
- }, function(){
- clearPasswords();
- });
}
});
$("#user-cancel", $(this)).button().click(function(event) {
@@ -780,30 +785,14 @@ ginger.initUserManagement = function() {
var username = $("span[data-type='name']", that).text();
var wokUserName = wok.user.getUserName();
$('#hostUserPasswordChange').modal('show');
- var enableFields = function() {
- $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().removeClass('has-error');
- $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().removeClass('has-error');
- $("#user-password-change-cancel").prop("disabled", false);
- $(".modal-body .inputbox").val("");
- $(".modal-body .inputbox").attr("disabled", false);
- $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").focus();
- $("#user-password-change-submit").prop("disabled", true);
- };
- var clearPasswords = function() {
- $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().addClass('has-error');
- $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().addClass('has-error');
- $(".modal-body .inputbox").attr("disabled", false);
- $("#user-password-change-submit").prop("disabled", true);
- $("#user-password-change-cancel").prop("disabled", false);
- $(".modal-body .inputbox").val("");
- $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").focus();
- };
- enableFields();
+ $(".password-not-match").hide();
$("#alert-user-password-change-modal").empty();
// clear user-password-change-submit handlers before assigning
$("#user-password-change-submit").off();
$(".modal-body .inputbox", "#hostUserPasswordChange").keyup(function() {
var sum = 0;
+ var newUserPasswd = $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").val();
+ var confirmNewPasswd = $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").val();
$(".modal-body .inputbox", "#hostUserPasswordChange").each(function(index, data) {
if ($(data).val() === "") {
sum += 1;
@@ -814,6 +803,21 @@ ginger.initUserManagement = function() {
} else {
$("#user-password-change-submit").prop("disabled", false);
}
+ if (newUserPasswd === confirmNewPasswd) {
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().addClass('has-success');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().addClass('has-success');
+ $(".password-not-match").hide();
+ $("#user-password-change-submit").prop("disabled", false);
+ } else {
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().addClass('has-error');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().addClass('has-error');
+ $(".password-not-match").show();
+ $("#user-password-change-submit").prop("disabled", true);
+ }
});
$("#user-password-change-submit").on('click', function(event) {
event.preventDefault();
@@ -842,21 +846,9 @@ ginger.initUserManagement = function() {
else {
wok.message.success(i18n['GINUM0006M'].replace("%1", '<strong>'+username+'</strong>'), '#alert-modal-user-container');
$('#hostUserPasswordChange').modal('hide');
- enableFields();
}
}, function(data) {
wok.message.error(data.responseJSON.reason,'#alert-user-password-change-modal');
- enableFields();
- });
- } else {
- wok.confirm({
- content: i18n['GINUM0002E'],
- confirm: i18n['GINUM0004M'],
- cancel: i18n['GINUM0005M']
- }, function() {
- clearPasswords();
- }, function() {
- clearPasswords();
});
}
});
diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
index 1c521b6..6c4a8a1 100644
--- a/ui/pages/i18n.json.tmpl
+++ b/ui/pages/i18n.json.tmpl
@@ -124,8 +124,6 @@
"GINBG00005M": "$_("Showing {{ctx.start}} to {{ctx.end}} of {{ctx.total}} entries")",
"GINBG00006M": "$_("invalid field")",

- "GINUM0002E": "$_("The two passwords entered do not match.")",
- "GINUM0003E": "$_("not integer.")",
"GINUM0003M": "$_("Password changed successfully. Please login to continue!")",
"GINUM0004M": "$_("Ok")",
"GINUM0005M": "$_("Cancel")",
diff --git a/ui/pages/tabs/host-admin.html.tmpl b/ui/pages/tabs/host-admin.html.tmpl
index 05eb024..c46080b 100644
--- a/ui/pages/tabs/host-admin.html.tmpl
+++ b/ui/pages/tabs/host-admin.html.tmpl
@@ -497,6 +497,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
<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" />
+ <label class="password-not-match control-label" for="confirm-password-textbox" style="font-size: 14px; padding-top: 5px;" display="none"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> The two passwords entered do not match.</label>
</div>
<div class="form-group">
<label for="usergroup-textbox">$_("Group")</label>
@@ -546,6 +547,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
<div class="form-group">
<label for="confirm-password-textbox">$_("Confirm Password")</label>
<input type="password" class="form-control inputbox" id="confirm-password-textbox" name="confirmNewPasswd" />
+ <label class="password-not-match control-label" for="confirm-password-textbox" style="font-size: 14px; padding-top: 5px;" display="none"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> The two passwords entered do not match.</label>
</div>
</form>
</div>
--
2.9.3

[Daniel Henrique Barboza]

You need to externalize this string. Check the "Confirm Password" above.

> </div>
> <div class="form-group">
> <label for="usergroup-textbox">$_("Group")</label>
> @@ -546,6 +547,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
> <div class="form-group">
> <label for="confirm-password-textbox">$_("Confirm Password")</label>
> <input type="password" class="form-control inputbox" id="confirm-password-textbox" name="confirmNewPasswd" />
> + <label class="password-not-match control-label" for="confirm-password-textbox" style="font-size: 14px; padding-top: 5px;" display="none"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> The two passwords entered do not match.</label>

You need to externalize this string. Check the "Confirm Password" above.

> </div>
> </form>
> </div>

[bia...@linux.vnet.ibm.com]

From: Bianca Carvalho <bia...@linux.vnet.ibm.com>

Changed 'user add' and 'user change password' features to remove confirmation
window, now password validation show if it doesn't match right after the user
type it.

Signed-off-by: Bianca Carvalho <bia...@linux.vnet.ibm.com>
---
ui/js/host-admin.js | 78 +++++++++++++++++---------------------
ui/pages/i18n.json.tmpl | 2 -
ui/pages/tabs/host-admin.html.tmpl | 2 +
3 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js

index 1a7e14b..d101c65 100644
--- a/ui/js/host-admin.js
+++ b/ui/js/host-admin.js
@@ -659,6 +659,7 @@ ginger.initUserManagement = function() {

});

$('#hostUserAdd').on('show.bs.modal', function(event) {
+ $(".password-not-match").hide();
var enableFields = function() {
$("#user-cancel").prop("disabled", false);
$(".modal-body .inputbox").attr("disabled", false);

@@ -710,6 +711,8 @@ ginger.initUserManagement = function() {

});
$(".modal-body .inputbox", "#hostUserAdd").keyup(function() {
var sum = 0;
+ var userPasswd = $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").val();
+ var userConfirmPasswd = $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").val();
$(".modal-body .inputbox", "#hostUserAdd").not("[name='userGroup']").each(function(index, data) {
if ($(data).val() === "") {
sum += 1;

@@ -720,6 +723,20 @@ ginger.initUserManagement = function() {

} else {
$("#user-submit").prop("disabled", false);
}
+ if (userPasswd === userConfirmPasswd) {
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().addClass('has-success');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().addClass('has-success');
+ $(".password-not-match").hide();
+ } else {
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserAdd, .inputbox[name='userPasswd']", ".modal-body").parent().addClass('has-error');
+ $("#hostUserAdd, .inputbox[name='userConfirmPasswd']", ".modal-body").parent().addClass('has-error');
+ $(".password-not-match").show();
+ $("#user-submit").prop("disabled", true);
+ }
});
$("#user-submit").on('click', function(event) {
event.preventDefault();

@@ -758,18 +775,6 @@ ginger.initUserManagement = function() {

wok.message.error(data.responseJSON.reason,'#alert-user-modal');
enableFields();
});
- } else {
- wok.confirm({
- content: i18n['GINUM0002E'],
- confirm: i18n['GINUM0004M'],
- cancel: i18n['GINUM0005M']
- }, function() {
- clearPasswords();
- }, function() {
- clearUMSubmit();
- }, function(){
- clearPasswords();
- });
}
});
$("#user-cancel", $(this)).button().click(function(event) {

@@ -783,30 +788,14 @@ ginger.initUserManagement = function() {

@@ -817,6 +806,21 @@ ginger.initUserManagement = function() {

} else {
$("#user-password-change-submit").prop("disabled", false);
}
+ if (newUserPasswd === confirmNewPasswd) {
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().removeClass('has-error');
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().addClass('has-success');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().addClass('has-success');
+ $(".password-not-match").hide();
+ $("#user-password-change-submit").prop("disabled", false);
+ } else {
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().removeClass('has-success');
+ $("#hostUserPasswordChange, .inputbox[name='newUserPasswd']", ".modal-body").parent().addClass('has-error');
+ $("#hostUserPasswordChange, .inputbox[name='confirmNewPasswd']", ".modal-body").parent().addClass('has-error');
+ $(".password-not-match").show();
+ $("#user-password-change-submit").prop("disabled", true);
+ }
});
$("#user-password-change-submit").on('click', function(event) {
event.preventDefault();

@@ -845,21 +849,9 @@ ginger.initUserManagement = function() {

index 05eb024..f7a5622 100644

--- a/ui/pages/tabs/host-admin.html.tmpl
+++ b/ui/pages/tabs/host-admin.html.tmpl
@@ -497,6 +497,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
<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" />

+ <label class="password-not-match control-label" for="confirm-password-textbox" style="font-size: 14px; padding-top: 5px;" display="none"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> $_("The two passwords entered do not match.")</label>

</div>
<div class="form-group">
<label for="usergroup-textbox">$_("Group")</label>
@@ -546,6 +547,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
<div class="form-group">
<label for="confirm-password-textbox">$_("Confirm Password")</label>
<input type="password" class="form-control inputbox" id="confirm-password-textbox" name="confirmNewPasswd" />

+ <label class="password-not-match control-label" for="confirm-password-textbox" style="font-size: 14px; padding-top: 5px;" display="none"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> $_("The two passwords entered do not match.")</label>

[Daniel Henrique Barboza]

Applied. Thanks!