feat: bincio.org hub page (login / app selector) and grants_activity invite toggle
This commit is contained in:
Davide Scaini
+148
-3
@@ -3,20 +3,165 @@ import Base from '../layouts/Base.astro';
|
||||
import ActivityFeed from '../components/ActivityFeed.svelte';
|
||||
import { readShardHandles, isInstancePrivate } from '../lib/manifest';
|
||||
|
||||
const base = import.meta.env.BASE_URL;
|
||||
const shards = readShardHandles();
|
||||
const base = import.meta.env.BASE_URL;
|
||||
const activityUrl = import.meta.env.PUBLIC_ACTIVITY_URL ?? '';
|
||||
const wikiUrl = import.meta.env.PUBLIC_WIKI_URL ?? '';
|
||||
|
||||
const shards = readShardHandles();
|
||||
const isSingleUser = shards.length === 1 && !isInstancePrivate();
|
||||
const singleHandle = isSingleUser ? shards[0].handle : null;
|
||||
---
|
||||
{isSingleUser ? (
|
||||
|
||||
{activityUrl ? (
|
||||
<!-- ── Hub mode: bincio.org — login form / app selector ─────────────── -->
|
||||
<Base title="Bincio" public={true}>
|
||||
<div class="max-w-sm mx-auto mt-16 px-4"
|
||||
id="hub-root"
|
||||
data-activity-url={activityUrl}
|
||||
data-wiki-url={wikiUrl}
|
||||
style="visibility:hidden">
|
||||
|
||||
<!-- Login (shown when not authenticated) -->
|
||||
<div id="hub-login">
|
||||
<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">Bincio</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">
|
||||
<a href="/reset-password/" class="hover:text-zinc-400 transition-colors">Forgot password?</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- App selector (shown when authenticated) -->
|
||||
<div id="hub-apps" style="display:none">
|
||||
<p class="text-center text-zinc-600 text-sm italic mb-8 leading-relaxed">
|
||||
mangia<br/>bevi<br/>stai calmo<br/>non strappare
|
||||
</p>
|
||||
<p id="hub-greeting" class="text-center text-zinc-400 text-sm mb-6"></p>
|
||||
<div id="hub-cards" class="space-y-3"></div>
|
||||
<p class="text-center mt-8">
|
||||
<button id="hub-logout"
|
||||
class="text-xs text-zinc-600 hover:text-zinc-400 transition-colors">
|
||||
Log out
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Base>
|
||||
) : isSingleUser ? (
|
||||
<!-- Single-user: redirect / → /u/{handle}/ -->
|
||||
<meta http-equiv="refresh" content={`0;url=${base}u/${singleHandle}/`} />
|
||||
<script define:vars={{ base, singleHandle }}>
|
||||
window.location.replace(base + 'u/' + singleHandle + '/');
|
||||
</script>
|
||||
) : (
|
||||
<!-- Multi-user activity feed -->
|
||||
<Base title="BincioActivity — Feed">
|
||||
<h1 class="text-2xl font-bold text-white mb-6">Feed</h1>
|
||||
<ActivityFeed {base} client:only="svelte" />
|
||||
</Base>
|
||||
)}
|
||||
|
||||
<script>
|
||||
const root = document.getElementById('hub-root') as HTMLElement | null;
|
||||
if (!root) {
|
||||
// Not in hub mode — nothing to do.
|
||||
} else {
|
||||
const activityUrl = root.dataset.activityUrl ?? '';
|
||||
const wikiUrl = root.dataset.wikiUrl ?? '';
|
||||
|
||||
const loginDiv = document.getElementById('hub-login') as HTMLElement;
|
||||
const appsDiv = document.getElementById('hub-apps') as HTMLElement;
|
||||
const greeting = document.getElementById('hub-greeting') as HTMLElement;
|
||||
const cardsDiv = document.getElementById('hub-cards') as HTMLElement;
|
||||
const form = document.getElementById('login-form') as HTMLFormElement;
|
||||
const errEl = document.getElementById('login-error') as HTMLElement;
|
||||
|
||||
function appCard(label: string, sub: string, href: string): HTMLAnchorElement {
|
||||
const a = document.createElement('a');
|
||||
a.href = href;
|
||||
a.className = 'block rounded-xl bg-zinc-900 border border-zinc-800 px-5 py-4 hover:border-zinc-600 transition-colors';
|
||||
a.innerHTML = `
|
||||
<p class="font-semibold text-white">${label}</p>
|
||||
<p class="text-xs text-zinc-500 mt-0.5">${sub}</p>
|
||||
`;
|
||||
return a;
|
||||
}
|
||||
|
||||
function showApps(user: { handle: string; display_name: string; activity_access: boolean; wiki_access: boolean }) {
|
||||
loginDiv.style.display = 'none';
|
||||
appsDiv.style.display = '';
|
||||
greeting.textContent = `Ciao, ${user.display_name || user.handle}.`;
|
||||
cardsDiv.innerHTML = '';
|
||||
if (user.activity_access && activityUrl)
|
||||
cardsDiv.appendChild(appCard('BincioActivity', 'Tracks, strade e numeri', activityUrl));
|
||||
if (user.wiki_access && wikiUrl)
|
||||
cardsDiv.appendChild(appCard('BincioWiki', 'La memoria collettiva del gruppo', wikiUrl));
|
||||
}
|
||||
|
||||
// Check if already authenticated
|
||||
fetch('/api/me', { credentials: 'include' })
|
||||
.then(async r => {
|
||||
root.style.visibility = 'visible';
|
||||
if (r.ok) showApps(await r.json());
|
||||
// else: show login form (already visible)
|
||||
})
|
||||
.catch(() => { root.style.visibility = 'visible'; });
|
||||
|
||||
// Login form submit
|
||||
form?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const handle = (form.querySelector('#handle') as HTMLInputElement).value.trim();
|
||||
const password = (form.querySelector('#password') as HTMLInputElement).value;
|
||||
errEl.classList.add('hidden');
|
||||
|
||||
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;
|
||||
}
|
||||
showApps(await r.json());
|
||||
} catch {
|
||||
errEl.textContent = 'Could not reach server';
|
||||
errEl.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Logout
|
||||
document.getElementById('hub-logout')?.addEventListener('click', async () => {
|
||||
try { await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }); } catch (_) {}
|
||||
appsDiv.style.display = 'none';
|
||||
loginDiv.style.display = '';
|
||||
(form.querySelector('#handle') as HTMLInputElement).value = '';
|
||||
(form.querySelector('#password') as HTMLInputElement).value = '';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
---
|
||||
<Base title="Invites — BincioActivity">
|
||||
<Base title="Invites — Bincio">
|
||||
<div class="max-w-lg mx-auto mt-12 px-4">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<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">
|
||||
@@ -11,6 +11,18 @@ import Base from '../../layouts/Base.astro';
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Activity toggle: only shown for users who have activity_access -->
|
||||
<div id="activity-toggle-row" style="display:none" class="mb-6">
|
||||
<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">
|
||||
@@ -20,26 +32,42 @@ import Base from '../../layouts/Base.astro';
|
||||
</Base>
|
||||
|
||||
<script>
|
||||
const listEl = document.getElementById('invite-list')!;
|
||||
const errEl = document.getElementById('invite-error')!;
|
||||
const listEl = document.getElementById('invite-list')!;
|
||||
const errEl = document.getElementById('invite-error')!;
|
||||
const toggleRow = document.getElementById('activity-toggle-row') as HTMLElement;
|
||||
const grantsActivityChk = document.getElementById('grants-activity') as HTMLInputElement;
|
||||
|
||||
function renderInvite(inv: { code: string; used: boolean; used_by: string | null; created_at: number }) {
|
||||
type Invite = {
|
||||
code: string;
|
||||
used: boolean;
|
||||
used_by: string | null;
|
||||
created_at: number;
|
||||
grants_activity: boolean;
|
||||
};
|
||||
|
||||
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>
|
||||
<span class="font-mono text-lg tracking-widest ${inv.used ? 'text-zinc-600 line-through' : 'text-white'}">${inv.code}</span>
|
||||
<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 text-xs px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 transition-colors">
|
||||
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>
|
||||
` : ''}
|
||||
@@ -66,7 +94,7 @@ import Base from '../../layouts/Base.astro';
|
||||
return;
|
||||
}
|
||||
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
||||
const invites = await r.json();
|
||||
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>';
|
||||
@@ -74,7 +102,6 @@ import Base from '../../layouts/Base.astro';
|
||||
}
|
||||
for (const inv of invites) listEl.appendChild(renderInvite(inv));
|
||||
|
||||
// Copy link buttons
|
||||
listEl.querySelectorAll('.copy-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const text = (btn as HTMLElement).dataset.link ?? '';
|
||||
@@ -95,10 +122,25 @@ import Base from '../../layouts/Base.astro';
|
||||
}
|
||||
}
|
||||
|
||||
// Show activity toggle only for users who have activity access
|
||||
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');
|
||||
const grantsActivity = grantsActivityChk?.checked ?? false;
|
||||
try {
|
||||
const r = await fetch('/api/invites', { method: 'POST', credentials: 'include' });
|
||||
const r = await fetch('/api/invites', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ grants_activity: grantsActivity }),
|
||||
});
|
||||
if (!r.ok) {
|
||||
const d = await r.json().catch(() => ({}));
|
||||
errEl.textContent = d.detail ?? 'Could not generate invite';
|
||||
|
||||
Reference in New Issue
Block a user