{% extends "base_settings_page.html" %}
{% block content %}
<form id="change_password_form" action="/settings/change_password" method="post">
    <div class="form-group">
        <label for="currPassword" class="form-label mt-4">Current password</label>
        <input type="password" name="old_pass" class="form-control"
               id="currPassword" placeholder="Your current password" required />
    </div>

    <div>&nbsp;</div>

    <div class="form-group">
        <label for="newPassword" class="form-label mt-4">New password</label>
        <input type="password" name="new_pass" class="form-control" id="newPassword"
               placeholder="New password" minlength="{{ min_pwd_len }}" />
        <div class="invalid-feedback" id="errNewPass"></div>
        <small class="form-text text-muted">Please choose a password of at least {{ min_pwd_len }} characters.</small>
    </div>

    <div class="form-group">
        <label for="confirmNewPassword" class="form-label mt-4">Confirm new password</label>
        <input type="password" class="form-control" id="confirmNewPassword" placeholder="Confirm new password">
    </div>

    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>

    <button type="submit" class="btn btn-primary">Change password</button>
</form>

<script>
    const form = document.getElementById("change_password_form");
    const errPass1 = document.getElementById("errNewPass");
    form.addEventListener("submit", (e) => {
        e.preventDefault();

        const pass1 = document.getElementById("newPassword");
        const pass2 = document.getElementById("confirmNewPassword");

        errPass1.innerHTML = "";
        pass1.classList.remove("is-invalid");

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

{% endblock content %}