ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: login/logout/signup frontend functionnal

Browse source
This commit is contained in:
Laureηt 2022-05-27 16:54:59 +02:00
parent 2f6ee4a742
commit a8f6b30f1f
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
4 changed files with 95 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/main/webapp/css/title-bar.css
View file

@ -6,17 +6,23 @@ nav {
height: 5rem;
}
.profil {
.logged-out,
.logged-in {
display: flex;
align-items: center;
gap: 1rem;
margin: 0 1rem;
}
.profil > button {
.logged-out > button,
.logged-in > button {
background: #fff;
color: #3498db;
height: 60%;
width: 5rem;
cursor: pointer;
}
.logged-in {
display: none;
}

30
src/main/webapp/index.html
View file

@ -8,22 +8,25 @@
<link rel="stylesheet" href="css/login-signup.css" />
<link rel="stylesheet" href="css/pixels.css" />
<script src="js/login-signup.js"></script>
<script src="js/loaded.js"></script>
</head>
<body>
<body onload="pageLoaded();">
<nav>
<img src="assets/logo.png" />
<span class="profil">
<button onclick="toggleLogin();">Login</button>
<button onclick="toggleSignup();">Signup</button>
<span class="logged-out">
<button onclick="toggleLoginPopup();">Login</button>
<button onclick="toggleSignupPopup();">Signup</button>
<div id="login">
<button onclick="toggleLogin()" class="close">X</button>
<button onclick="toggleLoginPopup()" class="close">
X
</button>
Login
<form action="api/user/login" method="post">
<form id="login-form" action="api/user/login" method="post">
<div>
<label>Nickname</label>
<input type="text" name="username" required />
@ -39,11 +42,17 @@
</div>
<div id="signup">
<button onclick="toggleSignup()" class="close">X</button>
<button onclick="toggleSignupPopup()" class="close">
X
</button>
Signup
<form action="api/user/signup" method="post">
<form
id="signup-form"
action="api/user/signup"
method="post"
>
<div>
<label>Nickname</label>
<input type="text" name="username" required />
@ -58,6 +67,11 @@
</form>
</div>
</span>
<span class="logged-in">
USERNAME HERE
<button onclick="userLogout();">Logout</button>
</span>
</nav>
<table id="pixelTable">

31
src/main/webapp/js/loaded.js Normal file
View file

@ -0,0 +1,31 @@
function pageLoaded() {
document.forms["login-form"].addEventListener("submit", (event) => {
event.preventDefault();
fetch(event.target.action, {
method: "POST",
body: new URLSearchParams(new FormData(event.target)),
}).then((resp) => {
if (resp.ok) {
userLogin();
console.log("logged in !");
toggleLoginPopup();
}
});
});
document.forms["signup-form"].addEventListener("submit", (event) => {
event.preventDefault();
fetch(event.target.action, {
method: "POST",
body: new URLSearchParams(new FormData(event.target)),
}).then((resp) => {
if (resp.ok) {
userLogin();
console.log("signed up ! (and logged in)");
toggleSignupPopup();
}
});
});
}

36
src/main/webapp/js/login-signup.js
View file

@ -1,11 +1,11 @@
function toggleLogin() {
function toggleLoginPopup() {
signup = document.getElementById("signup");
signup.style.display = "none";
toggleElement("login");
}
function toggleSignup() {
function toggleSignupPopup() {
login = document.getElementById("login");
login.style.display = "none";
@ -20,3 +20,35 @@ function toggleElement(id) {
element.style.display = "none";
}
}
function userLogin() {
let elements = document.getElementsByClassName("logged-out");
for (element of elements) {
element.style.display = "none";
}
elements = document.getElementsByClassName("logged-in");
for (element of elements) {
element.style.display = "flex";
}
}
function userLogout() {
fetch("/api/user/logout", {
method: "POST",
}).then((resp) => {
if (resp.ok) {
let elements = document.getElementsByClassName("logged-out");
for (element of elements) {
element.style.display = "flex";
}
elements = document.getElementsByClassName("logged-in");
for (element of elements) {
element.style.display = "none";
}
console.log("logged out");
}
});
}