Finalize frontend of session management
This commit is contained in:
@@ -21,6 +21,27 @@ button {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
input {
|
||||
outline: none;
|
||||
font-family: "WDXL Lubrifont JP N", sans-serif;
|
||||
font-size: 18px;
|
||||
background-color: white;
|
||||
color: #1b262c;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #90bdd9;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-family: "WDXL Lubrifont JP N", sans-serif;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: #adcee3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
@@ -72,9 +93,10 @@ button {
|
||||
|
||||
.info {
|
||||
margin-bottom: 10px;
|
||||
color: red;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
opacity: none;
|
||||
font-family: "WDXL Lubrifont JP N", sans-serif;
|
||||
}
|
||||
|
||||
.info:empty::before {
|
||||
@@ -132,6 +154,21 @@ button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.account-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #90bdd9;
|
||||
font-size: 23px;
|
||||
margin-right: 10px;
|
||||
font-family: "WDXL Lubrifont JP N", sans-serif;
|
||||
}
|
||||
|
||||
.account-button:hover {
|
||||
color: #adcee3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.pixelart {
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
|
||||
@@ -1,130 +1,145 @@
|
||||
window.onload = async () => {
|
||||
const login_form = document.getElementById("login-form");
|
||||
const login_button = document.getElementById("login-button");
|
||||
const signup_form = document.getElementById("signup-form");
|
||||
const signup_button = document.getElementById("signup-button");
|
||||
const logout_button = document.getElementById("logout-button");
|
||||
const forgot_button = document.getElementById("forgot-button");
|
||||
const forgot_form = document.getElementById("forgot-form");
|
||||
const popup = document.getElementById("popup");
|
||||
const loginSection = document.getElementById("login");
|
||||
const signupSection = document.getElementById("signup");
|
||||
const forgotPassSection = document.getElementById("forgot-pass");
|
||||
const resetPassSection = document.getElementById("reset-pass");
|
||||
|
||||
forgot_button.onclick = () => {
|
||||
document.getElementById("popup").classList.add("active");
|
||||
document.getElementById("forgot-pass").classList.add("active");
|
||||
document.getElementById("login").classList.remove("active");
|
||||
document.getElementById("signup").classList.remove("active");
|
||||
document.getElementById("reset-pass").classList.remove("active");
|
||||
const loginForm = document.getElementById("login-form");
|
||||
const signupForm = document.getElementById("signup-form");
|
||||
const forgotForm = document.getElementById("forgot-form");
|
||||
const resetForm = document.getElementById("reset-form");
|
||||
|
||||
const loginInfo = document.getElementById("login-info");
|
||||
const signupInfo = document.getElementById("signup-info");
|
||||
const forgotInfo = document.getElementById("forgot-info");
|
||||
const resetInfo = document.getElementById("reset-info");
|
||||
|
||||
const loginButton = document.getElementById("login-button");
|
||||
const signupButton = document.getElementById("signup-button");
|
||||
const logoutButton = document.getElementById("logout-button");
|
||||
const forgotButton = document.getElementById("forgot-link");
|
||||
const closeButton = document.getElementById("close");
|
||||
|
||||
const signedInMeta = document.querySelector('meta[name="signed_in"]');
|
||||
const isSignedIn = signedInMeta?.content === "true";
|
||||
if (isSignedIn) {
|
||||
loginButton.style.display = "none";
|
||||
signupButton.style.display = "none";
|
||||
} else {
|
||||
logoutButton.style.display = "none";
|
||||
}
|
||||
|
||||
const showPopup = (section) => {
|
||||
popup.classList.add("active");
|
||||
loginSection.classList.remove("active");
|
||||
signupSection.classList.remove("active");
|
||||
forgotPassSection.classList.remove("active");
|
||||
resetPassSection.classList.remove("active");
|
||||
if (section) section.classList.add("active");
|
||||
};
|
||||
|
||||
forgot_form.onsubmit = async (e) => {
|
||||
const hidePopup = () => {
|
||||
popup.classList.remove("active");
|
||||
loginSection.classList.remove("active");
|
||||
signupSection.classList.remove("active");
|
||||
forgotPassSection.classList.remove("active");
|
||||
resetPassSection.classList.remove("active");
|
||||
};
|
||||
|
||||
loginButton?.addEventListener("click", () => showPopup(loginSection));
|
||||
signupButton?.addEventListener("click", () => showPopup(signupSection));
|
||||
logoutButton?.addEventListener(
|
||||
"click",
|
||||
() => (window.location.href = "/logout"),
|
||||
);
|
||||
forgotButton?.addEventListener("click", () => showPopup(forgotPassSection));
|
||||
closeButton?.addEventListener("click", hidePopup);
|
||||
|
||||
// TODO: if succesful hide form and popup success message
|
||||
loginForm?.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const email = forgot_form.email.value;
|
||||
const { username, pass } = loginForm;
|
||||
const res = await fetch("/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username: username.value, pass: pass.value }),
|
||||
});
|
||||
const data = await res.json();
|
||||
loginInfo.innerText = data.message;
|
||||
if (data.success == "true") {
|
||||
loginButton.style.display = "none";
|
||||
signupButton.style.display = "none";
|
||||
logoutButton.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
// TODO: if succesful hide form and popup success message
|
||||
signupForm?.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const { username, email, pass } = signupForm;
|
||||
const res = await fetch("/signup", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
username: username.value,
|
||||
email: email.value,
|
||||
pass: pass.value,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
signupInfo.innerText = data.message;
|
||||
if (data.success == "true") {
|
||||
loginButton.style.display = "none";
|
||||
signupButton.style.display = "none";
|
||||
logoutButton.style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
forgotForm?.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const email = forgotForm.email.value;
|
||||
const res = await fetch("/forgot_password", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email }),
|
||||
});
|
||||
const data = await res.json();
|
||||
document.getElementById("forgot-info").innerHTML = data.message;
|
||||
};
|
||||
|
||||
logout_button.onclick = () => {
|
||||
window.location.href = "/logout";
|
||||
};
|
||||
|
||||
login_button.onclick = () => {
|
||||
document.getElementById("popup").classList.add("active");
|
||||
document.getElementById("login").classList.add("active");
|
||||
document.getElementById("signup").classList.remove("active");
|
||||
document.getElementById("forgot-pass").classList.remove("active");
|
||||
document.getElementById("reset-pass").classList.remove("active");
|
||||
};
|
||||
|
||||
signup_button.onclick = () => {
|
||||
document.getElementById("popup").classList.add("active");
|
||||
document.getElementById("signup").classList.add("active");
|
||||
document.getElementById("login").classList.remove("active");
|
||||
document.getElementById("forgot-pass").classList.remove("active");
|
||||
document.getElementById("reset-pass").classList.remove("active");
|
||||
};
|
||||
|
||||
document.getElementById("close").onclick = () => {
|
||||
document.getElementById("popup").classList.remove("active");
|
||||
document.getElementById("login").classList.remove("active");
|
||||
document.getElementById("signup").classList.remove("active");
|
||||
document.getElementById("forgot-pass").classList.remove("active");
|
||||
document.getElementById("reset-pass").classList.remove("active");
|
||||
};
|
||||
|
||||
login_form.onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const username = login_form.username.value;
|
||||
const pass = login_form.pass.value;
|
||||
let response = await fetch("/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ username, pass }),
|
||||
});
|
||||
response = await response.json();
|
||||
document.getElementById("login-info").innerText = response.message;
|
||||
};
|
||||
|
||||
signup_form.onsubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const username = signup_form.username.value;
|
||||
const email = signup_form.email.value;
|
||||
const pass = signup_form.pass.value;
|
||||
let response = await fetch("/signup", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ username, email, pass }),
|
||||
});
|
||||
response = await response.json();
|
||||
document.getElementById("signup-info").innerText = response.message;
|
||||
};
|
||||
forgotInfo.innerHTML = data.message;
|
||||
});
|
||||
|
||||
// Handle reset code in URL
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const reset_code = params.get("reset_code");
|
||||
if (reset_code) {
|
||||
let response = await fetch("/pass_reset?", {
|
||||
const resetCode = params.get("reset_code");
|
||||
|
||||
if (resetCode) {
|
||||
const res = await fetch("/pass_reset?", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ code: reset_code }),
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ code: resetCode }),
|
||||
});
|
||||
let status = response.status;
|
||||
if (status == 200) {
|
||||
document.getElementById("popup").classList.add("active");
|
||||
document.getElementById("reset-pass").classList.add("active");
|
||||
document.getElementById("login").classList.remove("active");
|
||||
document.getElementById("signup").classList.remove("active");
|
||||
document.getElementById("forgot-pass").classList.remove("active");
|
||||
document.getElementById("reset-form").onsubmit = async (e) => {
|
||||
|
||||
if (res.status === 200) {
|
||||
showPopup(resetPassSection);
|
||||
|
||||
resetForm?.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const pass = document.getElementById("reset-form").pass.value;
|
||||
const pass_confirm =
|
||||
document.getElementById("reset-form").pass_confirm.value;
|
||||
if (pass != pass_confirm) {
|
||||
document.getElementById("reset-info").innerText =
|
||||
"Passwords do not match";
|
||||
const pass = resetForm.pass.value;
|
||||
const passConfirm = resetForm.pass_confirm.value;
|
||||
|
||||
if (pass !== passConfirm) {
|
||||
resetInfo.innerText = "Passwords do not match";
|
||||
return;
|
||||
}
|
||||
let response = await fetch("/reset_password/" + reset_code, {
|
||||
|
||||
const res = await fetch(`/reset_password/${resetCode}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ pass }),
|
||||
});
|
||||
response = await response.json();
|
||||
document.getElementById("reset-info").innerText = response.message;
|
||||
};
|
||||
const data = await res.json();
|
||||
resetInfo.innerText = data.message;
|
||||
});
|
||||
} else {
|
||||
window.location.href = "/";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user