lucasvbr/Cards-Rush
1
0
Fork 0
mirror of https://github.com/kmitresse/Cards-Rush.git synced 2026-05-16 09:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dev-web - frontend login, register, dashboard

Browse Source
This commit is contained in:
kmitresse
2024-03-20 13:41:23 +01:00
parent 19ba5514b4
commit 6229718c4f
14 changed files with 280 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
S2/DevWeb/Projet/src/main/webapp/css/dashboard.css
+27
View File
@@ -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;
}
S2/DevWeb/Projet/src/main/webapp/css/login.css
+40 -22
View File
@@ -16,47 +16,65 @@ main {
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 {
width: 18%;
display: flex;
flex-direction: row;
height: 100%;
border-left: ridge;
padding-left: 6%;
}
h1 {
justify-self: center;
}
#loginForm, #registerForm {
display: grid;
}
.field {
.flex-column {
display: flex;
flex-direction: row;
width: auto;
justify-content: space-between;
margin: 1%;
flex-direction: column;
justify-content: left;
}
#birthdate {
width: 59%;
text-align: right;
.login-gap {
gap: 20px;
}
.submit {
.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;
width: 35%;
margin: 1%;
}
p {
border-top: ridge;
padding-top: 5%;
}
#register-submit {
grid-column: 2/2;
grid-row: 7/7;
justify-self: right;
}
S2/DevWeb/Projet/src/main/webapp/css/nav.css
+5
View File
@@ -0,0 +1,5 @@
nav {
display: flex;
justify-content: right;
padding: 10px;
}
S2/DevWeb/Projet/src/main/webapp/dashboard.jsp
+14 -4
View File
@@ -4,10 +4,20 @@
<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>
</html>
S2/DevWeb/Projet/src/main/webapp/index.jsp
+16 -2
View File
@@ -1,11 +1,25 @@
<%@ page import="static jdk.internal.net.http.common.Utils.dump" %>
<%@ page import="uppa.project.pojo.User" %>
<%@ page import="uppa.project.dao.jpa.Game_JPA_DAO_Factory" %>
<%@ page import="uppa.project.dao.DAO" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
User user = (User) (request.getAttribute("session"));
%>
<!DOCTYPE html>
<html>
<head>
<title>JSP - Hello World</title>
</head>
<body>
<% if (user == null) { %>
<%-- Pas de user connecté -> On envoi sur la page de connection --%>
<jsp:include page="login.jsp"></jsp:include>
<% } else {
session.setAttribute("sessionUser", session);
%>
<jsp:include page="dashboard.jsp"></jsp:include>
<% } %>
</body>
</html>
</html>
S2/DevWeb/Projet/src/main/webapp/js/login.js
+3 -3
View File
@@ -17,9 +17,9 @@ loginForm.addEventListener("submit", (event) => {
})
.then(res => res.json())
.then(data => {
if (data)
window.location.href = action;
console.log(data);
if (data.status == 200) window.location.href = action;
})
.catch(error => console.error("Error:", error))
;
});
});
S2/DevWeb/Projet/src/main/webapp/login.jsp
+20 -16
View File
@@ -11,23 +11,27 @@
<main>
<section id="title"> Titre du jeu </section>
<section id="form">
<h1>Login</h1>
<form id="loginForm" data-login-endpoint="api/login" action="dashboard.jsp" method="POST">
<div class="field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<div class="border-left"></div>
<div class="flex-column login-gap">
<div>
<h1>Login</h1>
<form id="login-form" data-login-endpoint="api/login" action="dashboard.jsp" 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>
<hr>
<p>Don't have an account? <a href="register.jsp">Register</a></p>
</div>
</div>
<div class="field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<input class="submit" type="submit" value="Login">
<p>Don't have an account? <a href="register.jsp">Register</a></p>
</form>
</section>
</main>
S2/DevWeb/Projet/src/main/webapp/navBar.jsp
+14
View File
@@ -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>
S2/DevWeb/Projet/src/main/webapp/newGame.jsp
+43
View File
@@ -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>
S2/DevWeb/Projet/src/main/webapp/register.jsp
+36 -35
View File
@@ -9,43 +9,44 @@
<main>
<section id="title">Titre du jeu</section>
<section id="form"><h1>Register</h1>
<form id="registerForm"action="register" method="post">
<div class="field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<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 class="field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div>
<hr>
<p>Already have an account? <a href="login.jsp">Login</a></p>
</div>
<div class="field">
<label for="password">RePassword:</label>
<input type="password" id="repassword" name="password" required>
</div>
<div class="field">
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
</div>
<div class="field">
<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>
</div>
<input class="submit" type="submit" value="Login">
<p>Already have an account? <a href="login.jsp">Login</a></p>
</form>
</div>
</section>
</main>