{% extends "base" %}
{% block content %}
<form class="col-md card movie-card neon-border p-5 m-1" onsubmit="return false">
    <div class="row p-2 pt-0">
        <label class="px-0" for="email-address">Email</label>
        <input id="email-address" type="email">
    </div>
    <div class="row p-2">
        <label class="px-0" for="current-password">Current Password</label>
        <input id="current-password" type="password">
    </div>
    <div class="row p-2 pb-5">
        <label class="px-0" for="new-password">New Password</label>
        <input id="new-password" type="password">
    </div>
    <button class="btn" onclick="resetPassword()" type="button">Reset Password</button>
</form>

<script>
    let resetPassword = function () {
        fetch("/api/auth", {
            method: "PUT",
            body: JSON.stringify({
                email: document.getElementById("email-address").value,
                current_password: document.getElementById("current-password").value,
                new_password: document.getElementById("new-password").value,
            }),
            headers: {"Content-type": "application/json"}
        })
            .then(response => response.json())
            .then(_json => {
                window.location = "/";
            })
            .catch(err => console.log(err))

    }
</script>

{% endblock content %}
