feat: dev-web - begin front

2026-05-13 17:11:49 +00:00 · 2024-04-05 18:00:33 +02:00
parent eeea468845
commit a541ba929a
13 changed files with 319 additions and 88 deletions
@@ -0,0 +1,33 @@
+/*
+ * LoginServlet.java, 20/03/2024
+ * UPPA M1 TI 2023-2024
+ * Pas de copyright, aucun droits
+ */
+
+package uppa.project.servlet;
+
+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;
+
+@WebServlet(name = "indexServlet", value = "/index")
+public class IndexServlet extends HttpServlet {
+
+  public void init() {
+  }
+
+  public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
+    if (request.getSession().getAttribute("user") != null) {
+      response.sendRedirect(request.getContextPath() + "/main-menu");
+      return;
+    }
+
+    request.getRequestDispatcher("/WEB-INF/views/index.jsp").forward(request, response);
+  }
+
+  public void destroy() {
+  }
+}
@@ -13,16 +13,18 @@
 <nav>
    <a href="${pageContext.request.contextPath}/index"><img src="${pageContext.request.contextPath}/static/img/CardsRushLogo.png" alt="Logo CardsRush"> </a>
    <%  if (currentPage == "register" || currentPage == "forgotten-password" || currentPage == "reset-password"){ %>
-    <button><a href="${pageContext.request.contextPath}/login">Se connecter</a></button>
+    <a class="button" href="${pageContext.request.contextPath}/login">Se connecter</a>
    <% }
        if (currentPage == "login" || currentPage == "forgotten-password" || currentPage == "reset-password") { %>
-    <button> <a href="${pageContext.request.contextPath}/register">S'inscrire</a></button>
+     <a class="button" href="${pageContext.request.contextPath}/register">S'inscrire</a>
    <% } else if (currentPage == "main-menu"){ %>
-        <% User user = (User) request.getAttribute("user"); %>
-        <p>
-            pseudo: <%= user != null ? user.getUsername() : "anonyme"%> <br/>
-            nombre de victoires: <%= user != null ? user.getNbWin() : "0" %>
-        </p>
-        <button><a href="${pageContext.request.contextPath}/logout">Se déconnecter</a></button>
+        <div class="content">
+            <% User user = (User) request.getAttribute("user"); %>
+            <p class="user">
+                <%= user != null ? user.getUsername() : "anonyme"%> <br/>
+                <%= user != null ? user.getNbWin() : "0" %> victoires
+            </p>
+            <a class="button" href="${pageContext.request.contextPath}/logout">Se déconnecter</a>
+        </div>
    <% } %>
 </nav>
@@ -0,0 +1,28 @@
+<%--
+  Created by IntelliJ IDEA.
+  User: kmitr
+  Date: 03/04/2024
+  Time: 14:48
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Card Rush</title>
+    <link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
+    <link href="${pageContext.request.contextPath}/static/css/index.css" rel="stylesheet">
+    <meta charset="utf-8">
+</head>
+<body>
+<%@include file="../components/navbar.jsp" %>
+<div class="content">
+    <h1>Plongez dans l'excitation de cardRush!</h1>
+    <p>Défiez votre réactivité et dominez le jeu avec des amis dans cette course effrénée aux cartes ! Rejoignez maintenant pour vivre l'adrénaline.</p>
+    <div class="buttons">
+        <a class="button" href="${pageContext.request.contextPath}/register">S'inscrire</a>
+        <a class="button" href="${pageContext.request.contextPath}/login">Se connecter</a>
+    </div>
+</div>
+</body>
+</html>
@@ -3,6 +3,7 @@
 <html>
 <head>
    <title> Cards Rush - Connexion</title>
+    <link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/login.js" defer></script>
    <meta charset="utf-8">
@@ -10,31 +11,27 @@
 <body>
 <%@include file="../components/navbar.jsp"%>
 <main>
-    <section id="title">Cards Rush</section>
-    <section id="form">
-        <div class="border-left"></div>
-        <div class="flex-column login-gap">
-            <div>
-                <h1>Login</h1>
-                <form id="login-form" action="${pageContext.request.contextPath}/api/auth/login" method="POST">
+    <div class="flex-column login-gap">
+        <div>
+            <h1>Se connecter</h1>
+            <form id="login-form" action="${pageContext.request.contextPath}/api/auth/login" method="POST">

