feat: login/logout/signup frontend functionnal
This commit is contained in:
parent
2f6ee4a742
commit
a8f6b30f1f
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
31
src/main/webapp/js/loaded.js
Normal 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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue