overleaf/services/web/app/views/user/setPassword.pug
ilkin-overleaf 2675cab92e Merge pull request #10394 from overleaf/ii-password-reset-and-strength-checking
[web] Password reset strength checking and UI updates

GitOrigin-RevId: 442a5c9e7e9d0a61d3ae649f3526bc3c02fd5704
2022-12-07 09:03:36 +00:00

78 lines
2.9 KiB
Text

extends ../layout-marketing
block content
main.content.content-alt#main-content
.container-custom-sm.mx-auto
.card
form(
data-ol-async-form,
name="passwordResetForm",
action="/user/password/set",
method="POST",
data-ol-hide-on-error="token-expired"
)
div(
hidden
data-ol-sent
)
h3.mt-0.mb-2 #{translate("password_updated")}
p.mb-4 #{translate("your_password_has_been_successfully_changed")}.
a(href='/login') #{translate("log_in_now")}
div(data-ol-not-sent)
h3.mt-0.mb-2 #{translate("reset_your_password")}
p(data-ol-hide-on-error-message="token-expired") #{translate("create_a_new_password_for_your_account")}.
+formMessages()
+customFormMessage('token-expired', 'danger')
| #{translate('password_reset_token_expired')}
br
a(href="/user/password/reset")
| #{translate('request_new_password_reset_email')}
input(type="hidden", name="_csrf", value=csrfToken)
input(type="hidden", name="email", value=email)
.form-group
label(for='passwordField', data-ol-hide-on-error-message="token-expired") #{translate("new_password")}
input.form-control#passwordField(
type='password',
name='password',
placeholder=translate("enter_your_new_password"),
autocomplete="new-password",
autofocus,
required,
minlength=settings.passwordStrengthOptions.length.min
)
+customValidationMessage('invalid-password')
| #{translate('invalid_password')}
+customValidationMessage('password-must-be-different')
| #{translate('password_cant_be_the_same_as_current_one')}.
+customValidationMessage('password-must-be-strong')
| !{translate('password_was_detected_on_a_public_list_of_known_compromised_passwords', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com', rel: 'noopener noreferrer', target: '_blank'}}])}.
| #{translate('use_a_different_password')}.
input(
type="hidden",
name="passwordResetToken",
value=passwordResetToken
)
div(data-ol-hide-on-error-message="token-expired")
div #{translate('in_order_to_have_a_secure_account_make_sure_your_password')}
ul.mb-4.ps-4
li #{translate('is_longer_than_n_characters', {n: 6})}
li #{translate('does_not_contain_or_significantly_match_your_email')}
li !{translate('is_not_a_common_or_obvious_password_as_defined_by_the_have_i_been_pwned_database', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com', rel: 'noopener noreferrer', target: '_blank'}}])}
.actions
button.btn.btn-primary.w-100(
type='submit',
data-ol-disabled-inflight
aria-label=translate('set_new_password')
)
span(data-ol-inflight="idle")
| #{translate('set_new_password')}
span(hidden data-ol-inflight="pending")
| #{translate('set_new_password')}…