try to fix issues with logging in on linux (again)

public/frontend_login.js

@@ -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 (e) => {
-        e.preventDefault();
-        const username = form.username.value;
-        const password = form.password.value;
-        const credentials = {username, password};
-        try {
-            const loginRes = await fetch("/login", {
-                method: "POST",
-                headers: {"Content-Type": "application/json"},
-                body: JSON.stringify(credentials),
+    form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        await authenticate("/login", "Login successful. Loading Lobby...");
     });
 
-            if (loginRes.ok) {
-                await loginRes.json();
-                showLoadingScreen("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
+        };
+
+        try {
+            const response = await fetch(endpoint, {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                credentials: "same-origin",
+                body: JSON.stringify(credentials)
+            });
+
+            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),
-            });
+            const verified = await verifySession();
+            if (!verified) {
+                showAuthError("Login succeeded, but the browser did not send the session cookie back to the server.");
+                return;
+            }
 
-            if (registerRes.ok) {
-                await registerRes.json();
-                showLoadingScreen("Register successful. Loading Lobby...");
-            } else {
-                const error = await registerRes.json();
-                alert("Register failed: " + (error.error || "Unknown error"));
+            showLoadingScreen(successMessage);
+        } catch (error) {
+            console.error("Authentication request failed:", error);
+            showAuthError("Server unreachable.");
+        } finally {
+            setButtonsDisabled(false);
         }
-        } catch (err) {
-            console.error("Network error:", err);
-            alert("Server unreachable.");
     }
+
+    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");

public/login.html

@@ -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>

public/styles_login.css

@@ -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;
 }