<div>
    <span id="ask_new_password">Changer de mot de passe</span> <span id="passwd_helper"><i class="fa fa-info-circle fa-lg change_passwd_info"> </i></span>
    <div style="display:none;" id="help_content">
        Pour changer de mot de passe, remplissez le champ "Email", <br/>
        et cliquez sur "Changer de mot de passe"
    </div>
</div>
<script>
    //Minimum JS has been loaded, so write in pure JS (no extra lib dependent)
    let last_call;
    const ask_pwd_span = document.querySelector("#ask_new_password");
    let getCookie = function(name) {
        var cookieValue = null;

        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');

            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?

                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }

        return cookieValue;
    }

    let is_time_to_call = function() {
        let answer = false;
        var last_date = last_call || 0;
        console.log(last_date)
        var d = new Date();
        var now = d.getTime();

        if (last_date == 0 || (now - last_date) >= 5000) {
            answer = true;
            last_call = now;
        }

        return answer;
    }

    let display_change_password_help = function() {
        let help_content = document.querySelector("#help_content");
        help_content.style.display = 'block';
        setTimeout(function() {
            help_content.style.display = 'none'}, 5000);
    }
    let ask_for_new_password = function() {
        if (is_time_to_call() === true) {
            try {
                const email = document.querySelector('input[name="login"]').value;
                if (email.trim().length > 0) {
                    ask_pwd_span.textContent = "Traitement en cours...."
                    let load = {'email' : email, 
                                'csrfmiddlewaretoken': document.querySelector('input[name="csrfmiddlewaretoken"]').value}
                    let xhr = new XMLHttpRequest();
                    xhr.open('POST', '/members/ask_for_new_password', true);
                    xhr.setRequestHeader("Content-Type", "application/json");
                    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                    xhr.onreadystatechange = function() {
                        //readyState => (0,UNSENT), (1,OPENED), (2, HEADER_RECEIVED), (3, LOADING), (4, DONE)
                        if (this.readyState == 4) {
                            const response = JSON.parse(xhr.response);
                            if (this.status == 200 && response.succeeded === true) {
                                alert("Un email vient de vous être envoyé à l'adresse indiquée pour réinitialiser le mot de passe.");
                            } else {
                                alert("Une erreur est survenue pendant le traitement de la demande : " + response.error);
                            }
                            ask_pwd_span.textContent = "Changer de mot de passe";
                        }
                        
                    };
                    xhr.send(JSON.stringify(load));
                } else {
                    alert("Veuillez remplir le champ 'Email' avant de cliquer ici.");
                }
            } catch(e) {
                alert("Une erreur est survenue.")
            }
        }
        
    }
    document.querySelector("#passwd_helper").addEventListener('click', display_change_password_help);
    ask_pwd_span.addEventListener('click', ask_for_new_password);

</script>
   