Improved dashboard and music queue

2025-06-21 11:47:06 -06:00
parent 0745a4eb75
commit 71f535be27
16 changed files with 1386 additions and 664 deletions
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login - MumBullet Dashboard</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body class="login-page">
+  <div class="login-container">
+    <h1>MumBullet Dashboard</h1>
+    <div class="card">
+      <div class="card-header">
+        <h2>Login</h2>
+      </div>
+      <div class="card-content">
+        <!--ERROR-->
+        <form id="loginForm" action="/api/login" method="post">
+          <div class="form-group">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" required>
+          </div>
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required>
+          </div>
+          <div id="loginError" class="error" style="display: none;">
+            Invalid username or password.
+          </div>
+          <div class="form-actions">
+            <button type="submit">Login</button>
+          </div>
+        </form>
+        
+        <script>
+          // Check if there's an error parameter in the URL
+          const urlParams = new URLSearchParams(window.location.search);
+          if (urlParams.has('error') && urlParams.get('error') === 'invalid') {
+            document.getElementById('loginError').style.display = 'block';
+          }
+          
+          // Handle form submission with fetch API instead of traditional form submission
+          document.getElementById('loginForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            
+            try {
+              const response = await fetch('/api/login', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`,
+                // Important for cookies to work
+                credentials: 'include'
+              });
+              
+              if (response.redirected) {
+                // Follow the redirect manually
+                window.location.href = response.url;
+                return;
+              }
+              
+              if (response.ok) {
+                // Successful login, redirect to dashboard
+                window.location.href = '/';
+              } else {
+                // Show error message
+                document.getElementById('loginError').style.display = 'block';
+                console.error('Login failed:', await response.text());
+              }
+            } catch (error) {
+              console.error('Login error:', error);
+              document.getElementById('loginError').textContent = 'An error occurred. Please try again.';
+              document.getElementById('loginError').style.display = 'block';
+            }
+          });
+        </script>
+      </div>
+    </div>
+  </div>
+</body>
+</html>