@ -1,78 +1,65 @@
var racine = '/~lebeaulato/WF-Website' ;
//=============================== USERNAME ===============================
function editFieldUsername ( id ) { function editFieldUsername ( id ) {
var pElement = document . getElementById ( id ) ; // Récupérer l'élément <p> via son identifiant
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>
var currentValue = pElement . textContent . trim ( ) ; // Obtenir le texte actuel du <p>
// Créer un champ de saisie <input> avec la valeur actuelle
// Créer un champ de saisie <input> avec la valeur actuelle
var input = document . createElement ( 'input' ) ;
var input = document . createElement ( 'input' ) ;
input . type = 'text' ;
input . type = 'text' ;
input . value = currentValue
input . value = currentValue ;
input . class = 'changeValue' ;
input . class = 'changeValue' ;
input . name = 'pseudo' ;
input . setAttribute ( 'onblur' , 'saveFieldUsername("' + id + '", this.value)' ) ; // Sauvegarde lors de la perte de focus
// Remplacer le <p> par le champ <input>
// 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 . innerHTML = '' ;
pElement . appendChild ( input ) ;
pElement . appendChild ( input ) ;
pElement . appendChild ( button ) ;
input . focus ( ) ; // Mettre le focus sur le champ de saisie
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>' ;
}
//=============================== EMAIL ===============================
function editFieldEmail ( id ) { function editFieldEmail ( id ) {
var pElement = document . getElementById ( id ) ; // Récupérer l'élément <p> via son identifiant
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>
var currentValue = pElement . textContent . trim ( ) ; // Obtenir le texte actuel du <p>
// Créer un champ de saisie <input> avec la valeur actuelle
// Créer un champ de saisie <input> avec la valeur actuelle
var input = document . createElement ( 'input' ) ;
var input = document . createElement ( 'input' ) ;
input . type = 'email' ;
input . type = 'email' ;
input . value = currentValue
input . value = currentValue ;
input . class = 'changeValue' ;
input . class = 'changeValue' ; // Correction de l'attribut 'class'
input . name = 'email' ;
input . setAttribute ( 'onblur' , 'saveFieldEmail("' + id + '", this.value)' ) ; // Sauvegarde lors de la perte de focus
// Remplacer le <p> par le champ <input>
// 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 . innerHTML = '' ;
pElement . appendChild ( input ) ;
pElement . appendChild ( input ) ;
pElement . appendChild ( button ) ;
input . focus ( ) ; // Mettre le focus sur le champ de saisie
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
}
}
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>' ;
}
@ -86,7 +73,7 @@ function validateEmail(email) {
//=============================== PASSWORD ===============================
function editFieldPassWd ( id ) { function editFieldPassWd ( id ) {
@ -101,7 +88,8 @@ function editFieldPassWd(id) {
inputNewPass . classList . add ( 'changeValue' ) ; // Ajouter une classe CSS pour styliser l'input
inputNewPass . classList . add ( 'changeValue' ) ; // Ajouter une classe CSS pour styliser l'input
inputNewPass . setAttribute ( 'id' , 'newPassword' ) ; // Ajouter un ID pour la gestion
inputNewPass . setAttribute ( 'id' , 'newPassword' ) ; // Ajouter un ID pour la gestion
inputNewPass . classList . add ( 'inputPasswd' ) ; // Ajouter une classe au input
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
// Créer le champ de saisie pour la confirmation du mot de passe
var inputConfirmPass = document . createElement ( 'input' ) ;
var inputConfirmPass = document . createElement ( 'input' ) ;
@ -110,16 +98,19 @@ function editFieldPassWd(id) {
inputConfirmPass . classList . add ( 'changeValue' ) ; // Ajouter une classe CSS pour styliser l'input
inputConfirmPass . classList . add ( 'changeValue' ) ; // Ajouter une classe CSS pour styliser l'input
inputConfirmPass . setAttribute ( 'id' , 'confirmPassword' ) ; // Ajouter un ID pour la gestion
inputConfirmPass . setAttribute ( 'id' , 'confirmPassword' ) ; // Ajouter un ID pour la gestion
inputConfirmPass . classList . add ( 'inputPasswd' ) ; // Ajouter une classe au input
inputConfirmPass . classList . add ( 'inputPasswd' ) ; // Ajouter une classe au input
inputConfirmPass . name = 'passwdSecond' ;
// Ajouter un bouton de sauvegarde
// Ajouter un bouton de sauvegarde
var saveButton = document . createElement ( 'button' ) ;
var saveButton = document . createElement ( 'button' ) ;
saveButton . textContent = 'Sauvegarder le mot de passe' ;
saveButton . textContent = 'Sauvegarder le mot de passe' ;
saveButton . classList . add ( 'saveButtonPasswd' ) ; // Ajouter une classe au bouton
saveButton . classList . add ( 'saveButtonPasswd' ) ; // Ajouter une classe au bouton
saveButton . type = "submit" ;
saveButton . onclick = function ( ) {
/ * s a v e B u t t o n . o n c l i c k = f u n c t i o n ( ) {
savePasswordFields ( id , inputNewPass . value , inputConfirmPass . value ) ;
savePasswordFields ( id , inputNewPass . value , inputConfirmPass . value ) ;
} ;
} ; * /
// Ajouter les deux champs de saisie et le bouton dans l'élément <p>
// Ajouter les deux champs de saisie et le bouton dans l'élément <p>
pElement . appendChild ( inputNewPass ) ;
pElement . appendChild ( inputNewPass ) ;
@ -133,7 +124,8 @@ function editFieldPassWd(id) {
function savePasswordFields ( id , newPassword , confirmPassword ) { / * f u n c t i o n s a v e P a s s w o r d F i e l d s ( i d , n e w P a s s w o r d , c o n f i r m P a s s w o r d ) {
// Vérification si les champs sont vides
// Vérification si les champs sont vides
if ( newPassword . trim ( ) === "" || confirmPassword . trim ( ) === "" ) {
if ( newPassword . trim ( ) === "" || confirmPassword . trim ( ) === "" ) {
alert ( "Le mot de passe n'a pas changé" ) ;
alert ( "Le mot de passe n'a pas changé" ) ;
@ -141,18 +133,12 @@ function savePasswordFields(id, newPassword, confirmPassword) {
// Vérification de la correspondance des deux mots de passe
// Vérification de la correspondance des deux mots de passe
if ( newPassword === confirmPassword ) {
if ( newPassword === confirmPassword ) {
var pElement = document . getElementById ( id ) ; // Récupérer l'élément <p> via son identifiant
var pElement = document . getElementById ( id ) ; // Récupérer l'élément <p> via son identifiant
// Remplacer les champs input par le texte masqué
pElement . innerHTML = '<strong>Votre mot de passe</strong><img class="imgModify" src="{{ racine }}/images/modify.svg" onclick="editFieldPassWd(\'' + id + '\')"/>' ;
alert ( 'Mot de passe mis à jour avec succès' ) ;
// fonction pour envoyer les nouveaux mots de passe au serveur
} else {
} else {
alert ( 'Les mots de passe ne correspondent pas.' ) ;
alert ( 'Les mots de passe ne correspondent pas.' ) ;
}
}
}
// Remplacer les champs input par le texte masqué
pElement . innerHTML = '<strong>Votre mot de passe</strong><img class="imgModify" src="' + racine + '/images/modify.svg" onclick="editFieldPassWd(\'' + id + '\')"/>' ;
} * /
