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
This commit is contained in:
M Fahru
2025-04-03 06:20:38 -07:00
committed by Copybot
parent e704c66ec0
commit cd8609e89c
5 changed files with 15 additions and 11 deletions

View File

@@ -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)})

View File

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

View File

@@ -33,7 +33,7 @@ block content
| .
div(data-ol-not-sent)
+formMessages()
+formMessagesNewStyle()
input(type="hidden" name="_csrf" value=csrfToken)
.form-group.mb-3

View File

@@ -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')}.

View File

@@ -23,6 +23,10 @@
}
}
.auth-aux-new-password ~ .notification {
margin-top: var(--spacing-04);
}
.login-overleaf-logo-container {
display: block;
padding: var(--spacing-06);