added login and home page

2025-11-06 21:31:11 +01:00
parent 6b0982b369
commit 37625f2e76
2 changed files with 260 additions and 0 deletions
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Baby Monitor - Login</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #f0f0f0;
+      }
+      .login-container {
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        width: 300px;
+      }
+      h1 {
+        text-align: center;
+        color: #333;
+        margin-bottom: 1.5rem;
+      }
+      input {
+        width: 100%;
+        padding: 0.75rem;
+        margin-bottom: 1rem;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        box-sizing: border-box;
+      }
+      button {
+        width: 100%;
+        padding: 0.75rem;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1rem;
+      }
+      button:hover {
+        background-color: #0056b3;
+      }
+      button:disabled {
+        background-color: #ccc;
+        cursor: not-allowed;
+      }
+      .message {
+        text-align: center;
+        margin-bottom: 1rem;
+        padding: 0.5rem;
+        border-radius: 4px;
+      }
+      .error {
+        background-color: #fee;
+        color: #c00;
+      }
+      .success {
+        background-color: #efe;
+        color: #0a0;
+      }
+      .hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login-container">
+      <h1>Baby Monitor</h1>
+      <div id="message" class="message hidden"></div>
+      <form id="loginForm">
+        <input type="text" id="username" placeholder="Username" required />
+        <input type="password" id="password" placeholder="Password" required />
+        <button type="submit" id="loginButton">Login</button>
+      </form>
+    </div>
+
+    <script>
+      const form = document.getElementById("loginForm");
+      const messageDiv = document.getElementById("message");
+      const loginButton = document.getElementById("loginButton");
+
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const username = document.getElementById("username").value;
+        const password = document.getElementById("password").value;
+
+        // Disable button during request
+        loginButton.disabled = true;
+        loginButton.textContent = "Logging in...";
+
+        try {
+          const response = await fetch("/api/login", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ username, password }),
+          });
+
+          const data = await response.json();
+
+          if (response.ok) {
+            showMessage(data.message, "success");
+            // Store token in localStorage
+            localStorage.setItem("access_token", data.access_token);
+            localStorage.setItem("username", data.username);
+            // Redirect to home page
+            setTimeout(() => {
+              window.location.href = "/";
+            }, 1000);
+          } else {
+            showMessage(data.detail || "Login failed", "error");
+          }
+        } catch (error) {
+          showMessage("Network error. Please try again.", "error");
+        } finally {
+          loginButton.disabled = false;
+          loginButton.textContent = "Login";
+        }
+      });
+
+      function showMessage(text, type) {
+        messageDiv.textContent = text;
+        messageDiv.className = `message ${type}`;
+        messageDiv.classList.remove("hidden");
+      }
+    </script>
+  </body>
+</html>