soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 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

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