verpfuschter stand von codex

resources/js/pages/auth/LoginForm.tsx

@@ -0,0 +1,203 @@
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import { useTranslation } from 'react-i18next';
+import { LoaderCircle } 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;
+  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 { t } = useTranslation('auth');
+  const csrfToken = useMemo(getCsrfToken, []);
+
+  const { data, setData, errors, setError, clearErrors, reset } = useForm({
+    login: '',
+    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();
+    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);
+        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 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);
+    }
+  };
+
+  useEffect(() => {
+    if (!hasTriedSubmit) {
+      return;
+    }
+
+    const errorKeys = Object.keys(errors);
+    if (errorKeys.length === 0) {
+      return;
+    }
+
+    const field = document.querySelector<HTMLInputElement>(`[name="${errorKeys[0]}"]`);
+
+    if (field) {
+      field.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      field.focus();
+    }
+  }, [errors, hasTriedSubmit]);
+
+  return (
+    <form className="flex flex-col gap-6" onSubmit={handleSubmit} noValidate>
+      <div className="grid gap-6">
+        <div className="grid gap-2">
+          <Label htmlFor="login">{t('login.email')}</Label>
+          <Input
+            id="login"
+            type="text"
+            name="login"
+            autoComplete="username"
+            required
+            autoFocus
+            placeholder={t('login.email_placeholder')}
+            value={data.login}
+            onChange={(event) => {
+              setData('login', event.target.value);
+              if (errors.login) {
+                clearErrors('login');
+              }
+            }}
+          />
+          <InputError message={errors.login} />
+        </div>
+
+        <div className="grid gap-2">
+          <div className="flex items-center">
+            <Label htmlFor="password">{t('login.password')}</Label>
+            {canResetPassword && (
+              <TextLink href="/forgot-password" className="ml-auto text-sm">
+                {t('login.forgot')}
+              </TextLink>
+            )}
+          </div>
+          <Input
+            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);
+              if (errors.password) {
+                clearErrors('password');
+              }
+            }}
+          />
+          <InputError message={errors.password} />
+        </div>
+
+        <div className="flex items-center space-x-3">
+          <Checkbox
+            id="remember"
+            name="remember"
+            checked={data.remember}
+            onCheckedChange={(checked) => setData('remember', Boolean(checked))}
+          />
+          <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" />}
+          {t('login.submit')}
+        </Button>
+      </div>
+
+      {(formError || Object.keys(errors).length > 0) && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            {formError || Object.values(errors).join(' ')}
+          </AlertDescription>
+        </Alert>
+      )}
+    </form>
+  );
+}

resources/js/pages/auth/RegisterForm.tsx

@@ -0,0 +1,412 @@
+
+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>
+  );
+}

resources/js/pages/auth/register.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useForm } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, User, Mail, Phone, Lock, Home, MapPin } from 'lucide-react';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 
 interface RegisterProps {
     package?: {
@@ -11,7 +11,7 @@ interface RegisterProps {
         description: string;
         price: number;
     } | null;
-    privacyHtml: string;
+    privacyHtml?: string;
 }
 
 import MarketingLayout from '@/layouts/marketing/MarketingLayout';
@@ -356,8 +356,14 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
 
             <Dialog open={privacyOpen} onOpenChange={setPrivacyOpen}>
                 <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto p-0">
+                    <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 }} />
+                        {privacyHtml ? (
+                            <div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
+                        ) : (
+                            <p>Datenschutzerklärung wird geladen...</p>
+                        )}
                     </div>
                 </DialogContent>
             </Dialog>