feat: implement tenant OAuth flow and guest achievements

resources/js/guest/components/Header.tsx

@@ -1,18 +1,25 @@
-import React from 'react';
-import { Button } from '@/components/ui/button';
-import { Link } from 'react-router-dom';
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import React from 'react';
 import AppearanceToggleDropdown from '@/components/appearance-dropdown';
-import { Settings, ChevronDown, User } from 'lucide-react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { User } from 'lucide-react';
 import { useEventData } from '../hooks/useEventData';
-import { usePollStats } from '../polling/usePollStats';
+import { useOptionalEventStats } from '../context/EventStatsContext';
+import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
+import { SettingsSheet } from './settings-sheet';
 
 export default function Header({ slug, title = '' }: { slug?: string; title?: string }) {
+  const statsContext = useOptionalEventStats();
+  const identity = useOptionalGuestIdentity();
+
   if (!slug) {
+    const guestName = identity?.name && identity?.hydrated ? identity.name : null;
     return (
       <div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
-        <div className="font-semibold">{title}</div>
+        <div className="flex flex-col">
+          <div className="font-semibold">{title}</div>
+          {guestName && (
+            <span className="text-xs text-muted-foreground">Hi {guestName}</span>
+          )}
+        </div>
         <div className="flex items-center gap-2">
           <AppearanceToggleDropdown />
           <SettingsSheet />
@@ -22,7 +29,8 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
   }
 
   const { event, loading: eventLoading, error: eventError } = useEventData();
-  const stats = usePollStats(slug);
+  const stats = statsContext && statsContext.slug === slug ? statsContext : undefined;
+  const guestName = identity && identity.slug === slug && identity.hydrated && identity.name ? identity.name : null;
 
   if (eventLoading) {
     return (
@@ -48,7 +56,6 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
     );
   }
 
-  // Get event icon or generate initials
   const getEventAvatar = (event: any) => {
     if (event.type?.icon) {
       return (
@@ -57,8 +64,7 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
         </div>
       );
     }
-    
-    // Fallback to initials
+
     const getInitials = (name: string) => {
       const words = name.split(' ');
       if (words.length >= 2) {
@@ -80,6 +86,9 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
         {getEventAvatar(event)}
         <div className="flex flex-col">
           <div className="font-semibold text-base">{event.name}</div>
+          {guestName && (
+            <span className="text-xs text-muted-foreground">Hi {guestName}</span>
+          )}
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
             {stats && (
               <>
@@ -87,9 +96,9 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
                   <User className="h-3 w-3" />
                   <span>{stats.onlineGuests} online</span>
                 </span>
-                <span>•</span>
+                <span className="text-muted-foreground">|</span>
                 <span className="flex items-center gap-1">
-                  <span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
+                  <span className="font-medium">{stats.tasksSolved}</span> Aufgaben geloest
                 </span>
               </>
             )}
@@ -104,88 +113,4 @@ export default function Header({ slug, title = '' }: { slug?: string; title?: st
   );
 }
 
-function SettingsSheet() {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
-          <Settings className="h-5 w-5" />
-          <span className="sr-only">Einstellungen öffnen</span>
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="right" className="w-80 sm:w-96">
-        <SheetHeader>
-          <SheetTitle>Einstellungen</SheetTitle>
-        </SheetHeader>
-        <div className="mt-4 space-y-4">
-          <Collapsible defaultOpen>
-            <div className="flex items-center justify-between">
-              <div className="text-sm font-medium">Cache</div>
-              <CollapsibleTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 px-2">
-                  <ChevronDown className="h-4 w-4" />
-                </Button>
-              </CollapsibleTrigger>
-            </div>
-            <CollapsibleContent>
-              <div className="mt-2">
-                <ClearCacheButton />
-              </div>
-            </CollapsibleContent>
-          </Collapsible>
-
-          <Collapsible defaultOpen>
-            <div className="flex items-center justify-between">
-              <div className="text-sm font-medium">Rechtliches</div>
-              <CollapsibleTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 px-2">
-                  <ChevronDown className="h-4 w-4" />
-                </Button>
-              </CollapsibleTrigger>
-            </div>
-            <CollapsibleContent>
-              <ul className="mt-2 list-disc pl-5 text-sm">
-                <li><Link to="/legal/impressum" className="underline">Impressum</Link></li>
-                <li><Link to="/legal/datenschutz" className="underline">Datenschutz</Link></li>
-                <li><Link to="/legal/agb" className="underline">AGB</Link></li>
-              </ul>
-            </CollapsibleContent>
-          </Collapsible>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-function ClearCacheButton() {
-  const [busy, setBusy] = React.useState(false);
-  const [done, setDone] = React.useState(false);
-
-  async function clearAll() {
-    setBusy(true); setDone(false);
-    try {
-      // Clear CacheStorage
-      if ('caches' in window) {
-        const keys = await caches.keys();
-        await Promise.all(keys.map((k) => caches.delete(k)));
-      }
-      // Clear known IndexedDB dbs (best-effort)
-      if ('indexedDB' in window) {
-        try { await new Promise((res, rej) => { const r = indexedDB.deleteDatabase('upload-queue'); r.onsuccess=()=>res(null); r.onerror=()=>res(null); }); } catch {}
-      }
-      setDone(true);
-    } finally {
-      setBusy(false);
-      setTimeout(() => setDone(false), 2500);
-    }
-  }
-
-  return (
-    <div className="mt-2">
-      <Button variant="secondary" onClick={clearAll} disabled={busy}>
-        {busy ? 'Leere Cache…' : 'Cache leeren'}
-      </Button>
-      {done && <div className="mt-2 text-xs text-muted-foreground">Cache gelöscht.</div>}
-    </div>
-  );
-}
+export {}

resources/js/guest/components/legal-markdown.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+type Props = {
+  markdown: string;
+};
+
+export function LegalMarkdown({ markdown }: Props) {
+  const html = React.useMemo(() => {
+    let safe = markdown
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    safe = safe.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+    safe = safe.replace(/(?<!\*)\*(?!\*)(.+?)(?<!\*)\*(?!\*)/g, '<em>$1</em>');
+    safe = safe.replace(/\[(.+?)\]\((https?:[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    safe = safe
+      .split(/\n{2,}/)
+      .map((block) => `<p>${block.replace(/\n/g, '<br/>')}</p>`)
+      .join('\n');
+    return safe;
+  }, [markdown]);
+
+  return <div className="prose prose-sm dark:prose-invert" dangerouslySetInnerHTML={{ __html: html }} />;
+}

resources/js/guest/components/settings-sheet.tsx

@@ -0,0 +1,401 @@
+import React from "react";
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from '@/components/ui/sheet';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Settings, ArrowLeft, FileText, RefreshCcw, ChevronRight, UserCircle } from 'lucide-react';
+import { useOptionalGuestIdentity } from '../context/GuestIdentityContext';
+import { LegalMarkdown } from './legal-markdown';
+
+const legalPages = [
+  { slug: 'impressum', label: 'Impressum' },
+  { slug: 'datenschutz', label: 'Datenschutz' },
+  { slug: 'agb', label: 'AGB' },
+] as const;
+
+type ViewState =
+  | { mode: 'home' }
+  | { mode: 'legal'; slug: (typeof legalPages)[number]['slug']; label: string };
+
+type LegalDocumentState =
+  | { phase: 'idle'; title: string; body: string }
+  | { phase: 'loading'; title: string; body: string }
+  | { phase: 'ready'; title: string; body: string }
+  | { phase: 'error'; title: string; body: string };
+
+type NameStatus = 'idle' | 'saved';
+
+export function SettingsSheet() {
+  const [open, setOpen] = React.useState(false);
+  const [view, setView] = React.useState<ViewState>({ mode: 'home' });
+  const identity = useOptionalGuestIdentity();
+  const [nameDraft, setNameDraft] = React.useState(identity?.name ?? '');
+  const [nameStatus, setNameStatus] = React.useState<NameStatus>('idle');
+  const [savingName, setSavingName] = React.useState(false);
+  const isLegal = view.mode === 'legal';
+  const legalDocument = useLegalDocument(isLegal ? view.slug : null);
+
+  React.useEffect(() => {
+    if (open && identity?.hydrated) {
+      setNameDraft(identity.name ?? '');
+      setNameStatus('idle');
+    }
+  }, [open, identity?.hydrated, identity?.name]);
+
+  const handleBack = React.useCallback(() => {
+    setView({ mode: 'home' });
+  }, []);
+
+  const handleOpenLegal = React.useCallback(
+    (slug: (typeof legalPages)[number]['slug'], label: string) => {
+      setView({ mode: 'legal', slug, label });
+    },
+    []
+  );
+
+  const handleOpenChange = React.useCallback((next: boolean) => {
+    setOpen(next);
+    if (!next) {
+      setView({ mode: 'home' });
+      setNameStatus('idle');
+    }
+  }, []);
+
+  const canSaveName = Boolean(
+    identity?.hydrated && nameDraft.trim() && nameDraft.trim() !== (identity?.name ?? '')
+  );
+
+  const handleSaveName = React.useCallback(() => {
+    if (!identity || !canSaveName) {
+      return;
+    }
+    setSavingName(true);
+    try {
+      identity.setName(nameDraft);
+      setNameStatus('saved');
+      window.setTimeout(() => setNameStatus('idle'), 2000);
+    } finally {
+      setSavingName(false);
+    }
+  }, [identity, nameDraft, canSaveName]);
+
+  const handleResetName = React.useCallback(() => {
+    if (!identity) return;
+    identity.clearName();
+    setNameDraft('');
+    setNameStatus('idle');
+  }, [identity]);
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
+          <Settings className="h-5 w-5" />
+          <span className="sr-only">Einstellungen oeffnen</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="sm:max-w-md">
+        <div className="flex h-full flex-col">
+          <header className="border-b bg-background px-6 py-4">
+            {isLegal ? (
+              <div className="flex items-center gap-3">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-9 w-9"
+                  onClick={handleBack}
+                >
+                  <ArrowLeft className="h-5 w-5" />
+                  <span className="sr-only">Zurück</span>
+                </Button>
+                <div className="min-w-0">
+                  <SheetTitle className="truncate">
+                    {legalDocument.phase === 'ready' && legalDocument.title
+                      ? legalDocument.title
+                      : view.label}
+                  </SheetTitle>
+                  <SheetDescription>
+                    {legalDocument.phase === 'loading' ? 'Laedt...' : 'Rechtlicher Hinweis'}
+                  </SheetDescription>
+                </div>
+              </div>
+            ) : (
+              <div>
+                <SheetTitle>Einstellungen</SheetTitle>
+                <SheetDescription>
+                  Verwalte deinen Gastzugang, rechtliche Dokumente und lokale Daten.
+                </SheetDescription>
+              </div>
+            )}
+          </header>
+
+          <main className="flex-1 overflow-y-auto px-6 py-4">
+            {isLegal ? (
+              <LegalView document={legalDocument} onClose={() => handleOpenChange(false)} />
+            ) : (
+              <HomeView
+                identity={identity}
+                nameDraft={nameDraft}
+                onNameChange={setNameDraft}
+                onSaveName={handleSaveName}
+                onResetName={handleResetName}
+                canSaveName={canSaveName}
+                savingName={savingName}
+                nameStatus={nameStatus}
+                onOpenLegal={handleOpenLegal}
+              />
+            )}
+          </main>
+
+          <SheetFooter className="border-t bg-muted/40 px-6 py-3 text-xs text-muted-foreground">
+            <div>Gastbereich - Daten werden lokal im Browser gespeichert.</div>
+          </SheetFooter>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function LegalView({ document, onClose }: { document: LegalDocumentState; onClose: () => void }) {
+  if (document.phase === 'error') {
+    return (
+      <div className="space-y-4">
+        <Alert variant="destructive">
+          <AlertDescription>
+            Das Dokument konnte nicht geladen werden. Bitte versuche es spaeter erneut.
+          </AlertDescription>
+        </Alert>
+        <Button variant="secondary" onClick={onClose}>
+          Schliessen
+        </Button>
+      </div>
+    );
+  }
+
+  if (document.phase === 'loading' || document.phase === 'idle') {
+    return <div className="text-sm text-muted-foreground">Dokument wird geladen...</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>{document.title || 'Rechtlicher Hinweis'}</CardTitle>
+        </CardHeader>
+        <CardContent className="prose prose-sm max-w-none dark:prose-invert">
+          <LegalMarkdown markdown={document.body} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+interface HomeViewProps {
+  identity: ReturnType<typeof useOptionalGuestIdentity>;
+  nameDraft: string;
+  onNameChange: (value: string) => void;
+  onSaveName: () => void;
+  onResetName: () => void;
+  canSaveName: boolean;
+  savingName: boolean;
+  nameStatus: NameStatus;
+  onOpenLegal: (slug: (typeof legalPages)[number]['slug'], label: string) => void;
+}
+
+function HomeView({
+  identity,
+  nameDraft,
+  onNameChange,
+  onSaveName,
+  onResetName,
+  canSaveName,
+  savingName,
+  nameStatus,
+  onOpenLegal,
+}: HomeViewProps) {
+  return (
+    <div className="space-y-6">
+      {identity && (
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle>Dein Name</CardTitle>
+            <CardDescription>
+              Passe an, wie wir dich im Event begruessen. Der Name wird nur lokal gespeichert.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center gap-3">
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-pink-100 text-pink-600">
+                <UserCircle className="h-6 w-6" />
+              </div>
+              <div className="flex-1 space-y-2">
+                <Label htmlFor="guest-name" className="text-sm font-medium">
+                  Anzeigename
+                </Label>
+                <Input
+                  id="guest-name"
+                  value={nameDraft}
+                  placeholder="z.B. Anna"
+                  onChange={(event) => onNameChange(event.target.value)}
+                  autoComplete="name"
+                  disabled={!identity.hydrated || savingName}
+                />
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-2">
+              <Button onClick={onSaveName} disabled={!canSaveName || savingName}>
+                {savingName ? 'Speichere...' : 'Name speichern'}
+              </Button>
+              <Button type="button" variant="ghost" onClick={onResetName} disabled={savingName}>
+                zurücksetzen
+              </Button>
+              {nameStatus === 'saved' && (
+                <span className="text-xs text-muted-foreground">Gespeichert (ok)</span>
+              )}
+              {!identity.hydrated && (
+                <span className="text-xs text-muted-foreground">Lade gespeicherten Namen...</span>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle>
+            <div className="flex items-center gap-2">
+              <FileText className="h-4 w-4 text-pink-500" />
+              Rechtliches
+            </div>
+          </CardTitle>
+          <CardDescription>
+            Die rechtlich verbindlichen Texte sind jederzeit hier abrufbar.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {legalPages.map((page) => (
+            <Button
+              key={page.slug}
+              variant="ghost"
+              className="w-full justify-between px-3"
+              onClick={() => onOpenLegal(page.slug, page.label)}
+            >
+              <span className="text-left text-sm">{page.label}</span>
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Offline Cache</CardTitle>
+          <CardDescription>
+            Loesche lokale Daten, falls Inhalte veraltet erscheinen oder Uploads haengen bleiben.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <ClearCacheButton />
+          <div className="flex items-start gap-2 text-xs text-muted-foreground">
+            <RefreshCcw className="mt-0.5 h-3.5 w-3.5" />
+            <span>Dies betrifft nur diesen Browser und muss pro Geraet erneut ausgefuehrt werden.</span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function useLegalDocument(slug: string | null): LegalDocumentState {
+  const [state, setState] = React.useState<LegalDocumentState>({
+    phase: 'idle',
+    title: '',
+    body: '',
+  });
+
+  React.useEffect(() => {
+    if (!slug) {
+      setState({ phase: 'idle', title: '', body: '' });
+      return;
+    }
+
+    const controller = new AbortController();
+    setState({ phase: 'loading', title: '', body: '' });
+
+    fetch(`/api/v1/legal/${encodeURIComponent(slug)}?lang=de`, {
+      headers: { 'Cache-Control': 'no-store' },
+      signal: controller.signal,
+    })
+      .then(async (res) => {
+        if (!res.ok) {
+          throw new Error('failed');
+        }
+        const payload = await res.json();
+        setState({
+          phase: 'ready',
+          title: payload.title ?? '',
+          body: payload.body_markdown ?? '',
+        });
+      })
+      .catch((error) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        console.error('Failed to load legal page', error);
+        setState({ phase: 'error', title: '', body: '' });
+      });
+
+    return () => controller.abort();
+  }, [slug]);
+
+  return state;
+}
+
+function ClearCacheButton() {
+  const [busy, setBusy] = React.useState(false);
+  const [done, setDone] = React.useState(false);
+
+  async function clearAll() {
+    setBusy(true);
+    setDone(false);
+    try {
+      if ('caches' in window) {
+        const keys = await caches.keys();
+        await Promise.all(keys.map((key) => caches.delete(key)));
+      }
+      if ('indexedDB' in window) {
+        try {
+          await new Promise((resolve) => {
+            const request = indexedDB.deleteDatabase('upload-queue');
+            request.onsuccess = () => resolve(null);
+            request.onerror = () => resolve(null);
+          });
+        } catch (error) {
+          console.warn('IndexedDB cleanup failed', error);
+        }
+      }
+      setDone(true);
+    } finally {
+      setBusy(false);
+      window.setTimeout(() => setDone(false), 2500);
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <Button variant="secondary" onClick={clearAll} disabled={busy} className="w-full">
+        {busy ? 'Leere Cache...' : 'Cache leeren'}
+      </Button>
+      {done && <div className="text-xs text-muted-foreground">Cache geloescht.</div>}
+    </div>
+  );
+}