feat: add scoped upload tokens

nextjs/app/manage/_components/action-dialog.js

@@ -0,0 +1,36 @@
+'use client';
+
+import { useRef } from 'react';
+
+export function ActionDialog({ label = 'Aktionen', title = 'Aktionen', children }) {
+  const dialogRef = useRef(null);
+
+  function openDialog() {
+    dialogRef.current?.showModal();
+  }
+
+  function closeOnBackdrop(event) {
+    if (event.target === event.currentTarget) {
+      event.currentTarget.close();
+    }
+  }
+
+  return (
+    <>
+      <button className="btn secondary" type="button" onClick={openDialog}>
+        {label}
+      </button>
+      <dialog className="action-dialog" ref={dialogRef} onClick={closeOnBackdrop}>
+        <div className="dialog-header">
+          <h3>{title}</h3>
+          <form method="dialog">
+            <button className="btn secondary" type="submit">
+              Schließen
+            </button>
+          </form>
+        </div>
+        <div className="action-dialog-body">{children}</div>
+      </dialog>
+    </>
+  );
+}

nextjs/app/manage/_components/admin-tabs.js

@@ -0,0 +1,22 @@
+const adminTabs = [
+  { key: 'dashboard', href: '/manage/dashboard', label: 'Meine Dateien' },
+  { key: 'stats', href: '/manage/admin/dashboard?tab=stats', label: 'Admin' },
+  { key: 'uploads', href: '/manage/admin/dashboard?tab=uploads', label: 'Alle Uploads' },
+  { key: 'requests', href: '/manage/admin/dashboard?tab=requests', label: 'Anfragen' },
+  { key: 'files', href: '/manage/admin/files', label: 'Dateimanager' },
+  { key: 'users', href: '/manage/admin/users', label: 'Benutzer' },
+  { key: 'tokens', href: '/manage/admin/tokens', label: 'Upload-Tokens' },
+  { key: 'logs', href: '/manage/admin/dashboard?tab=logs', label: 'Logs' },
+];
+
+export function AdminTabs({ active }) {
+  return (
+    <nav className="tabs" aria-label="Admin-Bereiche">
+      {adminTabs.map((tab) => (
+        <a key={tab.key} className={`tab ${active === tab.key ? 'active' : ''}`} href={tab.href}>
+          {tab.label}
+        </a>
+      ))}
+    </nav>
+  );
+}

nextjs/app/manage/_components/curl-upload-example.js

@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function CurlUploadExample({ path, token = '', fileName = 'datei.pdf' }) {
+  const [url, setUrl] = useState(path);
+
+  useEffect(() => {
+    setUrl(new URL(path, window.location.origin).toString());
+  }, [path]);
+
+  const header = token
+    ? `-H 'Authorization: Bearer ${token}'`
+    : `-H 'X-File-Name: ${fileName}'`;
+
+  return <pre><code>{`curl -T ./${fileName} ${header} '${url}'`}</code></pre>;
+}