From cd8609e89c16ee68e4fa110f8a190548296bfc59 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 3 Apr 2025 06:20:38 -0700
Subject: [PATCH] Merge pull request #24625 from
 overleaf/mf-fix-error-auth-pages-bs5

[web] Fix form message errors aren't shown properly in bs5 auth pages

GitOrigin-RevId: 9a94fe53647d224faf63bdd047bfa26463d385f1
---
 .../web/app/views/user/passwordReset-bs5.pug     |  2 +-
 .../web/app/views/user/primaryEmailCheck-bs5.pug |  2 +-
 services/web/app/views/user/reconfirm-bs5.pug    |  2 +-
 services/web/app/views/user/setPassword-bs5.pug  | 16 ++++++++--------
 .../stylesheets/bootstrap-5/pages/auth.scss      |  4 ++++
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/services/web/app/views/user/passwordReset-bs5.pug b/services/web/app/views/user/passwordReset-bs5.pug
index d92ec5ece6..7637a91062 100644
--- a/services/web/app/views/user/passwordReset-bs5.pug
+++ b/services/web/app/views/user/passwordReset-bs5.pug
@@ -40,7 +40,7 @@ block content
 					p.mb-3.pb-3(data-ol-not-sent) #{translate("enter_your_email_address_below_and_we_will_send_you_a_link_to_reset_your_password")}.
 
 				div(data-ol-not-sent)
-					+formMessages()
+					+formMessagesNewStyle()
 					if error && error !== 'password_reset_token_expired'
 						+notification({ariaLive: 'assertive', type: 'error', className: 'mb-3', content: translate(error)})
 
diff --git a/services/web/app/views/user/primaryEmailCheck-bs5.pug b/services/web/app/views/user/primaryEmailCheck-bs5.pug
index b04511a48f..0828c06e4b 100644
--- a/services/web/app/views/user/primaryEmailCheck-bs5.pug
+++ b/services/web/app/views/user/primaryEmailCheck-bs5.pug
@@ -14,7 +14,7 @@ block content
 					method="POST"
 				)
 					input(name='_csrf', type='hidden', value=csrfToken)
-					+formMessages()
+					+formMessagesNewStyle()
 
 					button.btn.btn-primary.w-100.mb-3(
 						type='submit'
diff --git a/services/web/app/views/user/reconfirm-bs5.pug b/services/web/app/views/user/reconfirm-bs5.pug
index 959abf26c6..8d9d13955f 100644
--- a/services/web/app/views/user/reconfirm-bs5.pug
+++ b/services/web/app/views/user/reconfirm-bs5.pug
@@ -33,7 +33,7 @@ block content
                     | .
                 
                 div(data-ol-not-sent)
-                    +formMessages()
+                    +formMessagesNewStyle()
 
                     input(type="hidden" name="_csrf" value=csrfToken)
                     .form-group.mb-3
diff --git a/services/web/app/views/user/setPassword-bs5.pug b/services/web/app/views/user/setPassword-bs5.pug
index be0c902a26..007ae5e87c 100644
--- a/services/web/app/views/user/setPassword-bs5.pug
+++ b/services/web/app/views/user/setPassword-bs5.pug
@@ -27,17 +27,17 @@ block content
                 div(data-ol-not-sent)
                     h1.h3.mb-3.mt-0 #{translate("reset_your_password")}
                     p(data-ol-hide-on-error-message="token-expired") #{translate("create_a_new_password_for_your_account")}.
-                    +formMessages()
+                    +formMessagesNewStyle()
 
-                    +customFormMessage('password-contains-email', 'danger')
+                    +customFormMessageNewStyle('password-contains-email', 'danger')
                         | #{translate('invalid_password_contains_email')}.
                         | #{translate('use_a_different_password')}.
 
-                    +customFormMessage('password-too-similar', 'danger')
+                    +customFormMessageNewStyle('password-too-similar', 'danger')
                         | #{translate('invalid_password_too_similar')}.
                         | #{translate('use_a_different_password')}.
 
-                    +customFormMessage('token-expired', 'danger')
+                    +customFormMessageNewStyle('token-expired', 'danger')
                         | #{translate('password_reset_token_expired')}
                         br
                         a(href="/user/password/reset")
@@ -48,7 +48,7 @@ block content
 
                     .form-group.mb-3
                         label.form-label(for='passwordField', data-ol-hide-on-error-message="token-expired") #{translate("new_password")}
-                        input.form-control#passwordField(
+                        input.form-control.auth-aux-new-password#passwordField(
                             type='password'
                             name='password'
                             autocomplete="new-password"
@@ -57,13 +57,13 @@ block content
                             minlength=settings.passwordStrengthOptions.length.min
                         )
 
-                        +customValidationMessage('invalid-password')
+                        +customValidationMessageNewStyle('invalid-password')
                             | #{translate('invalid_password')}.
 
-                        +customValidationMessage('password-must-be-different')
+                        +customValidationMessageNewStyle('password-must-be-different')
                             | #{translate('password_cant_be_the_same_as_current_one')}.
 
-                        +customValidationMessage('password-must-be-strong')
+                        +customValidationMessageNewStyle('password-must-be-strong')
                             | !{translate('password_was_detected_on_a_public_list_of_known_compromised_passwords', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com/passwords', rel: 'noopener noreferrer', target: '_blank'}}])}.
                             | #{translate('use_a_different_password')}.
 
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/auth.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/auth.scss
index d408ba28a9..cd23cadcee 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/auth.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/auth.scss
@@ -23,6 +23,10 @@
   }
 }
 
+.auth-aux-new-password ~ .notification {
+  margin-top: var(--spacing-04);
+}
+
 .login-overleaf-logo-container {
   display: block;
   padding: var(--spacing-06);