From 1f11bee730e562510a0632a83a17420bc32403fb Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Fri, 1 May 2026 22:04:30 +0200
Subject: [PATCH] feat: bincio.org hub page (login / app selector) and
 grants_activity invite toggle

---
 scripts/dev_test.py                |  10 +-
 site/src/pages/index.astro         | 151 ++++++++++++++++++++++++++++-
 site/src/pages/invites/index.astro |  64 +++++++++---
 3 files changed, 207 insertions(+), 18 deletions(-)

diff --git a/scripts/dev_test.py b/scripts/dev_test.py
index 3f43e56..79981b3 100755
--- a/scripts/dev_test.py
+++ b/scripts/dev_test.py
@@ -145,7 +145,7 @@ def prepare_serve() -> None:
 
 # ── 4. Hand off to bincio dev ─────────────────────────────────────────────────
 
-def start_dev(mobile: bool = False) -> None:
+def start_dev(mobile: bool = False, hub: bool = False) -> None:
     section("Starting bincio dev")
     print()
     print("  \033[1mCredentials\033[0m")
@@ -162,9 +162,10 @@ def start_dev(mobile: bool = False) -> None:
         cmd += ["--api-host", "0.0.0.0"]
 
     env = os.environ.copy()
-    # Show the wiki link in the nav during local dev (wiki typically lands on 4322
-    # when activity already holds 4321). Override with WIKI_DEV_URL if needed.
     env.setdefault("PUBLIC_WIKI_URL", os.environ.get("WIKI_DEV_URL", "http://localhost:4322"))
+    # --hub: simulate bincio.org hub mode (/ becomes login + app selector)
+    if hub:
+        env.setdefault("PUBLIC_ACTIVITY_URL", "http://localhost:4321")
 
     try:
         subprocess.run(cmd, cwd=PROJECT_DIR, env=env)
@@ -192,6 +193,7 @@ def main() -> None:
     parser.add_argument("--fresh",  action="store_true", help="Wipe DATA_DIR before starting")
     parser.add_argument("--no-dev", action="store_true", help="Stop after extract, skip bincio dev")
     parser.add_argument("--mobile", action="store_true", help="Bind API to 0.0.0.0 for local mobile testing")
+    parser.add_argument("--hub",    action="store_true", help="Simulate hub mode: / becomes login+app selector")
     args = parser.parse_args()
 
     raise_open_file_limit()
@@ -209,7 +211,7 @@ def main() -> None:
     prepare_serve()
 
     if not args.no_dev:
-        start_dev(mobile=args.mobile)
+        start_dev(mobile=args.mobile, hub=args.hub)
     else:
         print(f"\n\033[32mDone.\033[0m  Data ready at {DATA_DIR}")
         print(f"Run:  uv run bincio dev --data-dir {DATA_DIR}\n")
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 2adc560..56e305b 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -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>
diff --git a/site/src/pages/invites/index.astro b/site/src/pages/invites/index.astro
index f8e76c2..4ebf490 100644
--- a/site/src/pages/invites/index.astro
+++ b/site/src/pages/invites/index.astro
@@ -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';