feat: Implementierung des Checkout-Logins mit E-Mail/Username-Support

resources/js/pages/marketing/checkout/steps/AuthStep.tsx

@@ -5,12 +5,14 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useCheckoutWizard } from "../WizardContext";
 import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
 import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";
+import { useTranslation } from 'react-i18next';
 
 interface AuthStepProps {
   privacyHtml: string;
 }
 
 export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
+  const { t } = useTranslation('marketing');
   const page = usePage<{ locale?: string }>();
   const locale = page.props.locale ?? "de";
   const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
@@ -48,14 +50,14 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
     return (
       <div className="space-y-6">
         <Alert>
-          <AlertTitle>Bereits eingeloggt</AlertTitle>
+          <AlertTitle>{t('checkout.auth_step.already_logged_in_title')}</AlertTitle>
           <AlertDescription>
-            {authUser.email ? `Sie sind als ${authUser.email} angemeldet.` : "Sie sind bereits angemeldet."}
+            {t('checkout.auth_step.already_logged_in_desc', { email: authUser?.email || '' })}
           </AlertDescription>
         </Alert>
         <div className="flex justify-end">
           <Button size="lg" onClick={nextStep}>
-            Weiter zur Zahlung
+            {t('checkout.auth_step.next_to_payment')}
           </Button>
         </div>
       </div>
@@ -69,16 +71,16 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml }) => {
           variant={mode === 'register' ? 'default' : 'outline'}
           onClick={() => setMode('register')}
         >
-          Registrieren
+          {t('checkout.auth_step.switch_to_register')}
         </Button>
         <Button
           variant={mode === 'login' ? 'default' : 'outline'}
           onClick={() => setMode('login')}
         >
-          Anmelden
+          {t('checkout.auth_step.switch_to_login')}
         </Button>
         <span className="text-xs text-muted-foreground">
-          Google Login folgt im Komfort-Delta.
+          {t('checkout.auth_step.google_coming_soon')}
         </span>
       </div>