draft(DevWeb): Rooting by servlet

2026-07-09 13:27:45 +00:00 · 2024-03-20 17:20:27 +01:00
parent a8496d6124
commit 3cfece25e3
14 changed files with 110 additions and 30 deletions
@@ -0,0 +1,27 @@
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+#main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#Title {
+    text-align: center;
+    justify-self: center;
+    font-size: xxx-large;
+}
+
+.main-button {
+    display: flex;
+    flex-direction: column;
+    width: 180px;
+}
+
+input {
+    font-size: x-large;
+    margin: 10px 0;
+}
@@ -0,0 +1,80 @@
+html {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+body {
+    width: 100%;
+}
+
+main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+/*Common */
+
+hr {
+    width: 100%;
+}
+
+.border-left {
+    border-left: ridge;
+    padding-left: 6%;
+}
+
+/*Section titre*/
+#title {
+    width:60%;
+    text-align: center;
+    font-size: xxx-large;
+}
+
+/*Section login / register*/
+#form {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+h1 {
+    justify-self: center;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+
+.login-gap {
+    gap: 20px;
+}
+
+.register-gap {
+    gap: 75px;
+}
+
+
+#login-form, #register-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 8% 2%;
+}
+
+#login-submit {
+    grid-column: 2/2;
+    grid-row: 3/3;
+    justify-self: right;
+}
+
+#register-submit {
+    grid-column: 2/2;
+    grid-row: 7/7;
+    justify-self: right;
+
+}
@@ -0,0 +1,5 @@
+nav {
+    display: flex;
+    justify-content: right;
+    padding: 10px;
+}
@@ -0,0 +1,16 @@
+<%--
+  Created by IntelliJ IDEA.
+  User: lucas
+  Date: 20/03/2024
+  Time: 16:47
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<html>
+<head>
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
@@ -0,0 +1,25 @@
+const loginForm = document.getElementById("loginForm");
+
+loginForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const formData = new FormData(loginForm);
+    const data = {};
+    formData.forEach((value, key) => data[key] = value);
+
+    const action = loginForm.getAttribute("action")
+    const endpoint = loginForm.getAttribute("data-login-endpoint");
+    const method = loginForm.getAttribute("method")
+
+    fetch(endpoint, {
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify(data),
+        method,
+    })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data);
+            if (data.status == 200) window.location.href = action;
+        })
+        .catch(error => console.error("Error:", error))
+    ;
+});
@@ -0,0 +1,43 @@
+<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Login</title>
+    <script defer type="text/javascript" src="js/login.js"></script>
+    <link rel="stylesheet" href="css/login.css"/>
+</head>
+<body>
+
+<main>
+    <section id="title"> Titre du jeu </section>
+    <section id="form">
+        <div class="border-left"></div>
+        <div class="flex-column login-gap">
+            <div>
+                <h1>Login</h1>
+                <form id="login-form"
+                      data-login-endpoint="${pageContext.request.contextPath}/login"
+                      action="${pageContext.request.contextPath}/login"
+                      method="POST">
+
+                    <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>
+
+                    <input id="login-submit" type="submit" value="Login">
+
+                </form>
+            </div>
+            <div>
+                <p><a href="forgottenPassword.jsp">Forgotten password?</a></p>
+                <hr>
+                <p>Don't have an account? <a href="register.jsp">Register</a></p>
+            </div>
+        </div>
+    </section>
+</main>
+
+</body>
+</html>
@@ -0,0 +1,23 @@
+<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dashboard</title>
+  <link rel="stylesheet" href="css/dashboard.css"/>
+  <link rel="stylesheet" href="css/nav.css"/>
+</head>
+<body>
+  <main>
+    <jsp:include page="navBar.jsp"></jsp:include>
+    <section id="main">
+      <h1 id="Title">Titre du jeu</h1>
+      <div class="main-button">
+        <input type="button" value="New game" >
+        <input type="button" value="Hard mode" >
+        <input type="button" value="Statistics" >
+      </div>
+    </section>
+  </main>
+</body>
+</html>
@@ -0,0 +1,14 @@
+<%--
+  Created by IntelliJ IDEA.
+  User: kmitr
+  Date: 19/03/2024
+  Time: 11:42
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<nav>
+    <p>
+        username: <!-- Récuperer le nom utilisateur --> <br/>
+        best score: <!-- Récuperer le meilleur score -->
+    </p>
+</nav>
@@ -0,0 +1,43 @@
+<%--
+  Created by IntelliJ IDEA.
+  User: kmitr
+  Date: 19/03/2024
+  Time: 15:47
+  To change this template use File | Settings | File Templates.
+--%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<html>
+<head>
+    <title>Title</title>
+</head>
+<body>
+    <main>
+        <section id="newGame">
+            <h1> New Game</h1>
+            <div id="settings">
+                <form>
+                    <label for="nbRounds">Nb Rounds</label>
+                    <input type="number" id="nbRounds" name="nbRounds" min="1" max="50" value="10">
+                    <label for="timer">Timer</label>
+                    <input type="number" id="timer" name="timer" min="1" max="10" value="5">
+                    <label for="nbColors">Nb colors</label>
+                    <input type="range" id="nbColors" name="nbColors" min="1" max="4" value="4">
+                    <label for="nbValues">Nb values per colors</label>
+                    <input type="range" id="nbValues" name="nbValues" min="5" max="13" value="13">
+                </form>
+            </div>
+            <div id="players-selection">
+                <table>
+                    <tr>
+                        <th>User</th>
+                        <th>Game played</th>
+                        <th>Game won</th>
+                        <th>Invite</th>
+                    </tr>
+                    <%-- Récuperer les joueurs connecter et les lister sous forme de tableau--%>
+                </table>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
@@ -0,0 +1,54 @@
+<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Register</title>
+  <link rel="stylesheet" href="css/login.css"/>
+</head>
+<body>
+
+<main>
+  <section id="title">Titre du jeu</section>
+  <section id="form">
+    <div class="border-left"></div>
+    <div class="flex-column register-gap">
+      <div>
+        <h1>Register</h1>
+        <form id="register-form" action="register" method="post">
+
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" required>
+
+          <label for="username">Username:</label>
+          <input type="text" id="username" name="username" required>
+
+          <label for="password">Password:</label>
+          <input type="password" id="password" name="password" required>
+
+          <label for="password">RePassword:</label>
+          <input type="password" id="repassword" name="password" required>
+
+          <label for="birthdate">Birthdate:</label>
+          <input type="date" id="birthdate" name="birthdate" required>
+
+          <label for="gender">Gender:</label>
+          <select name="gender" id="gender">
+            <option value="">--Please choose an option--</option>
+            <option value="male">Mâle</option>
+            <option value="female">Female</option>
+            <option value="non-binary">Non-binary</option>
+          </select>
+
+          <input id="register-submit" type="submit" value="Register">
+        </form>
+      </div>
+      <div>
+        <hr>
+        <p>Already have an account? <a href="login.jsp">Login</a></p>
+      </div>
+    </div>
+  </section>
+</main>
+
+</body>
+</html>