site: add Astro frontend — login, register, reset-password, invites, home
Step 8 of the migration plan. Minimal Astro + Tailwind site (no Svelte). Pages: - / (home): post-login card grid, shows Activity/Wiki/Planner cards based on wiki_access / activity_access from /api/me; URLs via PUBLIC_* env vars - /login/: JWT cookie issued on success; ?next= redirect supported - /register/: invite-code flow, auto-fills code from ?code= param - /reset-password/: admin-issued code flow; disables form on success - /invites/: list + generate invites; activity-access toggle for eligible users Base layout: minimal nav with handle + sign-out, auth wall (/api/me check), race-calendar accent palette, dark/light theme tokens.
This commit is contained in:
Davide Scaini
@@ -0,0 +1,153 @@
|
||||
---
|
||||
interface Props {
|
||||
title?: string;
|
||||
/** Pages that must stay accessible without auth (login, register, reset-password). */
|
||||
public?: boolean;
|
||||
}
|
||||
const { title = 'Bincio', public: isPublic = false } = Astro.props;
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title}</title>
|
||||
<meta name="theme-color" content="#09090b" />
|
||||
|
||||
<!-- Set theme before first paint -->
|
||||
<script is:inline>
|
||||
const t = localStorage.getItem('bincio-theme') || 'dark';
|
||||
document.documentElement.setAttribute('data-theme', t);
|
||||
</script>
|
||||
|
||||
<!-- Race-calendar accent colours -->
|
||||
<script is:inline>
|
||||
(function () {
|
||||
var palettes = {
|
||||
default: { accent: '#60a5fa', dim: 'rgba(96,165,250,0.15)' },
|
||||
giro: { accent: '#f472b6', dim: 'rgba(244,114,182,0.15)' },
|
||||
tour: { accent: '#facc15', dim: 'rgba(250,204,21,0.15)' },
|
||||
vuelta: { accent: '#ef4444', dim: 'rgba(239,68,68,0.15)' },
|
||||
};
|
||||
var races = [
|
||||
{ key: 'giro', start: [4, 8], end: [5, 1] },
|
||||
{ key: 'tour', start: [5, 27], end: [6, 19] },
|
||||
{ key: 'vuelta', start: [7, 15], end: [8, 6] },
|
||||
];
|
||||
function autoKey() {
|
||||
var now = new Date(), y = now.getFullYear();
|
||||
for (var i = 0; i < races.length; i++) {
|
||||
var r = races[i];
|
||||
if (now >= new Date(y, r.start[0], r.start[1]) &&
|
||||
now < new Date(y, r.end[0], r.end[1] + 1)) return r.key;
|
||||
}
|
||||
return 'default';
|
||||
}
|
||||
var p = palettes[autoKey()] || palettes.default;
|
||||
document.documentElement.style.setProperty('--accent', p.accent);
|
||||
document.documentElement.style.setProperty('--accent-dim', p.dim);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Auth wall: redirect to /login/ if not authenticated -->
|
||||
{!isPublic && (
|
||||
<style is:inline>[data-auth-pending]{visibility:hidden}</style>
|
||||
<script is:inline>
|
||||
fetch('/api/me', { credentials: 'include' })
|
||||
.then(r => {
|
||||
if (r.status === 401) window.location.replace('/login/');
|
||||
else document.body.removeAttribute('data-auth-pending');
|
||||
})
|
||||
.catch(() => document.body.removeAttribute('data-auth-pending'));
|
||||
</script>
|
||||
)}
|
||||
|
||||
<style is:global>
|
||||
:root, [data-theme="dark"] {
|
||||
--bg-base: #09090b;
|
||||
--bg-card: #18181b;
|
||||
--bg-elevated: #27272a;
|
||||
--text-primary: #ffffff;
|
||||
--text-4: #a1a1aa;
|
||||
--text-5: #71717a;
|
||||
--border: #27272a;
|
||||
--accent: #60a5fa;
|
||||
--accent-dim: rgba(96,165,250,0.15);
|
||||
}
|
||||
[data-theme="light"] {
|
||||
--bg-base: #fafafa;
|
||||
--bg-card: #f4f4f5;
|
||||
--bg-elevated: #e4e4e7;
|
||||
--text-primary: #18181b;
|
||||
--text-4: #52525b;
|
||||
--text-5: #71717a;
|
||||
--border: #e4e4e7;
|
||||
--accent: #0284c7;
|
||||
--accent-dim: rgba(2,132,199,0.12);
|
||||
}
|
||||
[data-theme="light"] .bg-zinc-950 { background-color: var(--bg-base) !important; }
|
||||
[data-theme="light"] .bg-zinc-900 { background-color: var(--bg-card) !important; }
|
||||
[data-theme="light"] .bg-zinc-800 { background-color: var(--bg-elevated)!important; }
|
||||
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
|
||||
[data-theme="light"] .text-zinc-400{ color: var(--text-4) !important; }
|
||||
[data-theme="light"] .text-zinc-500{ color: var(--text-5) !important; }
|
||||
[data-theme="light"] .text-zinc-600{ color: var(--text-5) !important; }
|
||||
[data-theme="light"] .border-zinc-800 { border-color: var(--border) !important; }
|
||||
[data-theme="light"] .border-zinc-700 { border-color: var(--border) !important; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body
|
||||
class="font-sans antialiased min-h-screen"
|
||||
style="background-color: var(--bg-base); color: var(--text-primary)"
|
||||
data-auth-pending={!isPublic ? '' : undefined}
|
||||
>
|
||||
<nav class="border-b sticky top-0 z-50 bg-zinc-950/90 backdrop-blur" style="border-color:var(--border)">
|
||||
<div class="max-w-2xl mx-auto px-4 h-12 flex items-center justify-between gap-4">
|
||||
<a href="/" class="font-bold text-white hover:text-[--accent] transition-colors">
|
||||
Bincio
|
||||
</a>
|
||||
<div class="flex items-center gap-4">
|
||||
<a id="nav-invites" href="/invites/" style="display:none"
|
||||
class="text-sm text-zinc-400 hover:text-white transition-colors">Invites</a>
|
||||
<a id="nav-admin" href="/admin/" style="display:none"
|
||||
class="text-sm text-zinc-400 hover:text-white transition-colors">Admin</a>
|
||||
<span id="nav-handle" class="text-sm text-[--accent]"></span>
|
||||
<button id="nav-signout" style="display:none"
|
||||
class="text-sm text-zinc-500 hover:text-white transition-colors">Sign out</button>
|
||||
{isPublic && (
|
||||
<a href="/login/" class="text-sm text-zinc-400 hover:text-white transition-colors">Sign in</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="max-w-2xl mx-auto px-4 py-8">
|
||||
<slot />
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
// Populate nav with current user info
|
||||
fetch('/api/me', { credentials: 'include' })
|
||||
.then(async r => {
|
||||
if (!r.ok) return;
|
||||
const user = await r.json();
|
||||
const handleEl = document.getElementById('nav-handle') as HTMLElement;
|
||||
const invitesEl = document.getElementById('nav-invites') as HTMLElement;
|
||||
const adminEl = document.getElementById('nav-admin') as HTMLElement;
|
||||
const signoutEl = document.getElementById('nav-signout') as HTMLElement;
|
||||
if (handleEl) { handleEl.textContent = '@' + user.handle; handleEl.style.display = ''; }
|
||||
if (invitesEl) invitesEl.style.display = '';
|
||||
if (adminEl && user.is_admin) adminEl.style.display = '';
|
||||
if (signoutEl) signoutEl.style.display = '';
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
document.getElementById('nav-signout')?.addEventListener('click', async () => {
|
||||
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
|
||||
window.location.href = '/login/';
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user