feat: login/logout/signup frontend functionnal
This commit is contained in:
parent
2f6ee4a742
commit
a8f6b30f1f
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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
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 = 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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue