extends ../layout-website-redesign-bootstrap-5

block vars
    - var suppressNavbar = true
    - var suppressFooter = true

block content
    main#main-content
        a.auth-aux-logo(href="/")
            img(src=buildImgPath("ol-brand/overleaf-o-dark.svg") alt=settings.appName)
        .auth-aux-container
            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
                )
                    h1.h3.mb-3.mt-0 #{translate("password_updated")}
                    p.mb-4 #{translate("your_password_has_been_successfully_changed")}.
                    a.btn.btn-primary.w-100(href='/login') #{translate("log_in_now")}

                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()

                    +customFormMessage('password-contains-email', 'danger')
                        | #{translate('invalid_password_contains_email')}.
                        | #{translate('use_a_different_password')}.

                    +customFormMessage('password-too-similar', 'danger')
                        | #{translate('invalid_password_too_similar')}.
                        | #{translate('use_a_different_password')}.

                    +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="text" hidden name="email" autocomplete="username" value=email)

                    .form-group.mb-3
                        label.form-label(for='passwordField', data-ol-hide-on-error-message="token-expired") #{translate("new_password")}
                        input.form-control#passwordField(
                            type='password'
                            name='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/passwords', 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-3.ps-4
                            li #{translate('is_longer_than_n_characters', {n: settings.passwordStrengthOptions.length.min})}
                            li #{translate('does_not_contain_or_significantly_match_your_email')}
                            li #{translate('is_not_used_on_any_other_website')}
                    .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')}…
