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

WIP: improve-UX-when-login-expired #36

Draft
brian wants to merge 2 commits from improve-UX-when-login-expired into main
pull from: improve-UX-when-login-expired
merge into: :main
Conversation 1 Commits 2 Files Changed 13
+133 -100
13 changed files with 133 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/baby_monitor/main.py
+6
View File
@@ -143,6 +143,12 @@ def serve_menu_js() -> FileResponse:
return FileResponse(static_path / "menu.js")
@app.get("/auth-utils.js", include_in_schema=False)
def serve_auth_utils_js() -> FileResponse:
"""Serve the shared auth utilities JavaScript."""
return FileResponse(static_path / "auth-utils.js")
@app.get("/api/")
def read_root(token: Annotated[str, Depends(verify_token)]) -> dict:
"""API root endpoint (requires authentication)."""
src/baby_monitor/static/add-child.html
+2 -4
View File
@@ -211,12 +211,10 @@
</div>
</div>
<script src="/auth-utils.js"></script>
<script>
// Check if user is authenticated
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Get child ID from URL if editing
const urlParams = new URLSearchParams(window.location.search);
src/baby_monitor/static/admin.html
+16 -18
View File
@@ -424,35 +424,33 @@
</div>
</div>
<script src="/auth-utils.js"></script>
<script>
// Check if user is authenticated and is admin
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
let allUsers = [];
let userToDelete = null;
// Verify user is admin and load data
// Load data
fetch("/api/me", {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((response) => response.json())
.then((user) => {
if (!user.is_admin) {
alert("Access denied. Admin privileges required.");
window.location.href = "/";
}
// Load users after verifying admin status
loadUsers();
})
.catch((error) => {
console.error("Error verifying admin status:", error);
window.location.href = "/login.html";
});
.then((response) => response.json())
.then((user) => {
if (!user.is_admin) {
alert("Access denied. Admin privileges required.");
window.location.href = "/";
}
// Load users after verifying admin status
loadUsers();
})
.catch((error) => {
console.error("Error verifying admin status:", error);
window.location.href = "/login.html";
});
async function loadUsers() {
const container = document.getElementById("userListContainer");
src/baby_monitor/static/auth-utils.js
+21
View File
@@ -0,0 +1,21 @@
/**
* Redirect to login page with return URL
* @param {string} returnUrl - The URL to return to after login (defaults to current page)
*/
function redirectToLogin(returnUrl) {
const url = returnUrl || window.location.pathname + window.location.search;
window.location.href = `/login.html?return=${encodeURIComponent(url)}`;
}
/**
* Check if user has valid token, redirect to login if not
* @returns {string|null} - Returns token if valid, redirects to login if not
*/
function getToken() {
const token = localStorage.getItem("access_token");
if (!token) {
redirectToLogin();
return null;
}
return token;
}
src/baby_monitor/static/diapers.html
+2 -4
View File
@@ -266,12 +266,10 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="/menu.js"></script>
<script src="/auth-utils.js"></script>
<script>
// Check if user is authenticated
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Initialize burger menu
initBurgerMenu({ includeHome: true });
src/baby_monitor/static/feedings.html
+2 -4
View File
@@ -303,12 +303,10 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="/menu.js"></script>
<script src="/auth-utils.js"></script>
<script>
// Check if user is authenticated
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Initialize burger menu
initBurgerMenu({ includeHome: true });
src/baby_monitor/static/index.html
+31 -43
View File
@@ -236,59 +236,47 @@
</div>
<script src="/menu.js"></script>
<script src="/auth-utils.js"></script>
<script>
const token = localStorage.getItem("access_token");
const token = getToken();
const username = localStorage.getItem("username");
// Check if user is logged in
if (!token) {
window.location.href = "/login.html";
} else {
// Fetch current user info including admin status
fetch("/api/me", {
// Fetch current user info including admin status
fetch("/api/me", {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((response) => response.json())
.then((user) => {
if (!user) return; // Early exit if redirected
// Initialize burger menu
initBurgerMenu({
includeHome: true,
});
// Check if user has any children
return fetch("/api/children", {
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 = "/login.html";
throw new Error("Authentication failed");
.then((response) => response.json())
.then((children) => {
// If no children, show welcome message with option to add
if (children.length === 0) {
showNoChildrenMessage();
return;
}
})
.then((user) => {
// Initialize burger menu
initBurgerMenu({
includeHome: true,
});
// Check if user has any children
return fetch("/api/children", {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((response) => response.json())
.then((children) => {
// If no children, show welcome message with option to add
if (children.length === 0) {
showNoChildrenMessage();
return;
}
// Load feeding status and show content
loadFeedingStatus(children);
});
})
.catch((error) => {
console.error("Error:", error);
// Load feeding status and show content
loadFeedingStatus(children);
});
}
})
.catch((error) => {
console.error("Error:", error);
});
function showNoChildrenMessage() {
const content = document.getElementById("content");
src/baby_monitor/static/log-diaper.html
+2 -4
View File
@@ -242,12 +242,10 @@
</form>
</div>
<script src="/auth-utils.js"></script>
<script>
// Check if user is authenticated
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Determine return URL based on referrer
function getReturnUrl() {
src/baby_monitor/static/log-feeding.html
+2 -4
View File
@@ -199,12 +199,10 @@
</form>
</div>
<script src="/auth-utils.js"></script>
<script>
// Check if user is authenticated
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Determine return URL based on referrer
function getReturnUrl() {
src/baby_monitor/static/log-sleep.html
+2 -4
View File
@@ -189,12 +189,10 @@
</form>
</div>
<script src="/auth-utils.js"></script>
<script>
// Check if user is authenticated
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Determine return URL based on referrer
function getReturnUrl() {
src/baby_monitor/static/login.html
+38 -2
View File
@@ -82,10 +82,36 @@
</div>
<script>
// Check if redirected due to expired session
const params = new URLSearchParams(window.location.search);
const returnUrl = params.get("return");
const form = document.getElementById("loginForm");
const messageDiv = document.getElementById("message");
const loginButton = document.getElementById("loginButton");
// Show session expired message if redirected from another page
if (returnUrl) {
showMessage("Your session has expired. Please log in again.", "error");
}
// Clear user-specific cache data on login
function clearUserCache() {
const keysToRemove = [
'lastDiaperChildFilter',
'lastFeedingChildFilter',
'lastSleepChildFilter',
'lastDiaperTimeRange',
'lastFeedingTimeRange'
];
keysToRemove.forEach(key => {
localStorage.removeItem(key);
});
console.log('Cleared user cache on login');
}
form.addEventListener("submit", async (e) => {
e.preventDefault();
@@ -109,13 +135,23 @@
if (response.ok) {
showMessage(data.message, "success");
// Store token in localStorage
localStorage.setItem("access_token", data.access_token);
localStorage.setItem("username", data.username);
// Redirect based on is_admin from login response
// Clear stale user preferences from previous sessions
clearUserCache();
// Check for return URL parameter
const params = new URLSearchParams(window.location.search);
const returnUrl = params.get("return");
// Redirect based on return URL or is_admin from login response
setTimeout(() => {
if (data.is_admin === true) {
if (returnUrl) {
window.location.href = returnUrl;
} else if (data.is_admin === true) {
window.location.href = "/admin.html";
} else {
window.location.href = "/";
src/baby_monitor/static/settings.html
+7 -7
View File
@@ -469,11 +469,9 @@
</div>
<script src="/menu.js"></script>
<script src="/auth-utils.js"></script>
<script>
const token = localStorage.getItem("access_token");
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Initialize burger menu
initBurgerMenu({ includeHome: true });
@@ -495,7 +493,7 @@
currentUser = await userResponse.json();
document.getElementById("username").value = currentUser.username;
} else {
window.location.href = "/login.html";
redirectToLogin();
return;
}
@@ -852,8 +850,10 @@
}
});
// Load data on page load
loadData();
// Load data on page load (only if authenticated)
if (token) {
loadData();
}
</script>
</body>
</html>
src/baby_monitor/static/sleep.html
+2 -6
View File
@@ -313,13 +313,9 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="/menu.js"></script>
<script src="/auth-utils.js"></script>
<script>
const token = localStorage.getItem("access_token");
// Check if user is logged in
if (!token) {
window.location.href = "/login.html";
}
const token = getToken();
// Initialize burger menu
initBurgerMenu({ includeHome: true });