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

@@ -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",

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;
 						}

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>