auth
This commit is contained in:
@@ -102,7 +102,7 @@ const urgencyOptions: UrgencyOption[] = [
|
||||
},
|
||||
];
|
||||
|
||||
type LoginMode = 'none' | 'driver' | 'sponsor';
|
||||
type LoginMode = 'none' | 'driver' | 'sponsor' | 'league-owner' | 'league-steward' | 'league-admin' | 'system-owner' | 'super-admin';
|
||||
|
||||
export default function DevToolbar() {
|
||||
const router = useRouter();
|
||||
@@ -118,48 +118,92 @@ export default function DevToolbar() {
|
||||
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
// Sync login mode with actual cookie state on mount
|
||||
// Sync login mode with actual session state on mount
|
||||
useEffect(() => {
|
||||
if (typeof document !== 'undefined') {
|
||||
// Check for actual session cookie first
|
||||
const cookies = document.cookie.split(';');
|
||||
const demoModeCookie = cookies.find(c => c.trim().startsWith('gridpilot_demo_mode='));
|
||||
if (demoModeCookie) {
|
||||
const value = demoModeCookie.split('=')[1]?.trim();
|
||||
if (value === 'sponsor') {
|
||||
setLoginMode('sponsor');
|
||||
} else if (value === 'driver') {
|
||||
setLoginMode('driver');
|
||||
} else {
|
||||
setLoginMode('none');
|
||||
}
|
||||
const sessionCookie = cookies.find(c => c.trim().startsWith('gp_session='));
|
||||
|
||||
if (sessionCookie) {
|
||||
// User has a session cookie, check if it's valid by calling the API
|
||||
fetch('/api/auth/session', {
|
||||
method: 'GET',
|
||||
credentials: 'include'
|
||||
})
|
||||
.then(res => {
|
||||
if (res.ok) {
|
||||
return res.json();
|
||||
}
|
||||
throw new Error('No valid session');
|
||||
})
|
||||
.then(session => {
|
||||
if (session && session.user) {
|
||||
// Determine login mode based on user email patterns
|
||||
const email = session.user.email?.toLowerCase() || '';
|
||||
const displayName = session.user.displayName?.toLowerCase() || '';
|
||||
|
||||
let mode: LoginMode = 'none';
|
||||
if (email.includes('sponsor') || displayName.includes('sponsor')) {
|
||||
mode = 'sponsor';
|
||||
} else if (email.includes('league-owner') || displayName.includes('owner')) {
|
||||
mode = 'league-owner';
|
||||
} else if (email.includes('league-steward') || displayName.includes('steward')) {
|
||||
mode = 'league-steward';
|
||||
} else if (email.includes('league-admin') || displayName.includes('admin')) {
|
||||
mode = 'league-admin';
|
||||
} else if (email.includes('system-owner') || displayName.includes('system owner')) {
|
||||
mode = 'system-owner';
|
||||
} else if (email.includes('super-admin') || displayName.includes('super admin')) {
|
||||
mode = 'super-admin';
|
||||
} else if (email.includes('driver') || displayName.includes('demo')) {
|
||||
mode = 'driver';
|
||||
}
|
||||
|
||||
setLoginMode(mode);
|
||||
} else {
|
||||
setLoginMode('none');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Session invalid or expired
|
||||
setLoginMode('none');
|
||||
});
|
||||
} else {
|
||||
// Default to driver mode if no cookie (for demo purposes)
|
||||
setLoginMode('driver');
|
||||
// No session cookie means not logged in
|
||||
setLoginMode('none');
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleLoginAsDriver = async () => {
|
||||
const handleDemoLogin = async (role: LoginMode) => {
|
||||
if (role === 'none') return;
|
||||
|
||||
setLoggingIn(true);
|
||||
try {
|
||||
// Demo: Set cookie to indicate driver mode
|
||||
document.cookie = 'gridpilot_demo_mode=driver; path=/; max-age=86400';
|
||||
setLoginMode('driver');
|
||||
// Refresh to update all components that depend on demo mode
|
||||
window.location.reload();
|
||||
} finally {
|
||||
setLoggingIn(false);
|
||||
}
|
||||
};
|
||||
// Use the demo login API
|
||||
const response = await fetch('/api/auth/demo-login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ role }),
|
||||
});
|
||||
|
||||
const handleLoginAsSponsor = async () => {
|
||||
setLoggingIn(true);
|
||||
try {
|
||||
// Demo: Set cookie to indicate sponsor mode
|
||||
document.cookie = 'gridpilot_demo_mode=sponsor; path=/; max-age=86400';
|
||||
setLoginMode('sponsor');
|
||||
// Navigate to sponsor dashboard
|
||||
window.location.href = '/sponsor/dashboard';
|
||||
if (!response.ok) {
|
||||
throw new Error('Demo login failed');
|
||||
}
|
||||
|
||||
setLoginMode(role);
|
||||
|
||||
// Navigate based on role
|
||||
if (role === 'sponsor') {
|
||||
window.location.href = '/sponsor/dashboard';
|
||||
} else {
|
||||
// For driver and league roles, go to dashboard
|
||||
window.location.href = '/dashboard';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Demo login failed:', error);
|
||||
alert('Demo login failed. Please check the console for details.');
|
||||
} finally {
|
||||
setLoggingIn(false);
|
||||
}
|
||||
@@ -168,11 +212,15 @@ export default function DevToolbar() {
|
||||
const handleLogout = async () => {
|
||||
setLoggingIn(true);
|
||||
try {
|
||||
// Demo: Clear demo mode cookie
|
||||
document.cookie = 'gridpilot_demo_mode=; path=/; max-age=0';
|
||||
// Call logout API
|
||||
await fetch('/api/auth/logout', { method: 'POST' });
|
||||
|
||||
setLoginMode('none');
|
||||
// Refresh to update all components
|
||||
window.location.href = '/';
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error);
|
||||
alert('Logout failed. Please check the console for details.');
|
||||
} finally {
|
||||
setLoggingIn(false);
|
||||
}
|
||||
@@ -561,8 +609,9 @@ export default function DevToolbar() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* Driver Login */}
|
||||
<button
|
||||
onClick={handleLoginAsDriver}
|
||||
onClick={() => handleDemoLogin('driver')}
|
||||
disabled={loggingIn || loginMode === 'driver'}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
||||
@@ -574,11 +623,63 @@ export default function DevToolbar() {
|
||||
`}
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
{loginMode === 'driver' ? 'Logged in as Driver' : 'Login as Driver'}
|
||||
{loginMode === 'driver' ? '✓ Driver' : 'Login as Driver'}
|
||||
</button>
|
||||
|
||||
{/* League Owner Login */}
|
||||
<button
|
||||
onClick={handleLoginAsSponsor}
|
||||
onClick={() => handleDemoLogin('league-owner')}
|
||||
disabled={loggingIn || loginMode === 'league-owner'}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
||||
${loginMode === 'league-owner'
|
||||
? 'bg-purple-500/20 border-purple-500/50 text-purple-400'
|
||||
: 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<span className="text-xs">👑</span>
|
||||
{loginMode === 'league-owner' ? '✓ League Owner' : 'Login as League Owner'}
|
||||
</button>
|
||||
|
||||
{/* League Steward Login */}
|
||||
<button
|
||||
onClick={() => handleDemoLogin('league-steward')}
|
||||
disabled={loggingIn || loginMode === 'league-steward'}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
||||
${loginMode === 'league-steward'
|
||||
? 'bg-amber-500/20 border-amber-500/50 text-amber-400'
|
||||
: 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<Shield className="w-4 h-4" />
|
||||
{loginMode === 'league-steward' ? '✓ Steward' : 'Login as Steward'}
|
||||
</button>
|
||||
|
||||
{/* League Admin Login */}
|
||||
<button
|
||||
onClick={() => handleDemoLogin('league-admin')}
|
||||
disabled={loggingIn || loginMode === 'league-admin'}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
||||
${loginMode === 'league-admin'
|
||||
? 'bg-red-500/20 border-red-500/50 text-red-400'
|
||||
: 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<span className="text-xs">⚙️</span>
|
||||
{loginMode === 'league-admin' ? '✓ Admin' : 'Login as Admin'}
|
||||
</button>
|
||||
|
||||
{/* Sponsor Login */}
|
||||
<button
|
||||
onClick={() => handleDemoLogin('sponsor')}
|
||||
disabled={loggingIn || loginMode === 'sponsor'}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
||||
@@ -590,7 +691,41 @@ export default function DevToolbar() {
|
||||
`}
|
||||
>
|
||||
<Building2 className="w-4 h-4" />
|
||||
{loginMode === 'sponsor' ? 'Logged in as Sponsor' : 'Login as Sponsor'}
|
||||
{loginMode === 'sponsor' ? '✓ Sponsor' : 'Login as Sponsor'}
|
||||
</button>
|
||||
|
||||
{/* System Owner Login */}
|
||||
<button
|
||||
onClick={() => handleDemoLogin('system-owner')}
|
||||
disabled={loggingIn || loginMode === 'system-owner'}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
||||
${loginMode === 'system-owner'
|
||||
? 'bg-indigo-500/20 border-indigo-500/50 text-indigo-400'
|
||||
: 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<span className="text-xs">👑</span>
|
||||
{loginMode === 'system-owner' ? '✓ System Owner' : 'Login as System Owner'}
|
||||
</button>
|
||||
|
||||
{/* Super Admin Login */}
|
||||
<button
|
||||
onClick={() => handleDemoLogin('super-admin')}
|
||||
disabled={loggingIn || loginMode === 'super-admin'}
|
||||
className={`
|
||||
w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
|
||||
${loginMode === 'super-admin'
|
||||
? 'bg-pink-500/20 border-pink-500/50 text-pink-400'
|
||||
: 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
|
||||
}
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
`}
|
||||
>
|
||||
<span className="text-xs">⚡</span>
|
||||
{loginMode === 'super-admin' ? '✓ Super Admin' : 'Login as Super Admin'}
|
||||
</button>
|
||||
|
||||
{loginMode !== 'none' && (
|
||||
@@ -606,7 +741,7 @@ export default function DevToolbar() {
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] text-gray-600 mt-2">
|
||||
Switch between driver and sponsor views for demo purposes.
|
||||
Test different user roles for demo purposes. Dashboard works for all roles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,6 +28,43 @@ function useSponsorMode(): boolean {
|
||||
return isSponsor;
|
||||
}
|
||||
|
||||
// Hook to detect demo user mode
|
||||
function useDemoUserMode(): { isDemo: boolean; demoRole: string | null } {
|
||||
const { session } = useAuth();
|
||||
const [demoMode, setDemoMode] = useState({ isDemo: false, demoRole: null as string | null });
|
||||
|
||||
useEffect(() => {
|
||||
if (!session?.user) {
|
||||
setDemoMode({ isDemo: false, demoRole: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const email = session.user.email?.toLowerCase() || '';
|
||||
const displayName = session.user.displayName?.toLowerCase() || '';
|
||||
const primaryDriverId = (session.user as any).primaryDriverId || '';
|
||||
|
||||
// Check if this is a demo user
|
||||
if (email.includes('demo') ||
|
||||
displayName.includes('demo') ||
|
||||
primaryDriverId.startsWith('demo-')) {
|
||||
|
||||
let role = 'driver';
|
||||
if (email.includes('sponsor')) role = 'sponsor';
|
||||
else if (email.includes('league-owner') || displayName.includes('owner')) role = 'league-owner';
|
||||
else if (email.includes('league-steward') || displayName.includes('steward')) role = 'league-steward';
|
||||
else if (email.includes('league-admin') || displayName.includes('admin')) role = 'league-admin';
|
||||
else if (email.includes('system-owner') || displayName.includes('system owner')) role = 'system-owner';
|
||||
else if (email.includes('super-admin') || displayName.includes('super admin')) role = 'super-admin';
|
||||
|
||||
setDemoMode({ isDemo: true, demoRole: role });
|
||||
} else {
|
||||
setDemoMode({ isDemo: false, demoRole: null });
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
return demoMode;
|
||||
}
|
||||
|
||||
// Sponsor Pill Component - matches the style of DriverSummaryPill
|
||||
function SponsorSummaryPill({
|
||||
onClick,
|
||||
@@ -88,16 +125,17 @@ export default function UserPill() {
|
||||
const [driver, setDriver] = useState<DriverViewModel | null>(null);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const isSponsorMode = useSponsorMode();
|
||||
const { isDemo, demoRole } = useDemoUserMode();
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
|
||||
const primaryDriverId = useEffectiveDriverId();
|
||||
|
||||
// Load driver data only for non-demo users
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
async function loadDriver() {
|
||||
if (!primaryDriverId) {
|
||||
if (!primaryDriverId || isDemo) {
|
||||
if (!cancelled) {
|
||||
setDriver(null);
|
||||
}
|
||||
@@ -115,10 +153,25 @@ export default function UserPill() {
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [primaryDriverId, driverService]);
|
||||
}, [primaryDriverId, driverService, isDemo]);
|
||||
|
||||
const data = useMemo(() => {
|
||||
if (!session?.user || !primaryDriverId || !driver) {
|
||||
if (!session?.user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Demo users don't have real driver data
|
||||
if (isDemo) {
|
||||
return {
|
||||
isDemo: true,
|
||||
demoRole,
|
||||
displayName: session.user.displayName,
|
||||
email: session.user.email,
|
||||
avatarUrl: session.user.avatarUrl,
|
||||
};
|
||||
}
|
||||
|
||||
if (!primaryDriverId || !driver) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -134,8 +187,10 @@ export default function UserPill() {
|
||||
avatarSrc,
|
||||
rating,
|
||||
rank,
|
||||
isDemo: false,
|
||||
demoRole: null,
|
||||
};
|
||||
}, [session, driver, primaryDriverId]);
|
||||
}, [session, driver, primaryDriverId, isDemo, demoRole]);
|
||||
|
||||
// Close menu when clicking outside
|
||||
useEffect(() => {
|
||||
@@ -151,6 +206,143 @@ export default function UserPill() {
|
||||
return () => document.removeEventListener('click', handleClickOutside);
|
||||
}, [isMenuOpen]);
|
||||
|
||||
// Logout handler for demo users
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
// Call the logout API
|
||||
await fetch('/api/auth/logout', { method: 'POST' });
|
||||
// Clear any demo mode cookies
|
||||
document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
// Redirect to home
|
||||
window.location.href = '/';
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error);
|
||||
window.location.href = '/';
|
||||
}
|
||||
};
|
||||
|
||||
// Demo user UI
|
||||
if (isDemo && data?.isDemo) {
|
||||
const roleLabel = {
|
||||
'driver': 'Driver',
|
||||
'sponsor': 'Sponsor',
|
||||
'league-owner': 'League Owner',
|
||||
'league-steward': 'League Steward',
|
||||
'league-admin': 'League Admin',
|
||||
'system-owner': 'System Owner',
|
||||
'super-admin': 'Super Admin',
|
||||
}[demoRole || 'driver'];
|
||||
|
||||
const roleColor = {
|
||||
'driver': 'text-primary-blue',
|
||||
'sponsor': 'text-performance-green',
|
||||
'league-owner': 'text-purple-400',
|
||||
'league-steward': 'text-amber-400',
|
||||
'league-admin': 'text-red-400',
|
||||
'system-owner': 'text-indigo-400',
|
||||
'super-admin': 'text-pink-400',
|
||||
}[demoRole || 'driver'];
|
||||
|
||||
return (
|
||||
<div className="relative inline-flex items-center" data-user-pill>
|
||||
<motion.button
|
||||
onClick={() => setIsMenuOpen((open) => !open)}
|
||||
className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-primary-blue/50 transition-all duration-200"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
{data.avatarUrl ? (
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
||||
<img
|
||||
src={data.avatarUrl}
|
||||
alt={data.displayName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-primary-blue">DEMO</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary-blue border-2 border-deep-graphite" />
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="hidden sm:flex flex-col items-start">
|
||||
<span className="text-xs font-semibold text-white truncate max-w-[100px]">
|
||||
{data.displayName}
|
||||
</span>
|
||||
<span className={`text-[10px] ${roleColor} font-medium`}>
|
||||
{roleLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Chevron */}
|
||||
<ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isMenuOpen && (
|
||||
<motion.div
|
||||
className="absolute right-0 top-full mt-2 w-56 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
|
||||
initial={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 bg-gradient-to-r from-primary-blue/10 to-transparent border-b border-charcoal-outline">
|
||||
<div className="flex items-center gap-3">
|
||||
{data.avatarUrl ? (
|
||||
<div className="w-10 h-10 rounded-lg overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
||||
<img
|
||||
src={data.avatarUrl}
|
||||
alt={data.displayName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
||||
<span className="text-xs font-bold text-primary-blue">DEMO</span>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{data.displayName}</p>
|
||||
<p className={`text-xs ${roleColor}`}>{roleLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-gray-500">
|
||||
Development account - not for production use
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="py-1 text-sm text-gray-200">
|
||||
<div className="px-4 py-2 text-xs text-gray-500 italic">
|
||||
Demo users have limited profile access
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="border-t border-charcoal-outline">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
|
||||
>
|
||||
<span>Logout</span>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Sponsor mode UI
|
||||
if (isSponsorMode) {
|
||||
return (
|
||||
@@ -280,7 +472,12 @@ export default function UserPill() {
|
||||
);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
if (!data || data.isDemo) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Type guard to ensure data has the required properties for regular driver
|
||||
if (!data.driver || data.rating === undefined || data.rank === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user