From d4a8f38736d2a7051effd4cf0e2eabc30d207e75 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Thu, 11 Jul 2019 10:22:45 -0500
Subject: [PATCH] Merge pull request #1942 from
 overleaf/jel-user-settings-form-msg

Move user settings form message next to submit button and add ID attributes

GitOrigin-RevId: 3d87242e5a7211f9fa58b07f38a278fb94019046
---
 services/web/app/views/user/settings.pug | 28 ++++++++++++++----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/services/web/app/views/user/settings.pug b/services/web/app/views/user/settings.pug
index f25f588215..1f5f462f07 100644
--- a/services/web/app/views/user/settings.pug
+++ b/services/web/app/views/user/settings.pug
@@ -16,11 +16,6 @@ block content
 							if hasFeature('affiliations')
 								include settings/user-affiliations
 
-							form-messages(for="settingsForm")
-								.alert.alert-success(ng-show="settingsForm.response.success")
-									|  #{translate("thanks_settings_updated")}
-							form-messages(for="changePasswordForm")
-
 							.row
 								.col-md-5
 									h3 #{translate("update_account_info")}
@@ -31,6 +26,7 @@ block content
 												.form-group
 													label(for='email')  #{translate("email")}
 													input.form-control(
+														id="email"
 														type='email',
 														name='email',
 														placeholder="email@example.com"
@@ -39,7 +35,7 @@ block content
 														ng-init="email = "+JSON.stringify(user.email),
 														ng-model-options="{ pdateOn: 'blur' }"
 													)
-													span.small.text-primary(ng-show="settingsForm.email.$invalid && settingsForm.email.$dirty")
+													span.small.text-danger(ng-show="settingsForm.email.$invalid && settingsForm.email.$dirty")
 														|  #{translate("must_be_email_address")}
 											else
 												// show the email, non-editable
@@ -54,6 +50,7 @@ block content
 											.form-group
 												label(for='firstName').control-label #{translate("first_name")}
 												input.form-control(
+													id="firstName"
 													type='text',
 													name='first_name',
 													value=user.first_name
@@ -62,11 +59,16 @@ block content
 											.form-group
 												label(for='lastName').control-label #{translate("last_name")}
 												input.form-control(
+													id="lastName"
 													type='text',
 													name='last_name',
 													value=user.last_name
 													ng-non-bindable
 												)
+											.form-group
+												form-messages(aria-live="polite" for="settingsForm")
+													.alert.alert-success(ng-show="settingsForm.response.success")
+														|  #{translate("thanks_settings_updated")}
 											.actions
 												button.btn.btn-primary(
 													type='submit',
@@ -111,18 +113,19 @@ block content
 											.form-group
 												label(for='currentPassword') #{translate("current_password")}
 												input.form-control(
+													id="currentPassword"
 													type='password',
 													name='currentPassword',
 													placeholder='*********',
 													ng-model="currentPassword",
 													required
 												)
-												span.small.text-primary(ng-show="changePasswordForm.currentPassword.$invalid && changePasswordForm.currentPassword.$dirty")
+												span.small.text-danger(ng-show="changePasswordForm.currentPassword.$invalid && changePasswordForm.currentPassword.$dirty" aria-live="polite")
 													| #{translate("required")}
 											.form-group
 												label(for='newPassword1') #{translate("new_password")}
 												input.form-control(
-													id='passwordField',
+													id='newPassword1',
 													type='password',
 													name='newPassword1',
 													placeholder='*********',
@@ -130,20 +133,23 @@ block content
 													required,
 													complex-password
 												)
-												span.small.text-primary(ng-show="changePasswordForm.newPassword1.$error.complexPassword && changePasswordForm.newPassword1.$dirty", ng-bind-html="complexPasswordErrorMessage") 
+												span.small.text-danger(ng-show="changePasswordForm.newPassword1.$error.complexPassword && changePasswordForm.newPassword1.$dirty", ng-bind-html="complexPasswordErrorMessage" aria-live="polite") 
 											.form-group
 												label(for='newPassword2') #{translate("confirm_new_password")}
 												input.form-control(
+													id="newPassword2"
 													type='password',
 													name='newPassword2',
 													placeholder='*********',
 													ng-model="newPassword2",
 													equals="passwordField"
 												) 
-												span.small.text-primary(ng-show="changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$dirty")
+												span.small.text-danger(ng-show="changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$dirty" aria-live="polite")
 													| #{translate("doesnt_match")} 
-												span.small.text-primary(ng-show="!changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$invalid && changePasswordForm.newPassword2.$dirty")
+												span.small.text-danger(ng-show="!changePasswordForm.newPassword2.$error.areEqual && changePasswordForm.newPassword2.$invalid && changePasswordForm.newPassword2.$dirty" aria-live="polite")
 													| #{translate("invalid_password")} 
+											.form-group
+												form-messages(aria-live="polite" for="changePasswordForm")
 											.actions
 												button.btn.btn-primary(
 													type='submit',