From 55728762343f8afb2f99e4413db9078a80296508 Mon Sep 17 00:00:00 2001
From: Joris Tirado <joris@tirado.com>
Date: Tue, 11 Jul 2017 13:38:05 -0700
Subject: [PATCH] UI-2757: Improve password change experience for users (#29)

* UI-2757: Add context to change users passwords

* UI-2757: Add a confirmation field to check new password

* UI-2757: Set validation in code instead of markup

* UI-2757: Disable button once clicked to avoid click bomb
---
 i18n/en-US.json                 |  3 ++-
 submodules/users/users.js       | 16 ++++++++++++++--
 views/users-changePassword.html | 10 ++++++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/i18n/en-US.json b/i18n/en-US.json
index 6cd00f1..90460fe 100644
--- a/i18n/en-US.json
+++ b/i18n/en-US.json
@@ -434,6 +434,7 @@
 		"dialogChangePassword": {
 			"help": "You can set a new password by just typing any password you want, along with the Email address!",
 			"password": "Password",
+			"confirmPassword": "Re-type Password",
 			"passwordPlaceholder": "Password (Min. 6 characters)",
 			"title": "Update Email and password",
 			"username": "User's Email address",
@@ -468,7 +469,7 @@
 		},
 		"editionForm": {
 			"changePIN": "Change PIN",
-			"changeUsername": "Change",
+			"changeUsername": "Change Credentials",
 			"firstName": "First Name",
 			"lastName": "Last Name",
 			"role": "Role",
diff --git a/submodules/users/users.js b/submodules/users/users.js
index 8075dad..d9df071 100644
--- a/submodules/users/users.js
+++ b/submodules/users/users.js
@@ -937,8 +937,16 @@ define(function(require) {
 
 				monster.ui.validate(form, {
 					rules: {
-						'password': {
+						username: {
+							required: true
+						},
+						password: {
+							required: true,
 							minlength: 6
+						},
+						confirm_password: {
+							required: true,
+							equalTo: '#inputPassword'
 						}
 					}
 				});
@@ -957,10 +965,14 @@ define(function(require) {
 				});
 
 				passwordTemplate.find('.save-new-username').on('click', function() {
-					var formData = monster.ui.getFormData('form_new_username'),
+					var $saveButton = $(this),
+						formData = monster.ui.getFormData('form_new_username'),
 						userToSave = $.extend(true, {}, currentUser, formData);
 
 					if (monster.ui.valid(form)) {
+						$saveButton
+							.prop('disabled', true);
+
 						if (!currentUser.extra.differentEmail) {
 							userToSave.email = userToSave.username;
 						}
diff --git a/views/users-changePassword.html b/views/users-changePassword.html
index 1adb545..4dbc825 100644
--- a/views/users-changePassword.html
+++ b/views/users-changePassword.html
@@ -4,13 +4,19 @@
 			<div class="control-group">
 				<label class="control-label" for="inputEmail">{{ i18n.users.dialogChangePassword.username }}</label>
 				<div class="controls">
-					<input required name="username" type="email" id="inputEmail" placeholder="Email" value="{{username}}">
+					<input name="username" type="email" id="inputEmail" placeholder="Email" value="{{username}}">
 				</div>
 			</div>
 			<div class="control-group">
 				<label class="control-label" for="inputPassword">{{ i18n.users.dialogChangePassword.password }}</label>
 				<div class="controls">
-					<input required name="password" type="password" id="inputPassword" placeholder="{{ i18n.users.dialogChangePassword.passwordPlaceholder }}">
+					<input name="password" type="password" id="inputPassword" placeholder="{{ i18n.users.dialogChangePassword.passwordPlaceholder }}">
+				</div>
+			</div>
+			<div class="control-group">
+				<label class="control-label" for="confirm_password">{{ i18n.users.dialogChangePassword.confirmPassword }}</label>
+				<div class="controls">
+					<input name="confirm_password" type="password" id="confirm_password">
 				</div>
 			</div>
 		</form>