Refactoring change password modal - 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

@@ -1,3 +1,21 @@
+/*
+ * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 /**
  * Checks if provided input is valid against RegEx input.
  *
@@ -21,34 +39,33 @@ $(document).ready(function () {
         showPopup();
 
         $("a#change-password-yes-link").click(function () {
-            var oldPassword = $("#old-password").val();
+            var currentPassword = $("#current-password").val();
             var newPassword = $("#new-password").val();
-            var confirmedPassword = $("#confirmed-password").val();
+            var retypedNewPassword = $("#retyped-new-password").val();
             var user = $("#user").val();
 
-            var errorMsgWrapper = "#notification-error-msg";
+            var errorMsgWrapper = "#change-password-error-msg";
-            var errorMsg = "#notification-error-msg span";
+            var errorMsg = "#change-password-error-msg span";
-            if (!oldPassword) {
+            if (!currentPassword) {
-                $(errorMsg).text("Old password is a required field. It cannot be empty.");
+                $(errorMsg).text("Typing your current password is required. It cannot be empty.");
                 $(errorMsgWrapper).removeClass("hidden");
             } else if (!newPassword) {
-                $(errorMsg).text("New password is a required field. It cannot be empty.");
+                $(errorMsg).text("Typing your new password is required. It cannot be empty.");
                 $(errorMsgWrapper).removeClass("hidden");
-            } else if (!confirmedPassword) {
+            } else if (!retypedNewPassword) {
-                $(errorMsg).text("Retyping the new password is required.");
+                $(errorMsg).text("Confirming your new password is required. It cannot be empty.");
                 $(errorMsgWrapper).removeClass("hidden");
-            } else if (confirmedPassword != newPassword) {
+            } else if (retypedNewPassword != newPassword) {
-                $(errorMsg).text("New password doesn't match the confirmation.");
+                $(errorMsg).text("Password confirmation failed. Please check.");
                 $(errorMsgWrapper).removeClass("hidden");
-            } else if (!inputIsValid(/^[\S]{5,30}$/, confirmedPassword)) {
+            } else if (!inputIsValid(/^[\S]{5,30}$/, newPassword)) {
-                $(errorMsg).text("Password should be minimum 5 characters long, should not include any whitespaces.");
+                $(errorMsg).text("Password should be minimum 5 characters long and " +
+                    "should not include any whitespaces. Please check.");
                 $(errorMsgWrapper).removeClass("hidden");
             } else {
                 var changePasswordFormData = {};
-                //changePasswordFormData.username = user;
+                changePasswordFormData.currentPassword = unescape((currentPassword));
-                changePasswordFormData.newPassword = unescape((confirmedPassword));
+                changePasswordFormData.newPassword = unescape((newPassword));
-                changePasswordFormData.oldPassword = unescape((oldPassword));
-
 
                 var changePasswordAPI = "/api/device-mgt/v1.0/users/" + user + "/credentials";
 
@@ -64,7 +81,7 @@ $(document).ready(function () {
                         }
                     }, function (jqXHR) {
                         if (jqXHR.status == 400) {
-                            $(errorMsg).text("Old password does not match with the provided value.");
+                            $(errorMsg).text("Your current password does not match with the provided value.");
                             $(errorMsgWrapper).removeClass("hidden");
                         } else {
                             $(errorMsg).text("An unexpected error occurred. Please try again later.");

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

@@ -43,28 +43,29 @@
         </div>
         <hr>
         <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
+            <div id="change-password-error-msg" class="alert alert-danger hidden" role="alert">
                 <i class="icon fw fw-error"></i><span></span>
             </div>
             <h5>
                 Type your current password *
                 <br><br>
                 <div>
-                    <input type="password" class="form-control modal-input operationDataKeys" id="old-password" data-key="message"/>
+                    <input id="current-password" type="password" class="form-control modal-input"/>
                 </div>
-                <br>
+                <br><br>
                 Type a new password *
                 <br><br>
                 <div>
-                    <input type="password" class="form-control modal-input operationDataKeys" id="new-password" data-key="message"/>
+                    <input id="new-password" type="password" class="form-control modal-input"
+                        placeholder="[ Password should be in minimum 5 characters long. Should not include any whitespaces ]"/>
                 </div>
-                <br>
+                <br><br>
-                Retype your new password *
+                Reconfirm your new password *
                 <br><br>
                 <div>
-                    <input type="password" class="form-control modal-input operationDataKeys" id="confirmed-password" data-key="message"/>
+                    <input id="retyped-new-password" type="password" class="form-control modal-input"/>
                 </div>
-                <br>
+                <br><br>
             </h5>
         </div>
         <div class="modal-footer">

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

@@ -1,3 +1,21 @@
+/*
+ * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 function onRequest() {
     var constants = require("/app/modules/constants.js");
     return session.get(constants["USER_SESSION_KEY"]);