From 35acaa2b13bea7962cf7059a7205240fd0ca84f6 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 29 Apr 2022 14:41:17 +0200
Subject: [PATCH] Regression: User cannot change password using the user pane
 (#12320)

* add support for UserService to change password

* for 'users' section use UserService to change password

* user infinite editor should now use the changepassword dialog as seen in the 'users' section

* add some autocomplete and name changes to change-password form to support autofill and password managers

* Revert "for 'users' section use UserService to change password"

This reverts commit 68c5972777baa4a60cc8cfc88b2572f1f47ece64.

* Revert "add support for UserService to change password"

This reverts commit a64b756ad31dfede91ba49f720afa7d073d9a7e8.

* use the currentUserResource to change password

* only return true on success since notifications are handled in the resource
---
 .../infiniteeditors/user/user.controller.js   | 106 +++++++-----------
 .../common/infiniteeditors/user/user.html     |  25 +----
 .../components/users/change-password.html     |   9 +-
 3 files changed, 50 insertions(+), 90 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.controller.js
index 7f9e546709..53c8b13bff 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.controller.js
@@ -1,14 +1,12 @@
 angular.module("umbraco")
-  .controller("Umbraco.Editors.UserController", function ($scope, $location, $timeout,
+  .controller("Umbraco.Editors.UserController", function ($scope, $location,
     dashboardResource, userService, historyService, eventsService,
-    externalLoginInfoService, authResource,
-    currentUserResource, formHelper, localizationService, editorService, twoFactorLoginResource) {
+    externalLoginInfoService, authResource, contentEditingHelper,
+    currentUserResource, overlayService, localizationService, editorService, twoFactorLoginResource) {
 
     let vm = this;
 
     vm.history = historyService.getCurrent();
-    vm.showPasswordFields = false;
-    vm.changePasswordButtonState = "init";
     vm.hasTwoFactorProviders = false;
 
     localizationService.localize("general_user").then(function (value) {
@@ -51,20 +49,7 @@ angular.module("umbraco")
       $location.path(link);
       vm.close();
     };
-    /*
-    //Manually update the remaining timeout seconds
-    function updateTimeout() {
-        $timeout(function () {
-            if (vm.remainingAuthSeconds > 0) {
-                vm.remainingAuthSeconds--;
-                $scope.$digest();
-                //recurse
-                updateTimeout();
-            }
 
-        }, 1000, false); // 1 second, do NOT execute a global digest
-    }
-    */
     function updateUserInfo() {
       //get the user
       userService.getCurrentUser().then(function (user) {
@@ -72,8 +57,6 @@ angular.module("umbraco")
         if (vm.user) {
           vm.remainingAuthSeconds = vm.user.remainingAuthSeconds;
           vm.canEditProfile = _.indexOf(vm.user.allowedSections, "users") > -1;
-          //set the timer
-          //updateTimeout();
 
           currentUserResource.getCurrentUserLinkedLogins().then(function (logins) {
 
@@ -107,10 +90,20 @@ angular.module("umbraco")
 
         }
       });
-
-
     }
 
+    function changePassword() {
+      return currentUserResource.changePassword(vm.changePasswordModel.value).then(function () {
+        return true;
+      }, function (err) {
+        contentEditingHelper.handleSaveError({
+          err: err,
+          showNotifications: true
+        });
+        return false;
+      });
+    };
+
     vm.linkProvider = function (e) {
       e.target.submit();
     }
@@ -144,53 +137,40 @@ angular.module("umbraco")
 
     });
 
-    vm.changePassword = function () {
-
-      if (formHelper.submitForm({ scope: $scope })) {
-
-        vm.changePasswordButtonState = "busy";
-
-        currentUserResource.changePassword(vm.changePasswordModel.value).then(function (data) {
-
-          //reset old data
-          clearPasswordFields();
-
-          formHelper.resetForm({ scope: $scope });
-
-          vm.changePasswordButtonState = "success";
-          $timeout(function () {
-            vm.togglePasswordFields();
-          }, 2000);
-
-        }, function (err) {
-          formHelper.resetForm({ scope: $scope, hasErrors: true });
-          formHelper.handleError(err);
-
-          vm.changePasswordButtonState = "error";
-
-        });
-
-      }
-
-    };
-
-    vm.togglePasswordFields = function () {
-      clearPasswordFields();
-      vm.showPasswordFields = !vm.showPasswordFields;
-    }
-
-    function clearPasswordFields() {
-      vm.changePasswordModel.value.oldPassword = "";
-      vm.changePasswordModel.value.newPassword = "";
-      vm.changePasswordModel.value.confirm = "";
-    }
-
     vm.editUser = function () {
       $location
         .path('/users/users/user/' + vm.user.id);
       vm.close();
     }
 
+    vm.toggleChangePassword = function () {
+      //reset it
+      vm.user.changePassword = null;
+
+      localizationService.localizeMany(["general_cancel", "general_confirm", "general_changePassword"])
+        .then(function (data) {
+          const overlay = {
+            view: "changepassword",
+            title: data[2],
+            changePassword: vm.user.changePassword,
+            config: vm.changePasswordModel.config,
+            closeButtonLabel: data[0],
+            submitButtonLabel: data[1],
+            submitButtonStyle: 'success',
+            close: () => overlayService.close(),
+            submit: model => {
+              vm.changePasswordModel.value = model.changePassword;
+              changePassword().then(result => {
+                if (result) {
+                  overlayService.close();
+                }
+              });
+            }
+          };
+          overlayService.open(overlay);
+        });
+    }
+
     vm.toggleConfigureTwoFactor = function () {
 
       const configureTwoFactorSettings = {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.html
index c67f65a7d2..ed8cbd13e0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/user/user.html
@@ -16,7 +16,7 @@
                   label-key="general_edit" ng-if="vm.canEditProfile" type="button">
                 </umb-button>
 
-                <umb-button action="vm.togglePasswordFields()" alias="changePassword" button-style="action"
+                <umb-button action="vm.toggleChangePassword()" alias="changePassword" button-style="action"
                   label="Change password" label-key="general_changePassword" ng-if="!vm.denyLocalLogin" type="button">
                 </umb-button>
 
@@ -91,29 +91,6 @@
         </umb-box>
       </div>
 
-      <div ng-if="vm.showPasswordFields && !vm.denyLocalLogin">
-
-        <h5>
-          <localize key="general_changePassword">Change password</localize>
-        </h5>
-
-        <form class="block-form" name="passwordForm" ng-submit="vm.changePassword()" novalidate val-form-manager>
-
-          <change-password config="vm.changePasswordModel.config" password-values="vm.changePasswordModel.value">
-          </change-password>
-
-          <umb-button action="vm.togglePasswordFields()" button-style="cancel" label="Back" label-key="general_back"
-            type="button">
-          </umb-button>
-
-          <umb-button button-style="success" label="Change password" label-key="general_changePassword"
-            state="changePasswordButtonState" type="submit">
-          </umb-button>
-
-        </form>
-
-      </div>
-
       <div class="umb-control-group" ng-if="vm.dashboard.length > 0">
         <div ng-repeat="tab in vm.dashboard">
           <h5 ng-if="tab.label">{{tab.label}}</h5>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html b/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html
index 81dd8d6fe8..74cba97696 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html
@@ -16,8 +16,9 @@
 
                 <!-- we need to show the old pass field when the provider cannot retrieve the password -->
                 <umb-control-group alias="oldPassword" label="@user_oldPassword" ng-if="vm.showOldPass()" required="true">
-                    <input type="password" name="oldPassword" id="oldPassword" ng-model="vm.passwordValues.oldPassword"
+                    <input type="password" name="password" id="oldPassword" ng-model="vm.passwordValues.oldPassword"
                            class="input-block-level umb-textstring textstring"
+                           autocomplete="current-password"
                            required
                            val-server-field="oldPassword"
                            no-dirty-check />
@@ -28,8 +29,9 @@
                 </umb-control-group>
 
                 <umb-control-group alias="password" label="@user_newPassword" required="true">
-                    <input type="password" name="password" id="password"
+                    <input type="password" name="newPassword" id="password"
                            class="input-block-level umb-textstring textstring"
+                           autocomplete="new-password"
                            required
                            val-server-field="password"
                            ng-model="vm.passwordValues.newPassword"
@@ -47,7 +49,8 @@
                 <umb-control-group alias="confirmPassword" label="@user_confirmNewPassword" required="true">
                     <input type="password" name="confirmPassword" id="confirmPassword" ng-model="vm.passwordValues.confirm"
                            class="input-block-level umb-textstring textstring"
-                           val-compare="password"
+                           autocomplete="new-password"
+                           val-compare="newPassword"
                            no-dirty-check />
                     <span ng-messages="changePasswordForm.confirmPassword.$error" show-validation-on-submit>
                         <span class="help-inline" ng-message="valCompare"><localize key="user_passwordMismatch">The confirmed password doesn't match the new password!</localize></span>