+
{$u->username}
-
+
{$u->email}
-
+
{$u->hidenPasswd}
-
+
via son identifiant - var pElement = document.getElementById(id); - - // Obtenir le texte actuel du
- var currentValue = pElement.textContent.trim(); +function editFieldUsername(id) { + var pElement = document.getElementById(id);// Récupérer l'élément
via son identifiant + var currentValue = pElement.textContent.trim();// Obtenir le texte actuel du
// Créer un champ de saisie 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
par le champ + 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
via son identifiant
+
+ // Mettre à jour la valeur avec la nouvelle saisie
+ pElement.innerHTML = '' + newValue + ' ';
+}
+
+
+
+
+function editFieldEmail(id) {
+ var pElement = document.getElementById(id);// Récupérer l'élément
via son identifiant + var currentValue = pElement.textContent.trim();// Obtenir le texte actuel du
+ + // Créer un champ de saisie 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
par le champ 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
via son identifiant - var pElement = document.getElementById(id); + + var pElement = document.getElementById(id); // Récupérer l'élément
via son identifiant
// Mettre à jour la valeur avec la nouvelle saisie
- pElement.innerHTML = '' + newValue + ' ';
+ pElement.innerHTML = '' + newValue + ' ';
}
+
+
+
//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
via son identifiant + + pElement.innerHTML = '';// Effacer le contenu actuel de
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
+ 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
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 = '' + maskedPassword + ' ';
+ 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.');
+ }
+}
diff --git a/script/user.php b/script/user.php
index 2c9fd74..4a2b0c0 100644
--- a/script/user.php
+++ b/script/user.php
@@ -17,27 +17,20 @@ class User{
}
public function updateUsername(string $newUsername){
- if(!empty($newUsername)){
+ if(isset($newUsername)){
$this->username = $newUsername;
}
}
public function updateEmail(string $newEmail) {
- if(!empty($newEmail)){
+ if(isset($newEmail)){
$this->email = $newEmail;
}
}
- public function updatePassWd(string $newPassword1, string $newPassword2){
- if(!empty($newPassword2) && !empty($newPassword1)){
- if($newPassword1 == $newPassword2){
- $u->passwd = $newPassword1;
- }
- }
- }
public function modifyImage(string $image){
- if(!empty($image)){
+ if(isset($image)){
$u->img = $image;
}
}
diff --git a/src/user.txt b/src/user.txt
new file mode 100644
index 0000000..44492d5
--- /dev/null
+++ b/src/user.txt
@@ -0,0 +1,4 @@
+TesteurFichier
+motDepasseFichier
+../images/imageProfil.png
+testeurFichier.compte@wikifantasy.com
\ No newline at end of file
diff --git a/styles/styleProfil.css b/styles/styleProfil.css
index f58d3b6..de2ea5d 100644
--- a/styles/styleProfil.css
+++ b/styles/styleProfil.css
@@ -68,8 +68,30 @@ body.dark-mode .infoProfil > input {
border: none;
font-size: 15px;
font-family: "Lemon", serif;
+
}
+
+body.dark-mode .inputPasswd{
+ font-family: "Lemon", serif;
+ margin-top: 40%;
+ color: black;
+}
+
+body.dark-mode .saveButtonPasswd {
+ background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+ font-family: "Lemon", serif;
+ border: none;
+ color: white;
+ padding: 1%;
+ border-radius: 25px;
+ width: 55%;
+ font-size: 15px;
+ margin-top: 5%;
+}
+
+
+
/* ====== LIGHT MODE ====== */
body.light-mode h1{
color : black;
@@ -139,6 +161,26 @@ body.light-mode .infoProfil > input {
background-color: #fff1f1;
font-size: 15px;
font-family: "Lemon", serif;
+ color : black;
+}
+
+
+body.light-mode .inputPasswd{
+ font-family: "Lemon", serif;
+ margin-top: 40%;
+ color: black;
+}
+
+body.light-mode .saveButtonPasswd {
+ background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
+ font-family: "Lemon", serif;
+ border: none;
+ color: black;
+ padding: 1%;
+ border-radius: 25px;
+ width: 55%;
+ font-size: 15px;
+ margin-top: 5%;
}
@@ -180,3 +222,5 @@ body.light-mode .infoProfil > input {
margin-left: 25%;
display:block;
}
+
+