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

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