funktionierender stand, purchasewizard noch nicht optimiert.

resources/js/pages/auth/LoginForm.tsx

@@ -1,109 +1,41 @@
-
-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 } from 'lucide-react';
+import { LoaderCircle, Mail, Lock } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import InputError from '@/components/input-error';
 import TextLink from '@/components/text-link';
-import { Alert, AlertDescription } from '@/components/ui/alert';
 
 interface LoginFormProps {
-  onSuccess?: (payload: any) => void;
+  onSuccess?: (userData: any) => void;
   canResetPassword?: boolean;
 }
 
-const getCsrfToken = () =>
-  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
-
-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).');
-};
-
 export default function LoginForm({ onSuccess, canResetPassword = true }: LoginFormProps) {
+  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
   const { t } = useTranslation('auth');
-  const csrfToken = useMemo(getCsrfToken, []);
 
-  const { data, setData, errors, setError, clearErrors, reset } = useForm({
-    login: '',
+  const { data, setData, post, processing, errors, clearErrors, reset } = useForm({
+    email: '',
     password: '',
     remember: false,
   });
 
-  const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [formError, setFormError] = useState<string | null>(null);
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
     setHasTriedSubmit(true);
-    setSubmitting(true);
-    setFormError(null);
-    clearErrors();
-
-    try {
-      const response = await fetch('/purchase/auth/login', {
-        method: 'POST',
-        credentials: 'same-origin',
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-          'X-CSRF-TOKEN': csrfToken,
-          'X-Requested-With': 'XMLHttpRequest',
-        },
-        body: JSON.stringify({
-          login: data.login,
-          password: data.password,
-          remember: data.remember,
-        }),
-      });
-
-      if (response.ok) {
-        const payload = await parseJson(response);
-        reset({ login: payload?.user?.email ?? data.login, password: '', remember: false });
-        setHasTriedSubmit(false);
+    post('/login', {
+      preserveScroll: true,
+      onSuccess: () => {
         if (onSuccess) {
-          onSuccess(payload);
+          onSuccess({ user: { email: data.email } }); // Pass basic user info; full user from props in parent
         }
-        return;
-      }
-
-      if (response.status === 422) {
-        const body = await parseJson(response);
-        const validationErrors = body.errors ?? {};
-        let fallbackMessage: string | null = body.message ?? null;
-
-        Object.entries(validationErrors as Record<string, string | string[]>).forEach(([key, value]) => {
-          const message = Array.isArray(value) ? value[0] : value;
-          if (typeof message === 'string') {
-            setError(key as keyof typeof data, message);
-            if (!fallbackMessage) {
-              fallbackMessage = message;
-            }
-          }
-        });
-
-        if (fallbackMessage) {
-          setFormError(fallbackMessage);
-        }
-        return;
-      }
-
-      setFormError(t('login.generic_error', { defaultValue: 'Login failed. Please try again.' }));
-    } catch (error) {
-      setFormError(t('login.generic_error', { defaultValue: 'Login failed. Please try again.' }));
-    } finally {
-      setSubmitting(false);
-    }
+        reset();
+      },
+    });
   };
 
   useEffect(() => {
@@ -125,27 +57,26 @@ export default function LoginForm({ onSuccess, canResetPassword = true }: LoginF
   }, [errors, hasTriedSubmit]);
 
   return (
-    <form className="flex flex-col gap-6" onSubmit={handleSubmit} noValidate>
+    <div className="flex flex-col gap-6">
       <div className="grid gap-6">
         <div className="grid gap-2">
-          <Label htmlFor="login">{t('login.email')}</Label>
+          <Label htmlFor="email">{t('login.email')}</Label>
           <Input
-            id="login"
-            type="text"
-            name="login"
-            autoComplete="username"
+            id="email"
+            type="email"
+            name="email"
             required
             autoFocus
             placeholder={t('login.email_placeholder')}
-            value={data.login}
-            onChange={(event) => {
-              setData('login', event.target.value);
-              if (errors.login) {
-                clearErrors('login');
+            value={data.email}
+            onChange={(e) => {
+              setData('email', e.target.value);
+              if (errors.email) {
+                clearErrors('email');
               }
             }}
           />
-          <InputError message={errors.login} />
+          <InputError message={errors.email} />
         </div>
 
         <div className="grid gap-2">
@@ -161,12 +92,11 @@ export default function LoginForm({ onSuccess, canResetPassword = true }: LoginF
             id="password"
             type="password"
             name="password"
-            autoComplete="current-password"
             required
             placeholder={t('login.password_placeholder')}
             value={data.password}
-            onChange={(event) => {
-              setData('password', event.target.value);
+            onChange={(e) => {
+              setData('password', e.target.value);
               if (errors.password) {
                 clearErrors('password');
               }
@@ -185,19 +115,19 @@ export default function LoginForm({ onSuccess, canResetPassword = true }: LoginF
           <Label htmlFor="remember">{t('login.remember')}</Label>
         </div>
 
-        <Button type="submit" className="w-full" disabled={submitting}>
-          {submitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
+        <Button type="button" onClick={submit} className="w-full" disabled={processing}>
+          {processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
           {t('login.submit')}
         </Button>
       </div>
 
-      {(formError || Object.keys(errors).length > 0) && (
-        <Alert variant="destructive">
-          <AlertDescription>
-            {formError || Object.values(errors).join(' ')}
-          </AlertDescription>
-        </Alert>
+      {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.values(errors).join(' ')}
+          </p>
+        </div>
       )}
-    </form>
+    </div>
   );
-}
+}