feat: devWeb - update profile page

S2/DevWeb/Projet/src/main/java/uppa/project/bean/ProfileBean.java

@@ -0,0 +1,106 @@
+package uppa.project.bean;
+
+import jakarta.persistence.EntityManager;
+import uppa.project.database.dao.DAO;
+import uppa.project.database.dao.DAOException;
+import uppa.project.database.dao.EntityManagerProvider;
+import uppa.project.database.dao.jpa.Game_JPA_DAO_Factory;
+import uppa.project.database.pojo.User;
+import uppa.project.json.HttpResponse;
+import uppa.project.json.HttpResponseCode;
+
+public class ProfileBean {
+  private String id;
+  private String oldEmail;
+  private String email;
+  private String oldPassword;
+  private String password;
+  private String oldGender;
+  private String gender;
+  private User user;
+  private HttpResponse error;
+
+  public ProfileBean() {}
+
+  public ProfileBean(String username,String oldEmail, String email, String oldPassword, String password, String gender) {
+    this.id = username;
+    this.oldEmail = oldEmail;
+    this.email = email;
+    this.oldPassword = oldPassword;
+    this.password = password;
+    this.gender = gender;
+  }
+
+  public boolean validate() {
+    EntityManager entityManager = EntityManagerProvider.getInstance();
+    entityManager.getTransaction().begin();
+    try{
+      DAO<User> userDAO = new Game_JPA_DAO_Factory().getDAOUser();
+      //Check if the user is valid
+      user = userDAO.findById(Integer.parseInt(id));
+      if (user == null) {
+        error = new HttpResponse(HttpResponseCode.UNAUTHORIZED, "Utilisateur non trouvé");
+        return false;
+      }
+      //Check if the email is not already taken
+      User[] users = userDAO.findByField("email", email);
+      if (!oldEmail.equals(email) && users.length > 0) {
+        error = new HttpResponse(HttpResponseCode.UNAUTHORIZED, "Cet email est déjà utilisé");
+        return false;
+      }
+      //Check if the old password is correct
+      if (!oldPassword.equals("") && user.verifyPassword(oldPassword) == false) {
+        error = new HttpResponse(HttpResponseCode.UNAUTHORIZED, "Ancien mot de passe incorrect");
+        return false;
+      }
+      //Update the user
+      user.setEmail(email);
+      user.setPassword(password);
+      user.setGender(User.Gender.valueOf(gender));
+      userDAO.update(user);
+      entityManager.getTransaction().commit();
+      return true;
+    } catch (DAOException e) {
+      error = new HttpResponse(HttpResponseCode.INTERNAL_SERVER_ERROR, "Une erreur est survenue (DB_CONNECTION_ERROR:002)");
+      entityManager.getTransaction().rollback();
+      return false;
+    }
+  }
+
+  public ProfileBean setId(String id) {
+    this.id = id;
+    return this;
+  }
+
+  public ProfileBean setOldEmail(String email) {
+    this.oldEmail = email;
+    return this;
+  }
+  public ProfileBean setEmail(String email) {
+    this.email = email;
+    return this;
+  }
+
+  public ProfileBean setOldPassword(String oldPassword) {
+    this.oldPassword = oldPassword;
+    return this;
+  }
+
+  public ProfileBean setPassword(String password) {
+    this.password = password;
+    return this;
+  }
+
+  public ProfileBean setGender(String gender) {
+    this.gender = gender;
+    return this;
+  }
+
+  public HttpResponse getError() {
+    return error;
+  }
+
+  public User getUser() {
+    return user;
+  }
+}

S2/DevWeb/Projet/src/main/java/uppa/project/database/pojo/Game.java

@@ -293,6 +293,24 @@ public class Game implements Serializable {
     }
   }
 
