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

refactor(checkout): wrap auth step buttons in shadcn tabs
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details
tests / ui (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Codex Agent
2026-01-24 09:50:06 +01:00
parent e3b356e810
commit b11f010938
1 changed files with 77 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
import { usePage } from "@inertiajs/react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent } from "@/components/ui/card";
import { useCheckoutWizard } from "../WizardContext";
import type { OAuthProfilePrefill } from '../types';
import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
@@ -62,7 +64,6 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
const [mode, setMode] = useState<'login' | 'register'>('register');
const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
const showOauthControls = mode === 'register';
const authErrorTitle = facebookAuth?.error
? t('checkout.auth_step.facebook_error_title')
: t('checkout.auth_step.google_error_title');
@@ -181,80 +182,84 @@ export const AuthStep: React.FC<AuthStepProps> = ({ privacyHtml, prefill, onClea
return (
<div className="space-y-6">
<div className="space-y-2">
<div className="flex flex-wrap items-center gap-2">
<Button
variant={mode === 'register' ? 'default' : 'outline'}
onClick={() => setMode('register')}
>
{t('checkout.auth_step.switch_to_register')}
</Button>
<Button
variant={mode === 'login' ? 'default' : 'outline'}
onClick={() => setMode('login')}
>
{t('checkout.auth_step.switch_to_login')}
</Button>
{showOauthControls && (
<div className="flex flex-1 flex-wrap items-center gap-2 sm:flex-none">
<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>
<Button
variant="outline"
onClick={handleFacebookLogin}
disabled={isRedirectingToFacebook}
className="flex items-center gap-2"
>
{isRedirectingToFacebook ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<FacebookIcon className="h-4 w-4" />
)}
{t('checkout.auth_step.continue_with_facebook')}
</Button>
</div>
<Tabs value={mode} onValueChange={(v) => setMode(v as 'login' | 'register')} className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="register">{t('checkout.auth_step.switch_to_register')}</TabsTrigger>
<TabsTrigger value="login">{t('checkout.auth_step.switch_to_login')}</TabsTrigger>
</TabsList>
<TabsContent value="register">
{(googleAuth?.error || facebookAuth?.error) && (
<Alert variant="destructive" className="mb-4">
<AlertTitle>{authErrorTitle}</AlertTitle>
<AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
</Alert>
)}
</div>
</div>
{(googleAuth?.error || facebookAuth?.error) && (
<Alert variant="destructive">
<AlertTitle>{authErrorTitle}</AlertTitle>
<AlertDescription>{facebookAuth?.error ?? googleAuth?.error}</AlertDescription>
</Alert>
)}
<Card>
<CardContent className="space-y-6 pt-6">
<div className="space-y-3">
<div className="flex flex-col sm:flex-row gap-3">
<Button
variant="outline"
onClick={handleGoogleLogin}
disabled={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" />
)}
{t('checkout.auth_step.continue_with_google')}
</Button>
<Button
variant="outline"
onClick={handleFacebookLogin}
disabled={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" />
)}
{t('checkout.auth_step.continue_with_facebook')}
</Button>
</div>
<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-border" aria-hidden="true" />
{t("auth:login.oauth_divider", "oder")}
<span className="h-px flex-1 bg-border" aria-hidden="true" />
</div>
</div>
<div className="rounded-lg border bg-card p-6 shadow-sm">
{mode === 'register' ? (
selectedPackage && (
<RegisterForm
packageId={selectedPackage.id}
privacyHtml={privacyHtml}
locale={locale}
onSuccess={handleRegisterSuccess}
prefill={prefill}
onClearPrefill={onClearPrefill}
/>
)
) : (
<LoginForm
locale={locale}
onSuccess={handleLoginSuccess}
packageId={selectedPackage?.id ?? null}
/>
)}
</div>
{selectedPackage && (
<RegisterForm
packageId={selectedPackage.id}
privacyHtml={privacyHtml}
locale={locale}
onSuccess={handleRegisterSuccess}
prefill={prefill}
onClearPrefill={onClearPrefill}
/>
)}
</CardContent>
</Card>
</TabsContent>
<TabsContent value="login">
<Card>
<CardContent className="pt-6">
<LoginForm
locale={locale}
onSuccess={handleLoginSuccess}
packageId={selectedPackage?.id ?? null}
/>
</CardContent>
</Card>
</TabsContent>
</Tabs>
</div>
);
};