import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import GuestLayout from '@/Layouts/GuestLayout'; import { Head, Link, useForm, router } from '@inertiajs/react'; import { FormEventHandler } from 'react'; import { toast } from 'sonner'; import { SocialLoginButtons } from '@/components/Auth/SocialLoginButtons'; import { useReCaptcha } from '@/components/Auth/ReCaptchaProvider'; import { useTranslation } from '@/contexts/LanguageContext'; export default function Register() { const { t } = useTranslation(); const { getToken, isEnabled: recaptchaEnabled } = useReCaptcha(); const { data, setData, processing, errors, reset } = useForm({ name: '', email: '', password: '', password_confirmation: '', recaptcha_token: '', }); const submit: FormEventHandler = async (e) => { e.preventDefault(); // Get reCAPTCHA token if enabled let recaptchaToken = ''; if (recaptchaEnabled) { recaptchaToken = await getToken('register'); } router.post(route('register'), { ...data, recaptcha_token: recaptchaToken, }, { onFinish: () => reset('password', 'password_confirmation'), onError: () => toast.error(t('Registration failed')), }); }; return (

{t('Create your account')}

{t('Start building with AI')}

setData('name', e.target.value)} required placeholder={t('John Doe')} /> {errors.name && (

{errors.name}

)}
setData('email', e.target.value)} required placeholder="you@example.com" /> {errors.email && (

{errors.email}

)}
setData('password', e.target.value)} required placeholder="••••••••" /> {errors.password && (

{errors.password}

)}
setData('password_confirmation', e.target.value) } required placeholder="••••••••" /> {errors.password_confirmation && (

{errors.password_confirmation}

)}
{errors.recaptcha_token && (

{errors.recaptcha_token}

)}

{t('Already have an account?')}{' '} {t('Sign in')}

); }