Registrieren

{initialPackage && (

{initialPackage.name}

{initialPackage.description}

{initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}

)}

Name setData('name', e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Vollständiger Name" /> {errors.name &&

{errors.name}

}

Benutzername setData('username', e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Benutzername" /> {errors.username &&

{errors.username}

}

E-Mail-Adresse setData('email', e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="email@example.com" /> {errors.email &&

{errors.email}

}

Vorname setData('first_name', e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Vorname" /> {errors.first_name &&

{errors.first_name}

}

Nachname setData('last_name', e.target.value)} className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Nachname" /> {errors.last_name &&

{errors.last_name}

}

Adresse

setData('address', e.target.value)}
                                rows={3}
                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                placeholder="Adresse"
                            />
                            {errors.address && <p className="text-sm text-red-600">{errors.address}</p>}
                        </div>

<div>
                            <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
                                Telefon
                            </label>
                            <input
                                id="phone"
                                name="phone"
                                type="tel"
                                required
                                value={data.phone}
                                onChange={(e) => setData('phone', e.target.value)}
                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                placeholder="Telefonnummer"
                            />
                            {errors.phone && <p className="text-sm text-red-600">{errors.phone}</p>}
                        </div>

<div>
                            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
                                Passwort
                            </label>
                            <input
                                id="password"
                                name="password"
                                type="password"
                                required
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                placeholder="Passwort"
                            />
                            {errors.password && <p className="text-sm text-red-600">{errors.password}</p>}
                        </div>

<div>
                            <label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700">
                                Passwort bestätigen
                            </label>
                            <input
                                id="password_confirmation"
                                name="password_confirmation"
                                type="password"
                                required
                                value={data.password_confirmation}
                                onChange={(e) => setData('password_confirmation', e.target.value)}
                                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                                placeholder="Passwort bestätigen"
                            />
                            {errors.password_confirmation && <p className="text-sm text-red-600">{errors.password_confirmation}</p>}
                        </div>

<div className="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-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                            />
                            <label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
                                Ich stimme der{' '}
                                <a href="/de/datenschutz" className="text-blue-600 hover:underline">
                                    Datenschutzerklärung
                                </a>{' '}
                                zu.
                            </label>
                            {errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
                        </div>
                    </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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 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-blue-600 hover:text-blue-500">
                                Anmelden
                            </a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    );
}