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

12
resources/js/pages/marketing/CheckoutWizardPage.tsx
View File

@@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import { Head, usePage } from "@inertiajs/react";
import MarketingLayout from "@/layouts/mainWebsite";
import type { CheckoutPackage, GoogleProfilePrefill } from "./checkout/types";
import type { CheckoutPackage, OAuthProfilePrefill } from "./checkout/types";
import { CheckoutWizard } from "./checkout/CheckoutWizard";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import toast from "react-hot-toast";
@@ -14,7 +14,12 @@ interface CheckoutWizardPageProps {
googleAuth?: {
status?: string | null;
error?: string | null;
profile?: GoogleProfilePrefill | null;
profile?: OAuthProfilePrefill | null;
};
facebookAuth?: {
status?: string | null;
error?: string | null;
profile?: OAuthProfilePrefill | null;
};
paddle?: {
environment?: string | null;
@@ -27,11 +32,13 @@ const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
packageOptions,
privacyHtml,
googleAuth,
facebookAuth,
paddle,
}) => {
const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null }, flash?: { verification?: { status: string; title?: string; message?: string } } }>();
const currentUser = page.props.auth?.user ?? null;
const googleProfile = googleAuth?.profile ?? null;
const facebookProfile = facebookAuth?.profile ?? null;
const { t: tAuth } = useTranslation('auth');
const verificationFlash = page.props.flash?.verification;
@@ -85,6 +92,7 @@ const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
privacyHtml={privacyHtml}
initialAuthUser={currentUser ? { id: currentUser.id, email: currentUser.email ?? '', name: currentUser.name ?? undefined, pending_purchase: Boolean(currentUser.pending_purchase) } : null}
googleProfile={googleProfile}
facebookProfile={facebookProfile}
paddle={paddle ?? null}
/>
</div>

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