+  /**
+   * Récupère le gagnant de la partie
+   *
+   * @return le nom du gagnant
+   */
+  public String getWinner(){
+    sortPlayersByScore();
+    return players.get(0).getUser().getUsername();
+  }
+
+  /**
+   * Vérifie si le nombre de tours est valide
+   *
+   * @param nbRounds le nombre de tours
+   * @param nbColors le nombre de couleurs
+   * @param nbValuesPerColor le nombre de valeurs par couleur
+   * @return true si le nombre de tours est valide, false sinon
+   */
   public boolean isValidNumberRound(int nbRounds, int nbColors, int nbValuesPerColor){
     return nbRounds < NB_ROUNDS_MIN || nbRounds > nbColors * nbValuesPerColor;
   }

S2/DevWeb/Projet/src/main/java/uppa/project/web/servlet/ProfileServlet.java

@@ -6,12 +6,23 @@
 
 package uppa.project.web.servlet;
 
+import com.google.gson.Gson;
 import jakarta.servlet.ServletException;
 import jakarta.servlet.annotation.WebServlet;
 import jakarta.servlet.http.HttpServlet;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 import java.io.IOException;
+import java.io.PrintWriter;
+import java.util.ArrayList;
+import java.util.List;
+import uppa.project.bean.ProfileBean;
+import uppa.project.bean.RegisterBean;
+import uppa.project.database.pojo.Game;
+import uppa.project.database.pojo.Player;
+import uppa.project.database.pojo.User;
+import uppa.project.json.HttpResponse;
+import uppa.project.json.HttpResponseCode;
 
 @WebServlet(name = "profileServlet", value = "/profile")
 public class ProfileServlet extends HttpServlet {
@@ -24,6 +35,34 @@ public class ProfileServlet extends HttpServlet {
     request.getRequestDispatcher("/WEB-INF/pages/profile.jsp").forward(request, response);
   }
 
+  public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
+    response.setContentType("application/json");
+    response.setCharacterEncoding("UTF-8");
+    PrintWriter out = response.getWriter();
+
+    ProfileBean profileBean = new ProfileBean()
+      .setId(request.getParameter("id"))
+      .setOldEmail(request.getParameter("oldEmail"))
+      .setEmail(request.getParameter("email"))
+      .setPassword(request.getParameter("password"))
+      .setGender(request.getParameter("gender"))
+      ;
+
+    Gson gson = new Gson();
+    HttpResponse httpResponse;
+    if (profileBean.validate()) {
+      request.getSession().setAttribute("user", profileBean.getUser());
+      httpResponse = new HttpResponse(
+        HttpResponseCode.OK,
+        "Register success"
+      );
+    } else {
+      httpResponse = profileBean.getError();
+    }
+    out.println(gson.toJson(httpResponse));
+    out.flush();
+  }
+
   public void destroy() {
   }
 }

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/profile.jsp

@@ -1,4 +1,10 @@
+<%@ page import="uppa.project.database.pojo.Player" %>
+<%@ page import="uppa.project.database.pojo.Game" %>
+<%@ page import="java.util.List" %>
 <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<%--<%@ taglib uri = "https://mvnrepository.com/artifact/jakarta.servlet.jsp.jstl/jakarta.servlet.jsp.jstl-api" prefix = "c" %>--%>
+
+
 
 <%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
@@ -9,93 +15,38 @@
         <div class="columns is-centered">
             <div class="column is-5-tablet is-5-desktop is-5-widescreen">
                 <component:card title="Profil">
-                    <fieldset disabled>
-                        <jsp:useBean id="user" class="uppa.project.database.pojo.User" scope="session"/>
-                        <div class="field">
-                            <label class="label">Nom d'utilisateur</label>
-                            <input class="input" type="text" value="${user.username}">
-                        </div>
-                        <div class="field">
-                            <label class="label">Email</label>
-                            <input class="input" type="text" value="${user.email}">
-                        </div>
-                        <div class="field">
-                            <label class="label">Mot de passe</label>
-                            <a href="/profile/password">Changer le mot de passe</a>
-                        </div>
-                        <div class="field">
-                            <label class="label">Date de naissance</label>
-                            <input class="input" type="text" value="${user.birth.toLocaleString()}">
-                        </div>
-                        <div class="field">
-                            <label class="label">Genre</label>
-                            <input class="input" type="text" value="${user.gender}">
-                        </div>
+                    <fieldset>
+                        <form:profile/>
                     </fieldset>
 
