Adding user password change UI

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.header.user-menu/public/js/user-menu.js

@@ -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();
+        });
+    });
+});

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.header.user-menu/user-menu.hbs

@@ -17,6 +17,70 @@
 }}
 {{#zone "userMenu-items"}}
     <li>
-        <a href="{{@app.context}}/logout">Logout</a>
+        <a href="javascript:void(0)" id="change-password">Change password</a>
     </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}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.header.user-menu/user-menu.js

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