website refactor
This commit is contained in:
@@ -1,35 +1,26 @@
|
||||
import Card from '@/components/ui/Card';
|
||||
import {
|
||||
Users,
|
||||
Shield,
|
||||
Activity,
|
||||
Clock,
|
||||
AlertTriangle,
|
||||
import {
|
||||
Users,
|
||||
Shield,
|
||||
Activity,
|
||||
Clock,
|
||||
RefreshCw
|
||||
} from 'lucide-react';
|
||||
import { AdminDashboardViewData } from '@/lib/view-data/AdminDashboardViewData';
|
||||
|
||||
interface AdminDashboardTemplateProps {
|
||||
viewData: AdminDashboardViewData;
|
||||
onRefresh: () => void;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* AdminDashboardTemplate
|
||||
*
|
||||
* Pure template for admin dashboard.
|
||||
* Accepts ViewData only, no business logic.
|
||||
*/
|
||||
export function AdminDashboardTemplate({
|
||||
viewData,
|
||||
onRefresh,
|
||||
isLoading
|
||||
}: AdminDashboardTemplateProps) {
|
||||
// Temporary UI fields (not yet provided by API/ViewModel)
|
||||
const adminCount = viewData.stats.systemAdmins;
|
||||
const systemHealth = 'Healthy';
|
||||
|
||||
export function AdminDashboardTemplate(props: {
|
||||
adminDashboardViewData: AdminDashboardViewData;
|
||||
onRefresh: () => void;
|
||||
isLoading: boolean;
|
||||
}) {
|
||||
const { adminDashboardViewData: viewData, onRefresh, isLoading } = props;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 space-y-6">
|
||||
{/* Header */}
|
||||
@@ -64,7 +55,7 @@ export function AdminDashboardTemplate({
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">Admins</div>
|
||||
<div className="text-3xl font-bold text-white">{adminCount}</div>
|
||||
<div className="text-3xl font-bold text-white">{viewData.stats.systemAdmins}</div>
|
||||
</div>
|
||||
<Shield className="w-8 h-8 text-purple-400" />
|
||||
</div>
|
||||
@@ -98,7 +89,7 @@ export function AdminDashboardTemplate({
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-400">System Health</span>
|
||||
<span className="px-2 py-1 text-xs rounded-full bg-performance-green/20 text-performance-green">
|
||||
{systemHealth}
|
||||
Healthy
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
@@ -9,10 +9,16 @@ import {
|
||||
Trash2,
|
||||
AlertTriangle
|
||||
} from 'lucide-react';
|
||||
import { AdminUsersViewData } from './AdminUsersViewData';
|
||||
import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
|
||||
|
||||
interface AdminUsersTemplateProps {
|
||||
viewData: AdminUsersViewData;
|
||||
/**
|
||||
* AdminUsersTemplate
|
||||
*
|
||||
* Pure template for admin users page.
|
||||
* Accepts ViewData only, no business logic.
|
||||
*/
|
||||
export function AdminUsersTemplate(props: {
|
||||
adminUsersViewData: AdminUsersViewData;
|
||||
onRefresh: () => void;
|
||||
onSearch: (search: string) => void;
|
||||
onFilterRole: (role: string) => void;
|
||||
@@ -26,30 +32,24 @@ interface AdminUsersTemplateProps {
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
deletingUser: string | null;
|
||||
}
|
||||
}) {
|
||||
const {
|
||||
adminUsersViewData: viewData,
|
||||
onRefresh,
|
||||
onSearch,
|
||||
onFilterRole,
|
||||
onFilterStatus,
|
||||
onClearFilters,
|
||||
onUpdateStatus,
|
||||
onDeleteUser,
|
||||
search,
|
||||
roleFilter,
|
||||
statusFilter,
|
||||
loading,
|
||||
error,
|
||||
deletingUser
|
||||
} = props;
|
||||
|
||||
/**
|
||||
* AdminUsersTemplate
|
||||
*
|
||||
* Pure template for admin users page.
|
||||
* Accepts ViewData only, no business logic.
|
||||
*/
|
||||
export function AdminUsersTemplate({
|
||||
viewData,
|
||||
onRefresh,
|
||||
onSearch,
|
||||
onFilterRole,
|
||||
onFilterStatus,
|
||||
onClearFilters,
|
||||
onUpdateStatus,
|
||||
onDeleteUser,
|
||||
search,
|
||||
roleFilter,
|
||||
statusFilter,
|
||||
loading,
|
||||
error,
|
||||
deletingUser
|
||||
}: AdminUsersTemplateProps) {
|
||||
const toStatusBadgeProps = (
|
||||
status: string,
|
||||
): { status: 'success' | 'warning' | 'error' | 'neutral'; label: string } => {
|
||||
@@ -311,7 +311,7 @@ export function AdminUsersTemplate({
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">Active</div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{viewData.users.filter(u => u.status === 'active').length}
|
||||
{viewData.activeUserCount}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-6 h-6 text-green-400">✓</div>
|
||||
@@ -322,7 +322,7 @@ export function AdminUsersTemplate({
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-1">Admins</div>
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{viewData.users.filter(u => u.isSystemAdmin).length}
|
||||
{viewData.adminCount}
|
||||
</div>
|
||||
</div>
|
||||
<Shield className="w-6 h-6 text-purple-400" />
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
/**
|
||||
* AdminUsersViewData
|
||||
*
|
||||
* ViewData for AdminUsersTemplate.
|
||||
* Template-ready data structure with only primitives.
|
||||
*/
|
||||
export interface AdminUsersViewData {
|
||||
users: Array<{
|
||||
id: string;
|
||||
email: string;
|
||||
displayName: string;
|
||||
roles: string[];
|
||||
status: string;
|
||||
isSystemAdmin: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
lastLoginAt?: string;
|
||||
primaryDriverId?: string;
|
||||
}>;
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
totalPages: number;
|
||||
}
|
||||
@@ -1,308 +1,332 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Activity,
|
||||
Award,
|
||||
Calendar,
|
||||
ChevronRight,
|
||||
Clock,
|
||||
Flag,
|
||||
Medal,
|
||||
Play,
|
||||
Star,
|
||||
Target,
|
||||
Trophy,
|
||||
UserPlus,
|
||||
Users,
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { FeedItemRow } from '@/components/dashboard/FeedItemRow';
|
||||
import { FriendItem } from '@/components/dashboard/FriendItem';
|
||||
import { LeagueStandingItem } from '@/components/dashboard/LeagueStandingItem';
|
||||
import { StatCard } from '@/components/dashboard/StatCard';
|
||||
import { UpcomingRaceItem } from '@/components/dashboard/UpcomingRaceItem';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
|
||||
import { getCountryFlag } from '@/lib/utilities/country';
|
||||
import { getGreeting } from '@/lib/utilities/time';
|
||||
import type { DashboardViewData } from './DashboardViewData';
|
||||
import type { DashboardViewData } from '@/lib/view-data/DashboardViewData';
|
||||
|
||||
interface DashboardTemplateProps {
|
||||
data: DashboardViewData;
|
||||
viewData: DashboardViewData;
|
||||
}
|
||||
|
||||
export function DashboardTemplate({ data }: DashboardTemplateProps) {
|
||||
const currentDriver = data.currentDriver;
|
||||
const nextRace = data.nextRace;
|
||||
const upcomingRaces = data.upcomingRaces;
|
||||
const leagueStandingsSummaries = data.leagueStandings;
|
||||
const feedSummary = { items: data.feedItems };
|
||||
const friends = data.friends;
|
||||
const activeLeaguesCount = data.activeLeaguesCount;
|
||||
export function DashboardTemplate({ viewData }: DashboardTemplateProps) {
|
||||
const {
|
||||
currentDriver,
|
||||
nextRace,
|
||||
upcomingRaces,
|
||||
leagueStandings,
|
||||
feedItems,
|
||||
friends,
|
||||
activeLeaguesCount,
|
||||
friendCount,
|
||||
hasUpcomingRaces,
|
||||
hasLeagueStandings,
|
||||
hasFeedItems,
|
||||
hasFriends,
|
||||
} = viewData;
|
||||
|
||||
const { totalRaces, wins, podiums, rating, rank, consistency } = currentDriver;
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/10 via-deep-graphite 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>
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary-blue/10 via-deep-graphite 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 className="relative max-w-7xl mx-auto px-6 py-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
|
||||
{/* Welcome Message */}
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="relative">
|
||||
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-blue to-purple-600 p-0.5 shadow-xl shadow-primary-blue/20">
|
||||
<div className="w-full h-full rounded-xl overflow-hidden bg-iron-gray">
|
||||
<img
|
||||
src={currentDriver.avatarUrl}
|
||||
alt={currentDriver.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-6 py-10">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
|
||||
{/* Welcome Message */}
|
||||
<div className="flex items-start gap-5">
|
||||
<div className="relative">
|
||||
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-blue to-purple-600 p-0.5 shadow-xl shadow-primary-blue/20">
|
||||
<div className="w-full h-full rounded-xl overflow-hidden bg-iron-gray">
|
||||
<Image
|
||||
src={currentDriver.avatarUrl}
|
||||
alt={currentDriver.name}
|
||||
width={80}
|
||||
height={80}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-performance-green border-3 border-deep-graphite" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm mb-1">{getGreeting()},</p>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
|
||||
{currentDriver.name}
|
||||
<span className="ml-3 text-2xl">{getCountryFlag(currentDriver.country)}</span>
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary-blue/10 border border-primary-blue/30">
|
||||
<Star className="w-3.5 h-3.5 text-primary-blue" />
|
||||
<span className="text-sm font-semibold text-primary-blue">{rating}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-yellow-400/10 border border-yellow-400/30">
|
||||
<Trophy className="w-3.5 h-3.5 text-yellow-400" />
|
||||
<span className="text-sm font-semibold text-yellow-400">#{rank}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">{totalRaces} races completed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Link href="/leagues">
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<Flag className="w-4 h-4" />
|
||||
Browse Leagues
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/profile">
|
||||
<Button variant="primary" className="flex items-center gap-2">
|
||||
<Activity className="w-4 h-4" />
|
||||
View Profile
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats Row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
|
||||
<StatCard icon={Trophy} value={wins} label="Wins" color="bg-performance-green/20 text-performance-green" />
|
||||
<StatCard icon={Medal} value={podiums} label="Podiums" color="bg-warning-amber/20 text-warning-amber" />
|
||||
<StatCard icon={Target} value={`${consistency}%`} label="Consistency" color="bg-primary-blue/20 text-primary-blue" />
|
||||
<StatCard icon={Users} value={activeLeaguesCount} label="Active Leagues" color="bg-purple-500/20 text-purple-400" />
|
||||
</div>
|
||||
<div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-performance-green border-3 border-deep-graphite" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm mb-1">Good morning,</p>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
|
||||
{currentDriver.name}
|
||||
<span className="ml-3 text-2xl">{currentDriver.country}</span>
|
||||
</h1>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-primary-blue/10 border border-primary-blue/30">
|
||||
<span className="text-sm font-semibold text-primary-blue">{currentDriver.rating}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-yellow-400/10 border border-yellow-400/30">
|
||||
<span className="text-sm font-semibold text-yellow-400">#{currentDriver.rank}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">{currentDriver.totalRaces} races completed</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Main Content */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Next Race Card */}
|
||||
{nextRace && (
|
||||
<Card className="relative overflow-hidden bg-gradient-to-br from-iron-gray to-iron-gray/80 border-primary-blue/30">
|
||||
<div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/20 to-transparent rounded-bl-full" />
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-primary-blue/20 border border-primary-blue/30">
|
||||
<Play className="w-3.5 h-3.5 text-primary-blue" />
|
||||
<span className="text-xs font-semibold text-primary-blue uppercase tracking-wider">Next Race</span>
|
||||
</div>
|
||||
{nextRace.isMyLeague && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-performance-green/20 text-performance-green text-xs font-medium">
|
||||
Your League
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">{nextRace.track}</h2>
|
||||
<p className="text-gray-400 mb-3">{nextRace.car}</p>
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm">
|
||||
<span className="flex items-center gap-1.5 text-gray-400">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{nextRace.formattedDate}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-gray-400">
|
||||
<Clock className="w-4 h-4" />
|
||||
{nextRace.formattedTime}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-3">
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Starts in</p>
|
||||
<p className="text-3xl font-bold text-primary-blue font-mono">{nextRace.timeUntil}</p>
|
||||
</div>
|
||||
<Link href={`/races/${nextRace.id}`}>
|
||||
<Button variant="primary" className="flex items-center gap-2">
|
||||
View Details
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
{/* Quick Actions */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<a href="/leagues" className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-sm font-medium transition-colors flex items-center gap-2">
|
||||
<span>Flag</span>
|
||||
Browse Leagues
|
||||
</a>
|
||||
<a href="/profile" className="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm font-medium transition-colors flex items-center gap-2">
|
||||
<span>Activity</span>
|
||||
View Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* League Standings Preview */}
|
||||
{leagueStandingsSummaries.length > 0 && (
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Award className="w-5 h-5 text-yellow-400" />
|
||||
Your Championship Standings
|
||||
</h2>
|
||||
<Link href="/profile/leagues" className="text-sm text-primary-blue hover:underline flex items-center gap-1">
|
||||
View all <ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{leagueStandingsSummaries.map((summary: any) => (
|
||||
<LeagueStandingItem
|
||||
key={summary.leagueId}
|
||||
leagueId={summary.leagueId}
|
||||
leagueName={summary.leagueName}
|
||||
position={summary.position}
|
||||
points={summary.points}
|
||||
totalDrivers={summary.totalDrivers}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Activity Feed */}
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Activity className="w-5 h-5 text-cyan-400" />
|
||||
Recent Activity
|
||||
</h2>
|
||||
</div>
|
||||
{feedSummary.items.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{feedSummary.items.slice(0, 5).map((item: any) => (
|
||||
<FeedItemRow key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<Activity className="w-12 h-12 text-gray-600 mx-auto mb-3" />
|
||||
<p className="text-gray-400 mb-2">No activity yet</p>
|
||||
<p className="text-sm text-gray-500">Join leagues and add friends to see activity here</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Upcoming Races */}
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-red-400" />
|
||||
Upcoming Races
|
||||
</h3>
|
||||
<Link href="/races" className="text-xs text-primary-blue hover:underline">
|
||||
View all
|
||||
</Link>
|
||||
</div>
|
||||
{upcomingRaces.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{upcomingRaces.slice(0, 5).map((race: any) => (
|
||||
<UpcomingRaceItem
|
||||
key={race.id}
|
||||
id={race.id}
|
||||
track={race.track}
|
||||
car={race.car}
|
||||
scheduledAt={race.scheduledAt}
|
||||
isMyLeague={race.isMyLeague}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 text-sm text-center py-4">No upcoming races</p>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Friends */}
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Users className="w-5 h-5 text-purple-400" />
|
||||
Friends
|
||||
</h3>
|
||||
<span className="text-xs text-gray-500">{friends.length} friends</span>
|
||||
</div>
|
||||
{friends.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{friends.slice(0, 6).map((friend: any) => (
|
||||
<FriendItem
|
||||
key={friend.id}
|
||||
id={friend.id}
|
||||
name={friend.name}
|
||||
avatarUrl={friend.avatarUrl}
|
||||
country={friend.country}
|
||||
/>
|
||||
))}
|
||||
{friends.length > 6 && (
|
||||
<Link
|
||||
href="/profile"
|
||||
className="block text-center py-2 text-sm text-primary-blue hover:underline"
|
||||
>
|
||||
+{friends.length - 6} more
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<UserPlus className="w-10 h-10 text-gray-600 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-400 mb-2">No friends yet</p>
|
||||
<Link href="/drivers">
|
||||
<Button variant="secondary" className="text-xs">
|
||||
Find Drivers
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
{/* Quick Stats Row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
|
||||
<div className="p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/20 text-performance-green">
|
||||
<span>Trophy</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-white">{currentDriver.wins}</p>
|
||||
<p className="text-xs text-gray-500">Wins</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/20 text-warning-amber">
|
||||
<span>Medal</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-white">{currentDriver.podiums}</p>
|
||||
<p className="text-xs text-gray-500">Podiums</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/20 text-primary-blue">
|
||||
<span>Target</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-white">{currentDriver.consistency}</p>
|
||||
<p className="text-xs text-gray-500">Consistency</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline backdrop-blur-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/20 text-purple-400">
|
||||
<span>Users</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-white">{activeLeaguesCount}</p>
|
||||
<p className="text-xs text-gray-500">Active Leagues</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content */}
|
||||
<section className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Main Content */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Next Race Card */}
|
||||
{nextRace && (
|
||||
<div className="relative overflow-hidden bg-gradient-to-br from-iron-gray to-iron-gray/80 border border-primary-blue/30 rounded-xl p-6">
|
||||
<div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/20 to-transparent rounded-bl-full" />
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-primary-blue/20 border border-primary-blue/30">
|
||||
<span className="text-xs font-semibold text-primary-blue uppercase tracking-wider">Next Race</span>
|
||||
</div>
|
||||
{nextRace.isMyLeague && (
|
||||
<span className="px-2 py-0.5 rounded-full bg-performance-green/20 text-performance-green text-xs font-medium">
|
||||
Your League
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">{nextRace.track}</h2>
|
||||
<p className="text-gray-400 mb-3">{nextRace.car}</p>
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm">
|
||||
<span className="flex items-center gap-1.5 text-gray-400">
|
||||
<span>Calendar</span>
|
||||
{nextRace.formattedDate}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5 text-gray-400">
|
||||
<span>Clock</span>
|
||||
{nextRace.formattedTime}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-3">
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Starts in</p>
|
||||
<p className="text-3xl font-bold text-primary-blue font-mono">{nextRace.timeUntil}</p>
|
||||
</div>
|
||||
<a href={`/races/${nextRace.id}`} className="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg text-white text-sm font-medium transition-colors flex items-center gap-2">
|
||||
View Details
|
||||
<span>ChevronRight</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* League Standings Preview */}
|
||||
{hasLeagueStandings && (
|
||||
<div className="bg-iron-gray/30 border border-charcoal-outline rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span>Award</span>
|
||||
Your Championship Standings
|
||||
</h2>
|
||||
<a href="/profile/leagues" className="text-sm text-primary-blue hover:underline flex items-center gap-1">
|
||||
View all <span>ChevronRight</span>
|
||||
</a>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{leagueStandings.map((summary) => (
|
||||
<div key={summary.leagueId} className="flex items-center justify-between p-3 bg-deep-graphite rounded-lg">
|
||||
<div>
|
||||
<p className="text-white font-medium">{summary.leagueName}</p>
|
||||
<p className="text-xs text-gray-500">Position {summary.position} • {summary.points} points</p>
|
||||
</div>
|
||||
<span className="text-xs text-gray-400">{summary.totalDrivers} drivers</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activity Feed */}
|
||||
<div className="bg-iron-gray/30 border border-charcoal-outline rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span>Activity</span>
|
||||
Recent Activity
|
||||
</h2>
|
||||
</div>
|
||||
{hasFeedItems ? (
|
||||
<div className="space-y-4">
|
||||
{feedItems.slice(0, 5).map((item) => (
|
||||
<div key={item.id} className="flex items-start gap-3 p-3 bg-deep-graphite rounded-lg">
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-medium">{item.headline}</p>
|
||||
{item.body && <p className="text-sm text-gray-400 mt-1">{item.body}</p>}
|
||||
<p className="text-xs text-gray-500 mt-1">{item.formattedTime}</p>
|
||||
</div>
|
||||
{item.ctaHref && item.ctaLabel && (
|
||||
<a href={item.ctaHref} className="text-xs text-primary-blue hover:underline">
|
||||
{item.ctaLabel}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<span className="text-4xl text-gray-600 mx-auto mb-3">Activity</span>
|
||||
<p className="text-gray-400 mb-2">No activity yet</p>
|
||||
<p className="text-sm text-gray-500">Join leagues and add friends to see activity here</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Upcoming Races */}
|
||||
<div className="bg-iron-gray/30 border border-charcoal-outline rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span>Calendar</span>
|
||||
Upcoming Races
|
||||
</h3>
|
||||
<a href="/races" className="text-xs text-primary-blue hover:underline">
|
||||
View all
|
||||
</a>
|
||||
</div>
|
||||
{hasUpcomingRaces ? (
|
||||
<div className="space-y-3">
|
||||
{upcomingRaces.slice(0, 5).map((race) => (
|
||||
<div key={race.id} className="p-3 bg-deep-graphite rounded-lg">
|
||||
<p className="text-white font-medium">{race.track}</p>
|
||||
<p className="text-sm text-gray-400">{race.car}</p>
|
||||
<div className="flex items-center gap-2 mt-1 text-xs text-gray-500">
|
||||
<span>{race.formattedDate}</span>
|
||||
<span>•</span>
|
||||
<span>{race.formattedTime}</span>
|
||||
</div>
|
||||
{race.isMyLeague && (
|
||||
<span className="inline-block mt-1 px-2 py-0.5 rounded-full bg-performance-green/20 text-performance-green text-xs font-medium">
|
||||
Your League
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 text-sm text-center py-4">No upcoming races</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Friends */}
|
||||
<div className="bg-iron-gray/30 border border-charcoal-outline rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<span>Users</span>
|
||||
Friends
|
||||
</h3>
|
||||
<span className="text-xs text-gray-500">{friends.length} friends</span>
|
||||
</div>
|
||||
{hasFriends ? (
|
||||
<div className="space-y-2">
|
||||
{friends.slice(0, 6).map((friend) => (
|
||||
<div key={friend.id} className="flex items-center gap-3 p-2 rounded-lg hover:bg-deep-graphite transition-colors">
|
||||
<div className="w-9 h-9 rounded-full overflow-hidden bg-gradient-to-br from-primary-blue to-purple-600">
|
||||
<img
|
||||
src={friend.avatarUrl}
|
||||
alt={friend.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm font-medium truncate">{friend.name}</p>
|
||||
<p className="text-xs text-gray-500">{friend.country}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{friends.length > 6 && (
|
||||
<a
|
||||
href="/profile"
|
||||
className="block text-center py-2 text-sm text-primary-blue hover:underline"
|
||||
>
|
||||
+{friends.length - 6} more
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-6">
|
||||
<span className="text-3xl text-gray-600 mx-auto mb-2">UserPlus</span>
|
||||
<p className="text-sm text-gray-400 mb-2">No friends yet</p>
|
||||
<a href="/drivers" className="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs text-white transition-colors">
|
||||
Find Drivers
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,32 +1,45 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Trophy, Search, ArrowLeft, Medal } from 'lucide-react';
|
||||
import { Trophy, ArrowLeft, Medal } from 'lucide-react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import DriverRankingsFilter from '@/components/DriverRankingsFilter';
|
||||
import { DriverTopThreePodium } from '@/components/DriverTopThreePodium';
|
||||
import Image from 'next/image';
|
||||
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
|
||||
interface DriverRankingsTemplateProps {
|
||||
viewData: DriverRankingsViewData;
|
||||
onDriverClick?: (id: string) => void;
|
||||
onBackToLeaderboards?: () => void;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// MAIN TEMPLATE COMPONENT
|
||||
// ============================================================================
|
||||
|
||||
export function DriverRankingsTemplate(props: { viewData: DriverRankingsViewData }): React.ReactElement {
|
||||
const { viewData } = props;
|
||||
export function DriverRankingsTemplate({
|
||||
viewData,
|
||||
onDriverClick,
|
||||
onBackToLeaderboards,
|
||||
}: DriverRankingsTemplateProps): React.ReactElement {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 pb-12">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={viewData.onBackToLeaderboards}
|
||||
className="flex items-center gap-2 mb-6"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Leaderboards
|
||||
</Button>
|
||||
{onBackToLeaderboards && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onBackToLeaderboards}
|
||||
className="flex items-center gap-2 mb-6"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Leaderboards
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
|
||||
@@ -43,20 +56,71 @@ export function DriverRankingsTemplate(props: { viewData: DriverRankingsViewData
|
||||
|
||||
{/* Top 3 Podium */}
|
||||
{viewData.podium.length > 0 && (
|
||||
<DriverTopThreePodium podium={viewData.podium} onDriverClick={viewData.onDriverClick} />
|
||||
)}
|
||||
<div className="mb-10">
|
||||
<div className="flex items-end justify-center gap-4 lg:gap-8">
|
||||
{[1, 0, 2].map((index) => {
|
||||
const driver = viewData.podium[index];
|
||||
if (!driver) return null;
|
||||
|
||||
const position = index === 1 ? 1 : index === 0 ? 2 : 3;
|
||||
const config = {
|
||||
1: { height: 'h-40', color: 'from-yellow-400/20 to-amber-500/10 border-yellow-400/40', crown: 'text-yellow-400', text: 'text-xl text-yellow-400' },
|
||||
2: { height: 'h-32', color: 'from-gray-400/20 to-gray-500/10 border-gray-400/40', crown: 'text-gray-300', text: 'text-lg text-gray-300' },
|
||||
3: { height: 'h-24', color: 'from-amber-600/20 to-amber-700/10 border-amber-600/40', crown: 'text-amber-600', text: 'text-base text-amber-600' },
|
||||
}[position];
|
||||
|
||||
{/* Filters */}
|
||||
<DriverRankingsFilter
|
||||
searchQuery={viewData.searchQuery}
|
||||
onSearchChange={viewData.onSearchChange}
|
||||
selectedSkill={viewData.selectedSkill}
|
||||
onSkillChange={viewData.onSkillChange}
|
||||
sortBy={viewData.sortBy}
|
||||
onSortChange={viewData.onSortChange}
|
||||
showFilters={viewData.showFilters}
|
||||
onToggleFilters={viewData.onToggleFilters}
|
||||
/>
|
||||
return (
|
||||
<button
|
||||
key={driver.id}
|
||||
type="button"
|
||||
onClick={() => onDriverClick?.(driver.id)}
|
||||
className="flex flex-col items-center group"
|
||||
>
|
||||
<div className="relative mb-4">
|
||||
<div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
|
||||
<Image
|
||||
src={driver.avatarUrl}
|
||||
alt={driver.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${config.color} border-2 ${config.crown}`}>
|
||||
{position}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
|
||||
{driver.name}
|
||||
</p>
|
||||
|
||||
<p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
|
||||
{driver.rating.toLocaleString()}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-3 text-performance-green">🏆</span>
|
||||
{driver.wins}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-3 h-3 text-warning-amber">🏅</span>
|
||||
{driver.podiums}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={`mt-4 w-28 lg:w-36 ${config.height} rounded-t-lg bg-gradient-to-t ${config.color} border-t border-x flex items-end justify-center pb-4`}>
|
||||
<span className={`text-4xl lg:text-5xl font-black ${config.crown}`}>
|
||||
{position}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leaderboard Table */}
|
||||
<div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
|
||||
@@ -73,89 +137,94 @@ export function DriverRankingsTemplate(props: { viewData: DriverRankingsViewData
|
||||
|
||||
{/* Table Body */}
|
||||
<div className="divide-y divide-charcoal-outline/50">
|
||||
{viewData.drivers.map((driver) => (
|
||||
<button
|
||||
key={driver.id}
|
||||
type="button"
|
||||
onClick={() => viewData.onDriverClick(driver.id)}
|
||||
className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
||||
>
|
||||
{/* Position */}
|
||||
<div className="col-span-1 flex items-center justify-center">
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${driver.medalBg} ${driver.medalColor}`}>
|
||||
{driver.rank <= 3 ? <Medal className="w-4 h-4" /> : driver.rank}
|
||||
</div>
|
||||
</div>
|
||||
{viewData.drivers.map((driver) => {
|
||||
const position = driver.rank;
|
||||
const medalBg = position === 1 ? 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40' :
|
||||
position === 2 ? 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40' :
|
||||
position === 3 ? 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40' :
|
||||
'bg-iron-gray/50 border-charcoal-outline';
|
||||
const medalColor = position === 1 ? 'text-yellow-400' :
|
||||
position === 2 ? 'text-gray-300' :
|
||||
position === 3 ? 'text-amber-600' :
|
||||
'text-gray-500';
|
||||
|
||||
{/* Driver Info */}
|
||||
<div className="col-span-5 lg:col-span-4 flex items-center gap-3">
|
||||
<div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
|
||||
<Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
|
||||
{driver.name}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
{driver.nationality}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{driver.skillLevel}
|
||||
</span>
|
||||
return (
|
||||
<button
|
||||
key={driver.id}
|
||||
type="button"
|
||||
onClick={() => onDriverClick?.(driver.id)}
|
||||
className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
|
||||
>
|
||||
{/* Position */}
|
||||
<div className="col-span-1 flex items-center justify-center">
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${medalBg} ${medalColor}`}>
|
||||
{position <= 3 ? <Medal className="w-4 h-4" /> : position}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Races */}
|
||||
<div className="col-span-2 items-center justify-center hidden md:flex">
|
||||
<span className="text-gray-400">{driver.racesCompleted}</span>
|
||||
</div>
|
||||
{/* Driver Info */}
|
||||
<div className="col-span-5 lg:col-span-4 flex items-center gap-3">
|
||||
<div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
|
||||
<Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
|
||||
{driver.name}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
{driver.nationality}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{driver.skillLevel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Rating */}
|
||||
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
||||
<span className={`font-mono font-semibold ${viewData.sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
|
||||
{driver.rating.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
{/* Races */}
|
||||
<div className="col-span-2 items-center justify-center hidden md:flex">
|
||||
<span className="text-gray-400">{driver.racesCompleted}</span>
|
||||
</div>
|
||||
|
||||
{/* Wins */}
|
||||
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
||||
<span className={`font-mono font-semibold ${viewData.sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
|
||||
{driver.wins}
|
||||
</span>
|
||||
</div>
|
||||
{/* Rating */}
|
||||
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
||||
<span className="font-mono font-semibold text-white">
|
||||
{driver.rating.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Podiums */}
|
||||
<div className="col-span-1 items-center justify-center hidden lg:flex">
|
||||
<span className={`font-mono font-semibold ${viewData.sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
|
||||
{driver.podiums}
|
||||
</span>
|
||||
</div>
|
||||
{/* Wins */}
|
||||
<div className="col-span-2 lg:col-span-1 flex items-center justify-center">
|
||||
<span className="font-mono font-semibold text-performance-green">
|
||||
{driver.wins}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Win Rate */}
|
||||
<div className="col-span-2 flex items-center justify-center">
|
||||
<span className={`font-mono font-semibold ${viewData.sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
|
||||
{driver.winRate}%
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{/* Podiums */}
|
||||
<div className="col-span-1 items-center justify-center hidden lg:flex">
|
||||
<span className="font-mono font-semibold text-warning-amber">
|
||||
{driver.podiums}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Win Rate */}
|
||||
<div className="col-span-2 flex items-center justify-center">
|
||||
<span className="font-mono font-semibold text-white">
|
||||
{driver.winRate}%
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
{viewData.drivers.length === 0 && (
|
||||
<div className="py-16 text-center">
|
||||
<Search className="w-12 h-12 text-gray-600 mx-auto mb-4" />
|
||||
<span className="text-5xl mb-4 block">🔍</span>
|
||||
<p className="text-gray-400 mb-2">No drivers found</p>
|
||||
<p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={viewData.onClearFilters}
|
||||
className="mt-4"
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
<p className="text-sm text-gray-500">There are no drivers in the system yet</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -6,16 +6,33 @@ import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import DriverLeaderboardPreview from '@/components/leaderboards/DriverLeaderboardPreview';
|
||||
import TeamLeaderboardPreview from '@/components/leaderboards/TeamLeaderboardPreview';
|
||||
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
|
||||
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
|
||||
interface LeaderboardsTemplateProps {
|
||||
drivers: DriverLeaderboardItemViewModel[];
|
||||
teams: TeamSummaryViewModel[];
|
||||
drivers: {
|
||||
id: string;
|
||||
name: string;
|
||||
rating: number;
|
||||
skillLevel: string;
|
||||
nationality: string;
|
||||
wins: number;
|
||||
rank: number;
|
||||
avatarUrl: string;
|
||||
position: number;
|
||||
}[];
|
||||
teams: {
|
||||
id: string;
|
||||
name: string;
|
||||
tag: string;
|
||||
memberCount: number;
|
||||
category?: string;
|
||||
totalWins: number;
|
||||
logoUrl: string;
|
||||
position: number;
|
||||
}[];
|
||||
onDriverClick: (driverId: string) => void;
|
||||
onTeamClick: (teamId: string) => void;
|
||||
onNavigateToDrivers: () => void;
|
||||
|
||||
@@ -23,6 +23,7 @@ import Button from '@/components/ui/Button';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
|
||||
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
|
||||
|
||||
// ============================================================================
|
||||
@@ -49,7 +50,7 @@ interface Category {
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
description: string;
|
||||
filter: (league: LeagueSummaryViewModel) => boolean;
|
||||
filter: (league: LeaguesViewData['leagues'][number]) => boolean;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
@@ -57,17 +58,15 @@ interface LeagueSliderProps {
|
||||
title: string;
|
||||
icon: React.ElementType;
|
||||
description: string;
|
||||
leagues: LeagueSummaryViewModel[];
|
||||
leagues: LeaguesViewData['leagues'];
|
||||
autoScroll?: boolean;
|
||||
iconColor?: string;
|
||||
scrollSpeedMultiplier?: number;
|
||||
scrollDirection?: 'left' | 'right';
|
||||
}
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
interface LeaguesTemplateProps {
|
||||
data: LeagueSummaryViewModel[];
|
||||
data: LeaguesViewData;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
@@ -367,13 +366,36 @@ function LeagueSlider({
|
||||
display: none;
|
||||
}
|
||||
`}</style>
|
||||
{leagues.map((league) => (
|
||||
<div key={league.id} className="flex-shrink-0 w-[320px] h-full">
|
||||
<Link href={`/leagues/${league.id}`} className="block h-full">
|
||||
<LeagueCard league={league} />
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
{leagues.map((league) => {
|
||||
// Convert ViewData to ViewModel for LeagueCard
|
||||
const viewModel: LeagueSummaryViewModel = {
|
||||
id: league.id,
|
||||
name: league.name,
|
||||
description: league.description ?? '',
|
||||
logoUrl: league.logoUrl,
|
||||
ownerId: league.ownerId,
|
||||
createdAt: league.createdAt,
|
||||
maxDrivers: league.maxDrivers,
|
||||
usedDriverSlots: league.usedDriverSlots,
|
||||
maxTeams: league.maxTeams ?? 0,
|
||||
usedTeamSlots: league.usedTeamSlots ?? 0,
|
||||
structureSummary: league.structureSummary,
|
||||
timingSummary: league.timingSummary,
|
||||
category: league.category ?? undefined,
|
||||
scoring: league.scoring ? {
|
||||
...league.scoring,
|
||||
primaryChampionshipType: league.scoring.primaryChampionshipType as 'driver' | 'team' | 'nations' | 'trophy',
|
||||
} : undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={league.id} className="flex-shrink-0 w-[320px] h-full">
|
||||
<a href={`/leagues/${league.id}`} className="block h-full">
|
||||
<LeagueCard league={viewModel} />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -392,7 +414,7 @@ export function LeaguesTemplate({
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
// Filter by search query
|
||||
const searchFilteredLeagues = data.filter((league: LeagueSummaryViewModel) => {
|
||||
const searchFilteredLeagues = data.leagues.filter((league) => {
|
||||
if (!searchQuery) return true;
|
||||
const query = searchQuery.toLowerCase();
|
||||
return (
|
||||
@@ -412,7 +434,7 @@ export function LeaguesTemplate({
|
||||
const leaguesByCategory = CATEGORIES.reduce(
|
||||
(acc, category) => {
|
||||
// First try to use the dedicated category field, fall back to scoring-based filtering
|
||||
acc[category.id] = searchFilteredLeagues.filter((league: LeagueSummaryViewModel) => {
|
||||
acc[category.id] = searchFilteredLeagues.filter((league) => {
|
||||
// If league has a category field, use it directly
|
||||
if (league.category) {
|
||||
return league.category === category.id;
|
||||
@@ -422,7 +444,7 @@ export function LeaguesTemplate({
|
||||
});
|
||||
return acc;
|
||||
},
|
||||
{} as Record<CategoryId, LeagueSummaryViewModel[]>,
|
||||
{} as Record<CategoryId, LeaguesViewData['leagues']>,
|
||||
);
|
||||
|
||||
// Featured categories to show as sliders with different scroll speeds and alternating directions
|
||||
@@ -463,7 +485,7 @@ export function LeaguesTemplate({
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
|
||||
<span className="text-sm text-gray-400">
|
||||
<span className="text-white font-semibold">{data.length}</span> active leagues
|
||||
<span className="text-white font-semibold">{data.leagues.length}</span> active leagues
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -483,10 +505,10 @@ export function LeaguesTemplate({
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link href="/leagues/create" className="flex items-center gap-2 px-6 py-3 bg-primary-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<a href="/leagues/create" className="flex items-center gap-2 px-6 py-3 bg-primary-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<Plus className="w-5 h-5" />
|
||||
<span>Create League</span>
|
||||
</Link>
|
||||
</a>
|
||||
<p className="text-xs text-gray-500 text-center">Set up your own racing series</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -553,7 +575,7 @@ export function LeaguesTemplate({
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{data.length === 0 ? (
|
||||
{data.leagues.length === 0 ? (
|
||||
/* Empty State */
|
||||
<Card className="text-center py-16">
|
||||
<div className="max-w-md mx-auto">
|
||||
@@ -566,10 +588,10 @@ export function LeaguesTemplate({
|
||||
<p className="text-gray-400 mb-8">
|
||||
Be the first to create a racing series. Start your own league and invite drivers to compete for glory.
|
||||
</p>
|
||||
<Link href="/leagues/create" className="inline-flex items-center gap-2 px-6 py-3 bg-primary-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<a href="/leagues/create" className="inline-flex items-center gap-2 px-6 py-3 bg-primary-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Create Your First League
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
) : activeCategory === 'all' && !searchQuery ? (
|
||||
@@ -613,11 +635,34 @@ export function LeaguesTemplate({
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{categoryFilteredLeagues.map((league) => (
|
||||
<Link key={league.id} href={`/leagues/${league.id}`} className="block h-full">
|
||||
<LeagueCard league={league} />
|
||||
</Link>
|
||||
))}
|
||||
{categoryFilteredLeagues.map((league) => {
|
||||
// Convert ViewData to ViewModel for LeagueCard
|
||||
const viewModel: LeagueSummaryViewModel = {
|
||||
id: league.id,
|
||||
name: league.name,
|
||||
description: league.description ?? '',
|
||||
logoUrl: league.logoUrl,
|
||||
ownerId: league.ownerId,
|
||||
createdAt: league.createdAt,
|
||||
maxDrivers: league.maxDrivers,
|
||||
usedDriverSlots: league.usedDriverSlots,
|
||||
maxTeams: league.maxTeams ?? 0,
|
||||
usedTeamSlots: league.usedTeamSlots ?? 0,
|
||||
structureSummary: league.structureSummary,
|
||||
timingSummary: league.timingSummary,
|
||||
category: league.category ?? undefined,
|
||||
scoring: league.scoring ? {
|
||||
...league.scoring,
|
||||
primaryChampionshipType: league.scoring.primaryChampionshipType as 'driver' | 'team' | 'nations' | 'trophy',
|
||||
} : undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<a key={league.id} href={`/leagues/${league.id}`} className="block h-full">
|
||||
<LeagueCard league={viewModel} />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { ProfileLeaguesViewData } from './ProfileLeaguesViewData';
|
||||
import type { ProfileLeaguesViewData } from '@/lib/view-data/ProfileLeaguesViewData';
|
||||
|
||||
interface ProfileLeaguesTemplateProps {
|
||||
viewData: ProfileLeaguesViewData;
|
||||
@@ -31,7 +31,7 @@ export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{viewData.ownedLeagues.map((league) => (
|
||||
{viewData.ownedLeagues.map((league: ProfileLeaguesViewData['ownedLeagues'][number]) => (
|
||||
<div
|
||||
key={league.leagueId}
|
||||
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
||||
@@ -78,7 +78,7 @@ export function ProfileLeaguesTemplate({ viewData }: ProfileLeaguesTemplateProps
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{viewData.memberLeagues.map((league) => (
|
||||
{viewData.memberLeagues.map((league: ProfileLeaguesViewData['memberLeagues'][number]) => (
|
||||
<div
|
||||
key={league.leagueId}
|
||||
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
|
||||
|
||||
447
apps/website/templates/ProfileTemplate.tsx
Normal file
447
apps/website/templates/ProfileTemplate.tsx
Normal file
@@ -0,0 +1,447 @@
|
||||
'use client';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
|
||||
import {
|
||||
Activity,
|
||||
Award,
|
||||
BarChart3,
|
||||
Calendar,
|
||||
ChevronRight,
|
||||
Clock,
|
||||
Edit3,
|
||||
ExternalLink,
|
||||
Flag,
|
||||
Globe,
|
||||
History,
|
||||
MessageCircle,
|
||||
Percent,
|
||||
Settings,
|
||||
Shield,
|
||||
Star,
|
||||
Target,
|
||||
TrendingUp,
|
||||
Trophy,
|
||||
Twitch,
|
||||
Twitter,
|
||||
User,
|
||||
UserPlus,
|
||||
Users,
|
||||
Youtube,
|
||||
Zap,
|
||||
Medal,
|
||||
Crown,
|
||||
} from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import ProfileSettings from '@/components/drivers/ProfileSettings';
|
||||
import ProfileRaceHistory from '@/components/drivers/ProfileRaceHistory';
|
||||
import CreateDriverForm from '@/components/drivers/CreateDriverForm';
|
||||
|
||||
type ProfileTab = 'overview' | 'history' | 'stats';
|
||||
|
||||
interface ProfileTemplateProps {
|
||||
viewData: ProfileViewData | null;
|
||||
mode: 'profile-exists' | 'needs-profile';
|
||||
onSaveSettings: (updates: { bio?: string; country?: string }) => Promise<void>;
|
||||
}
|
||||
|
||||
function getAchievementIcon(icon: NonNullable<ProfileViewData['extendedProfile']>['achievements'][number]['icon']) {
|
||||
switch (icon) {
|
||||
case 'trophy':
|
||||
return Trophy;
|
||||
case 'medal':
|
||||
return Medal;
|
||||
case 'star':
|
||||
return Star;
|
||||
case 'crown':
|
||||
return Crown;
|
||||
case 'target':
|
||||
return Target;
|
||||
case 'zap':
|
||||
return Zap;
|
||||
}
|
||||
}
|
||||
|
||||
function getSocialIcon(platformLabel: string) {
|
||||
switch (platformLabel) {
|
||||
case 'twitter':
|
||||
return Twitter;
|
||||
case 'youtube':
|
||||
return Youtube;
|
||||
case 'twitch':
|
||||
return Twitch;
|
||||
case 'discord':
|
||||
return MessageCircle;
|
||||
default:
|
||||
return Globe;
|
||||
}
|
||||
}
|
||||
|
||||
export function ProfileTemplate({ viewData, mode, onSaveSettings }: ProfileTemplateProps) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const tabParam = searchParams.get('tab') as ProfileTab | null;
|
||||
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<ProfileTab>(tabParam || 'overview');
|
||||
const [friendRequestSent, setFriendRequestSent] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchParams.get('tab') !== activeTab) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (activeTab === 'overview') {
|
||||
params.delete('tab');
|
||||
} else {
|
||||
params.set('tab', activeTab);
|
||||
}
|
||||
const query = params.toString();
|
||||
router.replace(`/profile${query ? `?${query}` : ''}`, { scroll: false });
|
||||
}
|
||||
}, [activeTab, searchParams, router]);
|
||||
|
||||
useEffect(() => {
|
||||
const tab = searchParams.get('tab') as ProfileTab | null;
|
||||
if (tab && tab !== activeTab) {
|
||||
setActiveTab(tab);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
if (mode === 'needs-profile') {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<User className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Create Your Driver Profile</Heading>
|
||||
<p className="text-gray-400">Join the GridPilot community and start your racing journey</p>
|
||||
</div>
|
||||
|
||||
<Card className="max-w-2xl mx-auto">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-white mb-2">Get Started</h2>
|
||||
<p className="text-gray-400 text-sm">
|
||||
Create your driver profile to join leagues, compete in races, and connect with other drivers.
|
||||
</p>
|
||||
</div>
|
||||
<CreateDriverForm />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!viewData) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<Card className="text-center py-12">
|
||||
<User className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||||
<p className="text-gray-400 mb-2">Unable to load profile</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (editMode) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 space-y-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Heading level={1}>Edit Profile</Heading>
|
||||
<Button variant="secondary" onClick={() => setEditMode(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* ProfileSettings expects a DriverProfileDriverSummaryViewModel; keep existing component usage by passing a minimal compatible shape */}
|
||||
<ProfileSettings
|
||||
driver={{
|
||||
id: viewData.driver.id,
|
||||
name: viewData.driver.name,
|
||||
country: viewData.driver.countryCode,
|
||||
avatarUrl: viewData.driver.avatarUrl,
|
||||
iracingId: viewData.driver.iracingId,
|
||||
joinedAt: new Date().toISOString(),
|
||||
rating: null,
|
||||
globalRank: null,
|
||||
consistency: null,
|
||||
bio: viewData.driver.bio,
|
||||
totalDrivers: null,
|
||||
}}
|
||||
onSave={async (updates) => {
|
||||
await onSaveSettings(updates);
|
||||
setEditMode(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 pb-12 space-y-6">
|
||||
{/* Hero */}
|
||||
<div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-iron-gray/80 via-iron-gray/60 to-deep-graphite border border-charcoal-outline">
|
||||
<div className="relative p-6 md:p-8">
|
||||
<div className="flex flex-col md:flex-row md:items-start gap-6">
|
||||
<div className="relative">
|
||||
<div className="w-28 h-28 md:w-36 md:h-36 rounded-2xl bg-gradient-to-br from-primary-blue to-purple-600 p-1 shadow-xl shadow-primary-blue/20">
|
||||
<div className="w-full h-full rounded-xl overflow-hidden bg-iron-gray">
|
||||
<Image
|
||||
src={viewData.driver.avatarUrl}
|
||||
alt={viewData.driver.name}
|
||||
width={144}
|
||||
height={144}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-performance-green border-4 border-iron-gray" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-3 mb-2">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-white">{viewData.driver.name}</h1>
|
||||
<span className="text-4xl" aria-label={`Country: ${viewData.driver.countryCode}`}>{viewData.driver.countryFlag}</span>
|
||||
{viewData.teamMemberships[0] && (
|
||||
<span className="px-3 py-1 bg-purple-600/20 text-purple-400 rounded-full text-sm font-semibold border border-purple-600/30">
|
||||
[{viewData.teamMemberships[0].teamTag || 'TEAM'}]
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{viewData.stats && (
|
||||
<div className="flex flex-wrap items-center gap-4 mb-4">
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/30">
|
||||
<Star className="w-4 h-4 text-primary-blue" />
|
||||
<span className="font-mono font-bold text-primary-blue">{viewData.stats.ratingLabel}</span>
|
||||
<span className="text-xs text-gray-400">Rating</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-yellow-400/10 border border-yellow-400/30">
|
||||
<Trophy className="w-4 h-4 text-yellow-400" />
|
||||
<span className="font-mono font-bold text-yellow-400">{viewData.stats.globalRankLabel}</span>
|
||||
<span className="text-xs text-gray-400">Global</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-400">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Globe className="w-4 h-4" />
|
||||
iRacing: {viewData.driver.iracingId ?? '—'}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar className="w-4 h-4" />
|
||||
Joined {viewData.driver.joinedAtLabel}
|
||||
</span>
|
||||
{viewData.extendedProfile && (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
{viewData.extendedProfile.timezone}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button variant="primary" onClick={() => setEditMode(true)} className="flex items-center gap-2">
|
||||
<Edit3 className="w-4 h-4" />
|
||||
Edit Profile
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => setFriendRequestSent(true)}
|
||||
disabled={friendRequestSent}
|
||||
className="w-full flex items-center gap-2"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
{friendRequestSent ? 'Request Sent' : 'Add Friend'}
|
||||
</Button>
|
||||
<Link href="/profile/leagues">
|
||||
<Button variant="secondary" className="w-full flex items-center gap-2">
|
||||
<Flag className="w-4 h-4" />
|
||||
My Leagues
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{viewData.extendedProfile && viewData.extendedProfile.socialHandles.length > 0 && (
|
||||
<div className="mt-6 pt-6 border-t border-charcoal-outline/50">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm text-gray-500 mr-2">Connect:</span>
|
||||
{viewData.extendedProfile.socialHandles.map((social) => {
|
||||
const Icon = getSocialIcon(social.platformLabel);
|
||||
return (
|
||||
<a
|
||||
key={`${social.platformLabel}-${social.handle}`}
|
||||
href={social.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-iron-gray/50 border border-charcoal-outline text-gray-400 transition-all hover:text-white"
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="text-sm">{social.handle}</span>
|
||||
<ExternalLink className="w-3 h-3 opacity-50" />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{viewData.driver.bio && (
|
||||
<Card>
|
||||
<h2 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-primary-blue" />
|
||||
About
|
||||
</h2>
|
||||
<p className="text-gray-300 leading-relaxed">{viewData.driver.bio}</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{viewData.teamMemberships.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-purple-400" />
|
||||
Team Memberships
|
||||
<span className="text-sm text-gray-500 font-normal">({viewData.teamMemberships.length})</span>
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{viewData.teamMemberships.map((membership) => (
|
||||
<Link
|
||||
key={membership.teamId}
|
||||
href={membership.href}
|
||||
className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline hover:border-purple-400/30 hover:bg-iron-gray/50 transition-all group"
|
||||
>
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-600/20 border border-purple-600/30">
|
||||
<Users className="w-6 h-6 text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">{membership.teamName}</p>
|
||||
<div className="flex items-center gap-2 text-xs text-gray-400">
|
||||
<span className="px-2 py-0.5 rounded-full bg-purple-600/20 text-purple-400 capitalize">{membership.roleLabel}</span>
|
||||
<span>Since {membership.joinedAtLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-purple-400 transition-colors" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center gap-1 p-1.5 rounded-xl bg-iron-gray/50 border border-charcoal-outline w-fit relative z-10">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
|
||||
activeTab === 'overview'
|
||||
? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
|
||||
: 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
|
||||
}`}
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
Overview
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('history')}
|
||||
className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
|
||||
activeTab === 'history'
|
||||
? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
|
||||
: 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
|
||||
}`}
|
||||
>
|
||||
<History className="w-4 h-4" />
|
||||
Race History
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('stats')}
|
||||
className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all cursor-pointer select-none ${
|
||||
activeTab === 'stats'
|
||||
? 'bg-primary-blue text-white shadow-lg shadow-primary-blue/25'
|
||||
: 'text-gray-400 hover:text-white hover:bg-iron-gray/80'
|
||||
}`}
|
||||
>
|
||||
<BarChart3 className="w-4 h-4" />
|
||||
Detailed Stats
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{activeTab === 'history' && (
|
||||
<Card>
|
||||
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<History className="w-5 h-5 text-red-400" />
|
||||
Race History
|
||||
</h2>
|
||||
<ProfileRaceHistory driverId={viewData.driver.id} />
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'stats' && viewData.stats && (
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<h2 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
|
||||
<Activity className="w-5 h-5 text-neon-aqua" />
|
||||
Performance Overview
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
|
||||
<div className="text-3xl font-bold text-white mb-1">{viewData.stats.totalRacesLabel}</div>
|
||||
<div className="text-xs text-gray-500 uppercase tracking-wider">Races</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
|
||||
<div className="text-3xl font-bold text-performance-green mb-1">{viewData.stats.winsLabel}</div>
|
||||
<div className="text-xs text-gray-500 uppercase tracking-wider">Wins</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
|
||||
<div className="text-3xl font-bold text-warning-amber mb-1">{viewData.stats.podiumsLabel}</div>
|
||||
<div className="text-xs text-gray-500 uppercase tracking-wider">Podiums</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl bg-deep-graphite border border-charcoal-outline text-center">
|
||||
<div className="text-3xl font-bold text-primary-blue mb-1">{viewData.stats.consistencyLabel}</div>
|
||||
<div className="text-xs text-gray-500 uppercase tracking-wider">Consistency</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'overview' && viewData.extendedProfile && (
|
||||
<Card>
|
||||
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Award className="w-5 h-5 text-yellow-400" />
|
||||
Achievements
|
||||
<span className="ml-auto text-sm text-gray-500">{viewData.extendedProfile.achievements.length} earned</span>
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{viewData.extendedProfile.achievements.map((achievement) => {
|
||||
const Icon = getAchievementIcon(achievement.icon);
|
||||
return (
|
||||
<div key={achievement.id} className="p-4 rounded-xl border border-charcoal-outline bg-iron-gray/30">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-iron-gray/50 border border-charcoal-outline">
|
||||
<Icon className="w-5 h-5 text-yellow-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white font-semibold text-sm">{achievement.title}</p>
|
||||
<p className="text-gray-400 text-xs mt-0.5">{achievement.description}</p>
|
||||
<p className="text-gray-500 text-xs mt-1">{achievement.earnedAtLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,158 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import Breadcrumbs from '@/components/layout/Breadcrumbs';
|
||||
import PendingSponsorshipRequests from '@/components/sponsors/PendingSponsorshipRequests';
|
||||
import Card from '@/components/ui/Card';
|
||||
import { AlertTriangle, Building, ChevronRight, Handshake, Trophy, User, Users } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export interface EntitySection {
|
||||
entityType: 'driver' | 'team' | 'race' | 'season';
|
||||
entityId: string;
|
||||
entityName: string;
|
||||
requests: any[];
|
||||
}
|
||||
import { SponsorshipRequestsPageViewDataBuilder } from '@/lib/builders/view-data/SponsorshipRequestsPageViewDataBuilder';
|
||||
import { AcceptSponsorshipRequestMutation } from '@/lib/mutations/sponsors/AcceptSponsorshipRequestMutation';
|
||||
import { RejectSponsorshipRequestMutation } from '@/lib/mutations/sponsors/RejectSponsorshipRequestMutation';
|
||||
import { SponsorshipRequestsPageQuery } from '@/lib/page-queries/page-queries/SponsorshipRequestsPageQuery';
|
||||
import { SponsorshipRequestsClient } from '@/app/profile/sponsorship-requests/SponsorshipRequestsClient';
|
||||
|
||||
export interface SponsorshipRequestsTemplateProps {
|
||||
data: EntitySection[];
|
||||
onAccept: (requestId: string) => Promise<void>;
|
||||
onReject: (requestId: string, reason?: string) => Promise<void>;
|
||||
searchParams: Record<string, string>;
|
||||
}
|
||||
|
||||
export function SponsorshipRequestsTemplate({ data, onAccept, onReject }: SponsorshipRequestsTemplateProps) {
|
||||
const totalRequests = data.reduce((sum, s) => sum + s.requests.length, 0);
|
||||
export async function SponsorshipRequestsTemplate({
|
||||
searchParams,
|
||||
}: SponsorshipRequestsTemplateProps) {
|
||||
const pageQuery = new SponsorshipRequestsPageQuery();
|
||||
const viewDataBuilder = new SponsorshipRequestsPageViewDataBuilder();
|
||||
const acceptMutation = new AcceptSponsorshipRequestMutation();
|
||||
const rejectMutation = new RejectSponsorshipRequestMutation();
|
||||
|
||||
const getEntityIcon = (type: 'driver' | 'team' | 'race' | 'season') => {
|
||||
switch (type) {
|
||||
case 'driver':
|
||||
return User;
|
||||
case 'team':
|
||||
return Users;
|
||||
case 'race':
|
||||
return Trophy;
|
||||
case 'season':
|
||||
return Trophy;
|
||||
default:
|
||||
return Building;
|
||||
}
|
||||
};
|
||||
|
||||
const getEntityLink = (type: 'driver' | 'team' | 'race' | 'season', id: string) => {
|
||||
switch (type) {
|
||||
case 'driver':
|
||||
return `/drivers/${id}`;
|
||||
case 'team':
|
||||
return `/teams/${id}`;
|
||||
case 'race':
|
||||
return `/races/${id}`;
|
||||
case 'season':
|
||||
return `/leagues/${id}/sponsorships`;
|
||||
default:
|
||||
return '#';
|
||||
}
|
||||
};
|
||||
const queryResult = await pageQuery.execute(searchParams);
|
||||
|
||||
if (queryResult.isErr()) {
|
||||
// Handle error - redirect or show error page
|
||||
throw new Error('Failed to load sponsorship requests');
|
||||
}
|
||||
|
||||
const viewData = viewDataBuilder.build(queryResult.unwrap());
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
<Breadcrumbs
|
||||
items={[
|
||||
{ label: 'Profile', href: '/profile' },
|
||||
{ label: 'Sponsorship Requests' },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 mt-6 mb-8">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-performance-green/10 border border-performance-green/30">
|
||||
<Handshake className="w-7 h-7 text-performance-green" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Sponsorship Requests</h1>
|
||||
<p className="text-sm text-gray-400">
|
||||
Manage sponsorship requests for your profile, teams, and leagues
|
||||
</p>
|
||||
</div>
|
||||
{totalRequests > 0 && (
|
||||
<div className="ml-auto px-3 py-1 rounded-full bg-performance-green/20 text-performance-green text-sm font-semibold">
|
||||
{totalRequests} pending
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{data.length === 0 ? (
|
||||
<Card>
|
||||
<div className="text-center py-12">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
|
||||
<Handshake className="w-8 h-8 text-gray-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-white mb-2">No Pending Requests</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
You don't have any pending sponsorship requests at the moment.
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Sponsors can apply to sponsor your profile, teams, or leagues you manage.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{data.map((section) => {
|
||||
const Icon = getEntityIcon(section.entityType);
|
||||
const entityLink = getEntityLink(section.entityType, section.entityId);
|
||||
|
||||
return (
|
||||
<Card key={`${section.entityType}-${section.entityId}`}>
|
||||
{/* Section Header */}
|
||||
<div className="flex items-center justify-between mb-6 pb-4 border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-iron-gray/50">
|
||||
<Icon className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-white">{section.entityName}</h2>
|
||||
<p className="text-xs text-gray-500 capitalize">{section.entityType}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href={entityLink}
|
||||
className="flex items-center gap-1 text-sm text-primary-blue hover:text-primary-blue/80 transition-colors"
|
||||
>
|
||||
View {section.entityType === 'season' ? 'Sponsorships' : section.entityType}
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Requests */}
|
||||
<PendingSponsorshipRequests
|
||||
entityType={section.entityType}
|
||||
entityId={section.entityId}
|
||||
entityName={section.entityName}
|
||||
requests={section.requests}
|
||||
onAccept={onAccept}
|
||||
onReject={onReject}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info Card */}
|
||||
<Card className="mt-8 bg-gradient-to-r from-primary-blue/5 to-transparent border-primary-blue/20">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/20 flex-shrink-0">
|
||||
<Building className="w-5 h-5 text-primary-blue" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white mb-1">How Sponsorships Work</h3>
|
||||
<p className="text-xs text-gray-400 leading-relaxed">
|
||||
Sponsors can apply to sponsor your driver profile, teams you manage, or leagues you administer.
|
||||
Review each request carefully - accepting will activate the sponsorship and the sponsor will be
|
||||
charged. You'll receive the payment minus a 10% platform fee.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<SponsorshipRequestsClient
|
||||
viewData={viewData}
|
||||
acceptMutation={acceptMutation}
|
||||
rejectMutation={rejectMutation}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
194
apps/website/templates/auth/ForgotPasswordTemplate.tsx
Normal file
194
apps/website/templates/auth/ForgotPasswordTemplate.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* Forgot Password Template
|
||||
*
|
||||
* Pure presentation component that accepts ViewData only.
|
||||
* No business logic, no state management.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
ArrowLeft,
|
||||
AlertCircle,
|
||||
Flag,
|
||||
Shield,
|
||||
CheckCircle2,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { ForgotPasswordViewData } from '@/lib/builders/view-data/ForgotPasswordViewDataBuilder';
|
||||
|
||||
interface ForgotPasswordTemplateProps {
|
||||
viewData: ForgotPasswordViewData;
|
||||
formActions: {
|
||||
setFormData: React.Dispatch<React.SetStateAction<{ email: string }>>;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
setShowSuccess: (show: boolean) => void;
|
||||
};
|
||||
mutationState: {
|
||||
isPending: boolean;
|
||||
error: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export function ForgotPasswordTemplate({ viewData, formActions, mutationState }: ForgotPasswordTemplateProps) {
|
||||
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-md">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Reset Password</Heading>
|
||||
<p className="text-gray-400">
|
||||
Enter your email and we will send you a reset link
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
{!viewData.showSuccess ? (
|
||||
<form onSubmit={formActions.handleSubmit} className="relative space-y-5">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={viewData.formState.fields.email.value}
|
||||
onChange={(e) => formActions.setFormData({ email: e.target.value })}
|
||||
error={!!viewData.formState.fields.email.error}
|
||||
errorMessage={viewData.formState.fields.email.error}
|
||||
placeholder="you@example.com"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{mutationState.error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
|
||||
>
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-400">{mutationState.error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={mutationState.isPending}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{mutationState.isPending ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Shield className="w-4 h-4" />
|
||||
Send Reset Link
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Back to Login */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="text-sm text-primary-blue hover:underline flex items-center justify-center gap-1"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="relative space-y-4"
|
||||
>
|
||||
<div className="flex items-start gap-3 p-4 rounded-lg bg-performance-green/10 border border-performance-green/30">
|
||||
<CheckCircle2 className="w-6 h-6 text-performance-green flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-performance-green font-medium">{viewData.successMessage}</p>
|
||||
{viewData.magicLink && (
|
||||
<div className="mt-2">
|
||||
<p className="text-xs text-gray-400 mb-1">Development Mode - Magic Link:</p>
|
||||
<div className="bg-iron-gray p-2 rounded border border-charcoal-outline">
|
||||
<code className="text-xs text-primary-blue break-all">
|
||||
{viewData.magicLink}
|
||||
</code>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500 mt-1">
|
||||
In production, this would be sent via email
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => window.location.href = '/auth/login'}
|
||||
className="w-full"
|
||||
>
|
||||
Return to Login
|
||||
</Button>
|
||||
</motion.div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="mt-6 flex items-center justify-center gap-6 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure reset process</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
<span>15 minute expiration</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
Need help?{' '}
|
||||
<Link href="/support" className="text-gray-400 hover:underline">
|
||||
Contact support
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
299
apps/website/templates/auth/LoginTemplate.tsx
Normal file
299
apps/website/templates/auth/LoginTemplate.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* Login Template
|
||||
*
|
||||
* Pure presentation component that accepts ViewData only.
|
||||
* No business logic, no state management.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
LogIn,
|
||||
AlertCircle,
|
||||
Flag,
|
||||
Shield,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
|
||||
import UserRolesPreview from '@/components/auth/UserRolesPreview';
|
||||
import AuthWorkflowMockup from '@/components/auth/AuthWorkflowMockup';
|
||||
import { LoginViewData, FormState } from '@/lib/builders/view-data/LoginViewDataBuilder';
|
||||
|
||||
interface LoginTemplateProps {
|
||||
viewData: LoginViewData;
|
||||
formActions: {
|
||||
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
setFormState: React.Dispatch<React.SetStateAction<FormState>>;
|
||||
setShowPassword: (show: boolean) => void;
|
||||
setShowErrorDetails: (show: boolean) => void;
|
||||
};
|
||||
mutationState: {
|
||||
isPending: boolean;
|
||||
error: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export function LoginTemplate({ viewData, formActions, mutationState }: LoginTemplateProps) {
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite flex">
|
||||
{/* 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>
|
||||
|
||||
{/* Left Side - Info Panel (Hidden on mobile) */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative items-center justify-center p-12">
|
||||
<div className="max-w-lg">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="flex h-12 w-12 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-6 h-6 text-primary-blue" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-white">GridPilot</span>
|
||||
</div>
|
||||
|
||||
<Heading level={2} className="text-white mb-4">
|
||||
Your Sim Racing Infrastructure
|
||||
</Heading>
|
||||
|
||||
<p className="text-gray-400 text-lg mb-8">
|
||||
Manage leagues, track performance, join teams, and compete with drivers worldwide. One account, multiple roles.
|
||||
</p>
|
||||
|
||||
{/* Role Cards */}
|
||||
<UserRolesPreview variant="full" />
|
||||
|
||||
{/* Workflow Mockup */}
|
||||
<AuthWorkflowMockup />
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="mt-8 flex items-center gap-6 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure login</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm">iRacing verified</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Login Form */}
|
||||
<div className="flex-1 flex items-center justify-center px-4 py-12">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Mobile Logo/Header */}
|
||||
<div className="text-center mb-8 lg:hidden">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Welcome Back</Heading>
|
||||
<p className="text-gray-400">
|
||||
Sign in to continue to GridPilot
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Desktop Header */}
|
||||
<div className="hidden lg:block text-center mb-8">
|
||||
<Heading level={2} className="mb-2">Welcome Back</Heading>
|
||||
<p className="text-gray-400">
|
||||
Sign in to access your racing dashboard
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
<form onSubmit={formActions.handleSubmit} className="relative space-y-5">
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={viewData.formState.fields.email.value as string}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.email.error}
|
||||
errorMessage={viewData.formState.fields.email.error}
|
||||
placeholder="you@example.com"
|
||||
disabled={viewData.formState.isSubmitting || mutationState.isPending}
|
||||
className="pl-10"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300">
|
||||
Password
|
||||
</label>
|
||||
<Link href="/auth/forgot-password" className="text-xs text-primary-blue hover:underline">
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type={viewData.showPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.password.value as string}
|
||||
onChange={formActions.handleChange}
|
||||
error={!!viewData.formState.fields.password.error}
|
||||
errorMessage={viewData.formState.fields.password.error}
|
||||
placeholder="••••••••"
|
||||
disabled={viewData.formState.isSubmitting || mutationState.isPending}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => formActions.setShowPassword(!viewData.showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{viewData.showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Remember Me */}
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
id="rememberMe"
|
||||
name="rememberMe"
|
||||
type="checkbox"
|
||||
checked={viewData.formState.fields.rememberMe.value as boolean}
|
||||
onChange={formActions.handleChange}
|
||||
disabled={viewData.formState.isSubmitting || mutationState.isPending}
|
||||
className="w-4 h-4 rounded border-charcoal-outline bg-iron-gray text-primary-blue focus:ring-primary-blue focus:ring-offset-0"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">Keep me signed in</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Insufficient Permissions Message */}
|
||||
<AnimatePresence>
|
||||
{viewData.hasInsufficientPermissions && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="p-4 rounded-lg bg-warning-amber/10 border border-warning-amber/30"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-warning-amber flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm text-gray-300">
|
||||
<strong className="text-warning-amber">Insufficient Permissions</strong>
|
||||
<p className="mt-1">
|
||||
You don't have permission to access that page. Please log in with an account that has the required role.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Enhanced Error Display */}
|
||||
<AnimatePresence>
|
||||
{viewData.submitError && (
|
||||
<EnhancedFormError
|
||||
error={new Error(viewData.submitError)}
|
||||
onDismiss={() => {
|
||||
formActions.setFormState((prev: FormState) => ({ ...prev, submitError: undefined }));
|
||||
}}
|
||||
showDeveloperDetails={viewData.showErrorDetails}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={viewData.formState.isSubmitting || mutationState.isPending}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{mutationState.isPending || viewData.formState.isSubmitting ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Signing in...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign In
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-charcoal-outline" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="px-4 bg-iron-gray text-gray-500">or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sign Up Link */}
|
||||
<p className="mt-6 text-center text-sm text-gray-400">
|
||||
Don't have an account?{''}
|
||||
<Link
|
||||
href={`/auth/signup${viewData.returnTo !== '/dashboard' ? `?returnTo=${encodeURIComponent(viewData.returnTo)}` : ''}`}
|
||||
className="text-primary-blue hover:underline font-medium"
|
||||
>
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
{/* Name Immutability Notice */}
|
||||
<div className="mt-6 p-4 rounded-lg bg-iron-gray/30 border border-charcoal-outline">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-gray-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="text-xs text-gray-400">
|
||||
<strong>Note:</strong> Your display name cannot be changed after signup. Please ensure it's correct when creating your account.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
By signing in, you agree to our{''}
|
||||
<Link href="/terms" className="text-gray-400 hover:underline">Terms of Service</Link>
|
||||
{''}and{''}
|
||||
<Link href="/privacy" className="text-gray-400 hover:underline">Privacy Policy</Link>
|
||||
</p>
|
||||
|
||||
{/* Mobile Role Info */}
|
||||
<UserRolesPreview variant="compact" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
231
apps/website/templates/auth/ResetPasswordTemplate.tsx
Normal file
231
apps/website/templates/auth/ResetPasswordTemplate.tsx
Normal file
@@ -0,0 +1,231 @@
|
||||
/**
|
||||
* Reset Password Template
|
||||
*
|
||||
* Pure presentation component that accepts ViewData only.
|
||||
* No business logic, no state management.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
AlertCircle,
|
||||
Flag,
|
||||
Shield,
|
||||
CheckCircle2,
|
||||
ArrowLeft,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { ResetPasswordViewData } from '@/lib/builders/view-data/ResetPasswordViewDataBuilder';
|
||||
|
||||
interface ResetPasswordTemplateProps extends ResetPasswordViewData {
|
||||
formActions: {
|
||||
setFormData: React.Dispatch<React.SetStateAction<{ newPassword: string; confirmPassword: string }>>;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
setShowSuccess: (show: boolean) => void;
|
||||
setShowPassword: (show: boolean) => void;
|
||||
setShowConfirmPassword: (show: boolean) => void;
|
||||
};
|
||||
uiState: {
|
||||
showPassword: boolean;
|
||||
showConfirmPassword: boolean;
|
||||
};
|
||||
mutationState: {
|
||||
isPending: boolean;
|
||||
error: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export function ResetPasswordTemplate(props: ResetPasswordTemplateProps) {
|
||||
const { formActions, uiState, mutationState, ...viewData } = props;
|
||||
|
||||
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-md">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Reset Password</Heading>
|
||||
<p className="text-gray-400">
|
||||
Create a new secure password for your account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
{!viewData.showSuccess ? (
|
||||
<form onSubmit={formActions.handleSubmit} className="relative space-y-5">
|
||||
{/* New Password */}
|
||||
<div>
|
||||
<label htmlFor="newPassword" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
New Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
type={uiState.showPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.newPassword.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, newPassword: e.target.value }))}
|
||||
error={!!viewData.formState.fields.newPassword.error}
|
||||
errorMessage={viewData.formState.fields.newPassword.error}
|
||||
placeholder="••••••••"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => formActions.setShowPassword(!uiState.showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{uiState.showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type={uiState.showConfirmPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.confirmPassword.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
error={!!viewData.formState.fields.confirmPassword.error}
|
||||
errorMessage={viewData.formState.fields.confirmPassword.error}
|
||||
placeholder="••••••••"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{uiState.showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{mutationState.error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-red-500/10 border border-red-500/30"
|
||||
>
|
||||
<AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" />
|
||||
<p className="text-sm text-red-400">{mutationState.error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={mutationState.isPending}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{mutationState.isPending ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Resetting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Shield className="w-4 h-4" />
|
||||
Reset Password
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Back to Login */}
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="/auth/login"
|
||||
className="text-sm text-primary-blue hover:underline flex items-center justify-center gap-1"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Login
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="relative space-y-4"
|
||||
>
|
||||
<div className="flex items-start gap-3 p-4 rounded-lg bg-performance-green/10 border border-performance-green/30">
|
||||
<CheckCircle2 className="w-6 h-6 text-performance-green flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm text-performance-green font-medium">{viewData.successMessage}</p>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
Your password has been successfully reset
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => window.location.href = '/auth/login'}
|
||||
className="w-full"
|
||||
>
|
||||
Return to Login
|
||||
</Button>
|
||||
</motion.div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="mt-6 flex items-center justify-center gap-6 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure password reset</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
<span>Encrypted transmission</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
Need help?{' '}
|
||||
<Link href="/support" className="text-gray-400 hover:underline">
|
||||
Contact support
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
454
apps/website/templates/auth/SignupTemplate.tsx
Normal file
454
apps/website/templates/auth/SignupTemplate.tsx
Normal file
@@ -0,0 +1,454 @@
|
||||
/**
|
||||
* Signup Template
|
||||
*
|
||||
* Pure presentation component that accepts ViewData only.
|
||||
* No business logic, no state management.
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Mail,
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
UserPlus,
|
||||
AlertCircle,
|
||||
Flag,
|
||||
User,
|
||||
Check,
|
||||
X,
|
||||
Car,
|
||||
Users,
|
||||
Trophy,
|
||||
Shield,
|
||||
Sparkles,
|
||||
} from 'lucide-react';
|
||||
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Heading from '@/components/ui/Heading';
|
||||
import { SignupViewData } from '@/lib/builders/view-data/SignupViewDataBuilder';
|
||||
import { checkPasswordStrength } from '@/lib/utils/validation';
|
||||
|
||||
interface SignupTemplateProps {
|
||||
viewData: SignupViewData;
|
||||
formActions: {
|
||||
setFormData: React.Dispatch<React.SetStateAction<{ firstName: string; lastName: string; email: string; password: string; confirmPassword: string }>>;
|
||||
handleSubmit: (e: React.FormEvent<HTMLFormElement>) => Promise<void>;
|
||||
setShowPassword: (show: boolean) => void;
|
||||
setShowConfirmPassword: (show: boolean) => void;
|
||||
};
|
||||
uiState: {
|
||||
showPassword: boolean;
|
||||
showConfirmPassword: boolean;
|
||||
};
|
||||
mutationState: {
|
||||
isPending: boolean;
|
||||
error: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
const USER_ROLES = [
|
||||
{
|
||||
icon: Car,
|
||||
title: 'Driver',
|
||||
description: 'Race, track stats, join teams',
|
||||
color: 'primary-blue',
|
||||
},
|
||||
{
|
||||
icon: Trophy,
|
||||
title: 'League Admin',
|
||||
description: 'Organize leagues and events',
|
||||
color: 'performance-green',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Team Manager',
|
||||
description: 'Manage team and drivers',
|
||||
color: 'purple-400',
|
||||
},
|
||||
];
|
||||
|
||||
const FEATURES = [
|
||||
'Track your racing statistics and progress',
|
||||
'Join or create competitive leagues',
|
||||
'Build or join racing teams',
|
||||
'Connect your iRacing account',
|
||||
'Compete in organized events',
|
||||
'Access detailed performance analytics',
|
||||
];
|
||||
|
||||
export function SignupTemplate({ viewData, formActions, uiState, mutationState }: SignupTemplateProps) {
|
||||
const passwordStrength = checkPasswordStrength(viewData.formState.fields.password.value);
|
||||
|
||||
const passwordRequirements = [
|
||||
{ met: viewData.formState.fields.password.value.length >= 8, label: 'At least 8 characters' },
|
||||
{ met: /[a-z]/.test(viewData.formState.fields.password.value) && /[A-Z]/.test(viewData.formState.fields.password.value), label: 'Upper and lowercase letters' },
|
||||
{ met: /\d/.test(viewData.formState.fields.password.value), label: 'At least one number' },
|
||||
{ met: /[^a-zA-Z\d]/.test(viewData.formState.fields.password.value), label: 'At least one special character' },
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-deep-graphite flex">
|
||||
{/* 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>
|
||||
|
||||
{/* Left Side - Info Panel (Hidden on mobile) */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative items-center justify-center p-12">
|
||||
<div className="max-w-lg">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="flex h-12 w-12 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-6 h-6 text-primary-blue" />
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-white">GridPilot</span>
|
||||
</div>
|
||||
|
||||
<Heading level={2} className="text-white mb-4">
|
||||
Start Your Racing Journey
|
||||
</Heading>
|
||||
|
||||
<p className="text-gray-400 text-lg mb-8">
|
||||
Join thousands of sim racers. One account gives you access to all roles - race as a driver, organize leagues, or manage teams.
|
||||
</p>
|
||||
|
||||
{/* Role Cards */}
|
||||
<div className="space-y-3 mb-8">
|
||||
{USER_ROLES.map((role, index) => (
|
||||
<motion.div
|
||||
key={role.title}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="flex items-center gap-4 p-4 rounded-xl bg-iron-gray/50 border border-charcoal-outline"
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-lg bg-${role.color}/20 flex items-center justify-center`}>
|
||||
<role.icon className={`w-5 h-5 text-${role.color}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-medium">{role.title}</h4>
|
||||
<p className="text-sm text-gray-500">{role.description}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Features List */}
|
||||
<div className="bg-iron-gray/30 rounded-xl border border-charcoal-outline p-5 mb-8">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Sparkles className="w-4 h-4 text-primary-blue" />
|
||||
<span className="text-sm font-medium text-white">What you'll get</span>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{FEATURES.map((feature, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center gap-2 text-sm text-gray-400"
|
||||
>
|
||||
<Check className="w-3.5 h-3.5 text-performance-green flex-shrink-0" />
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="flex items-center gap-6 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Secure signup</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>iRacing integration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side - Signup Form */}
|
||||
<div className="flex-1 flex items-center justify-center px-4 py-12 overflow-y-auto">
|
||||
<div className="relative w-full max-w-md">
|
||||
{/* Mobile Logo/Header */}
|
||||
<div className="text-center mb-8 lg:hidden">
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
|
||||
<Flag className="w-8 h-8 text-primary-blue" />
|
||||
</div>
|
||||
<Heading level={1} className="mb-2">Join GridPilot</Heading>
|
||||
<p className="text-gray-400">
|
||||
Create your account and start racing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Desktop Header */}
|
||||
<div className="hidden lg:block text-center mb-8">
|
||||
<Heading level={2} className="mb-2">Create Account</Heading>
|
||||
<p className="text-gray-400">
|
||||
Get started with your free account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Background accent */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />
|
||||
|
||||
<form onSubmit={formActions.handleSubmit} className="relative space-y-4">
|
||||
{/* First Name */}
|
||||
<div>
|
||||
<label htmlFor="firstName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
First Name
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
type="text"
|
||||
value={viewData.formState.fields.firstName.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, firstName: e.target.value }))}
|
||||
error={!!viewData.formState.fields.firstName.error}
|
||||
errorMessage={viewData.formState.fields.firstName.error}
|
||||
placeholder="John"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10"
|
||||
autoComplete="given-name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Last Name */}
|
||||
<div>
|
||||
<label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Last Name
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
type="text"
|
||||
value={viewData.formState.fields.lastName.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, lastName: e.target.value }))}
|
||||
error={!!viewData.formState.fields.lastName.error}
|
||||
errorMessage={viewData.formState.fields.lastName.error}
|
||||
placeholder="Smith"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10"
|
||||
autoComplete="family-name"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500">Your name will be used as-is and cannot be changed later</p>
|
||||
</div>
|
||||
|
||||
{/* Name Immutability Warning */}
|
||||
<div className="flex items-start gap-3 p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
|
||||
<AlertCircle className="w-5 h-5 text-warning-amber flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm text-warning-amber">
|
||||
<strong>Important:</strong> Your name cannot be changed after signup. Please ensure it's correct.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={viewData.formState.fields.email.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||
error={!!viewData.formState.fields.email.error}
|
||||
errorMessage={viewData.formState.fields.email.error}
|
||||
placeholder="you@example.com"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type={uiState.showPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.password.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, password: e.target.value }))}
|
||||
error={!!viewData.formState.fields.password.error}
|
||||
errorMessage={viewData.formState.fields.password.error}
|
||||
placeholder="••••••••"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => formActions.setShowPassword(!uiState.showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{uiState.showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Password Strength */}
|
||||
{viewData.formState.fields.password.value && (
|
||||
<div className="mt-3 space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
|
||||
<motion.div
|
||||
className={`h-full ${passwordStrength.color}`}
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${(passwordStrength.score / 5) * 100}%` }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs font-medium ${
|
||||
passwordStrength.score <= 1 ? 'text-red-400' :
|
||||
passwordStrength.score <= 2 ? 'text-warning-amber' :
|
||||
passwordStrength.score <= 3 ? 'text-primary-blue' :
|
||||
'text-performance-green'
|
||||
}`}>
|
||||
{passwordStrength.label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-1">
|
||||
{passwordRequirements.map((req, index) => (
|
||||
<div key={index} className="flex items-center gap-1.5 text-xs">
|
||||
{req.met ? (
|
||||
<Check className="w-3 h-3 text-performance-green" />
|
||||
) : (
|
||||
<X className="w-3 h-3 text-gray-500" />
|
||||
)}
|
||||
<span className={req.met ? 'text-gray-300' : 'text-gray-500'}>
|
||||
{req.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Confirm Password */}
|
||||
<div>
|
||||
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type={uiState.showConfirmPassword ? 'text' : 'password'}
|
||||
value={viewData.formState.fields.confirmPassword.value}
|
||||
onChange={(e) => formActions.setFormData(prev => ({ ...prev, confirmPassword: e.target.value }))}
|
||||
error={!!viewData.formState.fields.confirmPassword.error}
|
||||
errorMessage={viewData.formState.fields.confirmPassword.error}
|
||||
placeholder="••••••••"
|
||||
disabled={mutationState.isPending}
|
||||
className="pl-10 pr-10"
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
||||
>
|
||||
{uiState.showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
{viewData.formState.fields.confirmPassword.value && viewData.formState.fields.password.value === viewData.formState.fields.confirmPassword.value && (
|
||||
<p className="mt-1 text-xs text-performance-green flex items-center gap-1">
|
||||
<Check className="w-3 h-3" /> Passwords match
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={mutationState.isPending}
|
||||
className="w-full flex items-center justify-center gap-2"
|
||||
>
|
||||
{mutationState.isPending ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||
Creating account...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Create Account
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-charcoal-outline" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="px-4 bg-iron-gray text-gray-500">or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Login Link */}
|
||||
<p className="mt-6 text-center text-sm text-gray-400">
|
||||
Already have an account?{' '}
|
||||
<Link
|
||||
href={`/auth/login${viewData.returnTo !== '/onboarding' ? `?returnTo=${encodeURIComponent(viewData.returnTo)}` : ''}`}
|
||||
className="text-primary-blue hover:underline font-medium"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
{/* Footer */}
|
||||
<p className="mt-6 text-center text-xs text-gray-500">
|
||||
By creating an account, you agree to our{' '}
|
||||
<Link href="/terms" className="text-gray-400 hover:underline">Terms of Service</Link>
|
||||
{' '}and{' '}
|
||||
<Link href="/privacy" className="text-gray-400 hover:underline">Privacy Policy</Link>
|
||||
</p>
|
||||
|
||||
{/* Mobile Role Info */}
|
||||
<div className="mt-8 lg:hidden">
|
||||
<p className="text-center text-xs text-gray-500 mb-4">One account for all roles</p>
|
||||
<div className="flex justify-center gap-6">
|
||||
{USER_ROLES.map((role) => (
|
||||
<div key={role.title} className="flex flex-col items-center">
|
||||
<div className={`w-8 h-8 rounded-lg bg-${role.color}/20 flex items-center justify-center mb-1`}>
|
||||
<role.icon className={`w-4 h-4 text-${role.color}`} />
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">{role.title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user