setPassword-bs5.pug 3.3 KB

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