-                    <div class="buttons">
-                        <button class="button is-primary is-outlined">Modifier</button>
-                        <button class="button is-primary has-text-white">Supprimer le compte</button>
-                    </div>
                 </component:card>
             </div>
 
             <div class="column is-5-tablet is-5-desktop is-5-widescreen">
                 <component:card title="Statistiques">
-                    <h4 class="title is-4">Statistiques globales</h4>
-                    <div class="level">
-                        <div class="level-item has-text-centered">
-                            <div>
-                                <p class="heading">Parties</p>
-                                <p class="title">${user.nbPlayedGame}</p>
-                            </div>
-                        </div>
-                        <div class="level-item has-text-centered">
-                            <div>
-                                <p class="heading">Victoires</p>
-                                <p class="title">${user.nbWin}</p>
-                            </div>
-                        </div>
-                        <div class="level-item has-text-centered">
-                            <div>
-                                <p class="heading">Clics corrects</p>
-                                <p class="title">${user.nbRightClicks}</p>
-                            </div>
-                        </div>
-                        <div class="level-item has-text-centered">
-                            <div>
-                                <p class="heading">Clics rapides</p>
-                                <p class="title">${user.nbRapidClicks}</p>
-                            </div>
-                        </div>
-                    </div>
-
-<%--                    TODO: Tableau des 10 dernières parties--%>
-
-                    <h4 class="title is-4">10 dernières parties</h4>
-                    <table class="table is-fullwidth">
-                        <thead>
-                            <tr>
-                                <th>Date</th>
-                                <th>Victoire</th>
-                                <th>Score</th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <c:forEach var="game" items="${user.playedGames}">
-                                <tr>
-                                    <td>${game.createdAt}</td>
-                                    <td>${game.winner}</td>
-                                    <td>${game.score}</td>
-                                    <td><a href="/game/${game.id}">Voir</a></td>
-                                </tr>
-                            </c:forEach>
-                    </table>
-
-
+                    <component:statistics/>
                 </component:card>
             </div>
         </div>
     </component:hero>
-</layout:base>
+</layout:base>
+<script defer type="text/javascript">
+    const gameList = document.getElementById('game-list');
+    console.log("gameList", gameList)
+    ${user.playedGames}.forEach((player) => {
+      console.log("player", player)
+        gameListTr = document.createElement('tr');
+        gameListTdDate = document.createElement('td');
+        gameListTdDate.innerHTML = player.game.createdAt;
+        gameListTdScore = document.createElement('td');
+        gameListTdScore.innerHTML = player.score;
+        gameListTdWinner = document.createElement('td');
+        gameListTdWinner.innerHTML = player.game.winner;
+        gameListTdLink = document.createElement('td');
+        gameListTdLink.innerHTML = `<a href="/game/${player.game.id}">Voir</a>`;
+        gameListTr.appendChild(gameListTdDate);
+        gameListTr.appendChild(gameListTdScore);
+        gameListTr.appendChild(gameListTdWinner);
+        gameListTr.appendChild(gameListTdLink);
+    })
+</script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/statistics.tag

