SyedM/infinsweeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make accounts frontend!

Browse Source
This commit is contained in:
Syed Daanish
2025-06-26 18:08:59 +03:00
parent 652b391d6f
commit 169c4faa7d
7 changed files with 285 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/src/assets/fonts/changa.woff
View File

Binary file not shown.

107
public/src/assets/style.css
View File

@@ -1,15 +1,10 @@
@import url("https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&display=swap");
body {
margin: 0;
overflow: hidden;
}
@font-face {
font-family: "Changa";
src: url("fonts/changa.woff") format("opentype");
font-weight: normal;
font-style: normal;
}
.header {
width: 100%;
height: 90px;
@@ -18,7 +13,12 @@ body {
display: flex;
align-items: center;
justify-content: space-between;
font-family: "Changa";
font-family: "WDXL Lubrifont JP N", sans-serif;
}
button {
font-family: "WDXL Lubrifont JP N", sans-serif;
font-size: 18px;
}
.logo {
@@ -32,17 +32,100 @@ body {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
width: 400px;
padding-top: 20px;
background-color: #1b262c70;
backdrop-filter: blur(8px);
display: none;
border-radius: 30px;
justify-content: center;
align-items: center;
z-index: 9999;
}
.close {
position: absolute;
top: 5px;
right: 15px;
font-size: 24px;
cursor: pointer;
font-size: 29px;
color: white;
}
.close:hover {
color: #fa908c;
}
.popup.active {
display: flex;
}
.popup-tab {
display: none;
width: calc(100% - 60px);
height: calc(100% - 60px);
padding: 20px 30px;
border-radius: 8px;
padding: 30px;
}
.info {
margin-bottom: 10px;
color: red;
font-weight: bold;
opacity: none;
}
.info:empty::before {
content: "\00a0";
visibility: hidden;
display: inline-block;
}
.info.active {
opacity: 1;
}
.form {
display: flex;
gap: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
height: 80%;
}
.form input {
padding: 10px;
width: 80%;
border: 1px solid #ccc;
border-radius: 12px;
}
.form label {
font-size: 16px;
font-family: "WDXL Lubrifont JP N", sans-serif;
color: white;
}
.form button {
margin-top: 20px;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
width: 25%;
border-radius: 12px;
cursor: pointer;
}
.form button:hover {
background-color: #2980b9;
}
.popup-tab.active {
display: block;
}
.header-right {

165
public/src/js/accounts.js
View File

@@ -1,43 +1,132 @@
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");
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");
login_button.onclick = () => {
document.getElementById("login").style.display = "block";
};
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");
};
signup_button.onclick = () => {
document.getElementById("signup").style.display = "block";
};
forgot_form.onsubmit = async (e) => {
e.preventDefault();
const email = forgot_form.email.value;
const res = await fetch("/forgot_password", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ email }),
});
const data = await res.json();
document.getElementById("forgot-info").innerHTML = data.message;
};
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;
};
logout_button.onclick = () => {
window.location.href = "/logout";
};
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;
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;
};
const params = new URLSearchParams(window.location.search);
const reset_code = params.get("reset_code");
if (reset_code) {
let response = await fetch("/pass_reset?", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ code: reset_code }),
});
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) => {
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";
return;
}
let response = await fetch("/reset_password/" + reset_code, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ pass }),
});
response = await response.json();
document.getElementById("reset-info").innerText = response.message;
};
} else {
window.location.href = "/";
}
}
};