|
|
|
|
@ -1,10 +1,7 @@
|
|
|
|
|
|
|
|
|
|
function editField(id) {
|
|
|
|
|
// Récupérer l'élément <p> via son identifiant
|
|
|
|
|
var pElement = document.getElementById(id);
|
|
|
|
|
|
|
|
|
|
// Obtenir le texte actuel du <p>
|
|
|
|
|
var currentValue = pElement.textContent.trim();
|
|
|
|
|
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');
|
|
|
|
|
@ -12,19 +9,55 @@ function editField(id) {
|
|
|
|
|
input.value = currentValue
|
|
|
|
|
input.class = 'changeValue';
|
|
|
|
|
|
|
|
|
|
// Sauvegarde lors de la perte de focus
|
|
|
|
|
input.setAttribute('onblur', 'saveField("' + id + '", this.value)');
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
// Mettre le focus sur le champ de saisie
|
|
|
|
|
input.focus();
|
|
|
|
|
input.focus(); // Mettre le focus sur le champ de saisie
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//Sauvegarder les changements sur la vue
|
|
|
|
|
function saveField(id, newValue) {
|
|
|
|
|
//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.');
|
|
|
|
|
@ -39,17 +72,98 @@ function saveField(id, newValue) {
|
|
|
|
|
return; // Ne pas sauvegarder si le nom d'utilisateur est vide
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Récupérer l'élément <p> via son identifiant
|
|
|
|
|
var pElement = document.getElementById(id);
|
|
|
|
|
|
|
|
|
|
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="editField(\'' + id + '\')"/></strong>';
|
|
|
|
|
pElement.innerHTML = '<strong>' + newValue + ' <img class="imgModify" src="../images/modify.svg" onclick="editFieldEmail(\'' + id + '\')"/></strong>';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//Email valide
|
|
|
|
|
function validateEmail(email) {
|
|
|
|
|
// Regex pour vérifier le format de l'email
|
|
|
|
|
var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
|
|
|
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.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
kevin.modejar
6 months ago