feat: add QR code event check-in system
Backend: - Add event_checkin_tokens table with unique tokens per event - Implement GET /api/events/:slug/details endpoint (on-demand token generation) - Implement POST /api/events/checkin/:token endpoint (date validation only in production) - Implement DELETE /api/events/:slug/leave endpoint - Add comprehensive test suite for check-in endpoints Frontend: - Add EventDetailsPage with QR code display, participant list, and stats - Add EventCheckinPage with success/error screens - Add "Leave Event" button with confirmation modal to EventChatPage - Install qrcode.react library for QR code generation - Update routing and API client with new endpoints Features: - QR codes valid from (startDate-1d) to (endDate+1d) - Development mode bypasses date validation for testing - Automatic participant count tracking - Duplicate check-in prevention - Token reuse for same event (generated once, cached)
This commit is contained in:
Radosław Gierwiało
154
frontend/src/pages/EventCheckinPage.jsx
Normal file
154
frontend/src/pages/EventCheckinPage.jsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate, useLocation, Link } from 'react-router-dom';
|
||||
import { CheckCircle, XCircle, Calendar, MapPin, Loader } from 'lucide-react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { eventsAPI } from '../services/api';
|
||||
|
||||
export default function EventCheckinPage() {
|
||||
const { token } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [alreadyCheckedIn, setAlreadyCheckedIn] = useState(false);
|
||||
const [eventData, setEventData] = useState(null);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
// Redirect to login if not authenticated
|
||||
if (!user) {
|
||||
navigate('/login', {
|
||||
state: { from: location.pathname },
|
||||
replace: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Perform check-in
|
||||
performCheckin();
|
||||
}, [user]);
|
||||
|
||||
const performCheckin = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await eventsAPI.checkin(token);
|
||||
|
||||
if (response.success) {
|
||||
setSuccess(true);
|
||||
setAlreadyCheckedIn(response.alreadyCheckedIn);
|
||||
setEventData(response.data.event);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Check-in error:', err);
|
||||
setError(err.message || 'Failed to check in to event');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-6">
|
||||
<div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full text-center">
|
||||
<Loader className="animate-spin mx-auto mb-4 text-primary-600" size={48} />
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
Checking you in...
|
||||
</h2>
|
||||
<p className="text-gray-600">Please wait while we process your check-in</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-red-50 to-red-100 flex items-center justify-center p-6">
|
||||
<div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
|
||||
<div className="text-center mb-6">
|
||||
<XCircle className="mx-auto mb-4 text-red-600" size={64} />
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
Check-in Failed
|
||||
</h2>
|
||||
<p className="text-gray-600">{error}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Link
|
||||
to="/events"
|
||||
className="block w-full bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors text-center font-medium"
|
||||
>
|
||||
Back to Events
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (success && eventData) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center p-6">
|
||||
<div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full">
|
||||
<div className="text-center mb-6">
|
||||
<CheckCircle className="mx-auto mb-4 text-green-600" size={64} />
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
{alreadyCheckedIn ? 'Already Checked In!' : 'Check-in Successful!'}
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
{alreadyCheckedIn
|
||||
? 'You are already a participant of this event'
|
||||
: 'You have successfully joined this event'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Event Info */}
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-6">
|
||||
<h3 className="font-semibold text-lg text-gray-900 mb-3">
|
||||
{eventData.name}
|
||||
</h3>
|
||||
<div className="space-y-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={16} className="text-gray-400" />
|
||||
<span>{eventData.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} className="text-gray-400" />
|
||||
<span>
|
||||
{formatDate(eventData.startDate)} - {formatDate(eventData.endDate)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3">
|
||||
<Link
|
||||
to={`/events/${eventData.slug}/chat`}
|
||||
className="block w-full bg-primary-600 text-white px-6 py-3 rounded-lg hover:bg-primary-700 transition-colors text-center font-medium"
|
||||
>
|
||||
Go to Event Chat
|
||||
</Link>
|
||||
<Link
|
||||
to="/events"
|
||||
className="block w-full border border-gray-300 px-6 py-3 rounded-lg hover:bg-gray-50 transition-colors text-center font-medium text-gray-700"
|
||||
>
|
||||
Browse Other Events
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user