try to fix issues with logging in on linux (again)
This commit is contained in:
+74
-27
@@ -1,42 +1,89 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.querySelector("form");
|
||||
const registerButton = document.getElementById("register-button");
|
||||
const loginButton = document.getElementById("login-button");
|
||||
const authError = document.getElementById("auth-error");
|
||||
|
||||
form.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
await authenticate("/login", "Login successful. Loading Lobby...");
|
||||
});
|
||||
|
||||
registerButton.addEventListener("click", async () => {
|
||||
await authenticate("/register", "Register successful. Loading Lobby...");
|
||||
});
|
||||
|
||||
async function authenticate(endpoint, successMessage) {
|
||||
clearAuthError();
|
||||
setButtonsDisabled(true);
|
||||
|
||||
const credentials = {
|
||||
username: form.username.value,
|
||||
password: form.password.value
|
||||
};
|
||||
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
const username = form.username.value;
|
||||
const password = form.password.value;
|
||||
const credentials = {username, password};
|
||||
try {
|
||||
const loginRes = await fetch("/login", {
|
||||
const response = await fetch(endpoint, {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify(credentials),
|
||||
credentials: "same-origin",
|
||||
body: JSON.stringify(credentials)
|
||||
});
|
||||
|
||||
if (loginRes.ok) {
|
||||
await loginRes.json();
|
||||
showLoadingScreen("Login successful. Loading Lobby...");
|
||||
const data = await readJsonResponse(response);
|
||||
if (!response.ok) {
|
||||
showAuthError(data.error || "Authentication failed.");
|
||||
return;
|
||||
}
|
||||
|
||||
const registerRes = await fetch("/register", {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify(credentials),
|
||||
});
|
||||
|
||||
if (registerRes.ok) {
|
||||
await registerRes.json();
|
||||
showLoadingScreen("Register successful. Loading Lobby...");
|
||||
} else {
|
||||
const error = await registerRes.json();
|
||||
alert("Register failed: " + (error.error || "Unknown error"));
|
||||
const verified = await verifySession();
|
||||
if (!verified) {
|
||||
showAuthError("Login succeeded, but the browser did not send the session cookie back to the server.");
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Network error:", err);
|
||||
alert("Server unreachable.");
|
||||
|
||||
showLoadingScreen(successMessage);
|
||||
} catch (error) {
|
||||
console.error("Authentication request failed:", error);
|
||||
showAuthError("Server unreachable.");
|
||||
} finally {
|
||||
setButtonsDisabled(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function verifySession() {
|
||||
const response = await fetch("/verify", {
|
||||
method: "POST",
|
||||
credentials: "same-origin"
|
||||
});
|
||||
if (!response.ok) return false;
|
||||
|
||||
const data = await readJsonResponse(response);
|
||||
return Boolean(data.valid && data.user?.username);
|
||||
}
|
||||
|
||||
async function readJsonResponse(response) {
|
||||
try {
|
||||
return await response.json();
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function showAuthError(message) {
|
||||
authError.textContent = message;
|
||||
authError.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function clearAuthError() {
|
||||
authError.textContent = "";
|
||||
authError.classList.add("hidden");
|
||||
}
|
||||
|
||||
function setButtonsDisabled(disabled) {
|
||||
loginButton.disabled = disabled;
|
||||
registerButton.disabled = disabled;
|
||||
}
|
||||
|
||||
function showLoadingScreen(message) {
|
||||
const loadingScreen = document.getElementById("loading-screen");
|
||||
|
||||
+5
-1
@@ -11,7 +11,11 @@
|
||||
<form method="post" action="/login">
|
||||
<input type="text" name="username" placeholder="Username">
|
||||
<input type="password" name="password" placeholder="Password">
|
||||
<button type="submit">Login</button>
|
||||
<div class="auth-actions">
|
||||
<button type="submit" id="login-button">Login</button>
|
||||
<button type="button" id="register-button">Register</button>
|
||||
</div>
|
||||
<p id="auth-error" class="auth-error hidden"></p>
|
||||
</form>
|
||||
<div id="loading-screen" class="hidden">
|
||||
<div class="loading-text" id="loading-text">Loading...</div>
|
||||
|
||||
@@ -63,6 +63,25 @@ button:hover {
|
||||
background: #1f1;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.auth-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
color: #ff6b6b;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user