Projet réseau social un utilisateur

voit son profil (test

27 novembre 2024 à 10:43:02

Bonjour à tous.
Je dois créer un projet de réseau social équivalent à facebook et je suis en train de créer le profil d'un membre utilisant boostrap 5. Dans le navigateur j'ai bien le profil principal de l'administrateur avec ses informations qui sont vide (Pseudonyme, nom et prénom, age, gender, email, téléphone, bio et préférences). Dans mes consignes on me demande à ce que l'administrateur puisse voir son profil, le modifier et le supprimer. Ma question serait est- il possible que lorsqu'

[<!--identité du profil administrateur-->
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body text-center">
<img
src="assets/Lego.png"
alt="Photo de profil de Lego"
class="rounded-circle img-fluid"
style="width: 150px"
/>
<h4 class="mt-3">Pseudonyme:</h4>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<form id="adminProfileForm">
<div class="mb-3">
<label for="adminUsername" class="form-label"

Pseudonyme</label

<input
type="text"
class="form-control"
id="adminUsername"
name="Username"
/>
</div>
<div class="mb-3">
<label for="adminFullName" class="form-label"
Nom et prénom</label

<input
type="text"
class="form-control"
id="adminFullName"
name="FullName"
/>
</div>
<div class="mb-3">
<label for="adminAge" class="form-label">Âge</label>
<input
type="number"
class="form-control"
id="adminAge"
name="Age"
/>
</div>
<div class="mb-3">
<label for="adminGender" class="form-label">Genre</label>
<select class="form-select" id="adminGender" name="Gender">
<option value="male">Masculin</option>
<option value="female">Féminin</option>
</select>
</div>
<div class="mb-3">
<label for="adminEmail" class="form-label">Email</label>
<input
type="email"
class="form-control"
id="adminEmail"
name="Email"
/>
</div>
<div class="mb-3">
<label for="adminPhone" class="form-label">Téléphone</label>
<input
type="tel"
class="form-control"
id="adminPhone"
name="Phone"
/>
</div>
<div class="mb-3">
<label for="adminBio" class="form-label">Présentation</label>
<textarea
class="form-control"
id="adminBio"
name="Bio"
rows="3"
</textarea>
</div>
<div class="mb-3">
<label for="adminPreferences" class="form-label"
Préférences</label

<input
type="text"
class="form-control"
id="adminPreferences"
name="Preferences"
/>
</div>
<!--modification du profil de l'administrateur-->
<button type="submit" class="btn btn-primary">
Modifier les informations
</button>
<!--suppression du profil de l'administrateur-->
<button type="submit" class="btn btn-danger">Supprimer</button>
</form>
</div>
</div>
</div>
</div>
</div>

<!--Section pour supprimer le profil de l'administrateur-->
<div id="deleteProfileSection" class="container mt-5" style="display: none">
<div class="card">
<div class="card-body">
<h5>Supprimer le profil de l'Administrateur</h5>
<p>
êtes-vous sur de vouloir supprimer votre profil administrateur?
Cette action est irréversible.
</p>
<button type="submit" class="btn btn-danger">Supprimer</button>
<button
type="button"
class="btn btn-secondary"
onclick="hideDeleteProfileSection()"

Annuler
</button>
</div>
</div>
</div>]

à titre d'exemple je mets une information de profil quelconque (exemple martin Dupont et tout son identité) elle puisse s'afficher automatiquement ou bien suis je obligé dans le VS code de les codifier manuellement en rajoutant un value sur pseudo, nom et prénom etc....? Merci à vous tous Voici mon code

-
Edité par JuanGimenez3 27 novembre 2024 à 13:02:55

AbcAbc6

27 novembre 2024 à 12:11:19

Bonjour, indenter votre code correctement, cela serra plus facile pour tous pour vous lire, y compris pour vous!!

Vous postez dans le forum JS, ou est votre code JavaScript?

JuanGimenez3

27 novembre 2024 à 13:01:58

Bonjour AbcAbc6

Voici mon code javascript

// Fonction pour charger le profil de l'administrateur
  document.addEventListener("DOMContentLoaded", () => {
    // Fonction pour charger le profil de l'administrateur
    function loadAdminProfile() {
      fetch("http://localhost:3000/api/profil", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error("Problème pour obtenir un profil");
          }
          return response.json();
        })
        .then((data) => {
          document.getElementById("adminUsername").value = data.username;
          document.getElementById("adminFullName").value = data.fullName;
          document.getElementById("adminAge").value = data.age;
          document.getElementById("adminGender").value = data.gender;
          document.getElementById("adminEmail").value = data.email;
          document.getElementById("adminPhone").value = data.contact;
          document.getElementById("adminBio").value = data.bio;
          document.getElementById("adminPreferences").value = data.preferences;
          if (data.profilePicture) {
            document.querySelector("img[alt='Photo de profil']").src =
              data.profilePicture;
          }
        })
        .catch((error) => {
          console.error("Erreur lors de la récupération du profil :", error);
          alert("Erreur lors de la récupération du profil : " + error.message);
        });
    }
    // Fonction pour charger les utilisateurs
    async function loadUsers() {
      try {
        const response = await fetch("http://localhost:3000/api/users", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        });

        if (!response.ok) {
          throw new Error("Problème pour obtenir les utilisateurs");
        }

        const data = await response.json();
        const usersTableBody = document.getElementById("usersTableBody");
        if (usersTableBody) {
          usersTableBody.innerHTML = "";
          data.forEach((user) => {
            const row = document.createElement("tr");
            row.innerHTML = `
            <td>${user.username}</td>
            <td>${user.fullName}</td>
            <td><button onclick="viewFriendProfile(${user.id})">Voir le profil de l'ami</button></td>
            <td><button>Modifier</button></td>
            <td><button>Supprimer</button></td>
          `;
            usersTableBody.appendChild(row);
          });
        }
      } catch (error) {
        console.error(
          "Erreur lors de la récupération des utilisateurs :",
          error
        );
        alert(
          "Erreur lors de la récupération des utilisateurs : " + error.message
        );
      }
    }

    // Mise à jour du profil de l'administrateur
    const adminProfileForm = document.getElementById("adminProfileForm");

    adminProfileForm.addEventListener("submit", async function (event) {
      event.preventDefault();
      const formData = new FormData(adminProfileForm);
      const payload = Object.fromEntries(formData.entries());
      try {
        const response = await fetch("http://localhost:3000/api/profil", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
          body: JSON.stringify(payload),
        });
        const data = await response.json();
        if (response.ok) {
          alert("Profil mis à jour avec succès !");
          loadAdminProfile(); // rechargement du profil après mise à jour
        } else {
          alert("Erreur lors de la mise à jour du profil : " + data.message);
        }
      } catch (error) {
        console.error("Erreur lors de la mise à jour du profil :", error);
        alert("Erreur lors de la mise à jour du profil : " + error.message);
      }
    });

    // Fonction pour voir le profil d'un ami de l'administrateur
    window.viewFriendProfile = async function (userId) {
      try {
        const response = await fetch(
          `http://localhost:3000/api/users/${userId}`,
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
          }
        );

        if (!response.ok) {
          throw new Error("Problème pour obtenir le profil de l'ami");
        }

        const data = await response.json();
        document.getElementById("friendProfileSection").style.display = "block";
        document.getElementById("friendUsername").innerText = data.username;
        document.getElementById("friendFullName").innerText = data.fullName;
        document.getElementById("friendAge").innerText = data.age;
        document.getElementById("friendGender").innerText = data.gender;
        document.getElementById("friendEmail").innerText = data.email;
        document.getElementById("friendPhone").innerText = data.contact;
        document.getElementById("friendBio").innerText = data.bio;
        document.getElementById("friendPreferences").innerText =
          data.preferences;
        if (data.profilePicture) {
          document.querySelector("img[alt='Photo de profil']").src =
            data.profilePicture;
        }
      } catch (error) {
        console.error("Erreur pour récupérer le profil de l'ami : ", error);
        alert("Erreur pour récupérer le profil de l'ami : " + error.message);
      }
    };