setPassword-bs5.pug 4.5 KB

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