From 0e7ce3129c675c0759c5613862f617a6e7fee0d0 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 27 Jul 2020 10:20:38 -0400
Subject: [PATCH] fix(preferences(js)): show error when passwords don't match

---
 UI/PreferencesUI/English.lproj/Localizable.strings        | 1 +
 UI/Templates/PreferencesUI/UIxPreferences.wox             | 8 +++++---
 .../js/Preferences/PreferencesController.js               | 8 +++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/UI/PreferencesUI/English.lproj/Localizable.strings b/UI/PreferencesUI/English.lproj/Localizable.strings
index 248f39dd3..d113db5e3 100644
--- a/UI/PreferencesUI/English.lproj/Localizable.strings
+++ b/UI/PreferencesUI/English.lproj/Localizable.strings
@@ -242,6 +242,7 @@
 "New password" = "New password";
 "Confirmation" = "Confirmation";
 "Change" = "Change";
+"Passwords don't match" = "Passwords don't match";
 
 /* Event+task classifications */
 "Default events classification" = "Default events classification";
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 0ddc8795b..c8ff7826c 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -272,15 +272,17 @@
                 </label>
                 <input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPassword"/>
               </md-input-container>
-
               <md-input-container class="md-block" flex="50">
                 <label><var:string label:value="Confirmation"/>
                 </label>
-                <input type="password" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
+                <input type="password" name="newPasswordConfirmation" sg-no-dirty-check="true" ng-model="app.passwords.newPasswordConfirmation"/>
+                <div ng-messages="preferencesForm.newPasswordConfirmation.$error">
+                  <div ng-message="newPasswordMismatch"><var:string label:value="Passwords don't match"/></div>
+                </div>
               </md-input-container>
             </div>
             <div layout="row" layout-align="end center">
-              <md-button ng-click="app.changePassword()" type="button" ng-disabled="!app.canChangePassword()">
+              <md-button ng-click="app.changePassword()" type="button" ng-disabled="!app.canChangePassword(preferencesForm)">
                 <var:string label:value="Change"/>
               </md-button>
             </div>
diff --git a/UI/WebServerResources/js/Preferences/PreferencesController.js b/UI/WebServerResources/js/Preferences/PreferencesController.js
index 45444ce9e..c322c4f5d 100644
--- a/UI/WebServerResources/js/Preferences/PreferencesController.js
+++ b/UI/WebServerResources/js/Preferences/PreferencesController.js
@@ -462,7 +462,13 @@
       return $q.reject('Invalid form');
     };
 
-    this.canChangePassword = function() {
+    this.canChangePassword = function(form) {
+      if (this.passwords.newPasswordConfirmation && this.passwords.newPasswordConfirmation.length &&
+          this.passwords.newPassword != this.passwords.newPasswordConfirmation) {
+        form.newPasswordConfirmation.$setValidity('newPasswordMismatch', false);
+      } else {
+        form.newPasswordConfirmation.$setValidity('newPasswordMismatch', true);
+      }
       if (this.passwords.newPassword && this.passwords.newPassword.length > 0 &&
           this.passwords.newPasswordConfirmation && this.passwords.newPasswordConfirmation.length &&
           this.passwords.newPassword == this.passwords.newPasswordConfirmation &&