From a8f6b30f1f95f4ef31e09770a49e248e7fd6a319 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laure=CE=B7t?= Date: Fri, 27 May 2022 16:54:59 +0200 Subject: [PATCH] feat: login/logout/signup frontend functionnal --- src/main/webapp/css/title-bar.css | 10 +++++++-- src/main/webapp/index.html | 30 ++++++++++++++++++------- src/main/webapp/js/loaded.js | 31 +++++++++++++++++++++++++ src/main/webapp/js/login-signup.js | 36 ++++++++++++++++++++++++++++-- 4 files changed, 95 insertions(+), 12 deletions(-) create mode 100644 src/main/webapp/js/loaded.js diff --git a/src/main/webapp/css/title-bar.css b/src/main/webapp/css/title-bar.css index fa85748..f1cfdb8 100644 --- a/src/main/webapp/css/title-bar.css +++ b/src/main/webapp/css/title-bar.css @@ -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; +} diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index 6d53d62..f757281 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -8,22 +8,25 @@ + - + diff --git a/src/main/webapp/js/loaded.js b/src/main/webapp/js/loaded.js new file mode 100644 index 0000000..ddfd0a5 --- /dev/null +++ b/src/main/webapp/js/loaded.js @@ -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(); + } + }); + }); +} diff --git a/src/main/webapp/js/login-signup.js b/src/main/webapp/js/login-signup.js index 5daba72..37920aa 100644 --- a/src/main/webapp/js/login-signup.js +++ b/src/main/webapp/js/login-signup.js @@ -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"); + } + }); +}