-                    <label id="username-label" for="username">Username:</label>
-                    <input type="text" id="username" name="username" required>
+                <label id="username-label" for="username">Username:</label>
+                <input type="text" id="username" name="username" required>

-                    <label id="password-label" for="password">Password:</label>
-                    <input type="password" id="password" name="password" required>
+                <label id="password-label" for="password">Password:</label>
+                <input type="password" id="password" name="password" required>

-                    <input id="login-submit" type="submit" value="Login">
+                <input class="button" id="login-submit" type="submit" value="Login">

-                </form>
-            </div>
-            <div>
-                <p><a href="${pageContext.request.contextPath}/forgotten-password">Forgotten password?</a></p>
-                <hr>
-                <p>Don't have an account? <a href="${pageContext.request.contextPath}/register">Register</a></p>
-            </div>
+            </form>
        </div>
-    </section>
+        <div>
+            <p><a href="${pageContext.request.contextPath}/forgotten-password">Forgotten password?</a></p>
+            <hr>
+            <p>Don't have an account? <a href="${pageContext.request.contextPath}/register">Register</a></p>
+        </div>
+    </div>
 </main>
 </body>
 </html>
@@ -5,7 +5,9 @@
 <html>
 <head>
  <title>Cards Rush</title>
-<%--  <link href="${pageContext.request.contextPath}/static/css/main-menu.css" rel="stylesheet">--%>
+  <link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
+  <link href="${pageContext.request.contextPath}/static/css/main-menu.css" rel="stylesheet">
+  <link href="${pageContext.request.contextPath}/static/css/modal.css" rel="stylesheet">
  <script src="${pageContext.request.contextPath}/static/js/modal.js" defer></script>
  <script src="${pageContext.request.contextPath}/static/js/new-game.js" defer></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -14,10 +16,10 @@
 <%@include file="../components/navbar.jsp"%>
  <main>
    <section id="main">
-      <h1 id="Title">Titre du jeu</h1>
+      <h1 id="title">Cards Rush!</h1>
      <div class="main-button">
-        <button class="modal-toggle" data-target="#newGameModal" >Nouvelle Partie</button>
-        <button class="modal-toggle" data-target="#statisticsModal" >Statistiques</button>
+        <button class="modal-toggle button" data-target="#newGameModal" >Nouvelle Partie</button>
+        <button class="modal-toggle button" data-target="#statisticsModal" >Statistiques</button>
      </div>
    </section>
    <%@include file="../components/new-game.jsp"%>
@@ -3,18 +3,16 @@
 <html>
 <head>
  <title>Register</title>
+  <link href="${pageContext.request.contextPath}/static/css/global.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/css/login.css" rel="stylesheet">
  <script src="${pageContext.request.contextPath}/static/js/register.js" defer></script>
 </head>
 <body>
 <%@include file="../components/navbar.jsp"%>
 <main>
-  <section id="title">Inscription</section>
-  <section id="form">
-    <div class="border-left"></div>
    <div class="flex-column register-gap">
      <div>
-        <h1>Register</h1>
+        <h1>S'inscrire</h1>
        <form id="register-form" action="${pageContext.request.contextPath}/api/auth/register" method="POST">

          <label for="email">Email :</label>
@@ -26,7 +24,7 @@
          <label for="password">Mot de passe :</label>
          <input type="password" id="password" name="password" required>

-          <label for="confirmPassword">Confirmez le mot de pass :</label>
+          <label for="confirmPassword">Confirmez le mot de passe :</label>
          <input type="password" id="confirmPassword" name="confirmPassword" required>

          <label for="birthdate">Date de naissance :</label>
@@ -40,7 +38,7 @@
            <option value="OTHER">Autre</option>
          </select>

-          <input id="register-submit" type="submit" value="Register">
+          <input class="button" id="register-submit" type="submit" value="Register">
        </form>
      </div>
      <div>
@@ -48,7 +46,6 @@
        <p>Déjà un compte ? <a href="${pageContext.request.contextPath}/login">Se connecter</a></p>
      </div>
    </div>
-  </section>
 </main>

 </body>
