setPassword.pug 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. extends ../layout-marketing
  2. block vars
  3. - bootstrap5PageStatus = 'disabled'
  4. block content
  5. main.content.content-alt#main-content
  6. .container-custom-sm.mx-auto
  7. .card
  8. form(
  9. data-ol-async-form,
  10. name="passwordResetForm",
  11. action="/user/password/set",
  12. method="POST",
  13. data-ol-hide-on-error="token-expired"
  14. )
  15. div(
  16. hidden
  17. data-ol-sent
  18. )
  19. h3.mt-0.mb-2 #{translate("password_updated")}
  20. p.mb-4 #{translate("your_password_has_been_successfully_changed")}.
  21. a(href='/login') #{translate("log_in_now")}
  22. div(data-ol-not-sent)
  23. h3.mt-0.mb-2 #{translate("reset_your_password")}
  24. p(data-ol-hide-on-error-message="token-expired") #{translate("create_a_new_password_for_your_account")}.
  25. +formMessages()
  26. +customFormMessage('password-contains-email', 'danger')
  27. | #{translate('invalid_password_contains_email')}.
  28. | #{translate('use_a_different_password')}.
  29. +customFormMessage('password-too-similar', 'danger')
  30. | #{translate('invalid_password_too_similar')}.
  31. | #{translate('use_a_different_password')}.
  32. +customFormMessage('token-expired', 'danger')
  33. | #{translate('password_reset_token_expired')}
  34. br
  35. a(href="/user/password/reset")
  36. | #{translate('request_new_password_reset_email')}
  37. input(type="hidden", name="_csrf", value=csrfToken)
  38. input(type="text" hidden name="email" autocomplete="username" value=email)
  39. .form-group
  40. label(for='passwordField', data-ol-hide-on-error-message="token-expired") #{translate("new_password")}
  41. input.form-control#passwordField(
  42. type='password',
  43. name='password',
  44. placeholder=translate("enter_your_new_password"),
  45. autocomplete="new-password",
  46. autofocus,
  47. required,
  48. minlength=settings.passwordStrengthOptions.length.min
  49. )
  50. +customValidationMessage('invalid-password')
  51. | #{translate('invalid_password')}.
  52. +customValidationMessage('password-must-be-different')
  53. | #{translate('password_cant_be_the_same_as_current_one')}.
  54. +customValidationMessage('password-must-be-strong')
  55. | !{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'}}])}.
  56. | #{translate('use_a_different_password')}.
  57. input(
  58. type="hidden",
  59. name="passwordResetToken",
  60. value=passwordResetToken
  61. )
  62. div(data-ol-hide-on-error-message="token-expired")
  63. div #{translate('in_order_to_have_a_secure_account_make_sure_your_password')}
  64. ul.mb-4.ps-4
  65. li #{translate('is_longer_than_n_characters', {n: settings.passwordStrengthOptions.length.min})}
  66. li #{translate('does_not_contain_or_significantly_match_your_email')}
  67. li #{translate('is_not_used_on_any_other_website')}
  68. .actions
  69. button.btn.btn-primary.w-100(
  70. type='submit',
  71. data-ol-disabled-inflight
  72. aria-label=translate('set_new_password')
  73. )
  74. span(data-ol-inflight="idle")
  75. | #{translate('set_new_password')}
  76. span(hidden data-ol-inflight="pending")
  77. | #{translate('set_new_password')}…