Guest PWA vollständig lokalisiert

resources/js/guest/pages/ProfileSetupPage.tsx

@@ -6,7 +6,7 @@ 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';
+import { useTranslation } from '../i18n/useTranslation';
 
 export default function ProfileSetupPage() {
   const { token } = useParams<{ token: string }>();
@@ -15,6 +15,7 @@ export default function ProfileSetupPage() {
   const { name: storedName, setName: persistName, hydrated } = useGuestIdentity();
   const [name, setName] = useState(storedName);
   const [submitting, setSubmitting] = useState(false);
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (!token) {
@@ -51,7 +52,7 @@ export default function ProfileSetupPage() {
   if (loading) {
     return (
       <div className="flex justify-center items-center h-32">
-        <div className="text-lg">Lade Event...</div>
+        <div className="text-lg">{t('profileSetup.loading')}</div>
       </div>
     );
   }
@@ -59,31 +60,30 @@ export default function ProfileSetupPage() {
   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>
+        <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">
-      <Header slug={token!} />
       <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!
+              {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">Dein Name (z.B. Anna)</Label>
+              <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="Dein Name"
+                placeholder={t('profileSetup.form.placeholder')}
                 className="text-lg"
                 disabled={submitting || !hydrated}
                 autoComplete="name"
@@ -94,7 +94,7 @@ export default function ProfileSetupPage() {
               onClick={submitName}
               disabled={submitting || !name.trim() || !hydrated}
             >
-              {submitting ? 'Speichere...' : "Let's go!"}
+              {submitting ? t('profileSetup.form.submitting') : t('profileSetup.form.submit')}
             </Button>
           </CardContent>
         </Card>