WF-Website/public/script/changeData.js

function editFieldUsername(id) {
    var pElement = document.getElementById(id);// Récupérer l'élément <p> via son identifiant
    var currentValue = pElement.textContent.trim();// Obtenir le texte actuel du <p>

    // Créer un champ de saisie <input> avec la valeur actuelle
    var input = document.createElement('input');
    input.type = 'text';
    input.value = currentValue
    input.class = 'changeValue';
    
    input.setAttribute('onblur', 'saveFieldUsername("' + id + '", this.value)'); // Sauvegarde lors de la perte de focus
    
    // Remplacer le <p> par le champ <input>
    pElement.innerHTML = '';
    pElement.appendChild(input);
    
    input.focus(); // Mettre le focus sur le champ de saisie
}

//Sauvegarder les changements sur la vue pour le username
function saveFieldUsername(id, newValue) {
    if (id === 'username') {
        if (newValue.trim() === "") {
            alert('Le nom d\'utilisateur ne peut pas être vide.');
            document.getElementById(id).querySelector('input').focus();
            return; // Ne pas sauvegarder si le nom d'utilisateur est vide
        }
    }
        
    var pElement = document.getElementById(id);// Récupérer l'élément <p> via son identifiant
    
    // Mettre à jour la valeur avec la nouvelle saisie
    pElement.innerHTML = '<strong>' + newValue + ' <img class="imgModify" src="../../images/modify.svg" onclick="editFieldUsername(\'' + id + '\')"/></strong>';
}




function editFieldEmail(id) {
    var pElement = document.getElementById(id);// Récupérer l'élément <p> via son identifiant
    var currentValue = pElement.textContent.trim();// Obtenir le texte actuel du <p>

    // Créer un champ de saisie <input> avec la valeur actuelle
    var input = document.createElement('input');
    input.type = 'email';
    input.value = currentValue
    input.class = 'changeValue';
    
    input.setAttribute('onblur', 'saveFieldEmail("' + id + '", this.value)');    // Sauvegarde lors de la perte de focus
    
    // Remplacer le <p> par le champ <input>
    pElement.innerHTML = '';
    pElement.appendChild(input);
    
    input.focus(); // Mettre le focus sur le champ de saisie
}

//Sauvegarder les changements sur la vue pour l'email
function saveFieldEmail(id, newValue) {
    if (id === 'email') {
        if (!validateEmail(newValue)) {
            alert('Adresse email invalide. Veuillez entrer un email valide.');
            document.getElementById(id).querySelector('input').focus();
            return; // Ne pas sauvegarder si l'email n'est pas valide
        }
    }
    if (id === 'username') {
        if (newValue.trim() === "") {
            alert('Le nom d\'utilisateur ne peut pas être vide.');
            document.getElementById(id).querySelector('input').focus();
            return; // Ne pas sauvegarder si le nom d'utilisateur est vide
        }
    }

    var pElement = document.getElementById(id); // Récupérer l'élément <p> via son identifiant
    
    // Mettre à jour la valeur avec la nouvelle saisie
    pElement.innerHTML = '<strong>' + newValue + ' <img class="imgModify" src="../../images/modify.svg" onclick="editFieldEmail(\'' + id + '\')"/></strong>';
}




//Email valide
function validateEmail(email) {
    var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;// Regex pour vérifier le format de l'email
    return re.test(String(email).toLowerCase());
}







function editFieldPassWd(id) {
    var pElement = document.getElementById(id);// Récupérer l'élément <p> via son identifiant
        
    pElement.innerHTML = '';// Effacer le contenu actuel de <p> pour insérer les inputs

    // Créer le champ de saisie pour le nouveau mot de passe
    var inputNewPass = document.createElement('input');
    inputNewPass.type = 'password';
    inputNewPass.placeholder = 'Nouveau mot de passe'; // Un placeholder pour indiquer la fonction du champ
    inputNewPass.classList.add('changeValue'); // Ajouter une classe CSS pour styliser l'input
    inputNewPass.setAttribute('id', 'newPassword'); // Ajouter un ID pour la gestion
    inputNewPass.classList.add('inputPasswd'); // Ajouter une classe au input


    // Créer le champ de saisie pour la confirmation du mot de passe
    var inputConfirmPass = document.createElement('input');
    inputConfirmPass.type = 'password';
    inputConfirmPass.placeholder = 'Confirmer le mot de passe'; // Un placeholder pour indiquer la fonction du champ
    inputConfirmPass.classList.add('changeValue'); // Ajouter une classe CSS pour styliser l'input
    inputConfirmPass.setAttribute('id', 'confirmPassword'); // Ajouter un ID pour la gestion
    inputConfirmPass.classList.add('inputPasswd'); // Ajouter une classe au input

    // Ajouter un bouton de sauvegarde
    var saveButton = document.createElement('button');
    saveButton.textContent = 'Sauvegarder le mot de passe';
    saveButton.classList.add('saveButtonPasswd'); // Ajouter une classe au bouton

    saveButton.onclick = function() {
        savePasswordFields(id, inputNewPass.value, inputConfirmPass.value);
        
    };

    // Ajouter les deux champs de saisie et le bouton dans l'élément <p>
    pElement.appendChild(inputNewPass);
    pElement.appendChild(document.createElement('br')); // Saut de ligne pour espacer les champs
    pElement.appendChild(inputConfirmPass);
    pElement.appendChild(document.createElement('br')); // Saut de ligne pour espacer
    pElement.appendChild(saveButton);

    inputNewPass.focus();// Mettre le focus sur le premier champ de saisie
}



function savePasswordFields(id, newPassword, confirmPassword) {
    // Vérification si les champs sont vides
    if (newPassword.trim() === "" || confirmPassword.trim() === ""){
        alert("Les champs de mot de passe ne doivent pas être vides.");
        return;
    }

    // Vérification de la correspondance des deux mots de passe
    if (newPassword === confirmPassword) {
        
        var pElement = document.getElementById(id);// Récupérer l'élément <p> via son identifiant

        if(newPassword.length >= 16){
            var maskedPassword  = '*'.repeat(16); // Masquer le nouveau mot de passe pour l'affichage
        }
        else{
            var maskedPassword = "*".repeat(newPassword.length); // Masquer le nouveau mot de passe pour l'affichage
        }
        
        // Remplacer les champs input par le texte masqué
        pElement.innerHTML = '<strong>' + maskedPassword + '</strong> <img class="imgModify" src="../../images/modify.svg" onclick="editFieldPassWd(\'' + id + '\')"/></strong>';
        alert('Mot de passe mis à jour avec succès');

        // Possibilité d'ajouter ici une fonction pour envoyer les nouveaux mots de passe au serveur
        
    } else {
        alert('Les mots de passe ne correspondent pas.');
    }
}