feat: add homepage auto-redirect for logged-in users
- Add JavaScript to check for valid JWT token on homepage load - Auto-redirect to /bookshelf if user is already logged in - Shows login/register form if not authenticated - Improves UX by taking logged-in users directly to bookshelf Implementation: - Fetch /api/auth/profile with stored token - On success, redirect to /bookshelf - On failure, silently stay on homepage - Runs on DOMContentLoaded for fast execution
This commit is contained in:
john-okeefe committed
1 parent
d9ca3d5a65
commit
703daeb32f
2 files changed
+26
-2
No files matched your search
@@ -240,6 +240,30 @@ templ Index(loggedIn bool) {
|
||||
}
|
||||
|
||||
<script src="/static/theme.js"></script>
|
||||
<script>
|
||||
// Auto-redirect to bookshelf if user is logged in
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
// Validate token by checking profile
|
||||
fetch('/api/auth/profile', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
// Token is valid, redirect to bookshelf
|
||||
window.location.href = '/bookshelf';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
// Silently fail - user stays on homepage
|
||||
console.log('Not logged in');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
@@ -29,7 +29,7 @@ func Index(loggedIn bool) templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Bookmann - Home</title><script src=\"https://cdn.tailwindcss.com\"></script><script src=\"https://unpkg.com/htmx.org@1.9.10\"></script><style>\n :root {\n --bg-primary: #1a1b26;\n --bg-secondary: #16161e;\n --text-primary: #a9b1d6;\n --text-secondary: #565f89;\n --accent: #7aa2f7;\n --border: #414868;\n }\n .theme-tokyo-night {\n --bg-primary: #1a1b26;\n --bg-secondary: #16161e;\n --text-primary: #a9b1d6;\n --text-secondary: #565f89;\n --accent: #7aa2f7;\n --border: #414868;\n }\n .theme-dracula {\n --bg-primary: #282a36;\n --bg-secondary: #21222c;\n --text-primary: #f8f8f2;\n --text-secondary: #6272a4;\n --accent: #bd93f9;\n --border: #44475a;\n }\n .theme-nord {\n --bg-primary: #2e3440;\n --bg-secondary: #3b4252;\n --text-primary: #eceff4;\n --text-secondary: #5e81ac;\n --accent: #88c0d0;\n --border: #4c566a;\n }\n .theme-solarized-dark {\n --bg-primary: #002b36;\n --bg-secondary: #073642;\n --text-primary: #93a1a1;\n --text-secondary: #586e75;\n --accent: #2aa198;\n --border: #586e75;\n }\n .theme-monokai {\n --bg-primary: #272822;\n --bg-secondary: #3e3d32;\n --text-primary: #f8f8f2;\n --text-secondary: #75715e;\n --accent: #a6e22e;\n --border: #49483e;\n }\n .theme-one-dark-pro {\n --bg-primary: #282c34;\n --bg-secondary: #21252b;\n --text-primary: #abb2bf;\n --text-secondary: #5c6370;\n --accent: #61dafb;\n --border: #3e4451;\n }\n .theme-material-dark {\n --bg-primary: #263238;\n --bg-secondary: #37474f;\n --text-primary: #eeffff;\n --text-secondary: #546e7a;\n --accent: #80cbc4;\n --border: #455a64;\n }\n .theme-catppuccin-mocha {\n --bg-primary: #1e1e2e;\n --bg-secondary: #181825;\n --text-primary: #cdd6f4;\n --text-secondary: #bac2de;\n --accent: #f38ba8;\n --border: #313244;\n }\n .theme-catppuccin-macchiato {\n --bg-primary: #24273a;\n --bg-secondary: #1e2030;\n --text-primary: #cad3f5;\n --text-secondary: #b8c0e0;\n --accent: #f0c6c6;\n --border: #363a4f;\n }\n .theme-catppuccin-frappe {\n --bg-primary: #303446;\n --bg-secondary: #292c3c;\n --text-primary: #c6d0f5;\n --text-secondary: #b5bfe2;\n --accent: #f2d5cf;\n --border: #414559;\n }\n .theme-catppuccin-latte {\n --bg-primary: #eff1f5;\n --bg-secondary: #e6e9ef;\n --text-primary: #4c4f69;\n --text-secondary: #5c5f77;\n --accent: #d20f39;\n --border: #bcc0cc;\n }\n body {\n background-color: var(--bg-primary);\n color: var(--text-primary);\n }\n .card {\n background-color: var(--bg-secondary);\n border-color: var(--border);\n }\n .btn-primary {\n background-color: var(--accent);\n color: var(--bg-primary);\n }\n .btn-primary:hover {\n opacity: 0.8;\n }\n </style></head><body class=\"theme-tokyo-night\"><!-- Hero Section --><div class=\"relative overflow-hidden\"><div class=\"absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10\"></div><div class=\"relative max-w-7xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8\"><div class=\"flex justify-between items-start mb-8\"><div></div><select id=\"theme-select\" class=\"px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><option value=\"tokyo-night\">Tokyo Night</option> <option value=\"dracula\">Dracula</option> <option value=\"nLine truncated
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Bookmann - Home</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n :root {\n --bg-primary: #1a1b26;\n --bg-secondary: #16161e;\n --text-primary: #a9b1d6;\n --text-secondary: #565f89;\n --accent: #7aa2f7;\n --border: #414868;\n }\n .theme-tokyo-night {\n --bg-primary: #1a1b26;\n --bg-secondary: #16161e;\n --text-primary: #a9b1d6;\n --text-secondary: #565f89;\n --accent: #7aa2f7;\n --border: #414868;\n }\n .theme-dracula {\n --bg-primary: #282a36;\n --bg-secondary: #21222c;\n --text-primary: #f8f8f2;\n --text-secondary: #6272a4;\n --accent: #bd93f9;\n --border: #44475a;\n }\n .theme-nord {\n --bg-primary: #2e3440;\n --bg-secondary: #3b4252;\n --text-primary: #eceff4;\n --text-secondary: #5e81ac;\n --accent: #88c0d0;\n --border: #4c566a;\n }\n .theme-solarized-dark {\n --bg-primary: #002b36;\n --bg-secondary: #073642;\n --text-primary: #93a1a1;\n --text-secondary: #586e75;\n --accent: #2aa198;\n --border: #586e75;\n }\n .theme-monokai {\n --bg-primary: #272822;\n --bg-secondary: #3e3d32;\n --text-primary: #f8f8f2;\n --text-secondary: #75715e;\n --accent: #a6e22e;\n --border: #49483e;\n }\n .theme-one-dark-pro {\n --bg-primary: #282c34;\n --bg-secondary: #21252b;\n --text-primary: #abb2bf;\n --text-secondary: #5c6370;\n --accent: #61dafb;\n --border: #3e4451;\n }\n .theme-material-dark {\n --bg-primary: #263238;\n --bg-secondary: #37474f;\n --text-primary: #eeffff;\n --text-secondary: #546e7a;\n --accent: #80cbc4;\n --border: #455a64;\n }\n .theme-catppuccin-mocha {\n --bg-primary: #1e1e2e;\n --bg-secondary: #181825;\n --text-primary: #cdd6f4;\n --text-secondary: #bac2de;\n --accent: #f38ba8;\n --border: #313244;\n }\n .theme-catppuccin-macchiato {\n --bg-primary: #24273a;\n --bg-secondary: #1e2030;\n --text-primary: #cad3f5;\n --text-secondary: #b8c0e0;\n --accent: #f0c6c6;\n --border: #363a4f;\n }\n .theme-catppuccin-frappe {\n --bg-primary: #303446;\n --bg-secondary: #292c3c;\n --text-primary: #c6d0f5;\n --text-secondary: #b5bfe2;\n --accent: #f2d5cf;\n --border: #414559;\n }\n .theme-catppuccin-latte {\n --bg-primary: #eff1f5;\n --bg-secondary: #e6e9ef;\n --text-primary: #4c4f69;\n --text-secondary: #5c5f77;\n --accent: #d20f39;\n --border: #bcc0cc;\n }\n body {\n background-color: var(--bg-primary);\n color: var(--text-primary);\n }\n .card {\n background-color: var(--bg-secondary);\n border-color: var(--border);\n }\n .btn-primary {\n background-color: var(--accent);\n color: var(--bg-primary);\n }\n .btn-primary:hover {\n opacity: 0.8;\n }\n </style></head><body class=\"theme-tokyo-night\"><!-- Hero Section --><div class=\"relative overflow-hidden\"><div class=\"absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-700 opacity-10\"></div><div class=\"relative max-w-7xl mx-auto px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8\"><div class=\"flex justify-between items-start mb-8\"><div></div><select id=\"theme-select\" class=\"px-3 py-2 border rounded text-sm\" style=\"background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)\" onchange=\"changeTheme()\"><option value=\"tokyo-night\">Tokyo Night</option> <option value=\"dracula\">DraculaLine truncated
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -39,7 +39,7 @@ func Index(loggedIn bool) templ.Component {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<script>\n function applyTheme(theme) {\n document.body.className = `theme-${theme}`;\n localStorage.setItem('theme', theme);\n }\n function loadTheme() {\n const theme = localStorage.getItem('theme') || 'tokyo-night';\n applyTheme(theme);\n }\n function changeTheme() {\n const theme = document.getElementById('theme-select').value;\n applyTheme(theme);\n // Save to server if logged in\n fetch('/api/auth/theme', {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': 'Bearer ' + localStorage.getItem('token')\n },\n body: JSON.stringify({ theme })\n }).catch(err => console.log('Theme save failed', err));\n }\n function loadUserTheme() {\n // If logged in, load from profile\n const token = localStorage.getItem('token');\n if (token) {\n fetch('/api/auth/profile', {\n headers: { 'Authorization': 'Bearer ' + token }\n }).then(res => res.json()).then(data => {\n if (data.theme) applyTheme(data.theme);\n }).catch(() => {});\n }\n }\n document.addEventListener('DOMContentLoaded', () => {\n loadTheme();\n loadUserTheme();\n document.getElementById('theme-select').value = localStorage.getItem('theme') || 'tokyo-night';\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n });\n </script></body></html>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<script src=\"/static/theme.js\"></script><script>\n // Auto-redirect to bookshelf if user is logged in\n document.addEventListener('DOMContentLoaded', function() {\n const token = localStorage.getItem('token');\n if (token) {\n // Validate token by checking profile\n fetch('/api/auth/profile', {\n headers: {\n 'Authorization': `Bearer ${token}`\n }\n })\n .then(response => {\n if (response.ok) {\n // Token is valid, redirect to bookshelf\n window.location.href = '/bookshelf';\n }\n })\n .catch(error => {\n // Silently fail - user stays on homepage\n console.log('Not logged in');\n });\n }\n });\n </script></body></html>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user