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

Add Facebook social login

Browse Source
This commit is contained in:
Codex Agent
2026-01-23 20:19:15 +01:00
parent 6701b48cc8
commit 6a056b199c
29 changed files with 991 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -51,9 +51,9 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
const loginEndpoint = '/checkout/login';
const canUseGoogle = typeof packageId === "number" && !Number.isNaN(packageId);
const canUseOauth = typeof packageId === "number" && !Number.isNaN(packageId);
const googleHref = useMemo(() => {
if (!canUseGoogle) {
if (!canUseOauth) {
return "";
}
@@ -63,7 +63,20 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
});
return `/checkout/auth/google?${params.toString()}`;
}, [canUseGoogle, packageId, resolvedLocale]);
}, [canUseOauth, packageId, resolvedLocale]);
const facebookHref = useMemo(() => {
if (!canUseOauth) {
return "";
}
const params = new URLSearchParams({
package_id: String(packageId),
locale: resolvedLocale,
});
return `/checkout/auth/facebook?${params.toString()}`;
}, [canUseOauth, packageId, resolvedLocale]);
const [values, setValues] = useState({
identifier: "",
@@ -73,6 +86,7 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
const [errors, setErrors] = useState<FieldErrors>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const [shouldFocusError, setShouldFocusError] = useState(false);
@@ -188,6 +202,15 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
window.location.href = googleHref;
};
const handleFacebookLogin = () => {
if (!facebookHref) {
return;
}
setIsRedirectingToFacebook(true);
window.location.href = facebookHref;
};
return (
<form onSubmit={submit} className="flex flex-col gap-6" noValidate>
<div className="grid gap-6">
@@ -243,27 +266,43 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
</Button>
</div>
{canUseGoogle && (
{canUseOauth && (
<div className="space-y-3">
<div className="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
<span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
{t("login.oauth_divider", "oder")}
<span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
</div>
<Button
type="button"
variant="outline"
onClick={handleGoogleLogin}
disabled={isSubmitting || isRedirectingToGoogle}
className="flex w-full items-center justify-center gap-2"
>
{isRedirectingToGoogle ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<GoogleIcon className="h-4 w-4" />
)}
<span>{t("login.google_cta")}</span>
</Button>
<div className="grid gap-3">
<Button
type="button"
variant="outline"
onClick={handleGoogleLogin}
disabled={isSubmitting || isRedirectingToGoogle}
className="flex w-full items-center justify-center gap-2"
>
{isRedirectingToGoogle ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<GoogleIcon className="h-4 w-4" />
)}
<span>{t("login.google_cta")}</span>
</Button>
<Button
type="button"
variant="outline"
onClick={handleFacebookLogin}
disabled={isSubmitting || isRedirectingToFacebook}
className="flex w-full items-center justify-center gap-2"
>
{isRedirectingToFacebook ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<FacebookIcon className="h-4 w-4" />
)}
<span>{t("login.facebook_cta")}</span>
</Button>
</div>
</div>
)}
@@ -286,3 +325,14 @@ function GoogleIcon({ className }: { className?: string }) {
</svg>
);
}
function FacebookIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" aria-hidden>
<path
fill="#1877F2"
d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.014 1.792-4.68 4.533-4.68 1.312 0 2.686.236 2.686.236v2.96h-1.513c-1.49 0-1.954.93-1.954 1.887v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"
/>
</svg>
);
}

