soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Codex Agent
2025-10-08 21:57:46 +02:00
parent cee279cbab
commit 417b1da484
25 changed files with 730 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/components/delete-user.tsx
View File

@@ -7,9 +7,11 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Form } from '@inertiajs/react';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
export default function DeleteUser() {
const passwordInput = useRef<HTMLInputElement>(null);
const { t } = useTranslation('auth');
const passwordInput = useRef<HTMLInputElement>(null);
return (
<div className="space-y-6">
@@ -27,8 +29,7 @@ export default function DeleteUser() {
<DialogContent>
<DialogTitle>Are you sure you want to delete your account?</DialogTitle>
<DialogDescription>
Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password
to confirm you would like to permanently delete your account.
{t('auth.delete_user.confirm_text')}
</DialogDescription>
<Form
@@ -48,12 +49,12 @@ export default function DeleteUser() {
</Label>
<Input
id="password"
type="password"
name="password"
ref={passwordInput}
placeholder="Password"
autoComplete="current-password"
id="password"
type="password"
name="password"
ref={passwordInput}
placeholder={t('auth.delete_user.password_placeholder')}
autoComplete="current-password"
/>
<InputError message={errors.password} />

8
resources/js/layouts/app/Header.tsx
View File

@@ -24,7 +24,7 @@ const Header: React.FC = () => {
};
const handleLanguageChange = useCallback(async (value: string) => {
console.log('handleLanguageChange called with:', value);
//console.log('handleLanguageChange called with:', value);
try {
const response = await fetch('/set-locale', {
method: 'POST',
@@ -35,9 +35,9 @@ const Header: React.FC = () => {
body: JSON.stringify({ locale: value }),
});
console.log('fetch response:', response.status);
//console.log('fetch response:', response.status);
if (response.ok) {
console.log('calling i18n.changeLanguage with:', value);
//console.log('calling i18n.changeLanguage with:', value);
i18n.changeLanguage(value);
// Reload only the locale prop to update the page props
router.reload({ only: ['locale'] });
@@ -117,7 +117,7 @@ const Header: React.FC = () => {
</Button>
<Select value={i18n.language || 'de'} onValueChange={handleLanguageChange}>
<SelectTrigger className="w-[70px] h-8">
<SelectValue placeholder="DE" />
<SelectValue placeholder={t('common.ui.language_select')} />
</SelectTrigger>
<SelectContent>
<SelectItem value="de">DE</SelectItem>

26
resources/js/pages/auth/LoginForm.tsx
View File

@@ -43,7 +43,7 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
const loginEndpoint = '/checkout/login';
const [values, setValues] = useState({
email: "",
identifier: "",
password: "",
remember: false,
});
@@ -98,7 +98,7 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
},
credentials: "same-origin",
body: JSON.stringify({
email: values.email,
identifier: values.identifier,
password: values.password,
remember: values.remember,
locale: resolvedLocale,
@@ -146,20 +146,20 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
<form onSubmit={submit} className="flex flex-col gap-6" noValidate>
<div className="grid gap-6">
<div className="grid gap-2">
<Label htmlFor="email">{t("login.email")}</Label>
<Label htmlFor="identifier">{t("login.identifier") || t("login.email")}</Label>
<Input
id="email"
type="email"
name="email"
id="identifier"
type="text"
name="identifier"
required
autoFocus
placeholder={t("login.email_placeholder")}
value={values.email}
onChange={(event) => updateValue("email", event.target.value)}
placeholder={t("login.identifier_placeholder") || t("login.email_placeholder")}
value={values.identifier}
onChange={(event) => updateValue("identifier", event.target.value)}
/>
<InputError message={errors.email} />
<InputError message={errors.identifier || errors.email} />
</div>
<div className="grid gap-2">
<div className="flex items-center">
<Label htmlFor="password">{t("login.password")}</Label>
@@ -180,7 +180,7 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
/>
<InputError message={errors.password} />
</div>
<div className="flex items-center space-x-3">
<Checkbox
id="remember"
@@ -190,7 +190,7 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale }
/>
<Label htmlFor="remember">{t("login.remember")}</Label>
</div>
<Button type="submit" className="w-full" disabled={isSubmitting}>
{isSubmitting && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
{t("login.submit")}

20
resources/js/pages/auth/confirm-password.tsx
View File

@@ -6,21 +6,23 @@ import { Label } from '@/components/ui/label';
import AuthLayout from '@/layouts/auth-layout';
import { Form, Head } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';
export default function ConfirmPassword() {
return (
<AuthLayout
title="Confirm your password"
description="This is a secure area of the application. Please confirm your password before continuing."
>
<Head title="Confirm password" />
const { t } = useTranslation('auth');
return (
<AuthLayout
title={t('auth.confirm.title', 'Confirm your password')}
description={t('auth.confirm.description', 'This is a secure area of the application. Please confirm your password before continuing.')}
>
<Head title={t('auth.confirm.title', 'Confirm password')} />
<Form {...store.form()} resetOnSuccess={['password']}>
{({ processing, errors }) => (
<div className="space-y-6">
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" name="password" placeholder="Password" autoComplete="current-password" autoFocus />
<Label htmlFor="password">{t('auth.confirm.password', 'Password')}</Label>
<Input id="password" type="password" name="password" placeholder={t('auth.confirm.password_placeholder')} autoComplete="current-password" autoFocus />
<InputError message={errors.password} />
</div>
@@ -28,7 +30,7 @@ export default function ConfirmPassword() {
<div className="flex items-center">
<Button className="w-full" disabled={processing}>
{processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
Confirm password
{t('auth.confirm.submit', 'Confirm password')}
</Button>
</div>
</div>

11
resources/js/pages/auth/forgot-password.tsx
View File

@@ -12,9 +12,10 @@ import { Label } from '@/components/ui/label';
import AuthLayout from '@/layouts/auth-layout';
export default function ForgotPassword({ status }: { status?: string }) {
return (
<AuthLayout title="Forgot password" description="Enter your email to receive a password reset link">
<Head title="Forgot password" />
const { t } = useTranslation('auth');
return (
<AuthLayout title={t('auth.forgot.title', 'Forgot password')} description={t('auth.forgot.description', 'Enter your email to receive a password reset link')}>
<Head title={t('auth.forgot.title', 'Forgot password')} />
{status && <div className="mb-4 text-center text-sm font-medium text-green-600">{status}</div>}
@@ -24,7 +25,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
<>
<div className="grid gap-2">
<Label htmlFor="email">Email address</Label>
<Input id="email" type="email" name="email" autoComplete="off" autoFocus placeholder="email@example.com" />
<Input id="email" type="email" name="email" autoComplete="off" autoFocus placeholder={t('auth.forgot.email_placeholder')} />
<InputError message={errors.email} />
</div>
@@ -41,7 +42,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
<div className="space-x-1 text-center text-sm text-muted-foreground">
<span>Or, return to</span>
<TextLink href={login()}>log in</TextLink>
<TextLink href={login()}>{t('auth.forgot.back')}</TextLink>
</div>
</div>
</AuthLayout>

34
resources/js/pages/auth/reset-password.tsx
View File

@@ -1,6 +1,7 @@
import { store } from '@/actions/App/Http/Controllers/Auth/NewPasswordController';
import { Form, Head } from '@inertiajs/react';
import { LoaderCircle } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
@@ -14,25 +15,26 @@ interface ResetPasswordProps {
}
export default function ResetPassword({ token, email }: ResetPasswordProps) {
const { t } = useTranslation('auth');
return (
<AuthLayout title="Reset password" description="Please enter your new password below">
<Head title="Reset password" />
<AuthLayout title={t('auth.reset.title', 'Reset password')} description={t('auth.reset.description', 'Please enter your new password below')}>
<Head title={t('auth.reset.title', 'Reset password')} />
<Form
{...NewPasswordController.store.form()}
{...store.form()}
transform={(data) => ({ ...data, token, email })}
resetOnSuccess={['password', 'password_confirmation']}
>
{({ processing, errors }) => (
<div className="grid gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" name="email" autoComplete="email" value={email} className="mt-1 block w-full" readOnly />
<InputError message={errors.email} className="mt-2" />
<Label htmlFor="email">{t('auth.reset.email')}</Label>
<Input id="email" type="email" name="email" autoComplete="email" value={email} className="mt-1 block w-full" readOnly />
<InputError message={errors.email} className="mt-2" />
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Label htmlFor="password">{t('auth.reset.password', 'Password')}</Label>
<Input
id="password"
type="password"
@@ -40,27 +42,27 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
autoComplete="new-password"
className="mt-1 block w-full"
autoFocus
placeholder="Password"
placeholder={t('auth.reset.password_placeholder')}
/>
<InputError message={errors.password} />
</div>
<div className="grid gap-2">
<Label htmlFor="password_confirmation">Confirm password</Label>
<Label htmlFor="password_confirmation">{t('auth.reset.confirm_password', 'Confirm password')}</Label>
<Input
id="password_confirmation"
type="password"
name="password_confirmation"
autoComplete="new-password"
className="mt-1 block w-full"
placeholder="Confirm password"
id="password_confirmation"
type="password"
name="password_confirmation"
autoComplete="new-password"
className="mt-1 block w-full"
placeholder={t('auth.reset.confirm_password_placeholder')}
/>
<InputError message={errors.password_confirmation} className="mt-2" />
</div>
<Button type="submit" className="mt-4 w-full" disabled={processing}>
{processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
Reset password
{t('auth.reset.submit', 'Reset password')}
</Button>
</div>
)}

44
resources/js/pages/marketing/checkout/CheckoutWizard.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo } from "react";
import { useTranslation } from 'react-i18next';
import { Steps } from "@/components/ui/Steps";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
@@ -23,36 +24,45 @@ interface CheckoutWizardProps {
initialStep?: CheckoutStepId;
}
const stepConfig: { id: CheckoutStepId; title: string; description: string; details: string }[] = [
const baseStepConfig: { id: CheckoutStepId; titleKey: string; descriptionKey: string; detailsKey: string }[] = [
{
id: "package",
title: "Paket wählen",
description: "Auswahl und Vergleich",
details: "Wähle das passende Paket für deine Bedürfnisse"
titleKey: 'checkout.package_step.title',
descriptionKey: 'checkout.package_step.subtitle',
detailsKey: 'checkout.package_step.description'
},
{
id: "auth",
title: "Konto einrichten",
description: "Login oder Registrierung",
details: "Erstelle ein Konto oder melde dich an"
titleKey: 'checkout.auth_step.title',
descriptionKey: 'checkout.auth_step.subtitle',
detailsKey: 'checkout.auth_step.description'
},
{
id: "payment",
title: "Bezahlung",
description: "Sichere Zahlung",
details: "Gib deine Zahlungsdaten ein"
titleKey: 'checkout.payment_step.title',
descriptionKey: 'checkout.payment_step.subtitle',
detailsKey: 'checkout.payment_step.description'
},
{
id: "confirmation",
title: "Fertig!",
description: "Zugang aktiv",
details: "Dein Paket ist aktiviert"
titleKey: 'checkout.confirmation_step.title',
descriptionKey: 'checkout.confirmation_step.subtitle',
detailsKey: 'checkout.confirmation_step.description'
},
];
const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }> = ({ stripePublishableKey, privacyHtml }) => {
const { t } = useTranslation('marketing');
const { currentStep, nextStep, previousStep } = useCheckoutWizard();
const stepConfig = useMemo(() =>
baseStepConfig.map(step => ({
id: step.id,
title: t(step.titleKey),
description: t(step.descriptionKey),
details: t(step.detailsKey),
})),
[t]
);
const currentIndex = useMemo(() => stepConfig.findIndex((step) => step.id === currentStep), [currentStep]);
const progress = useMemo(() => {
@@ -60,7 +70,7 @@ const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }
return 0;
}
return (currentIndex / (stepConfig.length - 1)) * 100;
}, [currentIndex]);
}, [currentIndex, stepConfig]);
return (
<div className="space-y-8">
@@ -78,10 +88,10 @@ const WizardBody: React.FC<{ stripePublishableKey: string; privacyHtml: string }
<div className="flex items-center justify-between">
<Button variant="ghost" onClick={previousStep} disabled={currentIndex <= 0}>
Zurueck
{t('checkout.back')}
</Button>
<Button onClick={nextStep} disabled={currentIndex >= stepConfig.length - 1}>
Weiter
{t('checkout.next')}
</Button>
</div>
</div>

19
resources/js/pages/marketing/checkout/WizardContext.tsx
View File

@@ -124,14 +124,18 @@ export function CheckoutWizardProvider({
if (savedState) {
try {
const parsed = JSON.parse(savedState);
// Restore state selectively
if (parsed.selectedPackage) dispatch({ type: 'SELECT_PACKAGE', payload: parsed.selectedPackage });
if (parsed.currentStep) dispatch({ type: 'GO_TO_STEP', payload: parsed.currentStep });
if (parsed.selectedPackage && initialPackage && parsed.selectedPackage.id === initialPackage.id && parsed.currentStep !== 'confirmation') {
// Restore state selectively
if (parsed.selectedPackage) dispatch({ type: 'SELECT_PACKAGE', payload: parsed.selectedPackage });
if (parsed.currentStep) dispatch({ type: 'GO_TO_STEP', payload: parsed.currentStep });
} else {
localStorage.removeItem('checkout-wizard-state');
}
} catch (error) {
console.error('Failed to restore checkout state:', error);
}
}
}, []);
}, [initialPackage]);
// Save state to localStorage whenever it changes
useEffect(() => {
@@ -141,6 +145,13 @@ export function CheckoutWizardProvider({
}));
}, [state.selectedPackage, state.currentStep]);
// Clear localStorage when confirmation step is reached
useEffect(() => {
if (state.currentStep === 'confirmation') {
localStorage.removeItem('checkout-wizard-state');
}
}, [state.currentStep]);
const selectPackage = useCallback((pkg: CheckoutPackage) => {
dispatch({ type: 'SELECT_PACKAGE', payload: pkg });
}, []);

14
resources/js/pages/marketing/checkout/steps/AuthStep.tsx
View File

@@ -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>

11
resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
View File

@@ -2,27 +2,30 @@ import React from "react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";
import { useTranslation } from 'react-i18next';
interface ConfirmationStepProps {
onViewProfile?: () => void;
}
export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfile }) => {
const { t } = useTranslation('marketing');
const { selectedPackage } = useCheckoutWizard();
return (
<div className="space-y-6">
<Alert>
<AlertTitle>Willkommen bei FotoSpiel</AlertTitle>
<AlertTitle>{t('checkout.confirmation_step.welcome')}</AlertTitle>
<AlertDescription>
Ihr Paket "{selectedPackage.name}" ist aktiviert. Wir haben Ihnen eine Bestätigung per E-Mail gesendet.
{t('checkout.confirmation_step.package_activated', { name: selectedPackage?.name || '' })}
{t('checkout.confirmation_step.email_sent')}
</AlertDescription>
</Alert>
<div className="flex flex-wrap gap-3 justify-end">
<Button variant="outline" onClick={onViewProfile}>
Profil oeffnen
{t('checkout.confirmation_step.open_profile')}
</Button>
<Button>Zum Admin-Bereich</Button>
<Button>{t('checkout.confirmation_step.to_admin')}</Button>
</div>
</div>
);

12
resources/js/pages/marketing/checkout/steps/PackageStep.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo, useState } from "react";
import { useTranslation } from 'react-i18next';
import { Check, Package as PackageIcon, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -77,6 +78,7 @@ function PackageOption({ pkg, isActive, onSelect }: { pkg: CheckoutPackage; isAc
}
export const PackageStep: React.FC = () => {
const { t } = useTranslation('marketing');
const { selectedPackage, packageOptions, setSelectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
const [isLoading, setIsLoading] = useState(false);
@@ -85,7 +87,7 @@ export const PackageStep: React.FC = () => {
if (!selectedPackage) {
return (
<div className="text-center py-8">
<p className="text-muted-foreground">Kein Paket ausgewählt. Bitte wähle ein Paket aus der Paketübersicht.</p>
<p className="text-muted-foreground">{t('checkout.package_step.no_package_selected')}</p>
</div>
);
}
@@ -129,17 +131,17 @@ export const PackageStep: React.FC = () => {
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Wird geladen...
{t('checkout.package_step.loading')}
</>
) : (
"Weiter zum Konto"
t('checkout.package_step.next_to_account')
)}
</Button>
</div>
</div>
<aside className="space-y-4">
<h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
Alternative Pakete
{t('checkout.package_step.alternatives_title')}
</h3>
<div className="space-y-3">
{comparablePackages.map((pkg) => (
@@ -152,7 +154,7 @@ export const PackageStep: React.FC = () => {
))}
{comparablePackages.length === 0 && (
<p className="text-xs text-muted-foreground">
Keine weiteren Pakete in dieser Kategorie verfuegbar.
{t('checkout.package_step.no_alternatives')}
</p>
)}
</div>

49
resources/js/pages/marketing/checkout/steps/PaymentStep.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from "react";
import { useTranslation } from 'react-i18next';
import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { Button } from "@/components/ui/button";
@@ -14,6 +15,7 @@ const PaymentForm: React.FC = () => {
const stripe = useStripe();
const elements = useElements();
const { selectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();
const { t } = useTranslation('marketing');
const [isProcessing, setIsProcessing] = useState(false);
const [error, setError] = useState<string>('');
@@ -27,7 +29,7 @@ const PaymentForm: React.FC = () => {
event.preventDefault();
if (!stripe || !elements) {
setError('Stripe ist nicht initialisiert. Bitte Seite neu laden.');
setError(t('checkout.payment_step.stripe_not_loaded'));
return;
}
@@ -46,26 +48,26 @@ const PaymentForm: React.FC = () => {
if (stripeError) {
console.error('Stripe Payment Error:', stripeError);
let errorMessage = 'Zahlung fehlgeschlagen. ';
let errorMessage = t('checkout.payment_step.payment_failed');
switch (stripeError.type) {
case 'card_error':
errorMessage += stripeError.message || 'Kartenfehler aufgetreten.';
errorMessage += stripeError.message || t('checkout.payment_step.error_card');
break;
case 'validation_error':
errorMessage += 'Eingabedaten sind ungültig.';
errorMessage += t('checkout.payment_step.error_validation');
break;
case 'api_connection_error':
errorMessage += 'Verbindungsfehler. Bitte Internetverbindung prüfen.';
errorMessage += t('checkout.payment_step.error_connection');
break;
case 'api_error':
errorMessage += 'Serverfehler. Bitte später erneut versuchen.';
errorMessage += t('checkout.payment_step.error_server');
break;
case 'authentication_error':
errorMessage += 'Authentifizierungsfehler. Bitte Seite neu laden.';
errorMessage += t('checkout.payment_step.error_auth');
break;
default:
errorMessage += stripeError.message || 'Unbekannter Fehler aufgetreten.';
errorMessage += stripeError.message || t('checkout.payment_step.error_unknown');
}
setError(errorMessage);
@@ -78,25 +80,25 @@ const PaymentForm: React.FC = () => {
setTimeout(() => nextStep(), 1000);
break;
case 'processing':
setError('Zahlung wird verarbeitet. Bitte warten...');
setError(t('checkout.payment_step.processing'));
setPaymentStatus('processing');
break;
case 'requires_payment_method':
setError('Zahlungsmethode wird benötigt. Bitte Kartendaten überprüfen.');
setError(t('checkout.payment_step.needs_method'));
setPaymentStatus('failed');
break;
case 'requires_confirmation':
setError('Zahlung muss bestätigt werden.');
setError(t('checkout.payment_step.needs_confirm'));
setPaymentStatus('failed');
break;
default:
setError(`Unerwarteter Zahlungsstatus: ${paymentIntent.status}`);
setError(t('checkout.payment_step.unexpected_status', { status: paymentIntent.status }));
setPaymentStatus('failed');
}
}
} catch (err) {
console.error('Unexpected payment error:', err);
setError('Unerwarteter Fehler aufgetreten. Bitte später erneut versuchen.');
setError(t('checkout.payment_step.error_unknown'));
setPaymentStatus('failed');
} finally {
setIsProcessing(false);
@@ -114,7 +116,7 @@ const PaymentForm: React.FC = () => {
<div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
<p className="text-sm text-muted-foreground">
Sichere Zahlung mit Kreditkarte, Debitkarte oder SEPA-Lastschrift.
{t('checkout.payment_step.secure_payment_desc')}
</p>
<PaymentElement />
<Button
@@ -123,7 +125,7 @@ const PaymentForm: React.FC = () => {
size="lg"
className="w-full"
>
{isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage?.price || 0})`}
{isProcessing ? t('checkout.payment_step.processing_btn') : t('checkout.payment_step.pay_now', { price: selectedPackage?.price || 0 })}
</Button>
</div>
</form>
@@ -133,13 +135,14 @@ const PaymentForm: React.FC = () => {
// Wrapper-Komponente mit eigenem Elements Provider
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
const { t } = useTranslation('marketing');
const { selectedPackage, authUser, nextStep } = useCheckoutWizard();
const [clientSecret, setClientSecret] = useState<string>('');
const [error, setError] = useState<string>('');
const isFree = selectedPackage ? selectedPackage.price <= 0 : false;
// Payment Intent für kostenpflichtige Pakete laden
// Payment Intent für kostenpflichtige Pakete laden
useEffect(() => {
if (isFree || !authUser || !selectedPackage) return;
@@ -168,31 +171,31 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
setClientSecret(data.client_secret);
setError('');
} else {
const errorMsg = data.error || 'Fehler beim Laden der Zahlungsdaten';
const errorMsg = data.error || t('checkout.payment_step.payment_intent_error');
console.error('Payment Intent Error:', errorMsg);
setError(errorMsg);
}
} catch (err) {
setError('Netzwerkfehler beim Laden der Zahlungsdaten');
setError(t('checkout.payment_step.network_error'));
}
};
loadPaymentIntent();
}, [selectedPackage?.id, authUser, isFree]);
}, [selectedPackage?.id, authUser, isFree, t]);
// Für kostenlose Pakete: Direkte Aktivierung ohne Stripe
if (isFree) {
return (
<div className="space-y-6">
<Alert>
<AlertTitle>Kostenloses Paket</AlertTitle>
<AlertTitle>{t('checkout.payment_step.free_package_title')}</AlertTitle>
<AlertDescription>
Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestätigung.
{t('checkout.payment_step.free_package_desc')}
</AlertDescription>
</Alert>
<div className="flex justify-end">
<Button size="lg" onClick={nextStep}>
Paket aktivieren
{t('checkout.payment_step.activate_package')}
</Button>
</div>
</div>
@@ -210,7 +213,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }
)}
<div className="rounded-lg border bg-card p-6 shadow-sm">
<p className="text-sm text-muted-foreground">
Zahlungsdaten werden geladen...
{t('checkout.payment_step.loading_payment')}
</p>
</div>
</div>

62
resources/js/pages/settings/password.tsx
View File

@@ -6,6 +6,7 @@ import { type BreadcrumbItem } from '@/types';
import { Transition } from '@headlessui/react';
import { Form, Head } from '@inertiajs/react';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import HeadingSmall from '@/components/heading-small';
import { Button } from '@/components/ui/button';
@@ -21,19 +22,20 @@ const breadcrumbs: BreadcrumbItem[] = [
];
export default function Password() {
const passwordInput = useRef<HTMLInputElement>(null);
const currentPasswordInput = useRef<HTMLInputElement>(null);
const { t } = useTranslation('auth');
const passwordInput = useRef<HTMLInputElement>(null);
const currentPasswordInput = useRef<HTMLInputElement>(null);
return (
<AppLayout breadcrumbs={breadcrumbs}>
<Head title="Password settings" />
<Head title={t('auth.settings.password.title', 'Password settings')} />
<SettingsLayout>
<div className="space-y-6">
<HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
<HeadingSmall title={t('auth.settings.password.section_title', 'Update password')} description={t('auth.settings.password.description', 'Ensure your account is using a long, random password to stay secure')} />
<Form
{...PasswordController.update.form()}
{...store.form()}
options={{
preserveScroll: true,
}}
@@ -53,54 +55,54 @@ export default function Password() {
{({ errors, processing, recentlySuccessful }) => (
<>
<div className="grid gap-2">
<Label htmlFor="current_password">Current password</Label>
<Label htmlFor="current_password">{t('auth.settings.password.current', 'Current password')}</Label>
<Input
id="current_password"
ref={currentPasswordInput}
name="current_password"
type="password"
className="mt-1 block w-full"
autoComplete="current-password"
placeholder="Current password"
id="current_password"
ref={currentPasswordInput}
name="current_password"
type="password"
className="mt-1 block w-full"
autoComplete="current-password"
placeholder={t('auth.settings.password.current_placeholder')}
/>
<InputError message={errors.current_password} />
</div>
<div className="grid gap-2">
<Label htmlFor="password">New password</Label>
<Label htmlFor="password">{t('auth.settings.password.new', 'New password')}</Label>
<Input
id="password"
ref={passwordInput}
name="password"
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder="New password"
id="password"
ref={passwordInput}
name="password"
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder={t('auth.settings.password.new_placeholder')}
/>
<InputError message={errors.password} />
</div>
<div className="grid gap-2">
<Label htmlFor="password_confirmation">Confirm password</Label>
<Label htmlFor="password_confirmation">{t('auth.settings.password.confirm', 'Confirm password')}</Label>
<Input
id="password_confirmation"
name="password_confirmation"
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder="Confirm password"
id="password_confirmation"
name="password_confirmation"
type="password"
className="mt-1 block w-full"
autoComplete="new-password"
placeholder={t('auth.settings.password.confirm_placeholder')}
/>
<InputError message={errors.password_confirmation} />
</div>
<div className="flex items-center gap-4">
<Button disabled={processing}>Save password</Button>
<Button disabled={processing}>{t('auth.settings.password.save_button', 'Save password')}</Button>
<Transition
show={recentlySuccessful}
@@ -109,7 +111,7 @@ export default function Password() {
leave="transition ease-in-out"
leaveTo="opacity-0"
>
<p className="text-sm text-neutral-600">Saved</p>
<p className="text-sm text-neutral-600">{t('common.ui.saved')}</p>
</Transition>
</div>
</>

64
resources/js/pages/settings/profile.tsx
View File

@@ -3,6 +3,7 @@ import { send } from '@/routes/verification';
import { type BreadcrumbItem, type SharedData } from '@/types';
import { Transition } from '@headlessui/react';
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import DeleteUser from '@/components/delete-user';
import HeadingSmall from '@/components/heading-small';
@@ -22,15 +23,16 @@ const breadcrumbs: BreadcrumbItem[] = [
];
export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail: boolean; status?: string }) {
const { auth, supportedLocales } = usePage<SharedData>().props as SharedData & { supportedLocales: string[] };
const { t } = useTranslation('auth');
const { auth, supportedLocales } = usePage<SharedData>().props as SharedData & { supportedLocales: string[] };
return (
<AppLayout breadcrumbs={breadcrumbs}>
<Head title="Profile settings" />
<Head title={t('auth.settings.profile.title', 'Profile settings')} />
<SettingsLayout>
<div className="space-y-6">
<HeadingSmall title="Profile information" description="Update your name and email address" />
<HeadingSmall title={t('auth.settings.profile.section_title', 'Profile information')} description={t('auth.settings.profile.description', 'Update your name and email address')} />
<Form
{...ProfileController.update.form()}
@@ -42,39 +44,39 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
{({ processing, recentlySuccessful, errors }) => (
<>
<div className="grid gap-2">
<Label htmlFor="email">Email address</Label>
<Label htmlFor="email">{t('auth.settings.profile.email', 'Email address')}</Label>
<Input
id="email"
type="email"
className="mt-1 block w-full"
defaultValue={auth.user.email}
name="email"
required
autoComplete="username"
placeholder="Email address"
id="email"
type="email"
className="mt-1 block w-full"
defaultValue={auth.user.email}
name="email"
required
autoComplete="username"
placeholder={t('auth.settings.profile.email_placeholder')}
/>
<InputError className="mt-2" message={errors.email} />
</div>
<div className="grid gap-2">
<Label htmlFor="username">Username</Label>
<Label htmlFor="username">{t('auth.settings.profile.username', 'Username')}</Label>
<Input
id="username"
className="mt-1 block w-full"
defaultValue={(auth.user as any).username ?? ''}
name="username"
autoComplete="username"
placeholder="Username"
id="username"
className="mt-1 block w-full"
defaultValue={(auth.user as any).username ?? ''}
name="username"
autoComplete="username"
placeholder={t('auth.settings.profile.username_placeholder')}
/>
<InputError className="mt-2" message={errors.username} />
</div>
<div className="grid gap-2">
<Label htmlFor="preferred_locale">Language</Label>
<Label htmlFor="preferred_locale">{t('auth.settings.profile.language', 'Language')}</Label>
<select
id="preferred_locale"
@@ -95,26 +97,26 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
{mustVerifyEmail && auth.user.email_verified_at === null && (
<div>
<p className="-mt-4 text-sm text-muted-foreground">
Your email address is unverified.{' '}
<Link
href={send()}
as="button"
className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
>
Click here to resend the verification email.
</Link>
{t('auth.settings.profile.email_unverified', 'Your email address is unverified.')} {' '}
<Link
href={send()}
as="button"
className="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
>
{t('auth.settings.profile.resend_verification', 'Click here to resend the verification email.')}
</Link>
</p>
{status === 'verification-link-sent' && (
<div className="mt-2 text-sm font-medium text-green-600">
A new verification link has been sent to your email address.
{t('auth.settings.profile.verification_sent', 'A new verification link has been sent to your email address.')}
</div>
)}
</div>
)}
<div className="flex items-center gap-4">
<Button disabled={processing}>Save</Button>
<Button disabled={processing}>{t('common.ui.save', 'Save')}</Button>
<Transition
show={recentlySuccessful}
@@ -123,7 +125,7 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
leave="transition ease-in-out"
leaveTo="opacity-0"
>
<p className="text-sm text-neutral-600">Saved</p>
<p className="text-sm text-neutral-600">{t('common.ui.saved', 'Saved')}</p>
</Transition>
</div>
</>