Connection a la base de donné réusite(en dur dans le code pour l'instant)+ insertion et suprétion Users 50% avec Kevin + début Gateway pour la recherche(pas tester)

7 months ago · 227adef274
parent 44e0d1df1b f6143c51ca
commit 227adef274
4 changed files with 100 additions and 12 deletions
--- 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,32 @@
    <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 = $u->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">
--- a/script/changeData.js
+++ 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());
+}
--- a/script/user.php
+++ b/script/user.php
@ -3,6 +3,7 @@ class User{
    public int $id;
    public string $username;
    public string $passwd;
+    public string $hidenPasswd;
    public string $img;
    public string $email;
    public bool $admin = false;
@ -10,15 +11,17 @@ class User{
    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){
--- 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%;
 }