79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { LogIn, LogOut, User, Shield, Building2 } from 'lucide-react';
|
|
import type { LoginMode } from '../types';
|
|
|
|
interface LoginSectionProps {
|
|
loginMode: LoginMode;
|
|
loggingIn: boolean;
|
|
onDemoLogin: (role: LoginMode) => void;
|
|
onLogout: () => void;
|
|
}
|
|
|
|
export function LoginSection({ loginMode, loggingIn, onDemoLogin, onLogout }: LoginSectionProps) {
|
|
const loginOptions = [
|
|
{ mode: 'driver' as LoginMode, label: 'Driver', icon: User, color: 'primary-blue', emoji: null },
|
|
{ mode: 'league-owner' as LoginMode, label: 'League Owner', icon: null, color: 'purple-500', emoji: '👑' },
|
|
{ mode: 'league-steward' as LoginMode, label: 'Steward', icon: Shield, color: 'amber-500', emoji: null },
|
|
{ mode: 'league-admin' as LoginMode, label: 'Admin', icon: null, color: 'red-500', emoji: '⚙️' },
|
|
{ mode: 'sponsor' as LoginMode, label: 'Sponsor', icon: Building2, color: 'performance-green', emoji: null },
|
|
{ mode: 'system-owner' as LoginMode, label: 'System Owner', icon: null, color: 'indigo-500', emoji: '👑' },
|
|
{ mode: 'super-admin' as LoginMode, label: 'Super Admin', icon: null, color: 'pink-500', emoji: '⚡' },
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<LogIn className="w-4 h-4 text-gray-400" />
|
|
<span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
|
|
Demo Login
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{loginOptions.map((option) => {
|
|
const Icon = option.icon;
|
|
const isSelected = loginMode === option.mode;
|
|
|
|
return (
|
|
<button
|
|
key={option.mode}
|
|
onClick={() => onDemoLogin(option.mode)}
|
|
disabled={loggingIn || isSelected}
|
|
className={`
|
|
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
|
${isSelected
|
|
? `bg-${option.color}/20 border-${option.color}/50 text-${option.color}`
|
|
: 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
|
|
}
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
`}
|
|
>
|
|
{option.emoji ? (
|
|
<span className="text-xs">{option.emoji}</span>
|
|
) : Icon ? (
|
|
<Icon className="w-4 h-4" />
|
|
) : null}
|
|
{isSelected ? `✓ ${option.label}` : `Login as ${option.label}`}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
{loginMode !== 'none' && (
|
|
<button
|
|
onClick={onLogout}
|
|
disabled={loggingIn}
|
|
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-red-500/30 bg-red-500/10 text-red-400 text-sm font-medium hover:bg-red-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
Logout
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-[10px] text-gray-600 mt-2">
|
|
Test different user roles for demo purposes. Dashboard works for all roles.
|
|
</p>
|
|
</div>
|
|
);
|
|
} |