From f6143c51ca28290674922dcc6e928d53865d1b32 Mon Sep 17 00:00:00 2001
From: beaulaton <leni.beaulaton@etu.uca.fr>
Date: Wed, 9 Oct 2024 16:54:09 +0200
Subject: [PATCH] =?UTF-8?q?Modifier=20les=20donn=C3=A9es=20profil=20(pas?=
 =?UTF-8?q?=20encore=20li=C3=A9=20avec=20du=20php=20dans=20la=20base?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/profil.php       | 31 ++++++++++++++++++------
 script/changeData.js   | 55 ++++++++++++++++++++++++++++++++++++++++++
 script/user.php        |  9 ++++---
 styles/styleProfil.css | 16 ++++++++++--
 4 files changed, 99 insertions(+), 12 deletions(-)
 create mode 100644 script/changeData.js
diff --git a/pages/profil.php b/pages/profil.php
index 4db7069..8e3dca3 100644
--- a/pages/profil.php
+++ b/pages/profil.php
@@ -8,6 +8,8 @@
     <link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre -->
     <link href="https://fonts.googleapis.com/css2?family=Lemon&display=swap" rel="stylesheet">
     <script defer src="../script/theme-toggle.js"></script>
+    <script defer src="../script/changeData.js"></script>
+
 </head>
 <body>
     <div class="container">
@@ -26,16 +28,31 @@
     <div class="login">
         <h1>▶ Profil ◀</h1>
 
-
         <?php
             include ('../script/user.php');
             
-            echo "<img src={$u->img} class='imageProfil' onmousedown='return false'/>";
-            
-            echo "<p class='nameProfil'> <strong>{$u->username}</strong></p>";
-            echo "<p class='nameProfil'> <strong>{$u->email}</strong></p>";
-            $passwdhiden = hidenPassWd($u);
-            echo "<p class='nameProfil'> <strong>{$passwdhiden}</strong></p>";
+            echo "<img src='{$u->img}' class='imageProfil' onmousedown='return false'/>";
+
+            // Nom d'utilisateur
+            echo "<p id='username' class='nameProfil'>
+                    <strong>{$u->username} 
+                    <img class='imgModify' src='../images/modify.svg' onclick='editField(\"username\")'/>
+                    </strong>
+                </p>";
+
+            // Email
+            echo "<p id='email' class='nameProfil'>
+                    <strong>{$u->email} 
+                    <img class='imgModify' src='../images/modify.svg' onclick='editField(\"email\")'/>
+                    </strong>
+                </p>";
+
+            // Mot de passe
+            echo "<p id='passwd' class='nameProfil'>
+                    <strong>{$u->hidenPasswd} 
+                    <img class='imgModify' src='../images/modify.svg'/>
+                    </strong>
+                </p>";
         ?>
 
         <div class="languageDiv">
diff --git a/script/changeData.js b/script/changeData.js
new file mode 100644
index 0000000..8cc43b3
--- /dev/null
+++ b/script/changeData.js
@@ -0,0 +1,55 @@
+
+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();
+
+    // 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';
+    
+    // Sauvegarde lors de la perte de focus
+    input.setAttribute('onblur', 'saveField("' + id + '", this.value)');
+    
+    // Remplacer le <p> par le champ <input>
+    pElement.innerHTML = '';
+    pElement.appendChild(input);
+    
+    // Mettre le focus sur le champ de saisie
+    input.focus();
+}
+
+//Sauvegarder les changements sur la vue
+function saveField(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
+        }
+    }
+    
+    // Récupérer l'élément <p> via son identifiant
+    var pElement = document.getElementById(id);
+    
+    // Mettre à jour la valeur avec la nouvelle saisie
+    pElement.innerHTML = '<strong>' + newValue + ' <img class="imgModify" src="../images/modify.svg" onclick="editField(\'' + 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,}$/;
+    return re.test(String(email).toLowerCase());
+}
diff --git a/script/user.php b/script/user.php
index a2adc20..0e93e4a 100644
--- a/script/user.php
+++ b/script/user.php
@@ -2,21 +2,24 @@
 class User{
     public string $username;
     public string $passwd;
+    public string $hidenPasswd;
     public string $img;
     public string $email;
 
     function __construct(string $pseudo, string $password, string $image, string $mail) {
         $this->username = $pseudo;
         $this->passwd = $password;
+        $this->hidenPasswd = hidenPassWd($password);
         $this->img = $image;
         $this->email = $mail;
     }
 }
 
-$u = new User('Testeur', 'e', '../images/imageProfil.png', 'testeur.compte@wikifantasy.com'); /*Test*/
+$u = new User('Testeur', 'motDepasse', '../images/imageProfil.png', 'testeur.compte@wikifantasy.com'); /*Test*/
 
-function hidenPassWd(User $u){
-    return str_repeat('*', strlen($u->passwd)); 
+function hidenPassWd(string $passwd){
+    if(strlen($passwd) >= 16) return str_repeat('*', 16);
+    return str_repeat('*', strlen($passwd)); 
 }
 
 function modifyName(string $name){
diff --git a/styles/styleProfil.css b/styles/styleProfil.css
index 60219f4..3623a99 100644
--- a/styles/styleProfil.css
+++ b/styles/styleProfil.css
@@ -29,8 +29,6 @@ body.dark-mode .buttonSudmite{
 	font-size: 20px;
 }
 
-
-
 body.dark-mode .createQuote{
 	margin-top: 5%;
 	margin-bottom: 5%;
@@ -52,6 +50,14 @@ body.dark-mode .login{
 	border: 2px solid transparent;
 }
 
+body.dark-mode .imgModify{
+	width: 3%;
+	margin-left: 5%;
+	margin-top: 5%;
+	filter: invert(100%) brightness(1000%) contrast(1000%);
+}
+
+
 /* ====== LIGHT MODE ====== */
 body.light-mode h1{
 	color : black;
@@ -108,6 +114,11 @@ body.light-mode .login{
 	text-align: center;
 }
 
+.changeValue{
+	color: red;
+}
+
+
 .imageProfil{
 	width: 25%;
 	border-radius: 25px;
@@ -117,6 +128,7 @@ body.light-mode .login{
 }
 
 .nameProfil{
+	margin-left: 10%;
 	text-align: center;
 	font-size: 120%;
 }
