{% extends "website/w_base.html" %}

{% block content %}
<div id="change_pwd_form_template" style="text-align:center;">
        <form method="POST" id="change_pwd_form">
            <p><input type="password" name="password" placeholder="{{password_placeholder}}" /></p>
            {% csrf_token %}
            <input type="hidden" name="fp" value="" />
            <p><button type="submit">Envoyer</button></p>
        </form>
      
        <script>
            try {
                const new_passwd_input = document.querySelector('input[name="password"]'),
                      form = document.querySelector('#change_pwd_form'),
                      external_msg = '{{external_msg}}';

                window.addEventListener("DOMContentLoaded", (event) => {
                    var fp = document.getElementsByName('fp')
                    if (fp.length == 1)
                        fp[0].value = new Fingerprint({canvas: true}).get()
                })

                form.addEventListener("submit", e => {
                    e.preventDefault();
                    if (new_passwd_input.value.length >= 10) {
                        form.submit()
                    } else {
                        alert('Le mot de passe doit faire au moins 10 caractères.')
                    }
                });
                if (external_msg == "reset_password_failure") {
                    alert("Erreur lors de l'enregistrement.")
                }
            } catch (e) {
                var msg = 'Ce navigateur ne permet pas de vous identifier. Merci de signaler l\'erreur suivante:\n'
                msg += JSON.stringify(e)
                alert(msg)
            }
        </script>
</div>
{% endblock %}