Adding user password change UI

4.x.x
dilanua 8 years ago
parent f71106d011
commit e07991174d

@ -0,0 +1,82 @@
/**
* Checks if provided input is valid against RegEx input.
*
* @param regExp Regular expression
* @param inputString Input string to check
* @returns {boolean} Returns true if input matches RegEx
*/
function inputIsValid(regExp, inputString) {
return regExp.test(inputString);
}
$(document).ready(function () {
var modalPopup = ".wr-modalpopup";
// var modalPopupContainer = modalPopup + " .modalpopup-container";
var modalPopupContent = modalPopup + " .modalpopup-content";
$("#change-password").click(function () {
$(modalPopupContent).html($('#change-password-window').html());
showPopup();
$("a#change-password-yes-link").click(function () {
var oldPassword = $("#old-password").val();
var newPassword = $("#new-password").val();
var confirmedPassword = $("#confirmed-password").val();
var user = $("#user").val();
var errorMsgWrapper = "#notification-error-msg";
var errorMsg = "#notification-error-msg span";
if (!oldPassword) {
$(errorMsg).text("Old password is a required field. It cannot be empty.");
$(errorMsgWrapper).removeClass("hidden");
} else if (!newPassword) {
$(errorMsg).text("New password is a required field. It cannot be empty.");
$(errorMsgWrapper).removeClass("hidden");
} else if (!confirmedPassword) {
$(errorMsg).text("Retyping the new password is required.");
$(errorMsgWrapper).removeClass("hidden");
} else if (confirmedPassword != newPassword) {
$(errorMsg).text("New password doesn't match the confirmation.");
$(errorMsgWrapper).removeClass("hidden");
} else if (!inputIsValid(/^[\S]{5,30}$/, confirmedPassword)) {
$(errorMsg).text("Password should be minimum 5 characters long, should not include any whitespaces.");
$(errorMsgWrapper).removeClass("hidden");
} else {
var changePasswordFormData = {};
//changePasswordFormData.username = user;
changePasswordFormData.newPassword = unescape((confirmedPassword));
changePasswordFormData.oldPassword = unescape((oldPassword));
var changePasswordAPI = "/api/device-mgt/v1.0/users" + user + "/credentials";
invokerUtil.put(
changePasswordAPI,
changePasswordFormData,
function (data, textStatus, jqXHR) {
if (jqXHR.status == 200 && data) {
$(modalPopupContent).html($('#change-password-success-content').html());
$("#change-password-success-link").click(function () {
hidePopup();
});
}
}, function (jqXHR) {
if (jqXHR.status == 400) {
$(errorMsg).text("Old password does not match with the provided value.");
$(errorMsgWrapper).removeClass("hidden");
} else {
$(errorMsg).text("An unexpected error occurred. Please try again later.");
$(errorMsgWrapper).removeClass("hidden");
}
}
);
}
});
$("a#change-password-cancel-link").click(function () {
hidePopup();
});
});
});

@ -17,6 +17,70 @@
}} }}
{{#zone "userMenu-items"}} {{#zone "userMenu-items"}}
<li> <li>
<a href="{{@app.context}}/logout">Logout</a> <a href="javascript:void(0)" id="change-password">Change password</a>
</li> </li>
<li>
<a href="{{@app.context}}/logout">Sign out</a>
</li>
<div id="change-password-window" class="hide">
<input type="hidden" id="user" value="{{username}}">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h4>
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-key fw-stack-1x"></i>
</span>
Change Password
<br><br>
</h4>
<div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<h3>
Enter old password *
<br><br>
<div>
<input type="password" class="form-control modal-input operationDataKeys" id="old-password" data-key="message"/>
</div>
<br>
Enter new password *
<br><br>
<div>
<input type="password" class="form-control modal-input operationDataKeys" id="new-password" data-key="message"/>
</div>
<br>
Retype new password *
<br><br>
<div>
<input type="password" class="form-control modal-input operationDataKeys" id="confirmed-password" data-key="message"/>
</div>
<br>
</h3>
<div class="buttons">
<a href="#" id="change-password-yes-link" class="btn-operations">Update</a>
<a href="#" id="change-password-cancel-link" class="btn-operations">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<div id="change-password-success-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>Password change is successful.</h3>
<div class="buttons">
<a href="#" id="change-password-success-link" class="btn-operations">Ok</a>
</div>
</div>
</div>
</div>
</div>
{{/zone}}
{{#zone "bottomJs"}}
<script src="{{@unit.publicUri}}/js/user-menu.js"></script>
{{/zone}} {{/zone}}

@ -0,0 +1,4 @@
function onRequest() {
var constants = require("/app/modules/constants.js");
return session.get(constants["USER_SESSION_KEY"]);
}
Loading…
Cancel
Save