From 37625f2e7672c8836d3d2d8bff24203a4ca508e3 Mon Sep 17 00:00:00 2001
From: Brian Bjarke Jensen <bbj@skov.dk>
Date: Thu, 6 Nov 2025 21:31:11 +0100
Subject: [PATCH] added login and home page

---
 src/baby_monitor/static/index.html | 123 ++++++++++++++++++++++++++
 src/baby_monitor/static/login.html | 137 +++++++++++++++++++++++++++++
 2 files changed, 260 insertions(+)
 create mode 100644 src/baby_monitor/static/index.html
 create mode 100644 src/baby_monitor/static/login.html
diff --git a/src/baby_monitor/static/index.html b/src/baby_monitor/static/index.html
new file mode 100644
index 0000000..1880344
--- /dev/null
+++ b/src/baby_monitor/static/index.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Baby Monitor - Home</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+        background-color: #f0f0f0;
+      }
+      .container {
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+      h1 {
+        color: #333;
+        margin-bottom: 1rem;
+      }
+      .user-info {
+        background: #e3f2fd;
+        padding: 1rem;
+        border-radius: 4px;
+        margin-bottom: 1rem;
+      }
+      button {
+        padding: 0.75rem 1.5rem;
+        background-color: #dc3545;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 1rem;
+      }
+      button:hover {
+        background-color: #c82333;
+      }
+      .loading {
+        text-align: center;
+        padding: 2rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div id="content" class="loading">
+        <p>Loading...</p>
+      </div>
+    </div>
+
+    <script>
+      const token = localStorage.getItem("access_token");
+      const username = localStorage.getItem("username");
+
+      // Check if user is logged in
+      if (!token) {
+        window.location.href = "/static/login.html";
+      } else {
+        // Verify token by making an authenticated request
+        fetch("/api/", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        })
+          .then((response) => {
+            if (response.ok) {
+              return response.json();
+            } else {
+              // Token invalid, redirect to login
+              localStorage.removeItem("access_token");
+              localStorage.removeItem("username");
+              window.location.href = "/static/login.html";
+              throw new Error("Authentication failed");
+            }
+          })
+          .then((data) => {
+            // Show authenticated content
+            document.getElementById("content").innerHTML = `
+                    <h1>Welcome to Baby Monitor!</h1>
+                    <div class="user-info">
+                        <p><strong>Logged in as:</strong> ${username}</p>
+                    </div>
+                    <p>${data.message}</p>
+                    <button id="logoutBtn">Logout</button>
+                `;
+
+            // Add logout handler
+            document
+              .getElementById("logoutBtn")
+              .addEventListener("click", logout);
+          })
+          .catch((error) => {
+            console.error("Error:", error);
+          });
+      }
+
+      async function logout() {
+        const token = localStorage.getItem("access_token");
+
+        try {
+          await fetch("/api/logout", {
+            method: "POST",
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+        } catch (error) {
+          console.error("Logout error:", error);
+        } finally {
+          // Clear local storage and redirect
+          localStorage.removeItem("access_token");
+          localStorage.removeItem("username");
+          window.location.href = "/static/login.html";
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/src/baby_monitor/static/login.html b/src/baby_monitor/static/login.html
new file mode 100644
index 0000000..11b96e0
--- /dev/null
+++ b/src/baby_monitor/static/login.html
@@ -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>
