funktionierender stand, purchasewizard noch nicht optimiert.

resources/js/pages/auth/RegisterForm.tsx

@@ -1,25 +1,21 @@
-
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, 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';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 
 interface RegisterFormProps {
   packageId?: number;
-  onSuccess?: (payload: any) => void;
+  onSuccess?: (userData: 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 [privacyOpen, setPrivacyOpen] = useState(false);
+  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
   const { t } = useTranslation(['auth', 'common']);
-  const csrfToken = useMemo(getCsrfToken, []);
 
-  const { data, setData, errors, setError, clearErrors, reset } = useForm({
+  const { data, setData, post, processing, errors, clearErrors, reset } = useForm({
     username: '',
     email: '',
     password: '',
@@ -29,17 +25,22 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
     address: '',
     phone: '',
     privacy_consent: false,
-    package_id: packageId ?? null,
+    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]);
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setHasTriedSubmit(true);
+    post('/register', {
+      preserveScroll: true,
+      onSuccess: (page) => {
+        if (onSuccess) {
+          onSuccess((page as any).props.auth.user);
+        }
+        reset();
+      },
+    });
+  };
 
   useEffect(() => {
     if (!hasTriedSubmit) {
@@ -60,91 +61,8 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
     }
   }, [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="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">
@@ -158,9 +76,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="text"
               required
               value={data.first_name}
-              onChange={(event) => {
-                setData('first_name', event.target.value);
-                if (errors.first_name) {
+              onChange={(e) => {
+                setData('first_name', e.target.value);
+                if (e.target.value.trim() && errors.first_name) {
                   clearErrors('first_name');
                 }
               }}
@@ -183,9 +101,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="text"
               required
               value={data.last_name}
-              onChange={(event) => {
-                setData('last_name', event.target.value);
-                if (errors.last_name) {
+              onChange={(e) => {
+                setData('last_name', e.target.value);
+                if (e.target.value.trim() && errors.last_name) {
                   clearErrors('last_name');
                 }
               }}
@@ -208,9 +126,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="email"
               required
               value={data.email}
-              onChange={(event) => {
-                setData('email', event.target.value);
-                if (errors.email) {
+              onChange={(e) => {
+                setData('email', e.target.value);
+                if (e.target.value.trim() && errors.email) {
                   clearErrors('email');
                 }
               }}
@@ -221,29 +139,29 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
           {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')}
+        <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">
-            <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
             <input
-              id="username"
-              name="username"
+              id="address"
+              name="address"
               type="text"
               required
-              value={data.username}
-              onChange={(event) => {
-                setData('username', event.target.value);
-                if (errors.username) {
-                  clearErrors('username');
+              value={data.address}
+              onChange={(e) => {
+                setData('address', e.target.value);
+                if (e.target.value.trim() && 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.username ? 'border-red-500' : 'border-gray-300'}`}
-              placeholder={t('register.username_placeholder')}
+              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.username && <p className="text-sm text-red-600 mt-1">{errors.username}</p>}
+          {errors.address && <p className="text-sm text-red-600 mt-1">{errors.address}</p>}
         </div>
 
         <div className="md:col-span-1">
@@ -258,9 +176,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="tel"
               required
               value={data.phone}
-              onChange={(event) => {
-                setData('phone', event.target.value);
-                if (errors.phone) {
+              onChange={(e) => {
+                setData('phone', e.target.value);
+                if (e.target.value.trim() && errors.phone) {
                   clearErrors('phone');
                 }
               }}
@@ -271,28 +189,29 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
           {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')}
+        <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">
-            <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
-            <textarea
-              id="address"
-              name="address"
+            <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.address}
-              onChange={(event) => {
-                setData('address', event.target.value);
-                if (errors.address) {
-                  clearErrors('address');
+              value={data.username}
+              onChange={(e) => {
+                setData('username', e.target.value);
+                if (e.target.value.trim() && 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.address ? 'border-red-500' : 'border-gray-300'}`}
-              placeholder={t('register.address_placeholder')}
+              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.address && <p className="text-sm text-red-600 mt-1">{errors.address}</p>}
+          {errors.username && <p className="text-sm text-red-600 mt-1">{errors.username}</p>}
         </div>
 
         <div className="md:col-span-1">
@@ -307,12 +226,12 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="password"
               required
               value={data.password}
-              onChange={(event) => {
-                setData('password', event.target.value);
-                if (errors.password) {
+              onChange={(e) => {
+                setData('password', e.target.value);
+                if (e.target.value.trim() && errors.password) {
                   clearErrors('password');
                 }
-                if (data.password_confirmation && event.target.value === data.password_confirmation) {
+                if (data.password_confirmation && e.target.value === data.password_confirmation) {
                   clearErrors('password_confirmation');
                 }
               }}
@@ -335,12 +254,12 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
               type="password"
               required
               value={data.password_confirmation}
-              onChange={(event) => {
-                setData('password_confirmation', event.target.value);
-                if (errors.password_confirmation) {
+              onChange={(e) => {
+                setData('password_confirmation', e.target.value);
+                if (e.target.value.trim() && errors.password_confirmation) {
                   clearErrors('password_confirmation');
                 }
-                if (data.password && event.target.value === data.password) {
+                if (data.password && e.target.value === data.password) {
                   clearErrors('password_confirmation');
                 }
               }}
@@ -358,9 +277,9 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
             type="checkbox"
             required
             checked={data.privacy_consent}
-            onChange={(event) => {
-              setData('privacy_consent', event.target.checked);
-              if (event.target.checked && errors.privacy_consent) {
+            onChange={(e) => {
+              setData('privacy_consent', e.target.checked);
+              if (e.target.checked && errors.privacy_consent) {
                 clearErrors('privacy_consent');
               }
             }}
@@ -380,33 +299,38 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml }: Regi
         </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>
+      {Object.keys(errors).length > 0 && (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-md mb-6">
+          <h4 className="text-sm font-medium text-red-800 mb-2">{t('register.errors_title')}</h4>
+          <ul className="text-sm text-red-800 space-y-1">
+            {Object.entries(errors).map(([key, value]) => (
+              <li key={key} className="flex items-start">
+                <span className="font-medium">{t(`register.errors.${key}`)}:</span> {value}
+              </li>
+            ))}
+          </ul>
+        </div>
       )}
 
       <button
-        type="submit"
-        disabled={submitting}
+        type="button"
+        onClick={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"
       >
-        {submitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
+        {processing && <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>
+          <DialogTitle className="sr-only">Datenschutzerklärung</DialogTitle>
+          <DialogDescription className="sr-only">Lesen Sie unsere Datenschutzerklärung.</DialogDescription>
           <div className="p-6">
             <div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
           </div>
         </DialogContent>
       </Dialog>
-    </form>
+    </div>
   );
-}
+}