mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 08:31:13 -05:00
Fix security vulnerabilities
This commit is contained in:
gpt-engineer-app[bot]
@@ -1202,20 +1202,29 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
|
||||
src={photo.url}
|
||||
alt={`Photo ${index + 1}: ${photo.filename}`}
|
||||
className="w-full max-h-64 object-contain rounded hover:opacity-80 transition-opacity"
|
||||
onError={(e) => {
|
||||
console.error('Failed to load photo submission:', photo);
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
const parent = target.parentElement;
|
||||
if (parent) {
|
||||
parent.innerHTML = `
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center text-destructive text-xs">
|
||||
<div>⚠️ Image failed to load</div>
|
||||
<div class="mt-1 font-mono text-xs break-all px-2">${photo.url}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}}
|
||||
onError={(e) => {
|
||||
console.error('Failed to load photo submission:', photo);
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
const parent = target.parentElement;
|
||||
if (parent) {
|
||||
// Create elements safely using DOM API to prevent XSS
|
||||
const errorContainer = document.createElement('div');
|
||||
errorContainer.className = 'absolute inset-0 flex flex-col items-center justify-center text-destructive text-xs';
|
||||
|
||||
const errorIcon = document.createElement('div');
|
||||
errorIcon.textContent = '⚠️ Image failed to load';
|
||||
|
||||
const urlDisplay = document.createElement('div');
|
||||
urlDisplay.className = 'mt-1 font-mono text-xs break-all px-2';
|
||||
// Use textContent to prevent XSS - it escapes HTML automatically
|
||||
urlDisplay.textContent = photo.url;
|
||||
|
||||
errorContainer.appendChild(errorIcon);
|
||||
errorContainer.appendChild(urlDisplay);
|
||||
parent.appendChild(errorContainer);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity rounded">
|
||||
<Eye className="w-5 h-5" />
|
||||
|
||||
123
src/components/settings/SessionsTab.tsx
Normal file
123
src/components/settings/SessionsTab.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { Monitor, Smartphone, Tablet, Trash2 } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface UserSession {
|
||||
id: string;
|
||||
device_info: any;
|
||||
last_activity: string;
|
||||
created_at: string;
|
||||
expires_at: string;
|
||||
session_token: string;
|
||||
}
|
||||
|
||||
export function SessionsTab() {
|
||||
const { user } = useAuth();
|
||||
const { toast } = useToast();
|
||||
const [sessions, setSessions] = useState<UserSession[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const fetchSessions = async () => {
|
||||
if (!user) return;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('user_sessions')
|
||||
.select('*')
|
||||
.eq('user_id', user.id)
|
||||
.order('last_activity', { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching sessions:', error);
|
||||
} else {
|
||||
setSessions(data || []);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessions();
|
||||
}, [user]);
|
||||
|
||||
const revokeSession = async (sessionId: string) => {
|
||||
const { error } = await supabase
|
||||
.from('user_sessions')
|
||||
.delete()
|
||||
.eq('id', sessionId);
|
||||
|
||||
if (error) {
|
||||
toast({
|
||||
title: 'Error',
|
||||
description: 'Failed to revoke session',
|
||||
variant: 'destructive'
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: 'Success',
|
||||
description: 'Session revoked successfully'
|
||||
});
|
||||
fetchSessions();
|
||||
}
|
||||
};
|
||||
|
||||
const getDeviceIcon = (deviceInfo: any) => {
|
||||
const ua = deviceInfo?.userAgent?.toLowerCase() || '';
|
||||
if (ua.includes('mobile')) return <Smartphone className="w-4 h-4" />;
|
||||
if (ua.includes('tablet')) return <Tablet className="w-4 h-4" />;
|
||||
return <Monitor className="w-4 h-4" />;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-muted-foreground">Loading sessions...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Active Sessions</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Manage your active login sessions across devices
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{sessions.map((session) => (
|
||||
<Card key={session.id} className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex gap-3">
|
||||
{getDeviceIcon(session.device_info)}
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{session.device_info?.browser || 'Unknown Browser'}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Last active: {format(new Date(session.last_activity), 'PPpp')}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Expires: {format(new Date(session.expires_at), 'PPpp')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => revokeSession(session.id)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Revoke
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{sessions.length === 0 && (
|
||||
<Card className="p-8 text-center text-muted-foreground">
|
||||
No active sessions found
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user