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,4 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
.astro/
|
||||||
|
.env
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { defineConfig } from "astro/config";
|
||||||
|
import tailwind from "@astrojs/tailwind";
|
||||||
|
|
||||||
|
const apiPort = process.env.VITE_API_PORT || '4040';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [tailwind()],
|
||||||
|
devToolbar: { enabled: false },
|
||||||
|
output: "static",
|
||||||
|
vite: {
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: `http://localhost:${apiPort}`,
|
||||||
|
changeOrigin: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Generated
+6550
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "bincio-auth-site",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
|
"astro": "^5.0.0",
|
||||||
|
"tailwindcss": "^3.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.0.0",
|
||||||
|
"typescript": "^5.7.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
---
|
||||||
|
import Base from '../layouts/Base.astro';
|
||||||
|
const activityUrl = import.meta.env.PUBLIC_ACTIVITY_URL ?? '';
|
||||||
|
const wikiUrl = import.meta.env.PUBLIC_WIKI_URL ?? '';
|
||||||
|
const plannerUrl = import.meta.env.PUBLIC_PLANNER_URL ?? '';
|
||||||
|
---
|
||||||
|
<Base title="Bincio">
|
||||||
|
<div id="cards" class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
|
||||||
|
<!-- cards injected by script -->
|
||||||
|
<p class="text-zinc-500 text-sm col-span-2">Loading…</p>
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<script define:vars={{ activityUrl, wikiUrl, plannerUrl }}>
|
||||||
|
fetch('/api/me', { credentials: 'include' })
|
||||||
|
.then(async r => {
|
||||||
|
if (!r.ok) { window.location.replace('/login/'); return; }
|
||||||
|
const user = await r.json();
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
key: 'activity',
|
||||||
|
url: activityUrl,
|
||||||
|
show: user.activity_access && activityUrl,
|
||||||
|
label: 'Activity',
|
||||||
|
desc: 'Training log, maps, power curves',
|
||||||
|
icon: '⚡',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'wiki',
|
||||||
|
url: wikiUrl,
|
||||||
|
show: user.wiki_access && wikiUrl,
|
||||||
|
label: 'Wiki',
|
||||||
|
desc: 'Shared team knowledge base',
|
||||||
|
icon: '📖',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'planner',
|
||||||
|
url: plannerUrl,
|
||||||
|
show: plannerUrl,
|
||||||
|
label: 'Planner',
|
||||||
|
desc: 'Route planning and elevation',
|
||||||
|
icon: '🗺️',
|
||||||
|
},
|
||||||
|
].filter(s => s.show);
|
||||||
|
|
||||||
|
const container = document.getElementById('cards');
|
||||||
|
if (!container) return;
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
if (services.length === 0) {
|
||||||
|
container.innerHTML = '<p class="text-zinc-500 text-sm col-span-2">No services configured for your account yet.</p>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const s of services) {
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = s.url;
|
||||||
|
a.className = [
|
||||||
|
'block rounded-2xl border p-6 transition-all duration-150',
|
||||||
|
'bg-zinc-900 border-zinc-800',
|
||||||
|
'hover:border-[--accent] hover:bg-zinc-800 group',
|
||||||
|
].join(' ');
|
||||||
|
a.innerHTML = `
|
||||||
|
<div class="text-3xl mb-3">${s.icon}</div>
|
||||||
|
<h2 class="text-lg font-semibold text-white group-hover:text-[--accent] transition-colors mb-1">${s.label}</h2>
|
||||||
|
<p class="text-sm text-zinc-500">${s.desc}</p>
|
||||||
|
`;
|
||||||
|
container.appendChild(a);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => { window.location.replace('/login/'); });
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
---
|
||||||
|
import Base from '../../layouts/Base.astro';
|
||||||
|
---
|
||||||
|
<Base title="Invites — Bincio">
|
||||||
|
<div class="mt-4">
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<h1 class="text-2xl font-bold text-white">Your invites</h1>
|
||||||
|
<button id="gen-btn"
|
||||||
|
class="px-4 py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white text-sm font-medium transition-opacity">
|
||||||
|
Generate invite
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="activity-toggle-row" style="display:none" class="mb-5">
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer select-none group">
|
||||||
|
<input id="grants-activity" type="checkbox"
|
||||||
|
class="w-4 h-4 rounded accent-[--accent] cursor-pointer" />
|
||||||
|
<span class="text-sm text-zinc-400 group-hover:text-zinc-300 transition-colors">
|
||||||
|
Include activity access
|
||||||
|
</span>
|
||||||
|
<span class="text-xs text-zinc-600">(wiki + activity)</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="invite-error" class="text-red-400 text-sm mb-4 hidden"></p>
|
||||||
|
<ul id="invite-list" class="space-y-3">
|
||||||
|
<li class="text-zinc-500 text-sm">Loading…</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
type Invite = {
|
||||||
|
code: string;
|
||||||
|
used: boolean;
|
||||||
|
used_by: string | null;
|
||||||
|
created_at: number;
|
||||||
|
grants_activity: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const listEl = document.getElementById('invite-list')!;
|
||||||
|
const errEl = document.getElementById('invite-error')!;
|
||||||
|
const toggleRow = document.getElementById('activity-toggle-row') as HTMLElement;
|
||||||
|
const grantsChk = document.getElementById('grants-activity') as HTMLInputElement;
|
||||||
|
|
||||||
|
function renderInvite(inv: Invite) {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.className = 'flex items-center justify-between rounded-xl bg-zinc-900 border border-zinc-800 px-4 py-3';
|
||||||
|
|
||||||
|
const date = new Date(inv.created_at * 1000).toLocaleDateString('en-GB',
|
||||||
|
{ day: 'numeric', month: 'short', year: 'numeric' });
|
||||||
|
const registerUrl = `${window.location.origin}/register/?code=${inv.code}`;
|
||||||
|
const badge = inv.grants_activity
|
||||||
|
? `<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-400 border border-zinc-700">wiki + activity</span>`
|
||||||
|
: `<span class="text-xs px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-600 border border-zinc-700">wiki only</span>`;
|
||||||
|
|
||||||
|
li.innerHTML = `
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center gap-2 flex-wrap">
|
||||||
|
<span class="font-mono text-lg tracking-widest ${inv.used ? 'text-zinc-600 line-through' : 'text-white'}">${inv.code}</span>
|
||||||
|
${badge}
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-zinc-500 mt-0.5">
|
||||||
|
${inv.used ? `Used by @${inv.used_by}` : `Created ${date}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
${!inv.used ? `
|
||||||
|
<button data-link="${registerUrl}"
|
||||||
|
class="copy-btn ml-3 shrink-0 text-xs px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors">
|
||||||
|
Copy link
|
||||||
|
</button>
|
||||||
|
` : ''}
|
||||||
|
`;
|
||||||
|
return li;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fallbackCopy(text: string, done: () => void) {
|
||||||
|
const ta = document.createElement('textarea');
|
||||||
|
ta.value = text;
|
||||||
|
ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
|
||||||
|
document.body.appendChild(ta);
|
||||||
|
ta.focus(); ta.select();
|
||||||
|
try { document.execCommand('copy'); done(); } catch (_) {}
|
||||||
|
document.body.removeChild(ta);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadInvites() {
|
||||||
|
try {
|
||||||
|
const r = await fetch('/api/invites', { credentials: 'include' });
|
||||||
|
if (r.status === 401) {
|
||||||
|
window.location.href = `/login/?next=${encodeURIComponent(window.location.pathname)}`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
||||||
|
const invites: Invite[] = await r.json();
|
||||||
|
listEl.innerHTML = '';
|
||||||
|
if (invites.length === 0) {
|
||||||
|
listEl.innerHTML = '<li class="text-zinc-500 text-sm">No invites yet.</li>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
for (const inv of invites) listEl.appendChild(renderInvite(inv));
|
||||||
|
|
||||||
|
listEl.querySelectorAll('.copy-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
const text = (btn as HTMLElement).dataset.link ?? '';
|
||||||
|
const done = () => {
|
||||||
|
btn.textContent = 'Copied!';
|
||||||
|
setTimeout(() => { btn.textContent = 'Copy link'; }, 2000);
|
||||||
|
};
|
||||||
|
if (navigator.clipboard) {
|
||||||
|
navigator.clipboard.writeText(text).then(done).catch(() => fallbackCopy(text, done));
|
||||||
|
} else {
|
||||||
|
fallbackCopy(text, done);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (e: unknown) {
|
||||||
|
errEl.textContent = e instanceof Error ? e.message : 'Error';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch('/api/me', { credentials: 'include' })
|
||||||
|
.then(async r => {
|
||||||
|
if (!r.ok) return;
|
||||||
|
const user = await r.json();
|
||||||
|
if (user.activity_access) toggleRow.style.display = '';
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
|
||||||
|
document.getElementById('gen-btn')?.addEventListener('click', async () => {
|
||||||
|
errEl.classList.add('hidden');
|
||||||
|
try {
|
||||||
|
const r = await fetch('/api/invites', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ grants_activity: grantsChk?.checked ?? false }),
|
||||||
|
});
|
||||||
|
if (!r.ok) {
|
||||||
|
const d = await r.json().catch(() => ({}));
|
||||||
|
errEl.textContent = d.detail ?? 'Could not generate invite';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await loadInvites();
|
||||||
|
} catch (e: unknown) {
|
||||||
|
errEl.textContent = e instanceof Error ? e.message : 'Error';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
loadInvites();
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
---
|
||||||
|
import Base from '../../layouts/Base.astro';
|
||||||
|
---
|
||||||
|
<Base title="Sign in — Bincio" public={true}>
|
||||||
|
<div class="max-w-sm mx-auto mt-12">
|
||||||
|
<p class="text-center text-zinc-600 text-sm italic mb-8 leading-relaxed">
|
||||||
|
mangia<br/>bevi<br/>stai calmo<br/>non strappare
|
||||||
|
</p>
|
||||||
|
<h1 class="text-2xl font-bold text-white mb-6 text-center">Sign in</h1>
|
||||||
|
|
||||||
|
<form id="login-form" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="handle">Handle</label>
|
||||||
|
<input id="handle" name="handle" type="text" autocomplete="username"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||||
|
placeholder="your handle" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="password">Password</label>
|
||||||
|
<input id="password" name="password" type="password" autocomplete="current-password"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-[--accent]"
|
||||||
|
required />
|
||||||
|
</div>
|
||||||
|
<p id="login-error" class="text-red-400 text-sm hidden"></p>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
|
||||||
|
Sign in
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="text-center text-zinc-500 text-sm mt-6">
|
||||||
|
Have an invite? <a href="/register/" class="text-[--accent] hover:underline">Create account</a>
|
||||||
|
</p>
|
||||||
|
<p class="text-center text-zinc-600 text-sm mt-2">
|
||||||
|
<a href="/reset-password/" class="hover:text-zinc-400 transition-colors">Forgot password?</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const form = document.getElementById('login-form') as HTMLFormElement;
|
||||||
|
const errEl = document.getElementById('login-error') as HTMLElement;
|
||||||
|
|
||||||
|
form?.addEventListener('submit', async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
errEl.classList.add('hidden');
|
||||||
|
const handle = (form.querySelector('#handle') as HTMLInputElement).value.trim();
|
||||||
|
const password = (form.querySelector('#password') as HTMLInputElement).value;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch('/api/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ handle, password }),
|
||||||
|
});
|
||||||
|
if (!r.ok) {
|
||||||
|
const d = await r.json().catch(() => ({}));
|
||||||
|
errEl.textContent = d.detail ?? 'Invalid credentials';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const next = new URLSearchParams(window.location.search).get('next') ?? '/';
|
||||||
|
window.location.href = next;
|
||||||
|
} catch {
|
||||||
|
errEl.textContent = 'Could not reach server';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
import Base from '../../layouts/Base.astro';
|
||||||
|
---
|
||||||
|
<Base title="Create account — Bincio" public={true}>
|
||||||
|
<div class="max-w-sm mx-auto mt-12">
|
||||||
|
<h1 class="text-2xl font-bold text-white mb-6 text-center">Create account</h1>
|
||||||
|
|
||||||
|
<form id="register-form" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="code">Invite code</label>
|
||||||
|
<input id="code" name="code" type="text" autocomplete="off"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white font-mono uppercase tracking-widest placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||||
|
placeholder="XXXXXXXX" maxlength="8" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="handle">Handle</label>
|
||||||
|
<input id="handle" name="handle" type="text" autocomplete="username"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||||
|
placeholder="lowercase letters and numbers" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="display_name">
|
||||||
|
Display name <span class="text-zinc-600">(optional)</span>
|
||||||
|
</label>
|
||||||
|
<input id="display_name" name="display_name" type="text"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||||
|
placeholder="Your Name" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="password">Password</label>
|
||||||
|
<input id="password" name="password" type="password" autocomplete="new-password"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-[--accent]"
|
||||||
|
minlength="8" required />
|
||||||
|
<p class="text-zinc-600 text-xs mt-1">At least 8 characters</p>
|
||||||
|
</div>
|
||||||
|
<p id="reg-error" class="text-red-400 text-sm hidden"></p>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
|
||||||
|
Create account
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="text-center text-zinc-500 text-sm mt-6">
|
||||||
|
Already have an account? <a href="/login/" class="text-[--accent] hover:underline">Sign in</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Pre-fill invite code from URL param
|
||||||
|
const code = new URLSearchParams(window.location.search).get('code');
|
||||||
|
if (code) {
|
||||||
|
const input = document.getElementById('code') as HTMLInputElement;
|
||||||
|
if (input) input.value = code.toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('register-form')?.addEventListener('submit', async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = e.target as HTMLFormElement;
|
||||||
|
const errEl = document.getElementById('reg-error')!;
|
||||||
|
errEl.classList.add('hidden');
|
||||||
|
|
||||||
|
const body = {
|
||||||
|
code: (form.querySelector('#code') as HTMLInputElement).value.trim().toUpperCase(),
|
||||||
|
handle: (form.querySelector('#handle') as HTMLInputElement).value.trim().toLowerCase(),
|
||||||
|
display_name: (form.querySelector('#display_name') as HTMLInputElement).value.trim(),
|
||||||
|
password: (form.querySelector('#password') as HTMLInputElement).value,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch('/api/register', {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'include',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
if (!r.ok) {
|
||||||
|
const d = await r.json().catch(() => ({}));
|
||||||
|
errEl.textContent = d.detail ?? 'Registration failed';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.location.href = '/';
|
||||||
|
} catch {
|
||||||
|
errEl.textContent = 'Could not reach server';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
import Base from '../../layouts/Base.astro';
|
||||||
|
---
|
||||||
|
<Base title="Reset password — Bincio" public={true}>
|
||||||
|
<div class="max-w-sm mx-auto mt-12">
|
||||||
|
<h1 class="text-2xl font-bold text-white mb-2 text-center">Reset password</h1>
|
||||||
|
<p class="text-zinc-500 text-sm text-center mb-2">
|
||||||
|
Enter the reset code you received from the admin.
|
||||||
|
</p>
|
||||||
|
<p class="text-zinc-600 text-xs text-center mb-6">
|
||||||
|
Don't have a code? Contact the instance admin — they can generate one from the admin panel. Codes expire after 24 hours.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form id="reset-form" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="code">Reset code</label>
|
||||||
|
<input id="code" name="code" type="text" autocomplete="off"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white font-mono uppercase tracking-widest placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||||
|
placeholder="XXXXXXXX" maxlength="8" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="handle">Handle</label>
|
||||||
|
<input id="handle" name="handle" type="text" autocomplete="username"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 focus:outline-none focus:border-[--accent]"
|
||||||
|
placeholder="your handle" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-zinc-400 mb-1" for="password">New password</label>
|
||||||
|
<input id="password" name="password" type="password" autocomplete="new-password"
|
||||||
|
class="w-full px-3 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white focus:outline-none focus:border-[--accent]"
|
||||||
|
minlength="8" required />
|
||||||
|
<p class="text-zinc-600 text-xs mt-1">At least 8 characters</p>
|
||||||
|
</div>
|
||||||
|
<p id="reset-error" class="text-red-400 text-sm hidden"></p>
|
||||||
|
<p id="reset-ok" class="text-green-400 text-sm hidden">
|
||||||
|
Password updated. <a href="/login/" class="underline">Sign in</a>
|
||||||
|
</p>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full py-2 rounded-lg bg-[--accent] hover:opacity-90 text-white font-medium transition-opacity">
|
||||||
|
Set new password
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<p class="text-center text-zinc-500 text-sm mt-6">
|
||||||
|
<a href="/login/" class="text-[--accent] hover:underline">Back to sign in</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Base>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const cp = params.get('code');
|
||||||
|
const hp = params.get('handle');
|
||||||
|
if (cp) (document.getElementById('code') as HTMLInputElement).value = cp.toUpperCase();
|
||||||
|
if (hp) (document.getElementById('handle') as HTMLInputElement).value = hp;
|
||||||
|
|
||||||
|
document.getElementById('reset-form')?.addEventListener('submit', async e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const form = e.target as HTMLFormElement;
|
||||||
|
const errEl = document.getElementById('reset-error')!;
|
||||||
|
const okEl = document.getElementById('reset-ok')!;
|
||||||
|
errEl.classList.add('hidden');
|
||||||
|
okEl.classList.add('hidden');
|
||||||
|
|
||||||
|
const body = {
|
||||||
|
code: (form.querySelector('#code') as HTMLInputElement).value.trim().toUpperCase(),
|
||||||
|
handle: (form.querySelector('#handle') as HTMLInputElement).value.trim().toLowerCase(),
|
||||||
|
password: (form.querySelector('#password') as HTMLInputElement).value,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await fetch('/api/auth/reset-password', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
if (!r.ok) {
|
||||||
|
const d = await r.json().catch(() => ({}));
|
||||||
|
errEl.textContent = d.detail ?? 'Reset failed';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
okEl.classList.remove('hidden');
|
||||||
|
form.querySelectorAll('input, button').forEach(el => (el as HTMLInputElement).disabled = true);
|
||||||
|
} catch {
|
||||||
|
errEl.textContent = 'Could not reach server';
|
||||||
|
errEl.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ["./src/**/*.{astro,html,js,ts}"],
|
||||||
|
darkMode: "class",
|
||||||
|
theme: { extend: {} },
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"strictNullChecks": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user