@@ -0,0 +1,64 @@
+<%@ tag import="uppa.project.database.pojo.Player" %>
+<%@tag description="component/statistics" pageEncoding="UTF-8" %>
+<jsp:useBean id="user" class="uppa.project.database.pojo.User" scope="session"/>
+<h4 class="title is-4">Statistiques globales</h4>
+<div class="level">
+    <div class="level-item has-text-centered">
+        <div>
+            <p class="heading">Parties</p>
+            <p class="title">${user.nbPlayedGame}</p>
+        </div>
+    </div>
+    <div class="level-item has-text-centered">
+        <div>
+            <p class="heading">Victoires</p>
+            <p class="title">${user.nbWin}</p>
+        </div>
+    </div>
+    <div class="level-item has-text-centered">
+        <div>
+            <p class="heading">Clics corrects</p>
+            <p class="title">${user.rightClickPercentRate}%</p>
+        </div>
+    </div>
+    <div class="level-item has-text-centered">
+        <div>
+            <p class="heading">Clics rapides</p>
+            <p class="title">${user.rapidClickPercentRate}%</p>
+        </div>
+    </div>
+</div>
+
+<%-- TODO: Si le temps nous le permet, mettre en place un système de pagination --%>
+
+<h4 class="title is-4">Parties jouées </h4>
+<table class="table is-fullwidth">
+    <thead>
+    <tr>
+        <th>Date</th>
+        <th>Score</th>
+        <th>Vainqueur</th>
+        <th></th>
+    </tr>
+    </thead>
+    <tbody id="game-list">
+
+    <% for (int i = 0; i < user.getPlayedGames().size(); i++) {
+        Player player = user.getPlayedGames().get(i);
+    %>
+        <tr>
+            <td><%= player.getGame().getCreatedAt().toLocaleString() %></td>
+            <td><%= player.getScore() %></td>
+            <td><%= player.getGame().getWinner() %></td>
+            <td><a href="/game/<%= player.getGame().getId() %>">Voir</a></td>
+        </tr>
+    <% } %>
+<%--    <c:forEach var="player" items="${user.playedGames}">--%>
+<%--        <tr>--%>
+<%--            <td>${player.game.createdAt}</td>--%>
+<%--            <td>${player.score}</td>--%>
+<%--            <td>${player.game.winner}</td>--%>
+<%--            <td><a href="/game/${player.game.id}">Voir</a></td>--%>
+<%--        </tr>--%>
+    </tbody>
+</table>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/profile.tag

@@ -1,5 +1,207 @@
+<%@ tag import="uppa.project.database.pojo.User" %>
 <%@tag description="form/profile" pageEncoding="UTF-8" %>
 
-<form id="profile-form" action="${pageContext.request.contextPath}/reset-password" method="post">
+<form id="profile-form" action="${pageContext.request.contextPath}/profile" method="post">
+    <jsp:useBean id="user" class="uppa.project.database.pojo.User" scope="session"/>
+    <div class="field">
+        <label class="label" for="username">Nom d'utilisateur</label>
+        <div class="control has-icons-left">
+            <input id="username" name="username" value="${user.username}" type="text" class="input is-fullwidth" disabled/>
+            <span class="icon is-left"><i class="fas fa-user"></i></span>
+        </div>
+    </div>
+    <div class="field">
+        <label class="label" for="email">Email</label>
+        <div class="control has-icons-left">
+            <input id="old-email" name="oldEmail" type="hidden" value="${user.email}" class="input is-fullwidth" required>
+            <input id="email" name="email" type="email" value="${user.email}" class="input is-fullwidth" required>
+            <span class="icon is-left"><i class="fas fa-envelope"></i></span>
+        </div>
+    </div>
+    <div class="field">
+        <label class="label">Mot de passe</label>
+        <a id="change-password" href="#">Changer le mot de passe</a>
+    </div>
+    <div id="old-password-field" class="field" style="display: none">
+        <div class="control has-icons-left">
+            <input id="old-password" name="oldPassword" placeholder="Ancien mot de passe" type="password" class="input is-fullwidth">
+            <span class="icon is-left"><i class="fas fa-lock"></i></span>
+        </div>
+    </div>
+    <div id="password-field" class="field" style="display: none">
+        <div class="control has-icons-left">
+            <input id="password" name="password" placeholder="Nouveau mot de passe" type="password" class="input is-fullwidth">
+            <span class="icon is-left"><i class="fas fa-lock"></i></span>
+        </div>
+    </div>
+    <div id="repeat-password-field" class="field" style="display: none">
+        <div class="control has-icons-left">
+            <input id="repeat-password" name="repeat-password" placeholder="Confirmer le mot de passe" type="password" class="input is-fullwidth">
+            <span class="icon is-left"><i class="fas fa-lock"></i></span>
+        </div>
+    </div>
+    <div class="field">
+        <label class="label">Date de naissance</label>
+        <input class="input" type="text" value="${user.birth.toLocaleString()}" disabled>
+    </div>
+    <div class="field">
+        <label class="label" for="gender">Genre</label>
+        <div class="control has-icons-left">
+            <div class="select is-fullwidth">
+                <input id="old-gender" name="oldGender" type="hidden" value="${user.gender.name()}" class="input is-fullwidth" required>
+                <select name="gender" id="gender" required>
+                    <% if (user.getGender() == null) { %>
+                        <option selected value="">- Choisissez une option -</option>
+                    <% } else { %>
+                        <option value="">- Choisissez une option -</option>
+                    <% } %>
+                    <% if (user.getGender().equals(User.Gender.MALE)) {%>
+                        <option selected value="MALE">Homme</option>
+                    <% } else { %>
+                    <option value="MALE">Homme</option>
+                    <% } %>
+                    <% if (user.getGender().equals(User.Gender.FEMALE)) {%>
+                        <option selected value="FEMALE">Femme</option>
+                    <% } else { %>
+                        <option value="FEMALE">Femme</option>
+                    <% } %>
+                    <% if (user.getGender().equals(User.Gender.OTHER)) {%>
+                        <option selected value="OTHER">Autre</option>
+                    <% } else { %>
+                    <option value="OTHER">Autre</option>
+                    <% } %>
+                </select>
+            </div>
+            <span class="icon is-left"><i class="fa-solid fa-venus-mars"></i></span>
+        </div>
+    </div>
 
