+
+
+
Aufgabe auswaehlen
+
+ Schon {completedCount} Aufgaben erledigt
+
+
+
+
+ Auf dem Weg zum naechsten Erfolg
+
+ {completedCount >= TASK_PROGRESS_TARGET
+ ? 'Stark!'
+ : `${Math.max(0, TASK_PROGRESS_TARGET - completedCount)} bis zum Badge`}
+
+
+
+
+ handleSelectEmotion('all')}
+ />
+ {emotionOptions.map((emotion) => (
+ handleSelectEmotion(emotion.slug)}
+ />
+ ))}
+
+ )}
+
- {/* Task Description Overlay */}
-
-
-
- {currentTask.title}
-
-
- {currentTask.description}
-
- {currentTask.instructions && (
-
-
💡 {currentTask.instructions}
-
+ {loading && (
+
+
+
+
+ )}
+
+ {error && !loading && (
+
+
+ {error}
+
+
+
+ )}
+
+ {emptyState && (
+
+ )}
+
+ {!emptyState && currentTask && (
+
+
+
+
+
+
+
Deine Mission
+
{currentTask.title}
+
+
+
+
+ {timeUp && (
+
+
+ Zeit abgelaufen!
+
)}
-
- {/* Action Buttons */}
-
-
+
+
+
+
+ {currentTask.duration} Min
+
+ {currentTask.emotion?.name && (
+
+
+ {currentTask.emotion.name}
+
+ )}
+ {isCompleted(currentTask.id) && (
+
+
+ Bereits erledigt
+
+ )}
+
-
-
+
+
+
+
-
-
+
+
+
+
+
+ )}
- {/* Bottom Navigation */}
-
-
-
+ {!loading && !tasks.length && !error && (
+
+ Fuer dieses Event sind derzeit keine Aufgaben hinterlegt.
+
+ )}
+
+ );
+}
+
+function timerTone(timeLeft: number, durationMinutes: number) {
+ const totalSeconds = Math.max(1, durationMinutes * 60);
+ const ratio = timeLeft / totalSeconds;
+ if (ratio > 0.5) return 'okay';
+ if (ratio > 0.25) return 'warm';
+ return 'hot';
+}
+
+function EmotionChip({ label, active, onClick }: { label: string; active: boolean; onClick: () => void }) {
+ return (
+
+ );
+}
+
+function ChecklistItem({ text }: { text: string }) {
+ return (
+
+
+ {text}
+
+ );
+}
+
+function BadgeTimer({ label, value, tone }: { label: string; value: string; tone: 'okay' | 'warm' | 'hot' }) {
+ const toneClasses = {
+ okay: 'bg-emerald-500/15 text-emerald-500 border-emerald-500/30',
+ warm: 'bg-amber-500/15 text-amber-500 border-amber-500/30',
+ hot: 'bg-rose-500/15 text-rose-500 border-rose-500/30',
+ }[tone];
+ return (
+
+
+ {label}
+ {value}
+
+ );
+}
+
+function SkeletonBlock() {
+ return
;
+}
+
+function EmptyState({
+ hasTasks,
+ onRetry,
+ emotionOptions,
+ onEmotionSelect,
+}: {
+ hasTasks: boolean;
+ onRetry: () => void;
+ emotionOptions: EmotionOption[];
+ onEmotionSelect: (slug: string) => void;
+}) {
+ return (
+
+
+
+
Keine passende Aufgabe gefunden
+
+ {hasTasks
+ ? 'Fuer deine aktuelle Stimmung gibt es gerade keine Aufgabe. Waehle eine andere Stimmung oder lade neue Aufgaben.'
+ : 'Hier sind noch keine Aufgaben hinterlegt. Bitte versuche es spaeter erneut.'}
+
+
+ {hasTasks && emotionOptions.length > 0 && (
+
+ {emotionOptions.map((emotion) => (
+ onEmotionSelect(emotion.slug)}
+ />
+ ))}
+
+ )}
+
+
);
}
diff --git a/resources/js/guest/pages/UploadPage.tsx b/resources/js/guest/pages/UploadPage.tsx
index 14637df..2f25b59 100644
--- a/resources/js/guest/pages/UploadPage.tsx
+++ b/resources/js/guest/pages/UploadPage.tsx
@@ -1,11 +1,26 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
-import { Page } from './_util';
-import { Button } from '@/components/ui/button';
-import { useAppearance } from '../../hooks/use-appearance';
-import { Camera, RotateCcw, Zap, ZapOff } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import Header from '../components/Header';
import BottomNav from '../components/BottomNav';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
import { uploadPhoto } from '../services/photosApi';
+import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
+import { useAppearance } from '../../hooks/use-appearance';
+import { cn } from '@/lib/utils';
+import {
+ AlertTriangle,
+ Camera,
+ Grid3X3,
+ ImagePlus,
+ Info,
+ Loader2,
+ RotateCcw,
+ Sparkles,
+ Zap,
+ ZapOff,
+} from 'lucide-react';
interface Task {
id: number;
@@ -17,455 +32,777 @@ interface Task {
difficulty?: 'easy' | 'medium' | 'hard';
}
+type PermissionState = 'idle' | 'prompt' | 'granted' | 'denied' | 'error' | 'unsupported';
+type CameraMode = 'preview' | 'countdown' | 'review' | 'uploading';
+
+type CameraPreferences = {
+ facingMode: 'user' | 'environment';
+ countdownSeconds: number;
+ countdownEnabled: boolean;
+ gridEnabled: boolean;
+ mirrorFrontPreview: boolean;
+ flashPreferred: boolean;
+};
+
+const DEFAULT_PREFS: CameraPreferences = {
+ facingMode: 'environment',
+ countdownSeconds: 3,
+ countdownEnabled: true,
+ gridEnabled: true,
+ mirrorFrontPreview: true,
+ flashPreferred: false,
+};
+
export default function UploadPage() {
const { slug } = useParams<{ slug: string }>();
- const [searchParams] = useSearchParams();
const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
const { appearance } = useAppearance();
- const isDark = appearance === 'dark';
+ const isDarkMode = appearance === 'dark';
+ const { markCompleted } = useGuestTaskProgress(slug);
- // Task data from URL params
- const taskId = searchParams.get('task');
+ const taskIdParam = searchParams.get('task');
const emotionSlug = searchParams.get('emotion') || '';
+
+ const primerStorageKey = slug ? `guestCameraPrimerDismissed_${slug}` : 'guestCameraPrimerDismissed';
+ const prefsStorageKey = slug ? `guestCameraPrefs_${slug}` : 'guestCameraPrefs';
+
+ const supportsCamera = typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia;
+
const [task, setTask] = useState
(null);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(null);
- const [uploading, setUploading] = useState(false);
+ const [loadingTask, setLoadingTask] = useState(true);
+ const [taskError, setTaskError] = useState(null);
- // Camera state
- const videoRef = useRef(null);
- const canvasRef = useRef(null);
- const [stream, setStream] = useState(null);
- const [facingMode, setFacingMode] = useState<'user' | 'environment'>('user'); // front = user, back = environment
- const [flashOn, setFlashOn] = useState(false);
- const [isPulsing, setIsPulsing] = useState(false);
- const [countdown, setCountdown] = useState(3);
- const [capturing, setCapturing] = useState(false);
+ const [permissionState, setPermissionState] = useState('idle');
+ const [permissionMessage, setPermissionMessage] = useState(null);
- // Load task data from API
+ const [preferences, setPreferences] = useState(DEFAULT_PREFS);
+ const [mode, setMode] = useState('preview');
+ const [countdownValue, setCountdownValue] = useState(DEFAULT_PREFS.countdownSeconds);
+ const [statusMessage, setStatusMessage] = useState('');
+
+ const [reviewPhoto, setReviewPhoto] = useState<{ dataUrl: string; file: File } | null>(null);
+ const [uploadProgress, setUploadProgress] = useState(0);
+ const [uploadError, setUploadError] = useState(null);
+
+ const [showPrimer, setShowPrimer] = useState(() => {
+ if (typeof window === 'undefined') return false;
+ return window.localStorage.getItem(primerStorageKey) !== '1';
+ });
+
+ const videoRef = useRef(null);
+ const canvasRef = useRef(null);
+ const fileInputRef = useRef(null);
+ const liveRegionRef = useRef(null);
+
+ const streamRef = useRef(null);
+ const countdownTimerRef = useRef(null);
+ const uploadProgressTimerRef = useRef(null);
+
+ const taskId = useMemo(() => {
+ if (!taskIdParam) return null;
+ const parsed = parseInt(taskIdParam, 10);
+ return Number.isFinite(parsed) ? parsed : null;
+ }, [taskIdParam]);
+
+ // Load preferences from storage
+ useEffect(() => {
+ if (typeof window === 'undefined') return;
+ try {
+ const stored = window.localStorage.getItem(prefsStorageKey);
+ if (stored) {
+ const parsed = JSON.parse(stored) as Partial;
+ setPreferences((prev) => ({ ...prev, ...parsed }));
+ }
+ } catch (error) {
+ console.warn('Failed to parse camera preferences', error);
+ }
+ }, [prefsStorageKey]);
+
+ // Persist preferences when they change
+ useEffect(() => {
+ if (typeof window === 'undefined') return;
+ try {
+ window.localStorage.setItem(prefsStorageKey, JSON.stringify(preferences));
+ } catch (error) {
+ console.warn('Failed to persist camera preferences', error);
+ }
+ }, [preferences, prefsStorageKey]);
+
+ // Load task metadata
useEffect(() => {
if (!slug || !taskId) {
- setError('Keine Aufgabendaten gefunden');
- setLoading(false);
+ setTaskError('Keine Aufgabeninformationen gefunden.');
+ setLoadingTask(false);
return;
}
- const taskIdNum = parseInt(taskId);
- if (isNaN(taskIdNum)) {
- setError('Ungültige Aufgaben-ID');
- setLoading(false);
- return;
- }
+ let active = true;
- async function fetchTask() {
+ async function loadTask() {
try {
- setLoading(true);
- setError(null);
-
- const response = await fetch(`/api/v1/events/${slug}/tasks`);
- if (!response.ok) throw new Error('Tasks konnten nicht geladen werden');
-
- const tasks = await response.json();
- const foundTask = tasks.find((t: any) => t.id === taskIdNum);
-
- if (foundTask) {
+ setLoadingTask(true);
+ setTaskError(null);
+
+ const res = await fetch(`/api/v1/events/${encodeURIComponent(slug!)}/tasks`);
+ if (!res.ok) throw new Error('Tasks konnten nicht geladen werden');
+ const tasks = await res.json();
+ const found = Array.isArray(tasks) ? tasks.find((entry: any) => entry.id === taskId!) : null;
+
+ if (!active) return;
+
+ if (found) {
setTask({
- id: foundTask.id,
- title: foundTask.title || `Aufgabe ${taskIdNum}`,
- description: foundTask.description || 'Stelle dich für das Foto auf und lächle in die Kamera.',
- instructions: foundTask.instructions,
- duration: foundTask.duration || 2,
- emotion: foundTask.emotion,
- difficulty: 'medium' as const
+ id: found.id,
+ title: found.title || `Aufgabe ${taskId!}`,
+ description: found.description || 'Halte den Moment fest und teile ihn mit allen Gästen.',
+ instructions: found.instructions,
+ duration: found.duration || 2,
+ emotion: found.emotion,
+ difficulty: found.difficulty ?? 'medium',
});
} else {
- // Fallback for unknown task ID
setTask({
- id: taskIdNum,
- title: `Unbekannte Aufgabe ${taskIdNum}`,
- description: 'Stelle dich für das Foto auf und lächle in die Kamera.',
- instructions: 'Positioniere dich gut und warte auf den Countdown.',
+ id: taskId!,
+ title: `Aufgabe ${taskId!}`,
+ description: 'Halte den Moment fest und teile ihn mit allen Gästen.',
+ instructions: 'Positioniere alle im Bild, starte den Countdown und lass die Emotion wirken.',
duration: 2,
- emotion: emotionSlug ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase()) } : undefined,
- difficulty: 'medium' as const
+ emotion: emotionSlug
+ ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, (l) => l.toUpperCase()) }
+ : undefined,
+ difficulty: 'medium',
+ });
+ }
+ } catch (error) {
+ console.error('Failed to fetch task', error);
+ if (active) {
+ setTaskError('Aufgabe konnte nicht geladen werden. Du kannst trotzdem ein Foto machen.');
+ setTask({
+ id: taskId!,
+ title: `Aufgabe ${taskId!}`,
+ description: 'Halte den Moment fest und teile ihn mit allen Gästen.',
+ instructions: 'Positioniere alle im Bild, starte den Countdown und lass die Emotion wirken.',
+ duration: 2,
+ emotion: emotionSlug
+ ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, (l) => l.toUpperCase()) }
+ : undefined,
+ difficulty: 'medium',
});
}
- } catch (err) {
- console.error('Failed to fetch task:', err);
- setError('Aufgabe konnte nicht geladen werden');
- // Set fallback task
- setTask({
- id: taskIdNum,
- title: `Unbekannte Aufgabe ${taskIdNum}`,
- description: 'Stelle dich für das Foto auf und lächle in die Kamera.',
- instructions: 'Positioniere dich gut und warte auf den Countdown.',
- duration: 2,
- emotion: emotionSlug ? { slug: emotionSlug, name: emotionSlug.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase()) } : undefined,
- difficulty: 'medium' as const
- });
} finally {
- setLoading(false);
+ if (active) setLoadingTask(false);
}
}
- fetchTask();
+ loadTask();
+ return () => {
+ active = false;
+ };
}, [slug, taskId, emotionSlug]);
- // Camera setup
- useEffect(() => {
- if (!slug || loading || !task) return;
+ const stopStream = useCallback(() => {
+ if (streamRef.current) {
+ streamRef.current.getTracks().forEach((track) => track.stop());
+ streamRef.current = null;
+ }
+ }, []);
- const setupCamera = async () => {
- try {
- const constraints: MediaStreamConstraints = {
- video: {
- width: { ideal: 1280 },
- height: { ideal: 720 },
- facingMode: facingMode ? { ideal: facingMode } : undefined
- }
- };
-
- console.log('Requesting camera with constraints:', constraints);
-
- const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+ const attachStreamToVideo = useCallback((stream: MediaStream) => {
+ if (!videoRef.current) return;
+ videoRef.current.srcObject = stream;
+ videoRef.current
+ .play()
+ .then(() => {
if (videoRef.current) {
- videoRef.current.srcObject = newStream;
- videoRef.current.play().catch(e => console.error('Video play error:', e));
- // Set video dimensions after metadata is loaded
- videoRef.current.onloadedmetadata = () => {
- if (videoRef.current) {
- videoRef.current.style.display = 'block';
- }
- };
+ videoRef.current.muted = true;
}
- setStream(newStream);
- setError(null); // Clear any previous errors
- } catch (err: any) {
- console.error('Camera access error:', err.name, err.message);
-
- let errorMessage = 'Kamera konnte nicht gestartet werden.';
-
- switch (err.name) {
- case 'NotAllowedError':
- errorMessage = 'Kamera-Zugriff verweigert.\n\n' +
- '• Chrome: Adressleiste klicken → Kamera-Symbol → "Zulassen"\n' +
- '• Safari: Einstellungen → Website-Einstellungen → Kamera → "Erlauben"\n' +
- '• Firefox: Adressleiste → Berechtigungen → Kamera → "Erlauben"\n\n' +
- 'Danach Seite neu laden.';
- break;
- case 'NotFoundError':
- errorMessage = 'Keine Kamera gefunden. Bitte überprüfen Sie:\n' +
- '• Ob eine Kamera am Gerät verfügbar ist\n' +
- '• Ob andere Apps die Kamera verwenden\n' +
- '• Gerätekonfiguration in den Browser-Einstellungen';
- break;
- case 'NotSupportedError':
- errorMessage = 'Kamera nicht unterstützt. Bitte verwenden Sie:\n' +
- '• Chrome, Firefox oder Safari (neueste Version)\n' +
- '• HTTPS-Verbindung (nicht HTTP)';
- break;
- case 'OverconstrainedError':
- errorMessage = 'Kamera-Einstellungen nicht verfügbar. Versuche mit Standard-Einstellungen...';
- // Fallback to basic constraints
- try {
- const fallbackConstraints = { video: true };
- const fallbackStream = await navigator.mediaDevices.getUserMedia(fallbackConstraints);
- if (videoRef.current) {
- videoRef.current.srcObject = fallbackStream;
- videoRef.current.play();
- }
- setStream(fallbackStream);
- setError(null);
- return;
- } catch (fallbackErr) {
- console.error('Fallback camera failed:', fallbackErr);
- }
- break;
- default:
- errorMessage = `Kamera-Fehler (${err.name}): ${err.message}\n\nBitte versuchen Sie:\n• Seite neu laden\n• Browser neu starten\n• Anderen Browser verwenden`;
- }
-
- setError(errorMessage);
+ })
+ .catch((error) => console.error('Video play error', error));
+ }, []);
+
+ const createConstraint = useCallback(
+ (mode: 'user' | 'environment'): MediaStreamConstraints => ({
+ video: {
+ width: { ideal: 1920 },
+ height: { ideal: 1080 },
+ facingMode: { ideal: mode },
+ },
+ audio: false,
+ }),
+ []
+ );
+
+ const startCamera = useCallback(async () => {
+ if (!supportsCamera) {
+ setPermissionState('unsupported');
+ setPermissionMessage('Dieses Gerät oder der Browser unterstützt keine Kamera-Zugriffe.');
+ return;
+ }
+
+ if (!task || mode === 'uploading') return;
+
+ try {
+ setPermissionState('prompt');
+ setPermissionMessage(null);
+
+ const stream = await navigator.mediaDevices.getUserMedia(createConstraint(preferences.facingMode));
+ stopStream();
+ streamRef.current = stream;
+ attachStreamToVideo(stream);
+ setPermissionState('granted');
+ } catch (error: any) {
+ console.error('Camera access error', error);
+ stopStream();
+
+ if (error?.name === 'NotAllowedError') {
+ setPermissionState('denied');
+ setPermissionMessage(
+ 'Kamera-Zugriff wurde blockiert. Prüfe die Berechtigungen deines Browsers und versuche es erneut.'
+ );
+ } else if (error?.name === 'NotFoundError') {
+ setPermissionState('error');
+ setPermissionMessage('Keine Kamera gefunden. Du kannst stattdessen ein Foto aus deiner Galerie wählen.');
+ } else {
+ setPermissionState('error');
+ setPermissionMessage(`Kamera konnte nicht gestartet werden: ${error?.message || 'Unbekannter Fehler'}`);
}
- };
-
- setupCamera();
+ }
+ }, [attachStreamToVideo, createConstraint, mode, preferences.facingMode, stopStream, supportsCamera, task]);
+ useEffect(() => {
+ if (!task || loadingTask) return;
+ startCamera();
return () => {
- if (stream) {
- stream.getTracks().forEach(track => track.stop());
- setStream(null);
- }
+ stopStream();
};
- }, [slug, loading, task, facingMode]);
+ }, [task, loadingTask, startCamera, stopStream, preferences.facingMode]);
- // Handle capture
- const handleCapture = useCallback(async () => {
- if (!videoRef.current || !canvasRef.current || !task) return;
+ // Countdown live region updates
+ useEffect(() => {
+ if (!liveRegionRef.current) return;
+ if (mode === 'countdown') {
+ liveRegionRef.current.textContent = `Foto wird in ${countdownValue} Sekunden aufgenommen.`;
+ } else if (mode === 'review') {
+ liveRegionRef.current.textContent = 'Foto aufgenommen. �berpr�fe die Vorschau.';
+ } else if (mode === 'uploading') {
+ liveRegionRef.current.textContent = 'Foto wird hochgeladen.';
+ } else {
+ liveRegionRef.current.textContent = '';
+ }
+ }, [mode, countdownValue]);
- setCapturing(true);
- setIsPulsing(false);
+ const dismissPrimer = useCallback(() => {
+ setShowPrimer(false);
+ if (typeof window !== 'undefined') {
+ window.localStorage.setItem(primerStorageKey, '1');
+ }
+ }, [primerStorageKey]);
- // Start countdown
- let count = 3;
- setCountdown(count);
-
- const countdownInterval = setInterval(() => {
- count--;
- setCountdown(count);
- if (count <= 0) {
- clearInterval(countdownInterval);
-
- // Capture photo
- const video = videoRef.current;
- const canvas = canvasRef.current;
- if (!canvas) return;
-
- const context = canvas.getContext('2d');
- if (!context || !video) return;
-
- canvas.width = video.videoWidth;
- canvas.height = video.videoHeight;
- context.drawImage(video, 0, 0);
-
- // Convert to blob
- canvas.toBlob(async (blob) => {
- if (blob && task && slug) {
- try {
- // Show uploading state
- setUploading(true);
- setCapturing(false);
- setCountdown(3);
- setError(null);
-
- // Use emotionSlug directly (backend expects string slug)
-
- // Convert Blob to File with proper filename
- const timestamp = Date.now();
- const fileName = `photo-${timestamp}-${task.id}.jpg`;
- const file = new File([blob], fileName, {
- type: 'image/jpeg',
- lastModified: timestamp
- });
-
- console.log('Uploading photo:', {
- taskId: task.id,
- emotionSlug,
- fileName,
- fileSize: file.size
- });
-
- // Upload the photo
- const photoId = await uploadPhoto(slug, file, task.id, emotionSlug);
-
- console.log('Upload successful, photo ID:', photoId);
-
- // Navigate to gallery with success
- navigate(`/e/${slug}/gallery?task=${task.id}&emotion=${emotionSlug}&uploaded=true`);
- } catch (error: any) {
- console.error('Upload failed:', error);
- setError(`Upload fehlgeschlagen: ${error.message}\n\nFoto wurde erstellt, aber nicht hochgeladen.\nVersuchen Sie es erneut oder wählen Sie ein anderes Foto aus.`);
- } finally {
- setUploading(false);
- }
+ const handleToggleGrid = useCallback(() => {
+ setPreferences((prev) => ({ ...prev, gridEnabled: !prev.gridEnabled }));
+ }, []);
+
+ const handleToggleMirror = useCallback(() => {
+ setPreferences((prev) => ({ ...prev, mirrorFrontPreview: !prev.mirrorFrontPreview }));
+ }, []);
+
+ const handleToggleCountdown = useCallback(() => {
+ setPreferences((prev) => ({ ...prev, countdownEnabled: !prev.countdownEnabled }));
+ }, []);
+
+ const handleSwitchCamera = useCallback(() => {
+ setPreferences((prev) => ({
+ ...prev,
+ facingMode: prev.facingMode === 'user' ? 'environment' : 'user',
+ }));
+ }, []);
+
+ const handleToggleFlashPreference = useCallback(() => {
+ setPreferences((prev) => ({ ...prev, flashPreferred: !prev.flashPreferred }));
+ }, []);
+
+ const resetCountdownTimer = useCallback(() => {
+ if (countdownTimerRef.current) {
+ window.clearInterval(countdownTimerRef.current);
+ countdownTimerRef.current = null;
+ }
+ }, []);
+
+ const performCapture = useCallback(() => {
+ if (!videoRef.current || !canvasRef.current) {
+ setUploadError('Kamera nicht bereit. Bitte versuche es erneut.');
+ setMode('preview');
+ return;
+ }
+
+ const video = videoRef.current;
+ const canvas = canvasRef.current;
+ const width = video.videoWidth;
+ const height = video.videoHeight;
+
+ if (!width || !height) {
+ setUploadError('Kamera liefert kein Bild. Bitte starte die Kamera neu.');
+ setMode('preview');
+ startCamera();
+ return;
+ }
+
+ canvas.width = width;
+ canvas.height = height;
+ const context = canvas.getContext('2d');
+ if (!context) {
+ setUploadError('Canvas konnte nicht initialisiert werden.');
+ setMode('preview');
+ return;
+ }
+
+ context.save();
+ const shouldMirror = preferences.facingMode === 'user' && preferences.mirrorFrontPreview;
+ if (shouldMirror) {
+ context.scale(-1, 1);
+ context.drawImage(video, -width, 0, width, height);
+ } else {
+ context.drawImage(video, 0, 0, width, height);
+ }
+ context.restore();
+
+ canvas.toBlob(
+ (blob) => {
+ if (!blob) {
+ setUploadError('Foto konnte nicht erstellt werden.');
+ setMode('preview');
+ return;
+ }
+ const timestamp = Date.now();
+ const fileName = `photo-${timestamp}.jpg`;
+ const file = new File([blob], fileName, { type: 'image/jpeg', lastModified: timestamp });
+ const dataUrl = canvas.toDataURL('image/jpeg', 0.92);
+ setReviewPhoto({ dataUrl, file });
+ setMode('review');
+ },
+ 'image/jpeg',
+ 0.92
+ );
+ }, [preferences.facingMode, preferences.mirrorFrontPreview, startCamera]);
+
+ const beginCapture = useCallback(() => {
+ setUploadError(null);
+ if (preferences.countdownEnabled && preferences.countdownSeconds > 0) {
+ setMode('countdown');
+ setCountdownValue(preferences.countdownSeconds);
+ resetCountdownTimer();
+ countdownTimerRef.current = window.setInterval(() => {
+ setCountdownValue((prev) => {
+ if (prev <= 1) {
+ resetCountdownTimer();
+ performCapture();
+ return preferences.countdownSeconds;
}
- }, 'image/jpeg', 0.8);
-
- setCapturing(false);
- setCountdown(3);
+ return prev - 1;
+ });
+ }, 1000);
+ } else {
+ performCapture();
+ }
+ }, [performCapture, preferences.countdownEnabled, preferences.countdownSeconds, resetCountdownTimer]);
+
+ const handleRetake = useCallback(() => {
+ setReviewPhoto(null);
+ setUploadProgress(0);
+ setUploadError(null);
+ setMode('preview');
+ }, []);
+
+ const navigateAfterUpload = useCallback(
+ (photoId: number | undefined) => {
+ if (!slug || !task) return;
+ const params = new URLSearchParams();
+ params.set('uploaded', 'true');
+ if (task.id) params.set('task', String(task.id));
+ if (photoId) params.set('photo', String(photoId));
+ if (emotionSlug) params.set('emotion', emotionSlug);
+ navigate(`/e/${encodeURIComponent(slug!)}/gallery?${params.toString()}`);
+ },
+ [emotionSlug, navigate, slug, task]
+ );
+
+ const handleUsePhoto = useCallback(async () => {
+ if (!slug || !reviewPhoto || !task) return;
+ setMode('uploading');
+ setUploadProgress(5);
+ setUploadError(null);
+ setStatusMessage('Foto wird vorbereitet...');
+
+ if (uploadProgressTimerRef.current) {
+ window.clearInterval(uploadProgressTimerRef.current);
+ }
+ uploadProgressTimerRef.current = window.setInterval(() => {
+ setUploadProgress((prev) => (prev < 90 ? prev + 5 : prev));
+ }, 400);
+
+ try {
+ const photoId = await uploadPhoto(slug, reviewPhoto.file, task.id, emotionSlug || undefined);
+ setUploadProgress(100);
+ setStatusMessage('Upload abgeschlossen.');
+ markCompleted(task.id);
+ stopStream();
+ navigateAfterUpload(photoId);
+ } catch (error: any) {
+ console.error('Upload failed', error);
+ setUploadError(error?.message || 'Upload fehlgeschlagen. Bitte versuche es erneut.');
+ setMode('review');
+ } finally {
+ if (uploadProgressTimerRef.current) {
+ window.clearInterval(uploadProgressTimerRef.current);
+ uploadProgressTimerRef.current = null;
}
- }, 1000);
+ setStatusMessage('');
+ }
+ }, [emotionSlug, markCompleted, navigateAfterUpload, reviewPhoto, slug, stopStream, task]);
- // Start pulsing animation
- setIsPulsing(true);
- }, [task, emotionSlug, slug, navigate]);
+ const handleGalleryPick = useCallback((event: React.ChangeEvent) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+ setUploadError(null);
+ const reader = new FileReader();
+ reader.onload = () => {
+ setReviewPhoto({ dataUrl: reader.result as string, file });
+ setMode('review');
+ };
+ reader.onerror = () => {
+ setUploadError('Auswahl fehlgeschlagen. Bitte versuche es erneut.');
+ };
+ reader.readAsDataURL(file);
+ }, []);
- // Switch camera
- const switchCamera = () => {
- setFacingMode(prev => prev === 'user' ? 'environment' : 'user');
- };
+ const difficultyBadgeClass = useMemo(() => {
+ if (!task) return 'text-white';
+ switch (task.difficulty) {
+ case 'easy':
+ return 'text-emerald-400';
+ case 'hard':
+ return 'text-rose-400';
+ default:
+ return 'text-amber-300';
+ }
+ }, [task]);
- // Toggle flash (for back camera only)
- const toggleFlash = () => {
- if (facingMode !== 'environment') return;
- setFlashOn(prev => !prev);
- // TODO: Implement actual flash control if possible
- };
+ const isCameraActive = permissionState === 'granted' && mode !== 'uploading';
+ const showTaskOverlay = task && mode !== 'uploading';
- if (loading) {
+ useEffect(() => () => {
+ resetCountdownTimer();
+ if (uploadProgressTimerRef.current) {
+ window.clearInterval(uploadProgressTimerRef.current);
+ }
+ }, [resetCountdownTimer]);
+
+ if (!supportsCamera && !task) {
return (
-
-
-
-
Kamera wird gestartet...
-
-
-
-
Kamera nicht verfügbar
-
{error}
-
-
-
-
-
Foto wird hochgeladen
-
Bitte warten... Dies kann einen Moment dauern.
-
-
- {/* Camera Preview Container */}
-
- {/* Video Background */}
-
-
- {/* Task Info Overlay */}
-
-
-
{task.title}
-
{task.description}
- {task.instructions && (
-
- 💡 {task.instructions}
-
- )}
-
-
- Schwierigkeit: {task.difficulty}
-
- {emotionSlug && (
-
- Stimmung: {task.emotion?.name || emotionSlug}
-
- )}
-
-
-
-
- {/* Camera Controls */}
-
-
- {/* Flash Button */}
-
-
- {/* Capture Button */}
-
-
- {/* Pulsing Ring Animation */}
- {isPulsing && (
-
- )}
-
-
- {/* Switch Camera Button */}
-
-
-
-
- {/* Hidden Canvas for Capture */}
-
-
-
+
+
+
+
+
+ Dieses Gerät unterstützt keine Kamera-Zugriffe. Du kannst stattdessen Fotos aus deiner Galerie hochladen.
+
+
+
+ );
+ }
-
-
+ if (loadingTask) {
+ return (
+
+
+
+
+ Aufgabe und Kamera werden vorbereitet ...
+
+
+
+ );
+ }
+
+ const renderPrimer = () => (
+ showPrimer && (
+
+
+
+
+
Bereit für dein Shooting?
+
+ Suche dir gutes Licht, halte die Stimmung der Aufgabe fest und nutze die Kontrollleiste für Countdown, Grid und Kamerawechsel.
+
+
+
+
+
+ )
+ );
+
+ const renderPermissionNotice = () => {
+ if (permissionState === 'granted') return null;
+ if (permissionState === 'unsupported') {
+ return (
+
+
+ Dieses Gerät unterstützt keine Kamera. Nutze den Button `Foto aus Galerie wählen`, um dennoch teilzunehmen.
+
+
+ );
+ }
+ if (permissionState === 'denied' || permissionState === 'error') {
+ return (
+
+
+ {permissionMessage}
+
+
+
+ );
+ }
+ return (
+
+
+ Wir benötigen Zugriff auf deine Kamera. Bestätige die Browser-Abfrage oder nutze alternativ ein Foto aus deiner Galerie.
+
+
+ );
+ };
+
+ return (
+
+
+
+
+ {renderPrimer()}
+
+
+ {permissionState !== 'granted' && renderPermissionNotice()}
+
+
+
+
+
+ {preferences.gridEnabled && (
+
+ )}
+
+ {!isCameraActive && (
+
+
+
+ Kamera ist nicht aktiv. {permissionMessage || 'Tippe auf `Kamera starten`, um loszulegen.'}
+
+
+
+
+
+
+ )}
+
+ {showTaskOverlay && task && (
+
+
+
+
+ Aufgabe #{task.id}
+
+
+ {task.difficulty === 'easy'
+ ? 'Leicht'
+ : task.difficulty === 'hard'
+ ? 'Herausfordernd'
+ : 'Medium'}
+
+
+
+
{task.title}
+
{task.description}
+
+
+ {task.instructions && Hinweis: {task.instructions}}
+ {emotionSlug && (
+ Stimmung: {task.emotion?.name || emotionSlug}
+ )}
+ {preferences.countdownEnabled && (
+
+ Countdown: {preferences.countdownSeconds}s
+
+ )}
+
+
+ )}
+
+ {mode === 'countdown' && (
+
+
{countdownValue}
+
Bereit machen ...
+
+ )}
+
+ {mode === 'review' && reviewPhoto && (
+
+
+
+ )}
+
+ {mode === 'uploading' && (
+
+
+
+
+ {statusMessage &&
{statusMessage}
}
+
+
+ )}
+
+ {uploadError && (
+
+
+
+ {uploadError}
+
+
+ )}
+
+
+
+
+
+ {preferences.facingMode === 'user' && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {mode === 'review' && reviewPhoto ? (
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
);
}
diff --git a/resources/js/guest/polling/usePollGalleryDelta.ts b/resources/js/guest/polling/usePollGalleryDelta.ts
index a53a9a7..f03ac63 100644
--- a/resources/js/guest/polling/usePollGalleryDelta.ts
+++ b/resources/js/guest/polling/usePollGalleryDelta.ts
@@ -8,6 +8,9 @@ export function usePollGalleryDelta(slug: string) {
const [newCount, setNewCount] = useState(0);
const latestAt = useRef
(null);
const timer = useRef(null);
+ const [visible, setVisible] = useState(
+ typeof document !== 'undefined' ? document.visibilityState === 'visible' : true
+ );
async function fetchDelta() {
try {
@@ -75,16 +78,25 @@ export function usePollGalleryDelta(slug: string) {
}
}
+ useEffect(() => {
+ const onVis = () => setVisible(document.visibilityState === 'visible');
+ document.addEventListener('visibilitychange', onVis);
+ return () => document.removeEventListener('visibilitychange', onVis);
+ }, []);
+
useEffect(() => {
setLoading(true);
latestAt.current = null;
setPhotos([]);
fetchDelta();
- timer.current = window.setInterval(fetchDelta, 30_000);
+ if (timer.current) window.clearInterval(timer.current);
+ // Poll less aggressively when hidden
+ const interval = visible ? 30_000 : 90_000;
+ timer.current = window.setInterval(fetchDelta, interval);
return () => {
if (timer.current) window.clearInterval(timer.current);
};
- }, [slug]);
+ }, [slug, visible]);
function acknowledgeNew() { setNewCount(0); }
return { loading, photos, newCount, acknowledgeNew };
diff --git a/resources/js/guest/polling/usePollStats.ts b/resources/js/guest/polling/usePollStats.ts
index bed0dd0..bf3ee74 100644
--- a/resources/js/guest/polling/usePollStats.ts
+++ b/resources/js/guest/polling/usePollStats.ts
@@ -1,39 +1,67 @@
import { useEffect, useRef, useState } from 'react';
-type Stats = { onlineGuests: number; tasksSolved: number; latestPhotoAt?: string };
+export type EventStats = {
+ onlineGuests: number;
+ tasksSolved: number;
+ latestPhotoAt: string | null;
+};
-export function usePollStats(slug: string) {
- const [data, setData] = useState(null);
+type StatsResponse = {
+ online_guests?: number;
+ tasks_solved?: number;
+ latest_photo_at?: string;
+};
+
+export function usePollStats(slug: string | null | undefined) {
+ const [data, setData] = useState({ onlineGuests: 0, tasksSolved: 0, latestPhotoAt: null });
const [loading, setLoading] = useState(true);
const timer = useRef(null);
- const visible = typeof document !== 'undefined' ? document.visibilityState === 'visible' : true;
+ const [visible, setVisible] = useState(
+ typeof document !== 'undefined' ? document.visibilityState === 'visible' : true
+ );
- async function fetchOnce() {
+ const canPoll = Boolean(slug);
+
+ async function fetchOnce(activeSlug: string) {
try {
- const res = await fetch(`/api/v1/events/${encodeURIComponent(slug)}/stats`, {
+ const res = await fetch(`/api/v1/events/${encodeURIComponent(activeSlug)}/stats`, {
headers: { 'Cache-Control': 'no-store' },
});
if (res.status === 304) return;
- const json = await res.json();
- setData({ onlineGuests: json.online_guests ?? 0, tasksSolved: json.tasks_solved ?? 0, latestPhotoAt: json.latest_photo_at });
+ const json: StatsResponse = await res.json();
+ setData({
+ onlineGuests: json.online_guests ?? 0,
+ tasksSolved: json.tasks_solved ?? 0,
+ latestPhotoAt: json.latest_photo_at ?? null,
+ });
} finally {
setLoading(false);
}
}
useEffect(() => {
- setLoading(true);
- fetchOnce();
- function schedule() {
- if (!visible) return;
- timer.current = window.setInterval(fetchOnce, 10_000);
+ const onVis = () => setVisible(document.visibilityState === 'visible');
+ document.addEventListener('visibilitychange', onVis);
+ return () => document.removeEventListener('visibilitychange', onVis);
+ }, []);
+
+ useEffect(() => {
+ if (!canPoll) {
+ setLoading(false);
+ return;
+ }
+
+ setLoading(true);
+ const activeSlug = String(slug);
+ fetchOnce(activeSlug);
+ if (timer.current) window.clearInterval(timer.current);
+ if (visible) {
+ timer.current = window.setInterval(() => fetchOnce(activeSlug), 10_000);
}
- schedule();
return () => {
if (timer.current) window.clearInterval(timer.current);
};
- }, [slug, visible]);
+ }, [slug, visible, canPoll]);
- return { loading, onlineGuests: data?.onlineGuests ?? 0, tasksSolved: data?.tasksSolved ?? 0 };
+ return { ...data, loading };
}
-
diff --git a/resources/js/guest/queue/queue.ts b/resources/js/guest/queue/queue.ts
index 2ebcb0a..0fd6410 100644
--- a/resources/js/guest/queue/queue.ts
+++ b/resources/js/guest/queue/queue.ts
@@ -2,6 +2,7 @@ import { withStore } from './idb';
import { getDeviceId } from '../lib/device';
import { createUpload } from './xhr';
import { notify } from './notify';
+type SyncManager = { register(tag: string): Promise; };
export type QueueItem = {
id?: number;
@@ -26,7 +27,10 @@ export async function enqueue(item: Omit
- {slug ? : }
-
-
+
+ if (!slug) {
+ return (
+
-
-
+
+
+
+
+
+ );
+}
+
function SimpleLayout({ title, children }: { title: string; children: React.ReactNode }) {
return (
@@ -64,3 +104,4 @@ function SimpleLayout({ title, children }: { title: string; children: React.Reac
);
}
+
diff --git a/resources/js/guest/services/achievementApi.ts b/resources/js/guest/services/achievementApi.ts
new file mode 100644
index 0000000..fe8c0a1
--- /dev/null
+++ b/resources/js/guest/services/achievementApi.ts
@@ -0,0 +1,212 @@
+import { getDeviceId } from '../lib/device';
+
+export interface AchievementBadge {
+ id: string;
+ title: string;
+ description: string;
+ earned: boolean;
+ progress: number;
+ target: number;
+}
+
+export interface LeaderboardEntry {
+ guest: string;
+ photos: number;
+ likes: number;
+}
+
+export interface TopPhotoHighlight {
+ photoId: number;
+ guest: string;
+ likes: number;
+ task?: string | null;
+ createdAt: string;
+ thumbnail: string | null;
+}
+
+export interface TrendingEmotionHighlight {
+ emotionId: number;
+ name: string;
+ count: number;
+}
+
+export interface TimelinePoint {
+ date: string;
+ photos: number;
+ guests: number;
+}
+
+export interface FeedEntry {
+ photoId: number;
+ guest: string;
+ task?: string | null;
+ likes: number;
+ createdAt: string;
+ thumbnail: string | null;
+}
+
+export interface AchievementsPayload {
+ summary: {
+ totalPhotos: number;
+ uniqueGuests: number;
+ tasksSolved: number;
+ likesTotal: number;
+ };
+ personal: {
+ guestName: string;
+ photos: number;
+ tasks: number;
+ likes: number;
+ badges: AchievementBadge[];
+ } | null;
+ leaderboards: {
+ uploads: LeaderboardEntry[];
+ likes: LeaderboardEntry[];
+ };
+ highlights: {
+ topPhoto: TopPhotoHighlight | null;
+ trendingEmotion: TrendingEmotionHighlight | null;
+ timeline: TimelinePoint[];
+ };
+ feed: FeedEntry[];
+}
+
+function toNumber(value: unknown, fallback = 0): number {
+ if (typeof value === 'number' && Number.isFinite(value)) {
+ return value;
+ }
+ if (typeof value === 'string' && value !== '') {
+ const parsed = Number(value);
+ return Number.isFinite(parsed) ? parsed : fallback;
+ }
+ return fallback;
+}
+
+function safeString(value: unknown): string {
+ return typeof value === 'string' ? value : '';
+}
+
+export async function fetchAchievements(
+ slug: string,
+ guestName?: string,
+ signal?: AbortSignal
+): Promise {
+ const params = new URLSearchParams();
+ if (guestName && guestName.trim().length > 0) {
+ params.set('guest_name', guestName.trim());
+ }
+
+ const response = await fetch(`/api/v1/events/${encodeURIComponent(slug)}/achievements?${params.toString()}`, {
+ method: 'GET',
+ headers: {
+ 'X-Device-Id': getDeviceId(),
+ 'Cache-Control': 'no-store',
+ },
+ signal,
+ });
+
+ if (!response.ok) {
+ const message = await response.text();
+ throw new Error(message || 'Achievements request failed');
+ }
+
+ const json = await response.json();
+ const summary = json.summary ?? {};
+ const personalRaw = json.personal ?? null;
+ const leaderboards = json.leaderboards ?? {};
+ const highlights = json.highlights ?? {};
+ const feedRaw = Array.isArray(json.feed) ? json.feed : [];
+
+ const personal = personalRaw
+ ? {
+ guestName: safeString(personalRaw.guest_name),
+ photos: toNumber(personalRaw.photos),
+ tasks: toNumber(personalRaw.tasks),
+ likes: toNumber(personalRaw.likes),
+ badges: Array.isArray(personalRaw.badges)
+ ? personalRaw.badges.map((badge: any): AchievementBadge => ({
+ id: safeString(badge.id),
+ title: safeString(badge.title),
+ description: safeString(badge.description),
+ earned: Boolean(badge.earned),
+ progress: toNumber(badge.progress),
+ target: toNumber(badge.target, 1),
+ }))
+ : [],
+ }
+ : null;
+
+ const uploadsBoard = Array.isArray(leaderboards.uploads)
+ ? leaderboards.uploads.map((row: any): LeaderboardEntry => ({
+ guest: safeString(row.guest),
+ photos: toNumber(row.photos),
+ likes: toNumber(row.likes),
+ }))
+ : [];
+
+ const likesBoard = Array.isArray(leaderboards.likes)
+ ? leaderboards.likes.map((row: any): LeaderboardEntry => ({
+ guest: safeString(row.guest),
+ photos: toNumber(row.photos),
+ likes: toNumber(row.likes),
+ }))
+ : [];
+
+ const topPhotoRaw = highlights.top_photo ?? null;
+ const topPhoto = topPhotoRaw
+ ? {
+ photoId: toNumber(topPhotoRaw.photo_id),
+ guest: safeString(topPhotoRaw.guest),
+ likes: toNumber(topPhotoRaw.likes),
+ task: topPhotoRaw.task ?? null,
+ createdAt: safeString(topPhotoRaw.created_at),
+ thumbnail: topPhotoRaw.thumbnail ? safeString(topPhotoRaw.thumbnail) : null,
+ }
+ : null;
+
+ const trendingRaw = highlights.trending_emotion ?? null;
+ const trendingEmotion = trendingRaw
+ ? {
+ emotionId: toNumber(trendingRaw.emotion_id),
+ name: safeString(trendingRaw.name),
+ count: toNumber(trendingRaw.count),
+ }
+ : null;
+
+ const timeline = Array.isArray(highlights.timeline)
+ ? highlights.timeline.map((row: any): TimelinePoint => ({
+ date: safeString(row.date),
+ photos: toNumber(row.photos),
+ guests: toNumber(row.guests),
+ }))
+ : [];
+
+ const feed = feedRaw.map((row: any): FeedEntry => ({
+ photoId: toNumber(row.photo_id),
+ guest: safeString(row.guest),
+ task: row.task ?? null,
+ likes: toNumber(row.likes),
+ createdAt: safeString(row.created_at),
+ thumbnail: row.thumbnail ? safeString(row.thumbnail) : null,
+ }));
+
+ return {
+ summary: {
+ totalPhotos: toNumber(summary.total_photos),
+ uniqueGuests: toNumber(summary.unique_guests),
+ tasksSolved: toNumber(summary.tasks_solved),
+ likesTotal: toNumber(summary.likes_total),
+ },
+ personal,
+ leaderboards: {
+ uploads: uploadsBoard,
+ likes: likesBoard,
+ },
+ highlights: {
+ topPhoto,
+ trendingEmotion,
+ timeline,
+ },
+ feed,
+ };
+}
diff --git a/resources/views/admin.blade.php b/resources/views/admin.blade.php
index cae8e63..af2aad7 100644
--- a/resources/views/admin.blade.php
+++ b/resources/views/admin.blade.php
@@ -5,6 +5,7 @@
{{ __('admin.shell.tenant_admin_title') }}
+ @viteReactRefresh
@vite('resources/js/admin/main.tsx')
diff --git a/resources/views/guest.blade.php b/resources/views/guest.blade.php
index 0ec327c..5cac0b1 100644
--- a/resources/views/guest.blade.php
+++ b/resources/views/guest.blade.php
@@ -5,6 +5,7 @@
{{ config('app.name', 'Fotospiel') }}
+ @viteReactRefresh
@vite('resources/js/guest/main.tsx')
diff --git a/routes/api.php b/routes/api.php
index c878d09..d48b38c 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,4 +1,4 @@
-name('api.v1.')->group(function () {
Route::middleware('throttle:100,1')->group(function () {
Route::get('/events/{slug}', [EventPublicController::class, 'event'])->name('events.show');
Route::get('/events/{slug}/stats', [EventPublicController::class, 'stats'])->name('events.stats');
+ Route::get('/events/{slug}/achievements', [EventPublicController::class, 'achievements'])->name('events.achievements');
Route::get('/events/{slug}/emotions', [EventPublicController::class, 'emotions'])->name('events.emotions');
Route::get('/events/{slug}/tasks', [EventPublicController::class, 'tasks'])->name('events.tasks');
Route::get('/events/{slug}/photos', [EventPublicController::class, 'photos'])->name('events.photos');
@@ -24,8 +25,8 @@ Route::prefix('v1')->name('api.v1.')->group(function () {
Route::post('/events/{slug}/upload', [EventPublicController::class, 'upload'])->name('events.upload');
});
- // Protected tenant API routes (require auth:sanctum + tenant middleware)
- Route::middleware(['auth:sanctum', \App\Http\Middleware\TenantTokenGuard::class, \App\Http\Middleware\TenantIsolation::class])->prefix('tenant')->group(function () {
+ // Protected tenant API routes (JWT tenants via OAuth guard)
+ Route::middleware(['tenant.token', 'tenant.isolation'])->prefix('tenant')->group(function () {
Route::get('me', [OAuthController::class, 'me'])->name('tenant.me');
// Events CRUD
@@ -64,6 +65,10 @@ Route::prefix('v1')->name('api.v1.')->group(function () {
Route::get('balance', [CreditController::class, 'balance'])->name('tenant.credits.balance');
Route::get('ledger', [CreditController::class, 'ledger'])->name('tenant.credits.ledger');
Route::get('history', [CreditController::class, 'history'])->name('tenant.credits.history');
+ Route::post('purchase', [CreditController::class, 'purchase'])->name('tenant.credits.purchase');
+ Route::post('sync', [CreditController::class, 'sync'])->name('tenant.credits.sync');
});
});
-});
\ No newline at end of file
+});
+
+
diff --git a/routes/web.php b/routes/web.php
index fd4265d..37b763a 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -44,25 +44,6 @@ Route::get('/super-admin/templates/emotions.csv', function () {
return response()->stream($callback, 200, $headers);
});
-// Tenant Admin API (temporary token-based, no hardening)
-Route::prefix('api/v1/tenant')->group(function () {
- Route::post('/login', [\App\Http\Controllers\Api\TenantController::class, 'login']);
- Route::middleware([\App\Http\Middleware\ApiTokenAuth::class])->group(function () {
- Route::get('/me', [\App\Http\Controllers\Api\TenantController::class, 'me']);
- Route::get('/events', [\App\Http\Controllers\Api\TenantController::class, 'events']);
- Route::get('/events/{id}', [\App\Http\Controllers\Api\TenantController::class, 'showEvent']);
- Route::post('/events', [\App\Http\Controllers\Api\TenantController::class, 'storeEvent']);
- Route::put('/events/{id}', [\App\Http\Controllers\Api\TenantController::class, 'updateEvent']);
- Route::post('/events/{id}/toggle', [\App\Http\Controllers\Api\TenantController::class, 'toggleEvent']);
- Route::get('/events/{id}/photos', [\App\Http\Controllers\Api\TenantController::class, 'eventPhotos']);
- Route::get('/events/{id}/stats', [\App\Http\Controllers\Api\TenantController::class, 'eventStats']);
- Route::post('/events/{id}/invites', [\App\Http\Controllers\Api\TenantController::class, 'createInvite']);
- Route::post('/photos/{id}/feature', [\App\Http\Controllers\Api\TenantController::class, 'featurePhoto']);
- Route::post('/photos/{id}/unfeature', [\App\Http\Controllers\Api\TenantController::class, 'unfeaturePhoto']);
- Route::delete('/photos/{id}', [\App\Http\Controllers\Api\TenantController::class, 'deletePhoto']);
- });
-});
-
// Tenant Admin PWA shell
Route::view('/admin/{any?}', 'admin')->where('any', '.*');
Route::get('/admin/qr', [\App\Http\Controllers\Admin\QrController::class, 'png']);
diff --git a/tests/Feature/OAuthFlowTest.php b/tests/Feature/OAuthFlowTest.php
new file mode 100644
index 0000000..24202c2
--- /dev/null
+++ b/tests/Feature/OAuthFlowTest.php
@@ -0,0 +1,143 @@
+create([
+ 'slug' => 'test-tenant',
+ ]);
+
+ OAuthClient::create([
+ 'id' => (string) Str::uuid(),
+ 'client_id' => 'tenant-admin-app',
+ 'tenant_id' => $tenant->id,
+ 'redirect_uris' => ['http://localhost/callback'],
+ 'scopes' => ['tenant:read', 'tenant:write'],
+ 'is_active' => true,
+ ]);
+
+ $codeVerifier = 'unit-test-code-verifier-1234567890';
+ $codeChallenge = rtrim(strtr(base64_encode(hash('sha256', $codeVerifier, true)), '+/', '-_'), '=');
+ $state = Str::random(10);
+
+ $response = $this->get('/api/v1/oauth/authorize?' . http_build_query([
+ 'client_id' => 'tenant-admin-app',
+ 'redirect_uri' => 'http://localhost/callback',
+ 'response_type' => 'code',
+ 'scope' => 'tenant:read tenant:write',
+ 'state' => $state,
+ 'code_challenge' => $codeChallenge,
+ 'code_challenge_method' => 'S256',
+ ]));
+
+ $response->assertRedirect();
+ $location = $response->headers->get('Location');
+ $this->assertNotNull($location);
+
+ $query = [];
+ parse_str(parse_url($location, PHP_URL_QUERY) ?? '', $query);
+ $authorizationCode = $query['code'] ?? null;
+ $this->assertNotNull($authorizationCode, 'Authorization code should be present');
+ $this->assertEquals($state, $query['state'] ?? null);
+
+ $tokenResponse = $this->post('/api/v1/oauth/token', [
+ 'grant_type' => 'authorization_code',
+ 'code' => $authorizationCode,
+ 'client_id' => 'tenant-admin-app',
+ 'redirect_uri' => 'http://localhost/callback',
+ 'code_verifier' => $codeVerifier,
+ ]);
+
+ $tokenResponse->assertOk();
+ $tokenData = $tokenResponse->json();
+
+ $this->assertArrayHasKey('access_token', $tokenData);
+ $this->assertArrayHasKey('refresh_token', $tokenData);
+ $this->assertSame('Bearer', $tokenData['token_type']);
+
+ $meResponse = $this->get('/api/v1/tenant/me', [
+ 'Authorization' => 'Bearer ' . $tokenData['access_token'],
+ ]);
+
+ $meResponse->assertOk();
+ $meResponse->assertJsonFragment([
+ 'tenant_id' => $tenant->id,
+ 'name' => $tenant->name,
+ ]);
+
+ $refreshResponse = $this->post('/api/v1/oauth/token', [
+ 'grant_type' => 'refresh_token',
+ 'refresh_token' => $tokenData['refresh_token'],
+ 'client_id' => 'tenant-admin-app',
+ ]);
+
+ $refreshResponse->assertOk();
+ $refreshData = $refreshResponse->json();
+ $this->assertArrayHasKey('access_token', $refreshData);
+ $this->assertArrayHasKey('refresh_token', $refreshData);
+ $this->assertNotEquals($refreshData['access_token'], $tokenData['access_token']);
+ }
+}
diff --git a/tests/Feature/TenantCreditsTest.php b/tests/Feature/TenantCreditsTest.php
new file mode 100644
index 0000000..ae5a12b
--- /dev/null
+++ b/tests/Feature/TenantCreditsTest.php
@@ -0,0 +1,174 @@
+create([
+ 'slug' => 'credits-tenant',
+ 'event_credits_balance' => 0,
+ ]);
+
+ $client = OAuthClient::create([
+ 'id' => (string) Str::uuid(),
+ 'client_id' => 'tenant-admin-app',
+ 'tenant_id' => $tenant->id,
+ 'redirect_uris' => ['http://localhost/callback'],
+ 'scopes' => ['tenant:read', 'tenant:write'],
+ 'is_active' => true,
+ ]);
+
+ [$accessToken] = $this->obtainTokens($client);
+
+ $headers = [
+ 'Authorization' => 'Bearer '.$accessToken,
+ ];
+
+ $balanceResponse = $this->withHeaders($headers)
+ ->getJson('/api/v1/tenant/credits/balance');
+
+ $balanceResponse->assertOk()
+ ->assertJsonStructure(['balance', 'free_event_granted_at']);
+
+ $purchaseResponse = $this->withHeaders($headers)
+ ->postJson('/api/v1/tenant/credits/purchase', [
+ 'package_id' => 'event_starter',
+ 'credits_added' => 5,
+ 'platform' => 'capacitor',
+ 'transaction_id' => 'txn_test_123',
+ 'subscription_active' => false,
+ ]);
+
+ $purchaseResponse->assertCreated()
+ ->assertJsonStructure(['message', 'balance', 'subscription_active']);
+
+ $tenant->refresh();
+ $this->assertSame(5, $tenant->event_credits_balance);
+
+ $this->assertDatabaseHas('event_purchases', [
+ 'tenant_id' => $tenant->id,
+ 'events_purchased' => 5,
+ 'external_receipt_id' => 'txn_test_123',
+ ]);
+
+ $this->assertDatabaseHas('event_credits_ledger', [
+ 'tenant_id' => $tenant->id,
+ 'delta' => 5,
+ 'reason' => 'purchase',
+ ]);
+
+ $syncResponse = $this->withHeaders($headers)
+ ->postJson('/api/v1/tenant/credits/sync', [
+ 'balance' => $tenant->event_credits_balance,
+ 'subscription_active' => false,
+ 'last_sync' => now()->toIso8601String(),
+ ]);
+
+ $syncResponse->assertOk()
+ ->assertJsonStructure(['balance', 'subscription_active', 'server_time']);
+ }
+
+ private function obtainTokens(OAuthClient $client): array
+ {
+ $codeVerifier = 'tenant-credits-code-verifier-1234567890';
+ $codeChallenge = rtrim(strtr(base64_encode(hash('sha256', $codeVerifier, true)), '+/', '-_'), '=');
+ $state = Str::random(10);
+
+ $response = $this->get('/api/v1/oauth/authorize?' . http_build_query([
+ 'client_id' => $client->client_id,
+ 'redirect_uri' => 'http://localhost/callback',
+ 'response_type' => 'code',
+ 'scope' => 'tenant:read tenant:write',
+ 'state' => $state,
+ 'code_challenge' => $codeChallenge,
+ 'code_challenge_method' => 'S256',
+ ]));
+
+ $response->assertRedirect();
+ $location = $response->headers->get('Location');
+ $this->assertNotNull($location);
+
+ $query = [];
+ parse_str(parse_url($location, PHP_URL_QUERY) ?? '', $query);
+ $authorizationCode = $query['code'] ?? null;
+ $this->assertNotNull($authorizationCode, 'Authorization code should be present');
+
+ $tokenResponse = $this->post('/api/v1/oauth/token', [
+ 'grant_type' => 'authorization_code',
+ 'code' => $authorizationCode,
+ 'client_id' => $client->client_id,
+ 'redirect_uri' => 'http://localhost/callback',
+ 'code_verifier' => $codeVerifier,
+ ]);
+
+ $tokenResponse->assertOk();
+
+ return [
+ $tokenResponse->json('access_token'),
+ $tokenResponse->json('refresh_token'),
+ ];
+ }
+
+}
diff --git a/tests/e2e/guest-profile-flow.test.ts b/tests/e2e/guest-profile-flow.test.ts
new file mode 100644
index 0000000..35efd42
--- /dev/null
+++ b/tests/e2e/guest-profile-flow.test.ts
@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Guest Profile Flow', () => {
+ test('should require name setup on first event join and persist it', async ({ page }) => {
+ // Assume Vite dev server is running on localhost:5173
+ await page.goto('http://localhost:5173/');
+
+ // Enter event slug manually
+ await page.fill('input[placeholder*="Event-Code"]', 'test-event');
+ await page.click('button:has-text("Event beitreten")');
+
+ // Should redirect to setup if no name
+ await expect(page).toHaveURL(/.*\/e\/test-event\/setup/);
+
+ // Fill name and submit
+ await page.fill('input[placeholder*="Dein Name"]', 'Test User');
+ await page.click('button:has-text("LET\'S GO! ✨")');
+
+ // Should navigate to home
+ await expect(page).toHaveURL(/.*\/e\/test-event$/);
+
+ // Check localStorage
+ const storedName = await page.evaluate(() => localStorage.getItem('guestName_test-event'));
+ expect(storedName).toBe('Test User');
+
+ // Reload to test persistence - should stay on home, not redirect to setup
+ await page.reload();
+ await expect(page).toHaveURL(/.*\/e\/test-event$/);
+
+ // Re-nav to landing and join again - should go directly to home
+ await page.goto('http://localhost:5173/');
+ await page.fill('input[placeholder*="Event-Code"]', 'test-event');
+ await page.click('button:has-text("Event beitreten")');
+ await expect(page).toHaveURL(/.*\/e\/test-event$/);
+ });
+
+ test('should go directly to home if name already stored', async ({ page }) => {
+ // Pre-set name in localStorage
+ await page.addInitScript(() => {
+ localStorage.setItem('guestName_test-event', 'Existing User');
+ });
+
+ await page.goto('http://localhost:5173/');
+
+ // Join
+ await page.fill('input[placeholder*="Event-Code"]', 'test-event');
+ await page.click('button:has-text("Event beitreten")');
+
+ // Should go directly to home
+ await expect(page).toHaveURL(/.*\/e\/test-event$/);
+ });
+});
\ No newline at end of file
diff --git a/tests/e2e/oauth-flow.test.ts b/tests/e2e/oauth-flow.test.ts
new file mode 100644
index 0000000..3050c05
--- /dev/null
+++ b/tests/e2e/oauth-flow.test.ts
@@ -0,0 +1,76 @@
+import { test, expect } from '@playwright/test';
+
+test('OAuth Flow for tenant-admin-app', async ({ page }) => {
+ const code_challenge = 'dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk';
+ const code_verifier = 'E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM';
+ const redirect_uri = 'http://localhost:8000/auth/callback';
+ const state = 'teststate';
+ const scope = 'tenant:read tenant:write tenant:admin';
+
+ const authorizeUrl = `/api/v1/oauth/authorize?response_type=code&client_id=tenant-admin-app&redirect_uri=${encodeURIComponent(redirect_uri)}&scope=${encodeURIComponent(scope)}&code_challenge=${code_challenge}&code_challenge_method=S256&state=${state}`;
+
+ // Navigate to authorize - should immediately redirect to callback
+ await page.goto(authorizeUrl);
+ await page.waitForLoadState('networkidle');
+
+ // Log response if no redirect
+ const currentUrl = page.url();
+ if (currentUrl.includes('/authorize')) {
+ const response = await page.content();
+ console.log('No redirect, response:', response.substring(0, 500)); // First 500 chars
+ }
+
+ // Wait for redirect to callback and parse params
+ await expect(page).toHaveURL(new RegExp(`${redirect_uri}\\?.*`));
+ const urlObj = new URL(currentUrl);
+ const code = urlObj.searchParams.get('code') || '';
+ const receivedState = urlObj.searchParams.get('state') || '';
+
+ expect(receivedState).toBe(state);
+ expect(code).not.toBeNull();
+
+ console.log('Authorization code:', code);
+
+ // Token exchange via fetch
+ const tokenParams = {
+ code: code!,
+ redirect_uri,
+ code_verifier
+ };
+ const tokenResponse = await page.evaluate(async (params) => {
+ const response = await fetch('/api/v1/oauth/token', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded',
+ },
+ body: new URLSearchParams({
+ grant_type: 'authorization_code',
+ client_id: 'tenant-admin-app',
+ code: params.code,
+ redirect_uri: params.redirect_uri,
+ code_verifier: params.code_verifier,
+ }).toString(),
+ });
+ return await response.json();
+ }, tokenParams);
+
+ console.log('Token response:', tokenResponse);
+ expect(tokenResponse.access_token).toBeTruthy();
+
+ const accessToken = tokenResponse.access_token;
+
+ // Call /tenant/me with token
+ const meResponse = await page.evaluate(async (token) => {
+ const response = await fetch('/api/v1/tenant/me', {
+ headers: {
+ 'Authorization': `Bearer ${token}`,
+ 'Accept': 'application/json',
+ },
+ });
+ return await response.json();
+ }, accessToken);
+
+ console.log('/tenant/me response:', meResponse);
+ expect(meResponse).toHaveProperty('id');
+ expect(meResponse.email).toBe('demo@example.com');
+});
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 56153f6..2bb436e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -19,19 +19,53 @@ export default defineConfig({
origin: devServerOrigin,
hmr: {
host: parsedOrigin.hostname,
- protocol: parsedOrigin.protocol.replace(':', ''),
- port: hmrPort,
+ protocol: parsedOrigin.protocol.replace(':','') as 'http' | 'https',
+ clientPort: hmrPort,
+ },
+ fs: {
+ strict: true,
+ // Erlaube nur das App-Package (ggf. Pfade anpassen)
+ allow: [__dirname],
},
cors: {
origin: appUrl,
credentials: true,
},
+ watch: {
+ // WENIGER ist mehr: Alles ausklammern, was nicht für HMR nötig ist
+ ignored: [
+ '**/node_modules/**',
+ '**/.git/**',
+ '**/dist/**',
+ '**/build/**',
+ '**/.next/**',
+ '**/coverage/**',
+ '**/.cache/**',
+ // Laravel-spezifisch
+ '**/public/build/**',
+ '**/storage/**',
+ '**/vendor/**',
+ '**/bootstrap/cache/**',
+ // Monorepo-Nachbarn
+ '../**/node_modules/**',
+ '../**/dist/**',
+ '../**/build/**',
+ '../**/coverage/**',
+ ],
+ // Falls ihr auf gemounteten FS seid und Events fehlen:
+ // usePolling: true, interval: 500,
+ },
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.tsx', 'resources/js/guest/main.tsx', 'resources/js/admin/main.tsx'],
ssr: 'resources/js/ssr.tsx',
- refresh: true,
+ refresh: [
+ 'resources/views/**/*.blade.php',
+ 'resources/lang/**/*.php',
+ 'app/Http/Livewire/**', // falls genutzt
+ // NICHT beobachten: storage/logs, vendor, public/build, etc.
+ ],
}),
react(),
tailwindcss(),
@@ -42,4 +76,20 @@ export default defineConfig({
esbuild: {
jsx: 'automatic',
},
+ optimizeDeps: {
+ // Bei großen Monorepos hilfreich:
+ entries: ['resources/js/**/*'],
+ exclude: [
+ // füge notfalls große/selten genutzte Pakete hinzu
+ ],
+ },
+
+ // Build-Optionen wirken vor allem bei `vite build`, schaden aber nicht:
+ build: {
+ sourcemap: false,
+ target: 'es2020',
+ rollupOptions: {
+ // keine externen Monster-Globs
+ },
+ },
});