brian/baby-monitor
1
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases 12 Wiki Activity

added login and home page

Browse Source
This commit is contained in:
Brian Bjarke Jensen
2025-11-06 21:31:11 +01:00
parent 6b0982b369
commit 37625f2e76
2 changed files with 260 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/baby_monitor/static/index.html
+123
View File
@@ -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>
src/baby_monitor/static/login.html
+137
View File
@@ -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>