-</form>
+    <div class="field">
+        <div class="buttons is-right">
+            <input type="submit" id="modify" class="button is-primary is-outlined" value="Modifier">
+        </div>
+    </div>
+</form>
+<script defer type="module">
+    const profileForm = document.querySelector("form#profile-form");
+    const changePassword = profileForm.querySelector("a#change-password");
+    const passwordFields = profileForm.querySelectorAll("div#old-password-field, div#password-field, div#repeat-password-field");
+    const inputs = profileForm.querySelectorAll("input[type='text'], input[type='password']");
+
+    changePassword.addEventListener("click", (e) => {
+        e.preventDefault();
+        passwordFields.forEach(field => {
+          console.log(field)
+            field.style.display = "block";
+        });
+    });
+
+    profileForm.addEventListener("submit", onSubmit);
+
+    function onSubmit(event) {
+      event.preventDefault();
+
+      const oldPassword = profileForm.querySelector("input[name='oldPassword']");
+      const password = profileForm.querySelector("input[name='password']");
+      const repassword = profileForm.querySelector("input[name='repeat-password']");
+      // Check if the password and the confirmation password are the same
+      if (oldPassword.value !== "") {
+        if("${User.hashPassword(oldPassword.value)}" !== "${user.password}"){
+          onError(new Error("L'ancien mot de passe ne corresponds pas"));
+          return;
+        }
+        if(password.value !== repassword.value) {
+          onError(new Error("Les mots de passe ne correspondent pas"));
+          return;
+        }
+      }
+      else {
+        password.value = "${user.password}";
+      };
+
+      const {action, method} = profileForm;
+
+      const url = new URL(action);
+      const formData = new FormData(profileForm);
+      for (const [key, value] of formData.entries()) {
+        console.log(key, value);
+        url.searchParams.append(key, value);
+      }
+      url.searchParams.append("id", ${user.id})
+
+      fetch(url, {headers: {"Content-Type": "application/json"}, method})
+        .then(res => res.json())
+        .then(data => {
+          console.log(data)
+          if (data.code !== 200) throw new Error(data.message);
+          onSuccess()
+        })
+        .catch(onError)
+    }
+
+    /**
+     * Handle the error of the form submission
+     * @param error {Error} - Error of the form submission
+     */
+    function onError(error) {
+      console.log("Error:", error)
+
+      // Input fields in red
+      inputs.forEach(input => input.classList.add("is-danger"));
+
+      // Notification
+      const notification = document.createElement("div");
+      notification.classList.add("notification", "is-danger");
+
+      const notificationTitle = document.createElement("p");
+      notificationTitle.classList.add("title", "is-6");
+      notificationTitle.innerHTML = "Erreur";
+
+      const notificationIcon = document.createElement("span");
+      notificationIcon.classList.add("icon");
+      notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
+
+      const notificationMessage = document.createElement("p");
+      notificationMessage.classList.add("subtitle", "is-6");
+      notificationMessage.innerHTML = error.message;
+
+      notificationTitle.appendChild(notificationIcon);
+      notification.appendChild(notificationTitle);
+      notification.appendChild(notificationMessage);
+      document.body.appendChild(notification);
+
+      setTimeout(() => notification.remove(), 5010);
+    }
+
+    /**
+     * Handle the success of the form submission
+     */
+    function onSuccess() {
+      console.log("Succes:", "Modifications effectuées avec succès")
+
+      // Notification
+      const notification = document.createElement("div");
+      notification.classList.add("notification", "is-success");
+
+      const notificationTitle = document.createElement("p");
+      notificationTitle.classList.add("title", "is-6");
+      notificationTitle.innerHTML = "Succès";
+
+      const notificationIcon = document.createElement("span");
+      notificationIcon.classList.add("icon");
+      notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
+
+      const notificationMessage = document.createElement("p");
+      notificationMessage.classList.add("subtitle", "is-6");
+      notificationMessage.innerHTML = "Le profil a été modifié avec succès";
+
+      notificationTitle.appendChild(notificationIcon);
+      notification.appendChild(notificationTitle);
+      notification.appendChild(notificationMessage);
+      document.body.appendChild(notification);
+
+      setTimeout(() => notification.remove(), 5010);
+    }
+    inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));
+
+</script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/forms/reset-password.tag

