105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { useEventData } from '../hooks/useEventData';
|
|
import { useGuestIdentity } from '../context/GuestIdentityContext';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Label } from '@/components/ui/label';
|
|
import Header from '../components/Header';
|
|
|
|
export default function ProfileSetupPage() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const nav = useNavigate();
|
|
const { event, loading, error } = useEventData();
|
|
const { name: storedName, setName: persistName, hydrated } = useGuestIdentity();
|
|
const [name, setName] = useState(storedName);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!slug) {
|
|
nav('/');
|
|
return;
|
|
}
|
|
}, [slug, nav]);
|
|
|
|
useEffect(() => {
|
|
if (hydrated) {
|
|
setName(storedName);
|
|
}
|
|
}, [hydrated, storedName]);
|
|
|
|
function handleChange(value: string) {
|
|
setName(value);
|
|
}
|
|
|
|
function submitName() {
|
|
if (!slug) return;
|
|
const trimmedName = name.trim();
|
|
if (!trimmedName) return;
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
persistName(trimmedName);
|
|
nav(`/e/${slug}`);
|
|
} catch (e) {
|
|
console.error('Fehler beim Speichern des Namens:', e);
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center items-center h-32">
|
|
<div className="text-lg">Lade Event...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !event) {
|
|
return (
|
|
<div className="text-center p-4">
|
|
<p className="text-red-600 mb-4">{error || 'Event nicht gefunden.'}</p>
|
|
<Button onClick={() => nav('/')}>Zurück zur Startseite</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-pink-50 to-purple-50 flex flex-col">
|
|
<Header slug={slug!} />
|
|
<div className="flex-1 flex flex-col justify-center items-center px-4 py-8">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="text-center space-y-2">
|
|
<CardTitle className="text-2xl font-bold text-gray-900">{event.name}</CardTitle>
|
|
<CardDescription className="text-lg text-gray-600">
|
|
Fange den schoensten Moment ein!
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 p-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="text-sm font-medium">Dein Name (z.B. Anna)</Label>
|
|
<Input
|
|
id="name"
|
|
value={name}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
placeholder="Dein Name"
|
|
className="text-lg"
|
|
disabled={submitting || !hydrated}
|
|
autoComplete="name"
|
|
/>
|
|
</div>
|
|
<Button
|
|
className="w-full bg-gradient-to-r from-pink-500 to-pink-600 hover:from-pink-600 hover:to-pink-700 text-white py-3 text-base font-semibold rounded-xl"
|
|
onClick={submitName}
|
|
disabled={submitting || !name.trim() || !hydrated}
|
|
>
|
|
{submitting ? 'Speichere...' : "Let's go!"}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|