Implement user authentication and management system with FastAPI
- Added authentication routes for login, registration, password reset, and account deletion in `auth.py`. - Implemented user profile management, including updating user information and changing passwords. - Created dashboard views to display user-specific information and recent activity in `dashboard.py`. - Developed leaderboard views to show team rankings and points in `leaderboard.py`. - Added QR code generation and redemption functionality in `qr.py` and `redeem.py`. - Implemented team management features, allowing users to create and join teams in `teams.py`. - Introduced session debugging utility to assist with session-related issues in `debug_session.py`. - Configured Docker Compose for MySQL database and FastAPI application with environment variables. - Updated requirements.txt to include necessary dependencies for the application.
This commit is contained in:
Christian Krakau-Louis
@@ -0,0 +1,127 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-lg mx-auto space-y-6">
|
||||
<div class="bg-white rounded-lg shadow-md p-6 text-center">
|
||||
<h1 class="text-2xl font-garamond font-bold text-irish-green mb-3">Scan QR Code</h1>
|
||||
<p class="text-gray-600 mb-6">Position the QR code from your quiz master in the camera view</p>
|
||||
|
||||
<!-- QR Scanner Container -->
|
||||
<div class="relative bg-black rounded-lg overflow-hidden" style="height: 300px;">
|
||||
<div id="qr-reader" class="w-full h-full"></div>
|
||||
<div id="scanner-overlay" class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="text-white">
|
||||
<i class="fas fa-camera text-4xl mb-2 opacity-70"></i>
|
||||
<p>Camera loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-sm text-gray-500">
|
||||
Make sure the QR code is well-lit and clearly visible
|
||||
</div>
|
||||
|
||||
<!-- Manual Entry Fallback -->
|
||||
<div class="mt-8 border-t pt-6">
|
||||
<h3 class="font-bold mb-3">Or enter code manually</h3>
|
||||
<form action="/redeem/manual" method="post" class="flex">
|
||||
<input type="text" name="code" placeholder="Enter code here" required
|
||||
class="flex-grow border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green">
|
||||
<button type="submit" class="bg-irish-green text-white px-4 py-2 rounded-r-md">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- How It Works -->
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 class="text-xl font-semibold font-garamond text-irish-green mb-4">How It Works</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start">
|
||||
<div class="bg-cream-white p-2 rounded-full mr-3 mt-1">
|
||||
<span class="w-6 h-6 flex items-center justify-center text-irish-green font-bold">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Scan QR Code</p>
|
||||
<p class="text-gray-600 text-sm">Scan the QR code provided by your quiz master.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="bg-cream-white p-2 rounded-full mr-3 mt-1">
|
||||
<span class="w-6 h-6 flex items-center justify-center text-irish-green font-bold">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Select Your Team</p>
|
||||
<p class="text-gray-600 text-sm">Choose which team should receive these points.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="bg-cream-white p-2 rounded-full mr-3 mt-1">
|
||||
<span class="w-6 h-6 flex items-center justify-center text-irish-green font-bold">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium">Climb the Leaderboard</p>
|
||||
<p class="text-gray-600 text-sm">Watch your team rise in the rankings!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Back Link -->
|
||||
<div class="text-center">
|
||||
<a href="/dashboard" class="text-irish-green hover:underline">
|
||||
<i class="fas fa-arrow-left mr-1"></i> Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HTML5 QR Code Scanner Library -->
|
||||
<script src="https://unpkg.com/html5-qrcode"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const html5QrCode = new Html5Qrcode("qr-reader");
|
||||
const qrOverlay = document.getElementById('scanner-overlay');
|
||||
|
||||
// Config
|
||||
const config = { fps: 10, qrbox: 250 };
|
||||
|
||||
// Success function
|
||||
function onScanSuccess(decodedText, decodedResult) {
|
||||
// Stop scanning
|
||||
html5QrCode.stop();
|
||||
|
||||
// Show loading message
|
||||
qrOverlay.innerHTML = '<div class="text-white text-center"><i class="fas fa-circle-notch fa-spin text-3xl mb-3"></i><p>Code detected!</p><p>Redirecting...</p></div>';
|
||||
qrOverlay.style.backgroundColor = 'rgba(0, 104, 55, 0.8)'; // Irish green with opacity
|
||||
|
||||
// Redirect to redeem page
|
||||
window.location.href = '/redeem/' + decodedText;
|
||||
}
|
||||
|
||||
// Start scanner
|
||||
html5QrCode.start(
|
||||
{ facingMode: "environment" },
|
||||
config,
|
||||
onScanSuccess,
|
||||
(errorMessage) => {
|
||||
// Handle error if needed
|
||||
console.log(errorMessage);
|
||||
})
|
||||
.then(() => {
|
||||
// Scanner started successfully
|
||||
qrOverlay.style.display = 'none';
|
||||
})
|
||||
.catch((err) => {
|
||||
// Update overlay with error message
|
||||
qrOverlay.innerHTML = `
|
||||
<div class="text-white text-center">
|
||||
<i class="fas fa-exclamation-triangle text-4xl mb-3"></i>
|
||||
<p>Camera access denied or not available</p>
|
||||
<p class="text-sm mt-2">Please use manual entry below</p>
|
||||
</div>
|
||||
`;
|
||||
qrOverlay.style.backgroundColor = 'rgba(178, 34, 34, 0.8)'; // Guinness red with opacity
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user