@@ -0,0 +1,39 @@
+:root {
+    --color-red-800: #991B1B;
+    --color-rose-700: #BE123C;
+    --sizes-button-input-nav-larger-padding-v: 12px;
+    --sizes-button-input-nav-larger-padding-h: 32px;
+    --sizes-button-input-nav-larger-gap: 12px;
+    --Button-Border-radius: 8px;
+    --Button-Light-Default-Border: rgba(255, 255, 255, 0.00);
+    --Button-Light-Default-Background: rgba(255, 255, 255, 0.30);
+}
+
+html{
+    height: 100%;
+    width: 100%;
+}
+
+
+body {
+    width: 100%;
+    height: 832px;
+    flex-shrink: 0;
+    background: url("../img/Home.svg") lightgray 50% / cover no-repeat;
+    opacity: 0.6;
+    color: #FFF;
+}
+
+a.button, input.button button.button{
+    display: flex;
+    padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
+    justify-content: center;
+    align-items: center;
+    gap: var(--sizes-button-input-nav-larger-gap);
+    border-radius: var(--Button-Border-radius);
+    border: 1px solid var(--Button-Light-Default-Border);
+    background: var(--Button-Light-Default-Background);
+    color: #FFF;
+    text-decoration: none;
+    height: fit-content;
+}
@@ -0,0 +1,56 @@
+html{
+    height: 100%;
+}
+
+.content {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 30px;
+    padding: 10%
+}
+
+h1 {
+    width: 656px;
+    height: 122px;
+    color: #FFF;
+
+    font-family: Poppins;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 63px; /* 131.25% */
+    letter-spacing: 0.48px;
+}
+
+p {
+    width: 389px;
+
+    color: #FFF;
+
+    /* Text/Medium */
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+}
+
+.buttons {
+    display: flex;
+    align-items: flex-start;
+    gap: 30px;
+}
+
+a.button{
+    display: flex;
+    padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
+    justify-content: center;
+    align-items: center;
+    gap: var(--sizes-button-input-nav-larger-gap);
+    border-radius: var(--Button-Border-radius);
+    border: 1px solid var(--Button-Light-Default-Border);
+    background: var(--Button-Light-Default-Background);
+    color: #FFF;
+    text-decoration: none;
+}
@@ -1,19 +1,13 @@
-html {
-    height: 100%;
-    display: flex;
-    align-items: center;
+:root {
+    --spacing-615-rem-24-px: 12px;
 }
-
-body {
-    width: 100%;
-}
-
 main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
+    justify-content: center;
 }

 /*Common */
@@ -42,39 +36,35 @@ hr {
 }

 h1 {
-    justify-self: center;
-}

-.flex-column {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
+    font-family: Poppins;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 63px; /* 131.25% */
+    letter-spacing: 0.48px;
 }

-.login-gap {
-    gap: 20px;
-}
-
-.register-gap {
-    gap: 75px;
-}
-
-
 #login-form, #register-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 8% 2%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-615-rem-24-px);
 }

-#login-submit {
-    grid-column: 2/2;
-    grid-row: 3/3;
-    justify-self: right;
+label {
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
 }

-#register-submit {
-    grid-column: 2/2;
-    grid-row: 7/7;
-    justify-self: right;
-
+input {
+    width: 100%;
+}
+
+a {
+    color: #ffffff;
+    bold: true;
 }
@@ -0,0 +1,41 @@
+#main {
+    width: 100%;
+    display: inline-flex;
+    height: 392px;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+#title {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 80px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 63px; /* 78.75% */
+    letter-spacing: 0.8px;
+}
+
+.main-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+button {
+    display: flex;
+    padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
+    justify-content: center;
+    align-items: center;
+    gap: var(--sizes-button-input-nav-larger-gap);
+    border-radius: var(--Button-Border-radius);
+    border: 1px solid var(--Button-Light-Default-Border);
+    background: var(--Button-Light-Default-Background);
+    color: #FFF;
+    text-decoration: none;
+    height: fit-content;
+}
@@ -1,17 +1,5 @@
-body {
-    font-family: sans-serif;
-    padding: 30px;
-}
-
-.demo-description {
-    max-width: 460px;
-    margin: 0 auto;
-    line-height: 1.5;
-}
-
 .modal-toggle {
    cursor: pointer;
-    color: #268bd2;
 }

 .modal-wrapper {
@@ -1,5 +1,15 @@
 nav {
    display: flex;
-    justify-content: right;
+    flex-direction: row;
+    justify-content: space-between;
    padding: 10px;
 }
+.content {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+}
+
+p.user{
+    padding:10px;
+}