{% extends "base_login_page.html" %}
{% block content %}
<form action="/reset_password?redirect={{ p.redirect_uri.get_encoded() }}" method="post" id="reset_password_form">
    <div>
        <p>You need to configure a new password:</p>

        <p style="color:red" id="err_target"></p>

        <div class="form-floating">
            <input name="password" type="password" required class="form-control" id="pass1"
                   placeholder="Password" autofocus/>
            <label for="pass1">New password</label>
        </div>

        <div class="form-floating">
            <input type="password" required class="form-control" id="pass2"
                   placeholder="Password confirmation"/>
            <label for="pass2">Confirm new password</label>
        </div>
    </div>

    <button class="w-100 btn btn-lg btn-primary" type="submit">Change password</button>

    <div style="margin-top: 10px;">
        <a href="/logout">Sign out</a>
    </div>

</form>

<script>
    const form = document.getElementById("reset_password_form");
    const error_target = document.getElementById("err_target");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        error_target.innerHTML = "";
        const pass1 = document.getElementById("pass1");
        const pass2 = document.getElementById("pass2");

        if (pass1.value.length < {{ min_pass_len }})
            error_target.innerHTML = "Your password must have at least {{ min_pass_len }} characters!";
        else if (pass1.value !== pass2.value)
            error_target.innerHTML = "The password and its confirmation are not the same !";
        else
            form.submit();
    })
</script>


{% endblock content %}