327 lines
19 KiB
TypeScript
327 lines
19 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useForm, router } from '@inertiajs/react';
|
||
import { Head } from '@inertiajs/react';
|
||
import { LoaderCircle, User, Mail, Phone, Lock, Home, MapPin } from 'lucide-react';
|
||
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
|
||
|
||
interface RegisterProps {
|
||
package?: {
|
||
id: number;
|
||
name: string;
|
||
description: string;
|
||
price: number;
|
||
} | null;
|
||
privacyHtml: string;
|
||
}
|
||
|
||
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
||
|
||
export default function Register({ package: initialPackage, privacyHtml }: RegisterProps) {
|
||
const [privacyOpen, setPrivacyOpen] = useState(false);
|
||
|
||
const { data, setData, post, processing, errors, setError } = useForm({
|
||
username: '',
|
||
email: '',
|
||
password: '',
|
||
password_confirmation: '',
|
||
first_name: '',
|
||
last_name: '',
|
||
address: '',
|
||
phone: '',
|
||
privacy_consent: false,
|
||
package_id: initialPackage?.id || null,
|
||
});
|
||
|
||
React.useEffect(() => {
|
||
if (Object.keys(errors).length > 0) {
|
||
console.log('Validation errors received:', errors);
|
||
}
|
||
if (!processing) {
|
||
console.log('Registration processing completed');
|
||
}
|
||
}, [errors, processing, data]);
|
||
|
||
React.useEffect(() => {
|
||
if (Object.keys(errors).length > 0) {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
}, [errors]);
|
||
|
||
React.useEffect(() => {
|
||
if (Object.keys(errors).length > 0) {
|
||
// Force re-render or scroll to errors
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
}, [errors]);
|
||
|
||
const submit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
console.log('Submitting registration form with data:', data);
|
||
router.post('/register', data, {
|
||
preserveState: true,
|
||
forceFormData: true,
|
||
onSuccess: () => {
|
||
console.log('Registration successful');
|
||
},
|
||
onError: (errors) => {
|
||
console.log('Registration errors:', errors);
|
||
setError(errors);
|
||
},
|
||
});
|
||
console.log('POST to /register initiated');
|
||
};
|
||
|
||
return (
|
||
<MarketingLayout title="Registrieren">
|
||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||
<div className="max-w-4xl w-full space-y-8">
|
||
<div className="bg-white rounded-lg shadow-md p-8">
|
||
<div>
|
||
<h2 className="mt-6 text-center text-3xl font-bold text-gray-900 font-display">
|
||
Willkommen bei Fotospiel – Erstellen Sie Ihren Account
|
||
</h2>
|
||
<p className="mt-4 text-center text-gray-600 font-sans-marketing">
|
||
Registrierung ermöglicht Zugriff auf Events, Galerien und personalisierte Features.
|
||
</p>
|
||
{initialPackage && (
|
||
<div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
|
||
<h3 className="text-lg font-semibold text-blue-900 mb-2">{initialPackage.name}</h3>
|
||
<p className="text-blue-800 mb-2">{initialPackage.description}</p>
|
||
<p className="text-sm text-blue-700">
|
||
{initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<form key={`form-${processing ? 'submitting' : 'idle'}-${Object.keys(errors).length}`} onSubmit={submit} className="mt-8 space-y-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
|
||
Vorname *
|
||
</label>
|
||
<div className="relative">
|
||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="first_name"
|
||
name="first_name"
|
||
type="text"
|
||
required
|
||
value={data.first_name}
|
||
onChange={(e) => setData('first_name', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.first_name ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="Vorname"
|
||
/>
|
||
</div>
|
||
{errors.first_name && <p key={`error-first_name`} className="text-sm text-red-600 mt-1">{errors.first_name}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
|
||
Nachname *
|
||
</label>
|
||
<div className="relative">
|
||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="last_name"
|
||
name="last_name"
|
||
type="text"
|
||
required
|
||
value={data.last_name}
|
||
onChange={(e) => setData('last_name', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.last_name ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="Nachname"
|
||
/>
|
||
</div>
|
||
{errors.last_name && <p key={`error-last_name`} className="text-sm text-red-600 mt-1">{errors.last_name}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
|
||
E-Mail-Adresse *
|
||
</label>
|
||
<div className="relative">
|
||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
required
|
||
value={data.email}
|
||
onChange={(e) => setData('email', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="email@example.com"
|
||
/>
|
||
</div>
|
||
{errors.email && <p key={`error-email`} className="text-sm text-red-600 mt-1">{errors.email}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
|
||
Adresse *
|
||
</label>
|
||
<div className="relative">
|
||
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="address"
|
||
name="address"
|
||
type="text"
|
||
required
|
||
value={data.address}
|
||
onChange={(e) => setData('address', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="Adresse"
|
||
/>
|
||
</div>
|
||
{errors.address && <p key={`error-address`} className="text-sm text-red-600 mt-1">{errors.address}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
|
||
Telefon *
|
||
</label>
|
||
<div className="relative">
|
||
<Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="phone"
|
||
name="phone"
|
||
type="tel"
|
||
required
|
||
value={data.phone}
|
||
onChange={(e) => setData('phone', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.phone ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="Telefonnummer"
|
||
/>
|
||
</div>
|
||
{errors.phone && <p key={`error-phone`} className="text-sm text-red-600 mt-1">{errors.phone}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
|
||
Benutzername *
|
||
</label>
|
||
<div className="relative">
|
||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="username"
|
||
name="username"
|
||
type="text"
|
||
required
|
||
value={data.username}
|
||
onChange={(e) => setData('username', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="Benutzername"
|
||
/>
|
||
</div>
|
||
{errors.username && <p key={`error-username`} className="text-sm text-red-600 mt-1">{errors.username}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
||
Passwort *
|
||
</label>
|
||
<div className="relative">
|
||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="password"
|
||
name="password"
|
||
type="password"
|
||
required
|
||
value={data.password}
|
||
onChange={(e) => setData('password', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="Passwort"
|
||
/>
|
||
</div>
|
||
{errors.password && <p key={`error-password`} className="text-sm text-red-600 mt-1">{errors.password}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700 mb-1">
|
||
Passwort bestätigen *
|
||
</label>
|
||
<div className="relative">
|
||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<input
|
||
id="password_confirmation"
|
||
name="password_confirmation"
|
||
type="password"
|
||
required
|
||
value={data.password_confirmation}
|
||
onChange={(e) => setData('password_confirmation', e.target.value)}
|
||
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password_confirmation ? 'border-red-500' : 'border-gray-300'}`}
|
||
placeholder="Passwort bestätigen"
|
||
/>
|
||
</div>
|
||
{errors.password_confirmation && <p className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-2 flex items-start">
|
||
<input
|
||
id="privacy_consent"
|
||
name="privacy_consent"
|
||
type="checkbox"
|
||
required
|
||
checked={data.privacy_consent}
|
||
onChange={(e) => setData('privacy_consent', e.target.checked)}
|
||
className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
|
||
/>
|
||
<label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
|
||
Ich stimme der{' '}
|
||
<button
|
||
type="button"
|
||
onClick={() => setPrivacyOpen(true)}
|
||
className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium"
|
||
>
|
||
Datenschutzerklärung
|
||
</button>{' '}
|
||
zu.
|
||
</label>
|
||
{errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
{Object.keys(errors).length > 0 && (
|
||
<div className="p-4 bg-red-50 border border-red-200 rounded-md">
|
||
<p className="text-sm text-red-800">
|
||
{Object.entries(errors).map(([key, value]) => (
|
||
<span key={key}>
|
||
{value}
|
||
</span>
|
||
))}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={processing}
|
||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
|
||
>
|
||
{processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
|
||
Account erstellen
|
||
</button>
|
||
|
||
<div className="text-center">
|
||
<p className="text-sm text-gray-600">
|
||
Bereits registriert?{' '}
|
||
<a href="/login" className="font-medium text-[#FFB6C1] hover:text-[#FF69B4]">
|
||
Anmelden
|
||
</a>
|
||
</p>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<Dialog open={privacyOpen} onOpenChange={setPrivacyOpen}>
|
||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto p-0">
|
||
<div className="p-6">
|
||
<div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</MarketingLayout>
|
||
);
|
||
}
|