@@ -24,6 +24,8 @@
 <script defer type="module">
     const resetPasswordForm = document.querySelector("form#reset-password-form");
     const submitButton = document.querySelector("input[type=submit]");
+    const inputs = resetPasswordForm.querySelectorAll("input[type='text'], input[type='password']");
+
 
     // Form fields
     const tokenInput = document.querySelector("input#token");
@@ -68,18 +70,39 @@
      * @param error {Error} - Error of the form submission
      */
     function onError(error) {
-        console.error("Error:", error)
+      console.error("Error:", error)
 
-        // Input fields in red
-        passwordInput.classList.add("is-danger");
-        repasswordInput.classList.add("is-danger");
+      // Input fields in red
+      inputs.forEach(input => {
+        input.classList.add("is-danger");
+        input.style.animation = "shake 0.5s ease-in-out"
+      });
 
-        // Notification
+
+      // Notification
         const notification = document.createElement("div");
         notification.classList.add("notification", "is-danger");
-        notification.innerHTML = error.message;
+
+        const notificationTitle = document.createElement("p");
+        notificationTitle.classList.add("title", "is-6");
+        notificationTitle.innerHTML = "Erreur";
+
+        const notificationIcon = document.createElement("span");
+        notificationIcon.classList.add("icon");
+        notificationIcon.innerHTML = "<i class='fas fa-exclamation-triangle'></i>";
+
+        const notificationMessage = document.createElement("p");
+        notificationMessage.classList.add("subtitle", "is-6");
+        notificationMessage.innerHTML = error.message;
+
+        notificationTitle.appendChild(notificationIcon);
+        notification.appendChild(notificationTitle);
+        notification.appendChild(notificationMessage);
         document.body.appendChild(notification);
+
         setTimeout(() => notification.remove(), 5010);
-    }
+      }
+      inputs.forEach(input => input.addEventListener("animationend", () => input.style.animation = ""));
+
 </script>