105 lines
3.5 KiB
TypeScript
105 lines
3.5 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 { useTranslation } from '../i18n/useTranslation';
|
|
|
|
export default function ProfileSetupPage() {
|
|
const { token } = useParams<{ token: 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);
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
nav('/');
|
|
return;
|
|
}
|
|
}, [token, nav]);
|
|
|
|
useEffect(() => {
|
|
if (hydrated) {
|
|
setName(storedName);
|
|
}
|
|
}, [hydrated, storedName]);
|
|
|
|
function handleChange(value: string) {
|
|
setName(value);
|
|
}
|
|
|
|
function submitName() {
|
|
if (!token) return;
|
|
const trimmedName = name.trim();
|
|
if (!trimmedName) return;
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
persistName(trimmedName);
|
|
nav(`/e/${token}`);
|
|
} 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">{t('profileSetup.loading')}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !event) {
|
|
return (
|
|
<div className="text-center p-4">
|
|
<p className="text-red-600 mb-4">{error || t('profileSetup.error.default')}</p>
|
|
<Button onClick={() => nav('/')}>{t('profileSetup.error.backToStart')}</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-pink-50 to-purple-50 flex flex-col">
|
|
<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">
|
|
{t('profileSetup.card.description')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4 p-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name" className="text-sm font-medium">{t('profileSetup.form.label')}</Label>
|
|
<Input
|
|
id="name"
|
|
value={name}
|
|
onChange={(e) => handleChange(e.target.value)}
|
|
placeholder={t('profileSetup.form.placeholder')}
|
|
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 ? t('profileSetup.form.submitting') : t('profileSetup.form.submit')}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|