Add file upload portal with per-customer links and WebDAV admin access

- Customer upload via token link (no login), optional password + expiry, drag & drop for files and folders with preserved structure - Admin portal with setup wizard, role-based users (admin/staff), per-customer WebDAV access rules (read/write), session auth - WebDAV container (Debian apache2) with htpasswd + access.conf auto-generated from the SQLite DB and reloaded via inotifywait - Configurable public base URL and janitor cron interval in admin UI; janitor reconciles the uploads table with the filesystem Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-16 11:00:51 +02:00
parent 16795137d5
commit 0770259d3d
16 changed files with 1733 additions and 0 deletions
@@ -0,0 +1,452 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Adminportal</title>
+<style>
+  :root { color-scheme: light dark; }
+  body { font-family: system-ui, sans-serif; max-width: 1150px; margin: 0 auto; padding: 1rem; }
+  header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #555; padding-bottom: .5rem; margin-bottom: 1rem; }
+  h1 { margin: 0; font-size: 1.25rem; }
+  .tabs { display: flex; gap: .25rem; margin-bottom: 1rem; }
+  .tabs button { padding: .4rem .9rem; border: 1px solid #555; background: transparent; color: inherit; border-radius: 6px 6px 0 0; cursor: pointer; }
+  .tabs button.active { background: rgba(0,120,255,.15); border-color: #0078ff; }
+  input, select, button { padding: .45rem .55rem; border-radius: 6px; border: 1px solid #888; background: transparent; color: inherit; font: inherit; }
+  button.primary { background: #0078ff; color: #fff; border-color: #0078ff; cursor: pointer; }
+  button.danger  { border-color: #e74c3c; color: #e74c3c; cursor: pointer; background: transparent; }
+  button { cursor: pointer; }
+  table { width: 100%; border-collapse: collapse; }
+  th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #444; vertical-align: top; font-size: .92rem; }
+  th { font-size: .78rem; text-transform: uppercase; color: #aaa; }
+  .actions button { margin-right: .2rem; }
+  code { font-size: .85rem; word-break: break-all; }
+  .small { font-size: .8rem; color: #999; }
+  form.inline { display: grid; grid-template-columns: repeat(5, auto) 1fr; gap: .4rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
+  .center { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
+  .card { border: 1px solid #555; border-radius: 10px; padding: 1.5rem; max-width: 420px; width: 100%; }
+  .card h2 { margin-top: 0; }
+  .card label { display: block; margin: .6rem 0 .2rem; font-size: .9rem; }
+  .card input { width: 100%; box-sizing: border-box; }
+  .err { color: #e74c3c; margin-top: .6rem; }
+  .modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 10; }
+  .modal.open { display: flex; }
+  .modal-inner { background: var(--bg, #222); color: inherit; border: 1px solid #555; border-radius: 10px; padding: 1.25rem; max-width: 620px; width: 100%; max-height: 80vh; overflow: auto; }
+  @media (prefers-color-scheme: light) { .modal-inner { background: #fff; } }
+  .access-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid #333; }
+  .access-row label { display: inline-flex; gap: .3rem; align-items: center; font-size: .9rem; }
+  .muted-row td { color: #888; }
+  .pill { display: inline-block; padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; border: 1px solid #888; }
+  .pill.admin { color: #0078ff; border-color: #0078ff; }
+  .pill.write { color: #2ecc71; border-color: #2ecc71; }
+  .pill.read  { color: #888; }
+</style>
+</head>
+<body>
+
+<!-- SETUP VIEW -->
+<div id="view-setup" class="center" style="display:none">
+  <div class="card">
+    <h2>Erstmal einrichten</h2>
+    <p class="small">Lege den ersten Admin-Account an. Dieser kann später weitere Benutzer anlegen.</p>
+    <form id="setupForm">
+      <label>Benutzername</label>
+      <input name="username" required minlength="2" pattern="[A-Za-z0-9._-]+" />
+      <label>Passwort (min. 6 Zeichen)</label>
+      <input name="password" type="password" required minlength="6" />
+      <div style="margin-top:1rem"><button class="primary" type="submit">Admin anlegen & einloggen</button></div>
+      <div class="err" id="setupErr"></div>
+    </form>
+  </div>
+</div>
+
+<!-- LOGIN VIEW -->
+<div id="view-login" class="center" style="display:none">
+  <div class="card">
+    <h2>Login</h2>
+    <form id="loginForm">
+      <label>Benutzername</label>
+      <input name="username" required autocomplete="username" />
+      <label>Passwort</label>
+      <input name="password" type="password" required autocomplete="current-password" />
+      <div style="margin-top:1rem"><button class="primary" type="submit">Einloggen</button></div>
+      <div class="err" id="loginErr"></div>
+    </form>
+  </div>
+</div>
+
+<!-- MAIN APP -->
+<div id="view-app" style="display:none">
+  <header>
+    <h1>Adminportal</h1>
+    <div>
+      <span id="whoami" class="small"></span>
+      <button id="logoutBtn">Logout</button>
+    </div>
+  </header>
+
+  <div class="tabs">
+    <button data-tab="customers" class="active">Kunden</button>
+    <button data-tab="users" id="tabUsersBtn">Benutzer</button>
+    <button data-tab="settings" id="tabSettingsBtn">Einstellungen</button>
+  </div>
+
+  <!-- CUSTOMERS TAB -->
+  <section id="tab-customers">
+    <form id="createCustomerForm" class="inline" style="display:none">
+      <input name="name" placeholder="Kundenname" required />
+      <input name="password" placeholder="Passwort (optional)" />
+      <input name="expires_at" placeholder="Ablauf YYYY-MM-DD HH:MM" />
+      <button class="primary" type="submit">Kunden anlegen</button>
+    </form>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th><th>Slug</th><th>Upload-Link</th><th>PW</th><th>Ablauf</th><th>Uploads</th><th>Aktionen</th>
+        </tr>
+      </thead>
+      <tbody id="customerRows"></tbody>
+    </table>
+    <p class="small">WebDAV-Server: <code id="webdavUrl"></code> · Login mit eigenem Benutzer (Rollen-/ACL-abhängig).</p>
+  </section>
+
+  <!-- USERS TAB -->
+  <section id="tab-users" style="display:none">
+    <form id="createUserForm" class="inline">
+      <input name="username" placeholder="Benutzername" required pattern="[A-Za-z0-9._-]+" />
+      <input name="password" placeholder="Passwort (min. 6)" required minlength="6" />
+      <select name="role">
+        <option value="staff">Sachbearbeiter</option>
+        <option value="admin">Admin</option>
+      </select>
+      <button class="primary" type="submit">Benutzer anlegen</button>
+    </form>
+    <table>
+      <thead>
+        <tr><th>Benutzername</th><th>Rolle</th><th>Angelegt</th><th>Aktionen</th></tr>
+      </thead>
+      <tbody id="userRows"></tbody>
+    </table>
+  </section>
+</div>
+
+  <!-- SETTINGS TAB -->
+  <section id="tab-settings" style="display:none">
+    <form id="settingsForm" style="max-width:600px">
+      <label style="display:block; margin-top:1rem">Öffentliche Basis-URL (für Kunden-Upload-Links)</label>
+      <input name="public_base_url" style="width:100%" placeholder="z. B. https://upload.example.com" />
+      <p class="small">Leer lassen, um aus jedem Request die aktuelle URL zu nutzen.</p>
+
+      <label style="display:block; margin-top:1rem">Cron-Intervall (Minuten)</label>
+      <input name="janitor_interval_minutes" type="number" min="1" style="width:8rem" />
+      <p class="small">Periodischer DB-Abgleich mit dem Dateisystem: entfernt verwaiste DB-Einträge (via WebDAV gelöscht) und erfasst neu per WebDAV hochgeladene Dateien.</p>
+
+      <div style="margin-top:1rem; display:flex; gap:.5rem">
+        <button class="primary" type="submit">Speichern</button>
+        <button type="button" id="runJanitor">Abgleich jetzt ausführen</button>
+        <span id="janitorMsg" class="small"></span>
+      </div>
+    </form>
+  </section>
+
+<!-- ACCESS MODAL -->
+<div class="modal" id="accessModal">
+  <div class="modal-inner">
+    <h3 id="accessTitle">Zugriff verwalten</h3>
+    <p class="small">Wähle Sachbearbeiter aus, die auf die Kundendateien per WebDAV zugreifen dürfen.</p>
+    <div id="accessList"></div>
+    <div style="margin-top:1rem; display:flex; gap:.5rem; justify-content:flex-end">
+      <button id="accessCancel">Abbrechen</button>
+      <button id="accessSave" class="primary">Speichern</button>
+    </div>
+  </div>
+</div>
+
+<script>
+const api = {
+  async get(path) {
+    const r = await fetch(`/admin/api${path}`);
+    if (r.status === 401) { throw Object.assign(new Error('unauth'), { status: 401 }); }
+    return r.json();
+  },
+  async send(method, path, body) {
+    const r = await fetch(`/admin/api${path}`, {
+      method, headers: {'Content-Type':'application/json'},
+      body: body !== undefined ? JSON.stringify(body) : undefined,
+    });
+    const data = await r.json().catch(() => ({}));
+    if (!r.ok) throw Object.assign(new Error(data.error || r.statusText), { status: r.status, data });
+    return data;
+  },
+};
+
+let me = null;
+
+function show(view) {
+  for (const id of ['view-setup','view-login','view-app']) {
+    document.getElementById(id).style.display = id === view ? '' : 'none';
+  }
+}
+
+function fmtSize(n) {
+  if (!n) return '0 B';
+  if (n < 1024) return n + ' B';
+  if (n < 1024*1024) return (n/1024).toFixed(1) + ' KB';
+  if (n < 1024*1024*1024) return (n/1024/1024).toFixed(1) + ' MB';
+  return (n/1024/1024/1024).toFixed(2) + ' GB';
+}
+function parseDate(s) { if (!s) return null; const t = Date.parse(String(s).replace(' ','T')); return isNaN(t)?null:t; }
+
+async function bootstrap() {
+  const status = await api.get('/status');
+  if (status.setup_required) return show('view-setup');
+  if (!status.authenticated) return show('view-login');
+  me = status.user;
+  document.getElementById('whoami').textContent = `${me.username} (${me.role})`;
+  if (me.role !== 'admin') {
+    document.getElementById('tabUsersBtn').style.display = 'none';
+    document.getElementById('tabSettingsBtn').style.display = 'none';
+    document.getElementById('createCustomerForm').style.display = 'none';
+  } else {
+    document.getElementById('createCustomerForm').style.display = '';
+  }
+  document.getElementById('webdavUrl').textContent = `webdav://${location.hostname}:1900/`;
+  show('view-app');
+  loadCustomers();
+}
+
+// --- Setup ---
+document.getElementById('setupForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData(e.target);
+  try {
+    await api.send('POST', '/setup', Object.fromEntries(fd.entries()));
+    location.reload();
+  } catch (ex) { document.getElementById('setupErr').textContent = ex.message; }
+});
+
+// --- Login / Logout ---
+document.getElementById('loginForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData(e.target);
+  try {
+    await api.send('POST', '/login', Object.fromEntries(fd.entries()));
+    location.reload();
+  } catch (ex) { document.getElementById('loginErr').textContent = 'Login fehlgeschlagen'; }
+});
+document.getElementById('logoutBtn').addEventListener('click', async () => {
+  await api.send('POST', '/logout');
+  location.reload();
+});
+
+// --- Tabs ---
+document.querySelectorAll('.tabs button').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.tabs button').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    const tab = btn.dataset.tab;
+    document.getElementById('tab-customers').style.display = tab === 'customers' ? '' : 'none';
+    document.getElementById('tab-users').style.display = tab === 'users' ? '' : 'none';
+    document.getElementById('tab-settings').style.display = tab === 'settings' ? '' : 'none';
+    if (tab === 'users') loadUsers();
+    if (tab === 'settings') loadSettings();
+  });
+});
+
+// --- Customers ---
+async function loadCustomers() {
+  const data = await api.get('/customers');
+  const rows = document.getElementById('customerRows');
+  rows.innerHTML = '';
+  for (const c of data) {
+    const tr = document.createElement('tr');
+    const link = c.upload_url || '–';
+    const adminOnly = me.role === 'admin';
+    tr.innerHTML = `
+      <td>${c.name}</td>
+      <td><code>${c.slug}</code></td>
+      <td>${adminOnly ? `<code>${link}</code> <div><button data-copy="${link}">Kopieren</button></div>` : '<span class="small">nur Admin</span>'}</td>
+      <td>${c.has_password ? '🔒' : '–'}</td>
+      <td>${c.expires_at ? new Date(c.expires_at).toLocaleString() : '–'}</td>
+      <td>${c.upload_count} <span class="small">(${fmtSize(c.total_size)})</span></td>
+      <td class="actions">
+        ${adminOnly ? `
+          <button data-access="${c.id}" data-slug="${c.slug}" data-name="${c.name}">Zugriff</button>
+          <button data-edit="${c.id}">Bearbeiten</button>
+          <button data-regen="${c.id}">Neuer Link</button>
+          <button class="danger" data-del="${c.id}">Löschen</button>
+        ` : `<span class="pill ${c.my_access}">${c.my_access}</span>`}
+      </td>
+    `;
+    rows.appendChild(tr);
+  }
+}
+
+document.getElementById('customerRows').addEventListener('click', async (e) => {
+  const t = e.target;
+  if (t.dataset.copy) {
+    navigator.clipboard.writeText(t.dataset.copy);
+    const orig = t.textContent; t.textContent = 'Kopiert!';
+    setTimeout(() => t.textContent = orig, 1200);
+  }
+  if (t.dataset.del) {
+    if (!confirm('Kunde wirklich löschen? (Hochgeladene Dateien bleiben auf Disk.)')) return;
+    await api.send('DELETE', `/customers/${t.dataset.del}`);
+    loadCustomers();
+  }
+  if (t.dataset.regen) {
+    if (!confirm('Neuen Link erzeugen? Alter Link wird ungültig.')) return;
+    await api.send('POST', `/customers/${t.dataset.regen}/regenerate-token`);
+    loadCustomers();
+  }
+  if (t.dataset.edit) {
+    const pw = prompt('Neues Passwort (leer = unverändert, "-" = entfernen):', '');
+    if (pw === null) return;
+    const exp = prompt('Neuer Ablauf (YYYY-MM-DD HH:MM, leer = unverändert, "-" = entfernen):', '');
+    if (exp === null) return;
+    const body = {};
+    if (pw === '-') body.clear_password = true;
+    else if (pw) body.password = pw;
+    if (exp === '-') body.expires_at = null;
+    else if (exp) body.expires_at = parseDate(exp);
+    await api.send('PATCH', `/customers/${t.dataset.edit}`, body);
+    loadCustomers();
+  }
+  if (t.dataset.access) openAccessModal(t.dataset.access, t.dataset.name);
+});
+
+document.getElementById('createCustomerForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData(e.target);
+  const body = {
+    name: fd.get('name'),
+    password: fd.get('password') || undefined,
+    expires_at: parseDate(fd.get('expires_at')) || undefined,
+  };
+  try { await api.send('POST', '/customers', body); e.target.reset(); loadCustomers(); }
+  catch (ex) { alert('Fehler: ' + ex.message); }
+});
+
+// --- Users ---
+async function loadUsers() {
+  const data = await api.get('/users');
+  const rows = document.getElementById('userRows');
+  rows.innerHTML = '';
+  for (const u of data) {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${u.username}${u.id === me.id ? ' <span class="small">(du)</span>' : ''}</td>
+      <td><span class="pill ${u.role === 'admin' ? 'admin' : ''}">${u.role}</span></td>
+      <td class="small">${new Date(u.created_at).toLocaleDateString()}</td>
+      <td class="actions">
+        <button data-pw="${u.id}">Passwort</button>
+        <button data-role="${u.id}" data-current="${u.role}">Rolle</button>
+        <button class="danger" data-deluser="${u.id}" data-name="${u.username}">Löschen</button>
+      </td>
+    `;
+    rows.appendChild(tr);
+  }
+}
+
+document.getElementById('userRows').addEventListener('click', async (e) => {
+  const t = e.target;
+  if (t.dataset.pw) {
+    const pw = prompt('Neues Passwort (min. 6 Zeichen):', '');
+    if (!pw) return;
+    try { await api.send('PATCH', `/users/${t.dataset.pw}`, { password: pw }); loadUsers(); }
+    catch (ex) { alert('Fehler: ' + ex.message); }
+  }
+  if (t.dataset.role) {
+    const newRole = t.dataset.current === 'admin' ? 'staff' : 'admin';
+    if (!confirm(`Rolle auf "${newRole}" ändern?`)) return;
+    try { await api.send('PATCH', `/users/${t.dataset.role}`, { role: newRole }); loadUsers(); }
+    catch (ex) { alert('Fehler: ' + ex.message); }
+  }
+  if (t.dataset.deluser) {
+    if (!confirm(`Benutzer "${t.dataset.name}" löschen?`)) return;
+    try { await api.send('DELETE', `/users/${t.dataset.deluser}`); loadUsers(); }
+    catch (ex) { alert('Fehler: ' + ex.message); }
+  }
+});
+
+document.getElementById('createUserForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData(e.target);
+  try {
+    await api.send('POST', '/users', Object.fromEntries(fd.entries()));
+    e.target.reset();
+    loadUsers();
+  } catch (ex) { alert('Fehler: ' + ex.message); }
+});
+
+// --- Access Modal ---
+let accessCustomerId = null;
+async function openAccessModal(id, name) {
+  accessCustomerId = id;
+  document.getElementById('accessTitle').textContent = `Zugriff – ${name}`;
+  const staff = await api.get(`/customers/${id}/access`);
+  const list = document.getElementById('accessList');
+  if (!staff.length) {
+    list.innerHTML = '<p class="small">Noch keine Sachbearbeiter angelegt. Lege welche im Tab <b>Benutzer</b> an.</p>';
+  } else {
+    list.innerHTML = staff.map(s => `
+      <div class="access-row">
+        <div>${s.username}</div>
+        <label><input type="radio" name="acc-${s.user_id}" value="" ${!s.access?'checked':''}> kein</label>
+        <label><input type="radio" name="acc-${s.user_id}" value="read" ${s.access==='read'?'checked':''}> lesen</label>
+        <label><input type="radio" name="acc-${s.user_id}" value="write" ${s.access==='write'?'checked':''}> schreiben</label>
+      </div>
+    `).join('');
+  }
+  document.getElementById('accessModal').classList.add('open');
+}
+document.getElementById('accessCancel').onclick = () => document.getElementById('accessModal').classList.remove('open');
+document.getElementById('accessSave').onclick = async () => {
+  const entries = [];
+  document.querySelectorAll('#accessList .access-row').forEach(row => {
+    const picked = row.querySelector('input[type=radio]:checked');
+    if (!picked || !picked.value) return;
+    const uid = picked.name.replace('acc-', '');
+    entries.push({ user_id: parseInt(uid, 10), access: picked.value });
+  });
+  try {
+    await api.send('PUT', `/customers/${accessCustomerId}/access`, { access: entries });
+    document.getElementById('accessModal').classList.remove('open');
+  } catch (ex) { alert('Fehler: ' + ex.message); }
+};
+
+// --- Settings ---
+async function loadSettings() {
+  const s = await api.get('/settings');
+  const form = document.getElementById('settingsForm');
+  form.public_base_url.value = s.public_base_url || '';
+  form.janitor_interval_minutes.value = s.janitor_interval_minutes || 30;
+}
+document.getElementById('settingsForm').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const fd = new FormData(e.target);
+  try {
+    await api.send('PUT', '/settings', {
+      public_base_url: fd.get('public_base_url') || '',
+      janitor_interval_minutes: parseInt(fd.get('janitor_interval_minutes') || '30', 10),
+    });
+    document.getElementById('janitorMsg').textContent = 'Gespeichert.';
+    setTimeout(() => document.getElementById('janitorMsg').textContent = '', 2000);
+  } catch (ex) { alert('Fehler: ' + ex.message); }
+});
+document.getElementById('runJanitor').addEventListener('click', async () => {
+  const msg = document.getElementById('janitorMsg');
+  msg.textContent = 'läuft …';
+  try {
+    const r = await api.send('POST', '/janitor/run');
+    msg.textContent = `fertig: +${r.added} hinzugefügt, -${r.removed} entfernt`;
+  } catch (ex) { msg.textContent = 'Fehler: ' + ex.message; }
+});
+
+bootstrap().catch(e => {
+  document.getElementById('loginErr').textContent = 'Fehler: ' + e.message;
+  show('view-login');
+});
+</script>
+</body>
+</html>
@@ -0,0 +1,191 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Datei-Upload</title>
+<style>
+  :root { color-scheme: light dark; }
+  body { font-family: system-ui, sans-serif; max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
+  h1 { margin-bottom: .25rem; }
+  .muted { color: #888; font-size: .9rem; }
+  .drop {
+    margin-top: 1.5rem; border: 2px dashed #888; border-radius: 12px;
+    padding: 3rem 1rem; text-align: center; transition: background .15s, border-color .15s;
+  }
+  .drop.drag { background: rgba(0,120,255,.08); border-color: #0078ff; }
+  .buttons { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
+  button, label.btn {
+    padding: .6rem 1rem; border-radius: 8px; border: 1px solid #888;
+    cursor: pointer; background: transparent; font: inherit;
+  }
+  label.btn input { display: none; }
+  #list { margin-top: 1.5rem; }
+  .file { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid #333; font-size: .9rem; }
+  .file .status { font-variant-numeric: tabular-nums; }
+  .ok { color: #2ecc71; }
+  .err { color: #e74c3c; }
+  .gate { margin-top: 1rem; display: none; }
+  .gate input { padding: .5rem; border-radius: 6px; border: 1px solid #888; background: transparent; color: inherit; }
+  progress { width: 100%; height: 8px; }
+</style>
+</head>
+<body>
+  <h1 id="title">Datei-Upload</h1>
+  <div class="muted" id="info"></div>
+
+  <div class="gate" id="gate">
+    <p>Dieser Link ist passwortgeschützt.</p>
+    <input type="password" id="pw" placeholder="Passwort" />
+    <button id="pwBtn">Entsperren</button>
+    <div id="pwErr" class="err" style="display:none;margin-top:.5rem">Passwort falsch.</div>
+  </div>
+
+  <div id="main" style="display:none">
+    <div class="drop" id="drop">
+      <div>Dateien oder Ordner hier hineinziehen</div>
+      <div class="muted">oder</div>
+      <div class="buttons">
+        <label class="btn">Dateien wählen<input type="file" id="fileInput" multiple /></label>
+        <label class="btn">Ordner wählen<input type="file" id="dirInput" webkitdirectory multiple /></label>
+      </div>
+    </div>
+    <div id="list"></div>
+  </div>
+
+<script>
+const token = location.pathname.split('/').filter(Boolean)[1];
+let password = '';
+
+const info = document.getElementById('info');
+const gate = document.getElementById('gate');
+const main = document.getElementById('main');
+const drop = document.getElementById('drop');
+const list = document.getElementById('list');
+
+async function init() {
+  const r = await fetch(`/u/${token}/info`);
+  if (!r.ok) { document.body.innerHTML = '<h1>Link ungültig oder abgelaufen.</h1>'; return; }
+  const data = await r.json();
+  document.getElementById('title').textContent = `Upload für ${data.name}`;
+  if (data.expires_at) {
+    info.textContent = `Gültig bis: ${new Date(data.expires_at).toLocaleString()}`;
+  }
+  if (data.has_password) gate.style.display = 'block';
+  else main.style.display = 'block';
+}
+
+document.getElementById('pwBtn').onclick = async () => {
+  const pw = document.getElementById('pw').value;
+  const r = await fetch(`/u/${token}/auth`, {
+    method: 'POST', headers: {'Content-Type':'application/json'},
+    body: JSON.stringify({ password: pw }),
+  });
+  const j = await r.json();
+  if (j.ok) { password = pw; gate.style.display='none'; main.style.display='block'; }
+  else document.getElementById('pwErr').style.display='block';
+};
+
+function fmtSize(n) {
+  if (n < 1024) return n + ' B';
+  if (n < 1024*1024) return (n/1024).toFixed(1) + ' KB';
+  if (n < 1024*1024*1024) return (n/1024/1024).toFixed(1) + ' MB';
+  return (n/1024/1024/1024).toFixed(2) + ' GB';
+}
+
+function addRow(name, size) {
+  const row = document.createElement('div');
+  row.className = 'file';
+  row.innerHTML = `<div>${name}</div><div class="status">${fmtSize(size)} – <span>wartet</span><progress max="100" value="0"></progress></div>`;
+  list.appendChild(row);
+  return row;
+}
+
+async function uploadOne(file, relPath) {
+  const row = addRow(relPath, file.size);
+  const status = row.querySelector('.status span');
+  const bar = row.querySelector('progress');
+  const fd = new FormData();
+  // path first, so multer has it available when processing the file
+  fd.append('path', relPath);
+  fd.append('file', file, file.name);
+
+  await new Promise((resolve) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', `/u/${token}/upload`);
+    if (password) xhr.setRequestHeader('X-Upload-Password', password);
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) bar.value = (e.loaded / e.total) * 100;
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        status.textContent = 'fertig';
+        status.className = 'ok';
+        bar.value = 100;
+      } else {
+        status.textContent = 'Fehler';
+        status.className = 'err';
+      }
+      resolve();
+    };
+    xhr.onerror = () => { status.textContent='Fehler'; status.className='err'; resolve(); };
+    xhr.send(fd);
+  });
+}
+
+async function uploadFiles(items) {
+  for (const { file, path } of items) {
+    await uploadOne(file, path);
+  }
+}
+
+document.getElementById('fileInput').onchange = (e) => {
+  const items = [...e.target.files].map(f => ({ file: f, path: f.name }));
+  uploadFiles(items);
+};
+document.getElementById('dirInput').onchange = (e) => {
+  const items = [...e.target.files].map(f => ({ file: f, path: f.webkitRelativePath || f.name }));
+  uploadFiles(items);
+};
+
+// Drag & drop with directory support
+async function traverse(entry, prefix='') {
+  const out = [];
+  if (entry.isFile) {
+    const file = await new Promise(r => entry.file(r));
+    out.push({ file, path: prefix + entry.name });
+  } else if (entry.isDirectory) {
+    const reader = entry.createReader();
+    const entries = await new Promise(r => reader.readEntries(r));
+    for (const e of entries) {
+      const sub = await traverse(e, prefix + entry.name + '/');
+      out.push(...sub);
+    }
+  }
+  return out;
+}
+
+drop.addEventListener('dragover', (e) => { e.preventDefault(); drop.classList.add('drag'); });
+drop.addEventListener('dragleave', () => drop.classList.remove('drag'));
+drop.addEventListener('drop', async (e) => {
+  e.preventDefault();
+  drop.classList.remove('drag');
+  const items = [...e.dataTransfer.items];
+  const all = [];
+  for (const it of items) {
+    const entry = it.webkitGetAsEntry && it.webkitGetAsEntry();
+    if (entry) {
+      const sub = await traverse(entry);
+      all.push(...sub);
+    } else if (it.kind === 'file') {
+      const f = it.getAsFile();
+      all.push({ file: f, path: f.name });
+    }
+  }
+  uploadFiles(all);
+});
+
+init();
+</script>
+</body>
+</html>