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; height: 5rem;
} }
.profil { .logged-out,
.logged-in {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin: 0 1rem; margin: 0 1rem;
} }
.profil > button { .logged-out > button,
.logged-in > button {
background: #fff; background: #fff;
color: #3498db; color: #3498db;
height: 60%; height: 60%;
width: 5rem; width: 5rem;
cursor: pointer; 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/login-signup.css" />
<link rel="stylesheet" href="css/pixels.css" /> <link rel="stylesheet" href="css/pixels.css" />
<script src="js/login-signup.js"></script> <script src="js/login-signup.js"></script>
<script src="js/loaded.js"></script>
</head> </head>
<body> <body onload="pageLoaded();">
<nav> <nav>
<img src="assets/logo.png" /> <img src="assets/logo.png" />
<span class="profil"> <span class="logged-out">
<button onclick="toggleLogin();">Login</button> <button onclick="toggleLoginPopup();">Login</button>
<button onclick="toggleSignup();">Signup</button> <button onclick="toggleSignupPopup();">Signup</button>
<div id="login"> <div id="login">
<button onclick="toggleLogin()" class="close">X</button> <button onclick="toggleLoginPopup()" class="close">
X
</button>
Login Login
<form action="api/user/login" method="post"> <form id="login-form" action="api/user/login" method="post">
<div> <div>
<label>Nickname</label> <label>Nickname</label>
<input type="text" name="username" required /> <input type="text" name="username" required />
@ -39,11 +42,17 @@
</div> </div>
<div id="signup"> <div id="signup">
<button onclick="toggleSignup()" class="close">X</button> <button onclick="toggleSignupPopup()" class="close">
X
</button>
Signup Signup
<form action="api/user/signup" method="post"> <form
id="signup-form"
action="api/user/signup"
method="post"
>
<div> <div>
<label>Nickname</label> <label>Nickname</label>
<input type="text" name="username" required /> <input type="text" name="username" required />
@ -58,6 +67,11 @@
</form> </form>
</div> </div>
</span> </span>
<span class="logged-in">
USERNAME HERE
<button onclick="userLogout();">Logout</button>
</span>
</nav> </nav>
<table id="pixelTable"> <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 = document.getElementById("signup");
signup.style.display = "none"; signup.style.display = "none";
toggleElement("login"); toggleElement("login");
} }
function toggleSignup() { function toggleSignupPopup() {
login = document.getElementById("login"); login = document.getElementById("login");
login.style.display = "none"; login.style.display = "none";
@ -20,3 +20,35 @@ function toggleElement(id) {
element.style.display = "none"; 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");
}
});
}