10
resources/js/pages/auth/RegisterForm.tsx
View File

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';
import { LoaderCircle, User, Mail, Lock } from 'lucide-react';
import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import type { GoogleProfilePrefill } from '../marketing/checkout/types';
import type { OAuthProfilePrefill } from '../marketing/checkout/types';
export interface RegisterSuccessPayload {
user: unknown | null;
@@ -17,8 +17,8 @@ interface RegisterFormProps {
onSuccess?: (payload: RegisterSuccessPayload) => void;
privacyHtml: string;
locale?: string;
prefill?: GoogleProfilePrefill;
onClearGoogleProfile?: () => void;
prefill?: OAuthProfilePrefill;
onClearPrefill?: () => void;
}
type RegisterFormFields = {
@@ -50,7 +50,7 @@ const resolveMetaCsrfToken = (): string => {
return (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';
};
export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale, prefill, onClearGoogleProfile }: RegisterFormProps) {
export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale, prefill, onClearPrefill }: RegisterFormProps) {
const [privacyOpen, setPrivacyOpen] = useState(false);
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
@@ -176,7 +176,7 @@ export default function RegisterForm({ packageId, onSuccess, privacyHtml, locale
redirect: json?.redirect ?? null,
pending_purchase: json?.pending_purchase ?? json?.user?.pending_purchase ?? false,
});
onClearGoogleProfile?.();
onClearPrefill?.();
reset();
setHasTriedSubmit(false);
return;

6
resources/js/pages/auth/__tests__/LoginForm.test.tsx
View File

@@ -39,15 +39,17 @@ vi.mock('react-hot-toast', () => ({
import LoginForm from '../LoginForm';
describe('LoginForm', () => {
it('renders Google login option when packageId is provided', () => {
it('renders OAuth login options when packageId is provided', () => {
render(<LoginForm packageId={12} />);
expect(screen.getByText('login.google_cta')).toBeInTheDocument();
expect(screen.getByText('login.facebook_cta')).toBeInTheDocument();
});
it('does not render Google login option without packageId', () => {
it('does not render OAuth login options without packageId', () => {
render(<LoginForm />);
expect(screen.queryByText('login.google_cta')).not.toBeInTheDocument();
expect(screen.queryByText('login.facebook_cta')).not.toBeInTheDocument();
});
});

51
resources/js/pages/auth/login.tsx
View File

@@ -24,6 +24,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const [rawReturnTo, setRawReturnTo] = useState<string | null>(null);
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
const { t } = useTranslation('auth');
const page = usePage<{ flash?: { verification?: { status: string; title?: string; message?: string } } }>();
const verificationFlash = page.props.flash?.verification;
@@ -98,6 +99,18 @@ export default function Login({ status, canResetPassword }: LoginProps) {
return `/event-admin/auth/google?${params.toString()}`;
}, [rawReturnTo]);
const facebookHref = useMemo(() => {
if (!rawReturnTo) {
return '/event-admin/auth/facebook';
}
const params = new URLSearchParams({
return_to: rawReturnTo,
});
return `/event-admin/auth/facebook?${params.toString()}`;
}, [rawReturnTo]);
const handleGoogleLogin = () => {
if (typeof window === 'undefined') {
return;
@@ -107,6 +120,15 @@ export default function Login({ status, canResetPassword }: LoginProps) {
window.location.href = googleHref;
};
const handleFacebookLogin = () => {
if (typeof window === 'undefined') {
return;
}
setIsRedirectingToFacebook(true);
window.location.href = facebookHref;
};
return (
<AuthLayout
title={t('login.title')}
@@ -271,9 +293,27 @@ export default function Login({ status, canResetPassword }: LoginProps) {
)}
<span>{t('login.google_cta')}</span>
</Button>
<Button
type="button"
variant="outline"
onClick={handleFacebookLogin}
disabled={processing || isRedirectingToFacebook}
className="flex h-12 w-full items-center justify-center gap-3 rounded-xl border-gray-200/80 bg-white/90 text-sm font-semibold text-gray-700 shadow-inner shadow-gray-200/40 transition hover:bg-white dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100 dark:hover:bg-gray-900/80"
>
{isRedirectingToFacebook ? (
<LoaderCircle className="h-5 w-5 animate-spin" aria-hidden />
) : (
<FacebookIcon className="h-5 w-5" />
)}
<span>{t('login.facebook_cta')}</span>
</Button>
<p className="text-center text-xs text-muted-foreground dark:text-gray-300">
{t('login.google_helper', 'Nutze dein Google-Konto, um dich sicher bei der Eventverwaltung anzumelden.')}
</p>
<p className="text-center text-xs text-muted-foreground dark:text-gray-300">
{t('login.facebook_helper', 'Melde dich schnell mit deinem Facebook-Konto an.')}
</p>
</div>
<div className="rounded-2xl border border-gray-200/60 bg-gray-50/80 p-4 text-center text-sm text-muted-foreground shadow-inner dark:border-gray-800/70 dark:bg-gray-900/60">
@@ -315,3 +355,14 @@ function GoogleIcon({ className }: { className?: string }) {
</svg>
);
}
function FacebookIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" aria-hidden>
<path
fill="#1877F2"
d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.014 1.792-4.68 4.533-4.68 1.312 0 2.686.236 2.686.236v2.96h-1.513c-1.49 0-1.954.93-1.954 1.887v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"
/>
</svg>
);
}