@@ -4,7 +4,7 @@ import { Steps } from "@/components/ui/Steps";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { CheckoutWizardProvider, useCheckoutWizard } from "./WizardContext";
import type { CheckoutPackage, CheckoutStepId, GoogleProfilePrefill } from "./types";
import type { CheckoutPackage, CheckoutStepId, OAuthProfilePrefill } from "./types";
import { PackageStep } from "./steps/PackageStep";
import { AuthStep } from "./steps/AuthStep";
import { ConfirmationStep } from "./steps/ConfirmationStep";
@@ -25,7 +25,8 @@ interface CheckoutWizardProps {
pending_purchase?: boolean;
} | null;
initialStep?: CheckoutStepId;
googleProfile?: GoogleProfilePrefill | null;
googleProfile?: OAuthProfilePrefill | null;
facebookProfile?: OAuthProfilePrefill | null;
paddle?: {
environment?: string | null;
client_token?: string | null;
@@ -68,9 +69,9 @@ const PaymentStepFallback: React.FC = () => (
const WizardBody: React.FC<{
privacyHtml: string;
googleProfile?: GoogleProfilePrefill | null;
onClearGoogleProfile?: () => void;
}> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
prefillProfile?: OAuthProfilePrefill | null;
onClearPrefill?: () => void;
}> = ({ privacyHtml, prefillProfile, onClearPrefill }) => {
const primaryCtaClassName = "min-w-[160px] disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted disabled:hover:text-muted-foreground";
const { t } = useTranslation('marketing');
const {
@@ -246,8 +247,8 @@ const WizardBody: React.FC<{
{currentStep === "auth" && (
<AuthStep
privacyHtml={privacyHtml}
googleProfile={googleProfile ?? undefined}
onClearGoogleProfile={onClearGoogleProfile}
prefill={prefillProfile ?? undefined}
onClearPrefill={onClearPrefill}
/>
)}
{currentStep === "payment" && (
@@ -288,9 +289,10 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
initialAuthUser,
initialStep,
googleProfile,
facebookProfile,
paddle,
}) => {
const [storedProfile, setStoredProfile] = useState<GoogleProfilePrefill | null>(() => {
const [storedGoogleProfile, setStoredGoogleProfile] = useState<OAuthProfilePrefill | null>(() => {
if (typeof window === 'undefined') {
return null;
}
@@ -301,7 +303,7 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
}
try {
return JSON.parse(raw) as GoogleProfilePrefill;
return JSON.parse(raw) as OAuthProfilePrefill;
} catch (error) {
console.warn('Failed to parse checkout google profile from storage', error);
window.localStorage.removeItem('checkout-google-profile');
@@ -314,21 +316,64 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
return;
}
setStoredProfile(googleProfile);
setStoredGoogleProfile(googleProfile);
if (typeof window !== 'undefined') {
window.localStorage.setItem('checkout-google-profile', JSON.stringify(googleProfile));
}
}, [googleProfile]);
const clearStoredProfile = useCallback(() => {
setStoredProfile(null);
const clearStoredGoogleProfile = useCallback(() => {
setStoredGoogleProfile(null);
if (typeof window !== 'undefined') {
window.localStorage.removeItem('checkout-google-profile');
}
}, []);
const effectiveProfile = googleProfile ?? storedProfile;
const [storedFacebookProfile, setStoredFacebookProfile] = useState<OAuthProfilePrefill | null>(() => {
if (typeof window === 'undefined') {
return null;
}
const raw = window.localStorage.getItem('checkout-facebook-profile');
if (!raw) {
return null;
}
try {
return JSON.parse(raw) as OAuthProfilePrefill;
} catch (error) {
console.warn('Failed to parse checkout facebook profile from storage', error);
window.localStorage.removeItem('checkout-facebook-profile');
return null;
}
});
useEffect(() => {
if (!facebookProfile) {
return;
}
setStoredFacebookProfile(facebookProfile);
if (typeof window !== 'undefined') {
window.localStorage.setItem('checkout-facebook-profile', JSON.stringify(facebookProfile));
}
}, [facebookProfile]);
const clearStoredFacebookProfile = useCallback(() => {
setStoredFacebookProfile(null);
if (typeof window !== 'undefined') {
window.localStorage.removeItem('checkout-facebook-profile');
}
}, []);
const clearStoredProfiles = useCallback(() => {
clearStoredGoogleProfile();
clearStoredFacebookProfile();
}, [clearStoredFacebookProfile, clearStoredGoogleProfile]);
const effectiveProfile = facebookProfile ?? storedFacebookProfile ?? googleProfile ?? storedGoogleProfile;
return (
<CheckoutWizardProvider
@@ -341,8 +386,8 @@ export const CheckoutWizard: React.FC<CheckoutWizardProps> = ({
>
<WizardBody
privacyHtml={privacyHtml}
googleProfile={effectiveProfile}
onClearGoogleProfile={clearStoredProfile}
prefillProfile={effectiveProfile}
onClearPrefill={clearStoredProfiles}
/>
</CheckoutWizardProvider>
);

8
resources/js/pages/marketing/checkout/__tests__/AuthStep.google.test.tsx
View File

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
vi.mock('@inertiajs/react', () => ({
usePage: () => ({ props: { locale: 'de', googleAuth: {} } }),
usePage: () => ({ props: { locale: 'de', googleAuth: {}, facebookAuth: {} } }),
}));
vi.mock('react-i18next', () => ({
@@ -77,14 +77,16 @@ vi.mock('lucide-react', () => ({
import { AuthStep } from '../steps/AuthStep';
describe('AuthStep Google controls', () => {
it('hides the top Google button when switching to login mode', () => {
describe('AuthStep OAuth controls', () => {
it('hides the OAuth buttons when switching to login mode', () => {
render(<AuthStep privacyHtml="" />);
expect(screen.getByText('checkout.auth_step.continue_with_google')).toBeInTheDocument();
expect(screen.getByText('checkout.auth_step.continue_with_facebook')).toBeInTheDocument();
fireEvent.click(screen.getByText('checkout.auth_step.switch_to_login'));
expect(screen.queryByText('checkout.auth_step.continue_with_google')).not.toBeInTheDocument();
expect(screen.queryByText('checkout.auth_step.continue_with_facebook')).not.toBeInTheDocument();
});
});

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

@@ -3,7 +3,7 @@ import { usePage } from "@inertiajs/react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";
import type { GoogleProfilePrefill } from '../types';
import type { OAuthProfilePrefill } from '../types';
import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";
import { Trans, useTranslation } from 'react-i18next';
@@ -14,11 +14,11 @@ import { cn } from "@/lib/utils";
interface AuthStepProps {
privacyHtml: string;
googleProfile?: GoogleProfilePrefill;
onClearGoogleProfile?: () => void;
prefill?: OAuthProfilePrefill;
onClearPrefill?: () => void;
}
type GoogleAuthFlash = {
type OAuthAuthFlash = {
status?: string | null;
error?: string | null;
};
@@ -34,26 +34,55 @@ const GoogleIcon: React.FC<{ className?: string }> = ({ className }) => (
</svg>
);
export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile, onClearGoogleProfile }) => {
const FacebookIcon: React.FC<{ className?: string }> = ({ className }) => (
<svg
className={className}
viewBox="0 0 24 24"
aria-hidden="true"
focusable="false"
>
<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>
);
export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClearPrefill }) => {
const { t } = useTranslation('marketing');
const page = usePage<{ locale?: string }>();
const locale = page.props.locale ?? "de";
const googleAuth = useMemo<GoogleAuthFlash>(() => {
const props = page.props as { googleAuth?: GoogleAuthFlash };
const googleAuth = useMemo<OAuthAuthFlash>(() => {
const props = page.props as { googleAuth?: OAuthAuthFlash };
return props.googleAuth ?? {};
}, [page.props]);
const facebookAuth = useMemo<OAuthAuthFlash>(() => {
const props = page.props as { facebookAuth?: OAuthAuthFlash };
return props.facebookAuth ?? {};
}, [page.props]);
const { isAuthenticated, authUser, setAuthUser, nextStep, selectedPackage } = useCheckoutWizard();
const [mode, setMode] = useState<'login' | 'register'>('register');
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
const [showGoogleHelper, setShowGoogleHelper] = useState(false);
const showGoogleControls = mode === 'register';
const showOauthControls = mode === 'register';
const authErrorTitle = facebookAuth?.error
? t('checkout.auth_step.facebook_error_title')
: t('checkout.auth_step.google_error_title');
useEffect(() => {
if (googleAuth?.status === 'signin') {
toast.success(t('checkout.auth_step.google_success_toast'));
onClearGoogleProfile?.();
onClearPrefill?.();
}
}, [googleAuth?.status, onClearGoogleProfile, t]);
}, [googleAuth?.status, onClearPrefill, t]);
useEffect(() => {
if (facebookAuth?.status === 'signin') {
toast.success(t('checkout.auth_step.facebook_success_toast'));
onClearPrefill?.();
}
}, [facebookAuth?.status, onClearPrefill, t]);
useEffect(() => {
if (googleAuth?.error) {
@@ -61,6 +90,12 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
}
}, [googleAuth?.error]);
useEffect(() => {
if (facebookAuth?.error) {
toast.error(facebookAuth.error);
}
}, [facebookAuth?.error]);
useEffect(() => {
if (mode !== 'login') {
return;
@@ -82,7 +117,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
name: payload.name ?? undefined,
pending_purchase: Boolean(payload.pending_purchase),
});
onClearGoogleProfile?.();
onClearPrefill?.();
nextStep();
};
@@ -97,7 +132,7 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
});
}
onClearGoogleProfile?.();
onClearPrefill?.();
nextStep();
};
@@ -115,6 +150,20 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
window.location.href = `/checkout/auth/google?${params.toString()}`;
}, [locale, selectedPackage, t]);
const handleFacebookLogin = useCallback(() => {
if (!selectedPackage) {
toast.error(t('checkout.auth_step.facebook_missing_package'));
return;
}
setIsRedirectingToFacebook(true);
const params = new URLSearchParams({
package_id: String(selectedPackage.id),
locale,
});
window.location.href = `/checkout/auth/facebook?${params.toString()}`;
}, [locale, selectedPackage, t]);
if (isAuthenticated && authUser) {
return (
<div className="space-y-6">
@@ -159,37 +208,52 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
>
{t('checkout.auth_step.switch_to_login')}
</Button>
{showGoogleControls && (
<div className="flex flex-1 justify-start gap-2 sm:flex-none">
{showOauthControls && (
<div className="flex flex-1 flex-wrap items-center gap-2 sm:flex-none">
<div className="flex items-center gap-2">
<Button
variant="outline"
onClick={handleGoogleLogin}
disabled={isRedirectingToGoogle}
className="flex items-center gap-2"
>
{isRedirectingToGoogle ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<GoogleIcon className="h-4 w-4" />
)}
{t('checkout.auth_step.continue_with_google')}
</Button>
<CollapsibleTrigger asChild>
<button
type="button"
className={cn(
"inline-flex items-center gap-1 rounded-full border border-muted-foreground/30 px-3 py-1 text-xs font-medium text-muted-foreground transition hover:border-muted-foreground/60 hover:text-foreground",
showGoogleHelper && "bg-muted/60 text-foreground"
)}
>
{t('checkout.auth_step.google_helper_badge')}
<ChevronDown className={cn("h-3 w-3 transition-transform", showGoogleHelper && "rotate-180")} />
</button>
</CollapsibleTrigger>
</div>
<Button
variant="outline"
onClick={handleGoogleLogin}
disabled={isRedirectingToGoogle}
onClick={handleFacebookLogin}
disabled={isRedirectingToFacebook}
className="flex items-center gap-2"
>
{isRedirectingToGoogle ? (
{isRedirectingToFacebook ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<GoogleIcon className="h-4 w-4" />
<FacebookIcon className="h-4 w-4" />
)}
{t('checkout.auth_step.continue_with_google')}
{t('checkout.auth_step.continue_with_facebook')}
</Button>
<CollapsibleTrigger asChild>
<button
type="button"
className={cn(
"inline-flex items-center gap-1 rounded-full border border-muted-foreground/30 px-3 py-1 text-xs font-medium text-muted-foreground transition hover:border-muted-foreground/60 hover:text-foreground",
showGoogleHelper && "bg-muted/60 text-foreground"
)}
>
{t('checkout.auth_step.google_helper_badge')}
<ChevronDown className={cn("h-3 w-3 transition-transform", showGoogleHelper && "rotate-180")} />
</button>
</CollapsibleTrigger>
</div>
)}
</div>
{showGoogleControls && (
{showOauthControls && (
<CollapsibleContent>
<Alert className="border-dashed border-muted/60 bg-muted/20 text-xs sm:text-sm">
<AlertDescription>{t('checkout.auth_step.google_helper')}</AlertDescription>
@@ -198,10 +262,10 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
)}
</Collapsible>
{googleAuth?.error && (
{(googleAuth?.error || facebookAuth?.error) && (
<Alert variant="destructive">
<AlertTitle>{t('checkout.auth_step.google_error_title')}</AlertTitle>
<AlertDescription>{googleAuth.error}</AlertDescription>
<AlertTitle>{authErrorTitle}</AlertTitle>
<AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
</Alert>
)}
@@ -213,8 +277,8 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, googleProfile,
privacyHtml={privacyHtml}
locale={locale}
onSuccess={handleRegisterSuccess}
prefill={googleProfile}
onClearGoogleProfile={onClearGoogleProfile}
prefill={prefill}
onClearPrefill={onClearPrefill}
/>
)
) : (

2
resources/js/pages/marketing/checkout/types.ts
View File

@@ -1,6 +1,6 @@
export type CheckoutStepId = 'package' | 'auth' | 'payment' | 'confirmation';
export interface GoogleProfilePrefill {
export interface OAuthProfilePrefill {
email?: string;
name?: string;
given_name?: string;