273 lines
10 KiB
TypeScript
273 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
|
|
import {
|
|
Gamepad2,
|
|
Flag,
|
|
ArrowRight,
|
|
Shield,
|
|
Link as LinkIcon,
|
|
User,
|
|
Trophy,
|
|
BarChart3,
|
|
CheckCircle2,
|
|
} from 'lucide-react';
|
|
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Heading from '@/components/ui/Heading';
|
|
|
|
interface ConnectionStep {
|
|
id: number;
|
|
icon: typeof Gamepad2;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const CONNECTION_STEPS: ConnectionStep[] = [
|
|
{
|
|
id: 1,
|
|
icon: Gamepad2,
|
|
title: 'Connect iRacing',
|
|
description: 'Authorize GridPilot to access your profile',
|
|
},
|
|
{
|
|
id: 2,
|
|
icon: User,
|
|
title: 'Import Profile',
|
|
description: 'We fetch your racing stats and history',
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: Trophy,
|
|
title: 'Sync Achievements',
|
|
description: 'Your licenses, iRating, and results',
|
|
},
|
|
{
|
|
id: 4,
|
|
icon: BarChart3,
|
|
title: 'Ready to Race',
|
|
description: 'Access full GridPilot features',
|
|
},
|
|
];
|
|
|
|
const BENEFITS = [
|
|
'Automatic profile creation with your iRacing data',
|
|
'Real-time stats sync including iRating and Safety Rating',
|
|
'Import your racing history and achievements',
|
|
'No manual data entry required',
|
|
'Verified driver identity in leagues',
|
|
];
|
|
|
|
export default function IracingAuthPage() {
|
|
const searchParams = useSearchParams();
|
|
const returnTo = searchParams.get('returnTo') ?? '/dashboard';
|
|
const startUrl = `/auth/iracing/start?returnTo=${encodeURIComponent(returnTo)}`;
|
|
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const [activeStep, setActiveStep] = useState(0);
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!isMounted || isHovering) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setActiveStep((prev) => (prev + 1) % CONNECTION_STEPS.length);
|
|
}, 2500);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [isMounted, isHovering]);
|
|
|
|
return (
|
|
<main className="min-h-screen bg-deep-graphite flex items-center justify-center px-4 py-12">
|
|
{/* Background Pattern */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/5 via-transparent to-purple-600/5" />
|
|
<div className="absolute inset-0 opacity-5">
|
|
<div className="absolute inset-0" style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
|
}} />
|
|
</div>
|
|
|
|
<div className="relative w-full max-w-2xl">
|
|
{/* Header */}
|
|
<div className="text-center mb-8">
|
|
<div className="flex justify-center gap-4 mb-6">
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30"
|
|
>
|
|
<Flag className="w-7 h-7 text-primary-blue" />
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="flex items-center"
|
|
>
|
|
<LinkIcon className="w-6 h-6 text-gray-500" />
|
|
</motion.div>
|
|
<motion.div
|
|
initial={{ scale: 0.8, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/20 to-red-600/10 border border-orange-500/30"
|
|
>
|
|
<Gamepad2 className="w-7 h-7 text-orange-400" />
|
|
</motion.div>
|
|
</div>
|
|
<Heading level={1} className="mb-3">Connect Your iRacing Account</Heading>
|
|
<p className="text-gray-400 text-lg max-w-md mx-auto">
|
|
Link your iRacing profile for automatic stats sync and verified driver identity.
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="relative overflow-hidden">
|
|
{/* Background accent */}
|
|
<div className="absolute top-0 right-0 w-48 h-48 bg-gradient-to-bl from-primary-blue/5 to-transparent rounded-bl-full" />
|
|
<div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-orange-500/5 to-transparent rounded-tr-full" />
|
|
|
|
<div className="relative">
|
|
{/* Connection Flow Animation */}
|
|
<div
|
|
className="bg-iron-gray/50 rounded-xl border border-charcoal-outline p-6 mb-6"
|
|
onMouseEnter={() => setIsHovering(true)}
|
|
onMouseLeave={() => setIsHovering(false)}
|
|
>
|
|
<p className="text-xs text-gray-500 text-center mb-4">Connection Flow</p>
|
|
|
|
{/* Steps */}
|
|
<div className="flex justify-between items-start gap-2">
|
|
{CONNECTION_STEPS.map((step, index) => {
|
|
const isActive = index === activeStep;
|
|
const isCompleted = index < activeStep;
|
|
const StepIcon = step.icon;
|
|
|
|
return (
|
|
<motion.button
|
|
key={step.id}
|
|
onClick={() => setActiveStep(index)}
|
|
className="flex flex-col items-center text-center flex-1 cursor-pointer"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<motion.div
|
|
className={`w-12 h-12 rounded-xl border flex items-center justify-center mb-2 transition-all duration-300 ${
|
|
isActive
|
|
? 'bg-primary-blue/20 border-primary-blue shadow-[0_0_15px_rgba(25,140,255,0.3)]'
|
|
: isCompleted
|
|
? 'bg-performance-green/20 border-performance-green/50'
|
|
: 'bg-deep-graphite border-charcoal-outline'
|
|
}`}
|
|
animate={isActive && !shouldReduceMotion ? {
|
|
scale: [1, 1.08, 1],
|
|
transition: { duration: 1, repeat: Infinity }
|
|
} : {}}
|
|
>
|
|
{isCompleted ? (
|
|
<CheckCircle2 className="w-5 h-5 text-performance-green" />
|
|
) : (
|
|
<StepIcon className={`w-5 h-5 ${isActive ? 'text-primary-blue' : 'text-gray-500'}`} />
|
|
)}
|
|
</motion.div>
|
|
<h4 className={`text-xs font-medium transition-colors ${
|
|
isActive ? 'text-white' : 'text-gray-500'
|
|
}`}>
|
|
{step.title}
|
|
</h4>
|
|
</motion.button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Active Step Description */}
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={activeStep}
|
|
initial={{ opacity: 0, y: 5 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -5 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="mt-4 text-center"
|
|
>
|
|
<p className="text-sm text-gray-400">
|
|
{CONNECTION_STEPS[activeStep].description}
|
|
</p>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Benefits List */}
|
|
<div className="mb-6">
|
|
<h3 className="text-sm font-medium text-gray-300 mb-3">What you'll get:</h3>
|
|
<ul className="space-y-2">
|
|
{BENEFITS.map((benefit, index) => (
|
|
<motion.li
|
|
key={index}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: 0.4 + index * 0.05 }}
|
|
className="flex items-start gap-2 text-sm text-gray-400"
|
|
>
|
|
<CheckCircle2 className="w-4 h-4 text-performance-green flex-shrink-0 mt-0.5" />
|
|
{benefit}
|
|
</motion.li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Connect Button */}
|
|
<Link href={startUrl} className="block">
|
|
<Button
|
|
variant="primary"
|
|
className="w-full flex items-center justify-center gap-3 py-4"
|
|
>
|
|
<Gamepad2 className="w-5 h-5" />
|
|
<span>Connect iRacing Account</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Button>
|
|
</Link>
|
|
|
|
{/* Trust Indicators */}
|
|
<div className="mt-6 pt-6 border-t border-charcoal-outline">
|
|
<div className="flex items-center justify-center gap-6 text-xs text-gray-500">
|
|
<div className="flex items-center gap-2">
|
|
<Shield className="w-4 h-4" />
|
|
<span>Secure OAuth connection</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<LinkIcon className="w-4 h-4" />
|
|
<span>Read-only access</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Alternative */}
|
|
<p className="mt-6 text-center text-sm text-gray-500">
|
|
Don't have iRacing?{' '}
|
|
<Link href="/auth/signup" className="text-primary-blue hover:underline">
|
|
Create account with email
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Footer */}
|
|
<p className="mt-6 text-center text-xs text-gray-500">
|
|
GridPilot only requests read access to your iRacing profile.
|
|
<br />
|
|
We never access your payment info or modify your account.
|
|
</p>
|
|
</div>
|
|
</main>
|
|
);
|
|
} |