Show confirm before changing a users password and show notification on save complete. (#13342)

* Show confirm before changing a users password and show notification on save complete.

* Do not show password confirm is password input is blank.

5 files changed, 44 insertions, 10 deletions

diff --git a/plugins/UsersManager/UsersManager.php b/plugins/UsersManager/UsersManager.php
index 1aa72afbf4..03c1c5ff1d 100644
--- a/plugins/UsersManager/UsersManager.php
+++ b/plugins/UsersManager/UsersManager.php
@@ -280,5 +280,6 @@ class UsersManager extends \Piwik\Plugin
         $translationKeys[] = 'UsersManager_SuperUserAccess';
         $translationKeys[] = 'General_Warning';
         $translationKeys[] = 'General_Add';
+        $translationKeys[] = 'UsersManager_AreYouSureChangePassword';
     }
 }
diff --git a/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.html b/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.html
index e21f61ab17..d614aebcd2 100644
--- a/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.html
+++ b/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.html
@@ -50,7 +50,7 @@
                         name="user_password"
                         ng-model="$ctrl.user.password"
                         title="Password"
-                        ng-change="$ctrl.isPasswordChanged = true;"
+                        ng-change="$ctrl.isPasswordChanged = !! $ctrl.user.password;"
                         disabled="$ctrl.isSavingUserInfo || ($ctrl.currentUserRole != 'superuser' && !$ctrl.isAdd)"
                 >
                 </div>
@@ -142,4 +142,17 @@
             </div>
         </div>
     </div>
+
+    <div class="change-password-modal modal">
+        <div class="modal-content">
+            <h2>{{:: 'UsersManager_AreYouSure'|translate }}</h2>
+            <p piwik-translate="UsersManager_AreYouSureChangePassword">
+                <strong>{{ $ctrl.user.login }}</strong>
+            </p>
+        </div>
+        <div class="modal-footer">
+            <a href="" class="modal-action modal-close btn" ng-click="$ctrl.updateUser()">{{:: 'General_Yes'|translate }}</a>
+            <a href="" class="modal-action modal-close modal-no">{{:: 'General_No'|translate }}</a>
+        </div>
+    </div>
 </div>
diff --git a/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.js b/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.js
index e13f594e0d..f5bbe864ad 100644
--- a/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.js
+++ b/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.js
@@ -24,9 +24,9 @@
         controller: UserEditFormController
     });
 
-    UserEditFormController.$inject = ['$element', 'piwikApi'];
+    UserEditFormController.$inject = ['$element', 'piwikApi', '$q'];
 
-    function UserEditFormController($element, piwikApi) {
+    function UserEditFormController($element, piwikApi, $q) {
         var vm = this;
         vm.activeTab = 'basic';
         vm.permissionsForIdSite = 1;
@@ -43,6 +43,7 @@
         vm.getSaveButtonLabel = getSaveButtonLabel;
         vm.toggleSuperuserAccess = toggleSuperuserAccess;
         vm.saveUserInfo = saveUserInfo;
+        vm.updateUser = updateUser;
 
         function $onInit() {
             vm.firstSiteAccess = {
@@ -76,6 +77,10 @@
             $element.find('.superuser-confirm-modal').openModal({ dismissible: false });
         }
 
+        function confirmPasswordChange() {
+            $element.find('.change-password-modal').openModal({ dismissible: false });
+        }
+
         function toggleSuperuserAccess() {
             vm.isSavingUserInfo = true;
             piwikApi.post({
@@ -93,14 +98,22 @@
         function saveUserInfo() {
             if (vm.isAdd) {
                 createUser();
+            } else if (vm.isPasswordChanged) {
+                confirmPasswordChange();
             } else {
                 updateUser();
             }
         }
 
+        function showUserSavedNotification() {
+            var UI = require('piwik/UI');
+            var notification = new UI.Notification();
+            notification.show(_pk_translate('General_YourChangesHaveBeenSaved'), { context: 'success', type: 'toast' });
+        }
+
         function createUser() {
             vm.isSavingUserInfo = true;
-            piwikApi.post({
+            return piwikApi.post({
                 method: 'UsersManager.addUser',
                 userLogin: vm.user.login,
                 password: vm.user.password,
@@ -116,12 +129,14 @@
                 vm.isAdd = false;
                 vm.isPasswordChanged = false;
                 vm.isUserModified = true;
+
+                showUserSavedNotification();
             });
         }
 
         function updateUser() {
             vm.isSavingUserInfo = true;
-            piwikApi.post({
+            return piwikApi.post({
                 method: 'UsersManager.updateUser',
                 userLogin: vm.user.login,
                 password: vm.isPasswordChanged ? vm.user.password : undefined,
@@ -134,6 +149,8 @@
                 vm.isSavingUserInfo = false;
                 vm.isPasswordChanged = false;
                 vm.isUserModified = true;
+
+                showUserSavedNotification();
             });
         }
     }
diff --git a/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.less b/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.less
index 8231e12fcb..d8c8bf968c 100644
--- a/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.less
+++ b/plugins/UsersManager/angularjs/user-edit-form/user-edit-form.component.less
@@ -20,10 +20,12 @@
     height: 48px;
   }
 
-  .superuser-confirm-modal .modal-no {
-    float: right;
-    margin-right: 1em;
-    margin-top: 1em;
+  .superuser-confirm-modal,.change-password-modal {
+    .modal-no {
+      float: right;
+      margin-right: 1em;
+      margin-top: 1em;
+    }
   }
 
   .basic-info-tab {
diff --git a/plugins/UsersManager/lang/en.json b/plugins/UsersManager/lang/en.json
index a51359a064..e212db2693 100644
--- a/plugins/UsersManager/lang/en.json
+++ b/plugins/UsersManager/lang/en.json
@@ -135,6 +135,7 @@
         "DeleteUserConfirmSingle": "Are you sure you want to delete %1$s?",
         "DeleteUserConfirmMultiple": "Are you sure you want to delete the %1$s selected users?",
         "DeleteUserPermConfirmSingle": "Are you sure you want to change %1$s's role to %2$s for %3$s?",
-        "DeleteUserPermConfirmMultiple": "Are you sure you want to change the %1$s selected users' role to %2$s for %3$s?"
+        "DeleteUserPermConfirmMultiple": "Are you sure you want to change the %1$s selected users' role to %2$s for %3$s?",
+        "AreYouSureChangePassword": "Are you sure you want to change the password for %s?"
     }
 }