Added opaque join-token support across backend and frontend: new migration/model/service/endpoints, guest controllers now resolve tokens, and the demo seeder seeds a token. Tenant event details list/manage tokens with copy/revoke actions, and the guest PWA uses tokens end-to-end (routing, storage, uploads, achievements, etc.). Docs TODO updated to reflect completed steps.

2025-10-12 10:32:37 +02:00
parent d04e234ca0
commit 9394c3171e
73 changed files with 3277 additions and 911 deletions
--- a/resources/js/admin/pages/EventDetailPage.tsx
+++ b/resources/js/admin/pages/EventDetailPage.tsx
@@ -7,7 +7,17 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

 import { AdminLayout } from '../components/AdminLayout';
-import { createInviteLink, getEvent, getEventStats, TenantEvent, EventStats as TenantEventStats, toggleEvent } from '../api';
+import {
+  createInviteLink,
+  EventJoinToken,
+  EventStats as TenantEventStats,
+  getEvent,
+  getEventJoinTokens,
+  getEventStats,
+  TenantEvent,
+  toggleEvent,
+  revokeEventJoinToken,
+} from '../api';
 import { isAuthError } from '../auth/tokens';
 import {
  ADMIN_EVENTS_PATH,
@@ -20,6 +30,7 @@ import {
 interface State {
  event: TenantEvent | null;
  stats: TenantEventStats | null;
+  tokens: EventJoinToken[];
  inviteLink: string | null;
  error: string | null;
  loading: boolean;
@@ -35,11 +46,14 @@ export default function EventDetailPage() {
  const [state, setState] = React.useState<State>({
    event: null,
    stats: null,
+    tokens: [],
    inviteLink: null,
    error: null,
    loading: true,
    busy: false,
  });
+  const [creatingToken, setCreatingToken] = React.useState(false);
+  const [revokingId, setRevokingId] = React.useState<number | null>(null);

  const load = React.useCallback(async () => {
    if (!slug) {
@@ -49,17 +63,22 @@ export default function EventDetailPage() {

    setState((prev) => ({ ...prev, loading: true, error: null }));
    try {
-      const [eventData, statsData] = await Promise.all([getEvent(slug), getEventStats(slug)]);
+      const [eventData, statsData, joinTokens] = await Promise.all([
+        getEvent(slug),
+        getEventStats(slug),
+        getEventJoinTokens(slug),
+      ]);
      setState((prev) => ({
        ...prev,
        event: eventData,
        stats: statsData,
+        tokens: joinTokens,
        loading: false,
        inviteLink: prev.inviteLink,
      }));
    } catch (err) {
      if (isAuthError(err)) return;
-      setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false }));
+      setState((prev) => ({ ...prev, error: 'Event konnte nicht geladen werden.', loading: false, tokens: [] }));
    }
  }, [slug]);

@@ -88,26 +107,58 @@ export default function EventDetailPage() {
  }

  async function handleInvite() {
-    if (!slug) return;
-    setState((prev) => ({ ...prev, busy: true, error: null }));
+    if (!slug || creatingToken) return;
+    setCreatingToken(true);
+    setState((prev) => ({ ...prev, error: null }));
    try {
-      const { link } = await createInviteLink(slug);
-      setState((prev) => ({ ...prev, inviteLink: link, busy: false }));
+      const token = await createInviteLink(slug);
+      setState((prev) => ({
+        ...prev,
+        inviteLink: token.url,
+        tokens: [token, ...prev.tokens.filter((t) => t.id !== token.id)],
+      }));
      try {
-        await navigator.clipboard.writeText(link);
+        await navigator.clipboard.writeText(token.url);
      } catch {
        // clipboard may be unavailable, ignore silently
      }
    } catch (err) {
      if (!isAuthError(err)) {
-        setState((prev) => ({ ...prev, error: 'Einladungslink konnte nicht erzeugt werden.', busy: false }));
-      } else {
-        setState((prev) => ({ ...prev, busy: false }));
+        setState((prev) => ({ ...prev, error: 'Einladungslink konnte nicht erzeugt werden.' }));
      }
    }
+    setCreatingToken(false);
+  }
+
+  async function handleCopy(token: EventJoinToken) {
+    try {
+      await navigator.clipboard.writeText(token.url);
+      setState((prev) => ({ ...prev, inviteLink: token.url }));
+    } catch (err) {
+      console.warn('Clipboard copy failed', err);
+    }
  }

-  const { event, stats, inviteLink, error, loading, busy } = state;
+  async function handleRevoke(token: EventJoinToken) {
+    if (!slug || token.revoked_at) return;
+    setRevokingId(token.id);
+    setState((prev) => ({ ...prev, error: null }));
+    try {
+      const updated = await revokeEventJoinToken(slug, token.id);
+      setState((prev) => ({
+        ...prev,
+        tokens: prev.tokens.map((existing) => (existing.id === updated.id ? updated : existing)),
+      }));
+    } catch (err) {
+      if (!isAuthError(err)) {
+        setState((prev) => ({ ...prev, error: 'Token konnte nicht deaktiviert werden.' }));
+      }
+    } finally {
+      setRevokingId(null);
+    }
+  }
+
+  const { event, stats, tokens, inviteLink, error, loading, busy } = state;

  const actions = (
    <>
@@ -219,15 +270,32 @@ export default function EventDetailPage() {
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3 text-sm text-slate-700">
-              <Button onClick={handleInvite} disabled={busy} className="w-full">
-                {busy ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
-                Einladungslink kopieren
+              <Button onClick={handleInvite} disabled={creatingToken} className="w-full">
+                {creatingToken ? <Loader2 className="h-4 w-4 animate-spin" /> : <Share2 className="h-4 w-4" />}
+                Einladungslink erzeugen
              </Button>
              {inviteLink && (
                <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 font-mono text-xs text-amber-800">
                  {inviteLink}
                </p>
              )}
+              <div className="space-y-3">
+                {tokens.length > 0 ? (
+                  tokens.map((token) => (
+                    <JoinTokenRow
+                      key={token.id}
+                      token={token}
+                      onCopy={() => handleCopy(token)}
+                      onRevoke={() => handleRevoke(token)}
+                      revoking={revokingId === token.id}
+                    />
+                  ))
+                ) : (
+                  <p className="text-xs text-slate-500">
+                    Noch keine Einladungen erstellt. Nutze den Button, um einen neuen QR-Link zu generieren.
+                  </p>
+                )}
+              </div>
            </CardContent>
          </Card>

@@ -286,6 +354,63 @@ function StatChip({ label, value }: { label: string; value: string | number }) {
  );
 }

+function JoinTokenRow({
+  token,
+  onCopy,
+  onRevoke,
+  revoking,
+}: {
+  token: EventJoinToken;
+  onCopy: () => void;
+  onRevoke: () => void;
+  revoking: boolean;
+}) {
+  const status = getTokenStatus(token);
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-amber-100 bg-amber-50/60 p-3 md:flex-row md:items-center md:justify-between">
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold text-slate-800">{token.label || `Einladung #${token.id}`}</span>
+          <span
+            className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+              status === 'Aktiv'
+                ? 'bg-emerald-100 text-emerald-700'
+                : status === 'Abgelaufen'
+                  ? 'bg-orange-100 text-orange-700'
+                  : 'bg-slate-200 text-slate-700'
+            }`}
+          >
+            {status}
+          </span>
+        </div>
+        <p className="break-all font-mono text-xs text-slate-600">{token.url}</p>
+        <div className="flex flex-wrap gap-3 text-xs text-slate-500">
+          <span>
+            Nutzung: {token.usage_count}
+            {token.usage_limit ? ` / ${token.usage_limit}` : ''}
+          </span>
+          {token.expires_at && <span>Gültig bis {formatDateTime(token.expires_at)}</span>}
+          {token.created_at && <span>Erstellt {formatDateTime(token.created_at)}</span>}
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" onClick={onCopy} className="border-amber-200 text-amber-700 hover:bg-amber-100">
+          Kopieren
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onRevoke}
+          disabled={revoking || token.revoked_at !== null || !token.is_active}
+          className="text-slate-600 hover:bg-slate-100 disabled:opacity-50"
+        >
+          {revoking ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Deaktivieren'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 function formatDate(iso: string | null): string {
  if (!iso) return 'Noch kein Datum';
  const date = new Date(iso);
@@ -295,6 +420,32 @@ function formatDate(iso: string | null): string {
  return date.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
 }

+function formatDateTime(iso: string | null): string {
+  if (!iso) return 'unbekannt';
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return 'unbekannt';
+  }
+  return date.toLocaleString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function getTokenStatus(token: EventJoinToken): 'Aktiv' | 'Deaktiviert' | 'Abgelaufen' {
+  if (token.revoked_at) return 'Deaktiviert';
+  if (token.expires_at) {
+    const expiry = new Date(token.expires_at);
+    if (!Number.isNaN(expiry.getTime()) && expiry.getTime() < Date.now()) {
+      return 'Abgelaufen';
+    }
+  }
+  return token.is_active ? 'Aktiv' : 'Deaktiviert';
+}
+
 function renderName(name: TenantEvent['name']): string {
  if (typeof name === 'string') {
    return name;