document.addEventListener( 'DOMContentLoaded', function(){
    const FORM = document.getElementById( 'login-form' );
    const FORM_ERROR = document.getElementById( 'login-errors' );
    if( !FORM )
        return;

    /**
     * Permet d'afficher une erreur dans le formulaire.
     * @param message
     */
    FORM.showError = function( message ){
        FORM_ERROR.style.display = 'block';
        FORM_ERROR.innerText = message;
    }

    /**
     * Permet de retirer l'erreur du formulaire.
     */
    FORM.removeError = function(){
        FORM_ERROR.style.display = 'none';
        FORM_ERROR.innerText = '';
    }

    /**
     * Gère l'envoi du formulaire.
     * @param e
     * @returns {boolean}
     */
    FORM.onsubmit = function( e ){

        e.preventDefault();
        FORM.removeError();

        let userField = e.target.username;
        let passwordField = e.target.password;

        if( !userField || !passwordField || userField.value === "" || passwordField.value === "" ){
            FORM.showError( "Le nom d'utilisateur ou le mot de passe ne doivent pas être vide.");
            return false;
        }

        let formData = new FormData( FORM );
        let options = {
            method: "POST",
            contentType: "application/json",
            body: formData,
        }

        fetch( FORM.action, options ).then( ( response ) => {
            if( response.ok ){
                response.json().then( ( responseJSON ) => {

                    if( responseJSON.success === true ){
                        window.location.href = window.location.origin; // Redirection sur la page d'accueil si succès.
                    } else {
                        FORM.showError( responseJSON.message || "Mauvais nom d'utilisateur ou mauvais mot de passe." );
                    }

                })
            }
        })

    }


})