Modifier les données profil (pas encore lié avec du php dans la base

remotes/origin/master
Leni BEAULATON 7 months ago
parent a8e8ba6f16
commit f6143c51ca

@ -8,6 +8,8 @@
<link id="favicon" rel="icon" href="../images/iconeSombre.ico"> <!-- Par défaut sombre --> <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"> <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/theme-toggle.js"></script>
<script defer src="../script/changeData.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -26,16 +28,31 @@
<div class="login"> <div class="login">
<h1>▶ Profil ◀</h1> <h1>▶ Profil ◀</h1>
<?php <?php
include ('../script/user.php'); include ('../script/user.php');
echo "<img src={$u->img} class='imageProfil' onmousedown='return false'/>"; echo "<img src='{$u->img}' class='imageProfil' onmousedown='return false'/>";
echo "<p class='nameProfil'> <strong>{$u->username}</strong></p>"; // Nom d'utilisateur
echo "<p class='nameProfil'> <strong>{$u->email}</strong></p>"; echo "<p id='username' class='nameProfil'>
$passwdhiden = hidenPassWd($u); <strong>{$u->username}
echo "<p class='nameProfil'> <strong>{$passwdhiden}</strong></p>"; <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"> <div class="languageDiv">

@ -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());
}

@ -2,21 +2,24 @@
class User{ class User{
public string $username; public string $username;
public string $passwd; public string $passwd;
public string $hidenPasswd;
public string $img; public string $img;
public string $email; public string $email;
function __construct(string $pseudo, string $password, string $image, string $mail) { function __construct(string $pseudo, string $password, string $image, string $mail) {
$this->username = $pseudo; $this->username = $pseudo;
$this->passwd = $password; $this->passwd = $password;
$this->hidenPasswd = hidenPassWd($password);
$this->img = $image; $this->img = $image;
$this->email = $mail; $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){ function hidenPassWd(string $passwd){
return str_repeat('*', strlen($u->passwd)); if(strlen($passwd) >= 16) return str_repeat('*', 16);
return str_repeat('*', strlen($passwd));
} }
function modifyName(string $name){ function modifyName(string $name){

@ -29,8 +29,6 @@ body.dark-mode .buttonSudmite{
font-size: 20px; font-size: 20px;
} }
body.dark-mode .createQuote{ body.dark-mode .createQuote{
margin-top: 5%; margin-top: 5%;
margin-bottom: 5%; margin-bottom: 5%;
@ -52,6 +50,14 @@ body.dark-mode .login{
border: 2px solid transparent; 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 ====== */ /* ====== LIGHT MODE ====== */
body.light-mode h1{ body.light-mode h1{
color : black; color : black;
@ -108,6 +114,11 @@ body.light-mode .login{
text-align: center; text-align: center;
} }
.changeValue{
color: red;
}
.imageProfil{ .imageProfil{
width: 25%; width: 25%;
border-radius: 25px; border-radius: 25px;
@ -117,6 +128,7 @@ body.light-mode .login{
} }
.nameProfil{ .nameProfil{
margin-left: 10%;
text-align: center; text-align: center;
font-size: 120%; font-size: 120%;
} }

Loading…
Cancel
Save