brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

feat: bincio.org hub page (login / app selector) and grants_activity invite toggle

Browse Source
This commit is contained in:
Davide Scaini
2026-05-01 22:04:30 +02:00
parent 82288a35ea
commit 1f11bee730
3 changed files with 207 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/invites/index.astro
+53 -11
View File
@@ -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';