413 lines
16 KiB
TypeScript
413 lines
16 KiB
TypeScript
|
||
import React, { useEffect, useMemo, useState } from 'react';
|
||
import { useForm } from '@inertiajs/react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { LoaderCircle, User, Mail, Phone, Lock, MapPin } from 'lucide-react';
|
||
import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
|
||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||
|
||
interface RegisterFormProps {
|
||
packageId?: number;
|
||
onSuccess?: (payload: any) => void;
|
||
privacyHtml: string;
|
||
}
|
||
|
||
const getCsrfToken = () =>
|
||
(document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
|
||
|
||
export default function RegisterForm({ packageId, onSuccess, privacyHtml }: RegisterFormProps) {
|
||
const { t } = useTranslation(['auth', 'common']);
|
||
const csrfToken = useMemo(getCsrfToken, []);
|
||
|
||
const { data, setData, errors, setError, clearErrors, reset } = useForm({
|
||
username: '',
|
||
email: '',
|
||
password: '',
|
||
password_confirmation: '',
|
||
first_name: '',
|
||
last_name: '',
|
||
address: '',
|
||
phone: '',
|
||
privacy_consent: false,
|
||
package_id: packageId ?? null,
|
||
});
|
||
|
||
const [privacyOpen, setPrivacyOpen] = useState(false);
|
||
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [formError, setFormError] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
setData('package_id', packageId ?? null);
|
||
}, [packageId]);
|
||
|
||
useEffect(() => {
|
||
if (!hasTriedSubmit) {
|
||
return;
|
||
}
|
||
|
||
const errorKeys = Object.keys(errors);
|
||
if (errorKeys.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const firstError = errorKeys[0];
|
||
const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement>(`[name="${firstError}"]`);
|
||
|
||
if (field) {
|
||
field.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
field.focus();
|
||
}
|
||
}, [errors, hasTriedSubmit]);
|
||
|
||
const parseJson = async (response: Response) => {
|
||
if (response.headers.get('Content-Type')?.includes('application/json')) {
|
||
const json = await response.json().catch(() => null);
|
||
if (json) return json;
|
||
}
|
||
|
||
const text = await response.text();
|
||
throw new Error(text || 'Invalid server response (unexpected end of data or non-JSON).');
|
||
};
|
||
|
||
const submit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||
event.preventDefault();
|
||
setHasTriedSubmit(true);
|
||
setSubmitting(true);
|
||
setFormError(null);
|
||
clearErrors();
|
||
|
||
try {
|
||
const response = await fetch('/purchase/auth/register', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
Accept: 'application/json',
|
||
'X-CSRF-TOKEN': csrfToken,
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
},
|
||
body: JSON.stringify({
|
||
...data,
|
||
privacy_consent: Boolean(data.privacy_consent),
|
||
}),
|
||
});
|
||
|
||
if (response.ok) {
|
||
const payload = await parseJson(response);
|
||
reset({
|
||
username: '',
|
||
email: '',
|
||
password: '',
|
||
password_confirmation: '',
|
||
first_name: '',
|
||
last_name: '',
|
||
address: '',
|
||
phone: '',
|
||
privacy_consent: false,
|
||
package_id: packageId ?? null,
|
||
});
|
||
setHasTriedSubmit(false);
|
||
if (onSuccess) {
|
||
onSuccess(payload);
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (response.status === 422) {
|
||
const body = await parseJson(response);
|
||
const validationErrors = body.errors ?? {};
|
||
let fallbackMessage: string | null = body.message ?? null;
|
||
|
||
Object.entries(validationErrors).forEach(([key, value]) => {
|
||
const message = Array.isArray(value) ? value[0] : value;
|
||
if (typeof message === 'string') {
|
||
setError(key, message);
|
||
if (!fallbackMessage) {
|
||
fallbackMessage = message;
|
||
}
|
||
}
|
||
});
|
||
|
||
if (fallbackMessage) {
|
||
setFormError(fallbackMessage);
|
||
}
|
||
return;
|
||
}
|
||
|
||
setFormError(t('register.generic_error', { defaultValue: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' }));
|
||
} catch (error) {
|
||
const message = (error as Error).message || t('register.generic_error', { defaultValue: 'Registrierung fehlgeschlagen. Bitte versuche es erneut.' });
|
||
setFormError(message);
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<form className="space-y-6" onSubmit={submit} noValidate>
|
||
<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">
|
||
{t('register.first_name')} {t('common:required')}
|
||
</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={(event) => {
|
||
setData('first_name', event.target.value);
|
||
if (errors.first_name) {
|
||
clearErrors('first_name');
|
||
}
|
||
}}
|
||
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={t('register.first_name_placeholder')}
|
||
/>
|
||
</div>
|
||
{errors.first_name && <p 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">
|
||
{t('register.last_name')} {t('common:required')}
|
||
</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={(event) => {
|
||
setData('last_name', event.target.value);
|
||
if (errors.last_name) {
|
||
clearErrors('last_name');
|
||
}
|
||
}}
|
||
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={t('register.last_name_placeholder')}
|
||
/>
|
||
</div>
|
||
{errors.last_name && <p 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">
|
||
{t('register.email')} {t('common:required')}
|
||
</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={(event) => {
|
||
setData('email', event.target.value);
|
||
if (errors.email) {
|
||
clearErrors('email');
|
||
}
|
||
}}
|
||
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={t('register.email_placeholder')}
|
||
/>
|
||
</div>
|
||
{errors.email && <p className="text-sm text-red-600 mt-1">{errors.email}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
|
||
{t('register.username')} {t('common:required')}
|
||
</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={(event) => {
|
||
setData('username', event.target.value);
|
||
if (errors.username) {
|
||
clearErrors('username');
|
||
}
|
||
}}
|
||
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={t('register.username_placeholder')}
|
||
/>
|
||
</div>
|
||
{errors.username && <p className="text-sm text-red-600 mt-1">{errors.username}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
|
||
{t('register.phone')} {t('common:required')}
|
||
</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={(event) => {
|
||
setData('phone', event.target.value);
|
||
if (errors.phone) {
|
||
clearErrors('phone');
|
||
}
|
||
}}
|
||
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={t('register.phone_placeholder')}
|
||
/>
|
||
</div>
|
||
{errors.phone && <p className="text-sm text-red-600 mt-1">{errors.phone}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-2">
|
||
<label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
|
||
{t('register.address')} {t('common:required')}
|
||
</label>
|
||
<div className="relative">
|
||
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||
<textarea
|
||
id="address"
|
||
name="address"
|
||
required
|
||
value={data.address}
|
||
onChange={(event) => {
|
||
setData('address', event.target.value);
|
||
if (errors.address) {
|
||
clearErrors('address');
|
||
}
|
||
}}
|
||
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={t('register.address_placeholder')}
|
||
/>
|
||
</div>
|
||
{errors.address && <p className="text-sm text-red-600 mt-1">{errors.address}</p>}
|
||
</div>
|
||
|
||
<div className="md:col-span-1">
|
||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
||
{t('register.password')} {t('common:required')}
|
||
</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={(event) => {
|
||
setData('password', event.target.value);
|
||
if (errors.password) {
|
||
clearErrors('password');
|
||
}
|
||
if (data.password_confirmation && event.target.value === data.password_confirmation) {
|
||
clearErrors('password_confirmation');
|
||
}
|
||
}}
|
||
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={t('register.password_placeholder')}
|
||
/>
|
||
</div>
|
||
{errors.password && <p 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">
|
||
{t('register.confirm_password')} {t('common:required')}
|
||
</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={(event) => {
|
||
setData('password_confirmation', event.target.value);
|
||
if (errors.password_confirmation) {
|
||
clearErrors('password_confirmation');
|
||
}
|
||
if (data.password && event.target.value === data.password) {
|
||
clearErrors('password_confirmation');
|
||
}
|
||
}}
|
||
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={t('register.confirm_password_placeholder')}
|
||
/>
|
||
</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={(event) => {
|
||
setData('privacy_consent', event.target.checked);
|
||
if (event.target.checked && errors.privacy_consent) {
|
||
clearErrors('privacy_consent');
|
||
}
|
||
}}
|
||
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">
|
||
{t('register.privacy_consent')}{' '}
|
||
<button
|
||
type="button"
|
||
onClick={() => setPrivacyOpen(true)}
|
||
className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium"
|
||
>
|
||
{t('register.privacy_policy')}
|
||
</button>.
|
||
</label>
|
||
{errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
{(formError || Object.keys(errors).length > 0) && (
|
||
<Alert>
|
||
{formError && <AlertDescription>{formError}</AlertDescription>}
|
||
{Object.keys(errors).length > 0 && !formError && (
|
||
<AlertDescription>{Object.values(errors).join(' ')}</AlertDescription>
|
||
)}
|
||
</Alert>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={submitting}
|
||
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"
|
||
>
|
||
{submitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
|
||
{t('register.submit')}
|
||
</button>
|
||
|
||
<Dialog open={privacyOpen} onOpenChange={setPrivacyOpen}>
|
||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto p-0">
|
||
<DialogTitle className="sr-only">Datenschutzerkl<EFBFBD>rung</DialogTitle>
|
||
<DialogDescription className="sr-only">Lesen Sie unsere Datenschutzerkl<EFBFBD>rung.</DialogDescription>
|
||
<div className="p-6">
|
||
<div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</form>
|
||
);
|
||
}
|