WF-Website/public/script/changeData.js

var racine = '/~lebeaulato/WF-Website'; //Mettre votre chemin à vous

//=============================== USERNAME ===============================

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.name='pseudo';

    
    // Créer un bouton de validation
    var button = document.createElement('button');
    button.textContent = 'Valider';
    button.classList.add('saveButtonPasswd');
    button.type ="submit";

    // Remplacer le contenu du <p> par le champ <input> et le bouton
    pElement.innerHTML = '';
    pElement.appendChild(input);
    pElement.appendChild(button);

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



//=============================== EMAIL ===============================

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'; // Correction de l'attribut 'class'
    input.name='email';


   // Créer un bouton de validation
   var button = document.createElement('button');
   button.textContent = 'Valider';
   button.classList.add('saveButtonPasswd');
   button.type ="submit";


    // Remplacer le contenu du <p> par le champ <input> et le bouton
    pElement.innerHTML = '';
    pElement.appendChild(input);
    pElement.appendChild(button);

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


//=============================== PASSWORD ===============================


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 mot de passe à changer
    var inputOldPass = document.createElement('input');
    inputOldPass.type = 'password';
    inputOldPass.placeholder = 'Mot de passe actuel'; // Un placeholder pour indiquer la fonction du champ
    inputOldPass.classList.add('changeValue'); // Ajouter une classe CSS pour styliser l'input
    inputOldPass.setAttribute('id', 'oldPassword'); // Ajouter un ID pour la gestion
    inputOldPass.classList.add('inputPasswd'); // Ajouter une classe au input
    inputOldPass.name='oldPasswd';

    // 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
    inputNewPass.name='passwdFirst';
    

    // 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
    inputConfirmPass.name='passwdSecond';
    
    // 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.type="submit";

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

    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 editFieldImage(id,path) {
    var pElement = document.getElementById('imagePost');
    
    var inputImage = document.createElement('input');
    inputImage.type = 'hidden';
    inputImage.name='image';
    inputImage.value=id;


    var buttonSubmit = document.createElement('button');
    buttonSubmit.textContent = 'Valider';
    buttonSubmit.classList.add('saveButtonPasswd');
    buttonSubmit.type ="submit";
    
    pElement.innerHTML = '';
    pElement.appendChild(inputImage);
    pElement.appendChild(buttonSubmit);

    inputImage.focus(); // Mettre le focus sur le champ de saisie

    ///////////////////////////////////////////////

    var pEle = document.getElementById('image');

    var image = document.createElement('img');
    image.src=path;
    image.classList.add('imageProfil');

    var popover = document.getElementById("list-ChangeImg");
    popover.hidePopover();

    var button = document.createElement('button');
    button.popoverTargetElement= popover;
    button.name="image";
    button.classList.add('ChangeImg');
    button.appendChild(image);

    pEle.innerHTML = '';
    pEle.appendChild(button);
}