Added Loading Screen

public/frontend_login.js

@@ -15,9 +15,8 @@
 
             if (loginRes.ok) {
                 const loginData = await loginRes.json();
-                alert(`Welcome back, ${loginData.username}!`);
+                document.cookie = `authorization=${loginData.token}`;
-                document.cookie = `authorization=${loginData.token}`
+                showLoadingScreen("Login successful. Loading Lobby...");
-                window.location.href = "/";
                 return;
             }
 
@@ -29,9 +28,8 @@
 
             if (registerRes.ok) {
                 const registerData = await registerRes.json();
-                alert(`Account created! Welcome!`);
+                document.cookie = `authorization=${registerData.token}`;
-                document.cookie = `authorization=${registerData.token}`
+                showLoadingScreen("Register successful. Loading Lobby...");
-                window.location.href = "/";
             } else {
                 const error = await registerRes.json();
                 alert("Register failed: " + (error.error || "Unknown error"));
@@ -41,4 +39,28 @@
             alert("Server unreachable.");
         }
     });
+
+    function showLoadingScreen(message) {
+        const loadingScreen = document.getElementById("loading-screen");
+        const loadingText = document.getElementById("loading-text");
+        const progress = document.getElementById("progress");
+
+        loadingText.textContent = message;
+        loadingScreen.classList.remove("hidden");
+
+        let percent = 0;
+        const interval = setInterval(() => {
+            percent += Math.floor(Math.random() * 10) + 5;
+            if (percent >= 100) {
+                percent = 100;
+                progress.style.width = percent + "%";
+                clearInterval(interval);
+                setTimeout(() => {
+                    window.location.href = "/";
+                }, 500);
+            } else {
+                progress.style.width = percent + "%";
+            }
+        }, 200);
+    }
 });

public/login.html

@@ -12,6 +12,12 @@
   <input type="password" name="password" placeholder="Password">
   <button type="submit">Login</button>
 </form>
+<div id="loading-screen" class="hidden">
+    <div class="loading-text" id="loading-text">Loading...</div>
+    <div class="progress-bar">
+        <div class="progress" id="progress"></div>
+    </div>
+</div>
 </body>
 <script src="frontend_login.js"></script>
 </html>

public/styles_login.css

@@ -62,3 +62,44 @@ button {
 button:hover {
     background: #1f1;
 }
+
+.hidden {
+    display: none !important;
+}
+
+#loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    color: #0f0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.loading-text {
+    font-size: 24px;
+    margin-bottom: 20px;
+    text-shadow: 0 0 10px #0f0;
+}
+
+.progress-bar {
+    width: 80%;
+    height: 20px;
+    border: 2px solid #0f0;
+    border-radius: 10px;
+    background: #111;
+}
+
+.progress {
+    height: 100%;
+    width: 0;
+    background-color: #0f0;
+    border-radius: 10px;
+    transition: width 0.3s ease;
+}