feat: Implement email functionality with FastAPI-Mail and Mailhog
- Updated docker-compose.yml to include Mailhog service for email testing. - Added environment variables for email configuration in docker-compose. - Updated requirements.txt to include fastapi-mail for email support. - Created templates for password reset, email verification, and welcome emails. - Developed mail utility module to handle sending emails using FastAPI-Mail. - Added documentation for email testing with Mailhog.
This commit is contained in:
Christian Krakau-Louis
@@ -0,0 +1,57 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="flex justify-center mt-10">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<h2 class="text-2xl font-bold text-irish-green mb-6 text-center">Reset Your Password</h2>
|
||||
|
||||
{% if error %}
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if message %}
|
||||
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p class="mb-6 text-gray-600">
|
||||
Enter your email address and we'll send you a link to reset your password.
|
||||
</p>
|
||||
|
||||
<form method="POST" action="/auth/forgot-password">
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="email">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<button
|
||||
class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
|
||||
type="submit"
|
||||
>
|
||||
Send Reset Link
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-6">
|
||||
<a href="/auth/login" class="text-sm text-irish-green hover:underline">
|
||||
Back to Login
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -8,6 +8,17 @@
|
||||
{% if error %}
|
||||
<div class="mb-4 p-3 rounded bg-red-100 text-red-700">
|
||||
{{ error }}
|
||||
|
||||
<!-- Display resend verification link if applicable -->
|
||||
{% if unverified_user_id %}
|
||||
<div class="mt-2 p-2 border-t border-red-200">
|
||||
<p class="mb-2 text-sm">Didn't receive the verification email?</p>
|
||||
<a href="/auth/resend-verification?user_id={{ unverified_user_id }}"
|
||||
class="text-irish-green hover:underline text-sm font-medium">
|
||||
Resend verification email to {{ unverified_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -55,13 +66,16 @@
|
||||
<label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full bg-irish-green text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-irish-green"
|
||||
class="bg-irish-green text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-irish-green"
|
||||
>
|
||||
Log In
|
||||
</button>
|
||||
<a class="inline-block align-baseline font-bold text-sm text-irish-green hover:text-opacity-75" href="/auth/forgot-password">
|
||||
Forgot Password?
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
<div class="bg-cream-white p-4 rounded-md">
|
||||
<h3 class="font-semibold text-irish-green mb-1">Member Since</h3>
|
||||
<p>{{ user.created_at.split(' ')[0] }}</p>
|
||||
<p>{{ user.created_at.strftime('%Y-%m-%d') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,7 +5,18 @@
|
||||
<div class="text-center">
|
||||
<i class="fas fa-check-circle text-green-500 text-5xl mb-4"></i>
|
||||
<h1 class="text-2xl font-bold text-irish-green mb-3">Registration Successful!</h1>
|
||||
<p class="text-gray-600 mb-6">Your account has been created successfully.</p>
|
||||
|
||||
{% if email_verification_required %}
|
||||
<p class="text-gray-600 mb-4">Your account has been created successfully.</p>
|
||||
<div class="bg-blue-50 p-4 rounded-md mb-6">
|
||||
<p class="text-blue-800">
|
||||
<i class="fas fa-envelope mr-2"></i>
|
||||
Please check your email inbox to verify your email address before logging in.
|
||||
</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-600 mb-6">Your account has been created successfully.</p>
|
||||
{% endif %}
|
||||
|
||||
<a href="/auth/login" class="inline-block bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
|
||||
Log In
|
||||
|
||||
@@ -0,0 +1,171 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="flex justify-center mt-10">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<h2 class="text-2xl font-bold text-irish-green mb-6 text-center">Set New Password</h2>
|
||||
|
||||
{% if error %}
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form method="POST" action="/auth/reset-password" id="password-form" onsubmit="return validateForm()">
|
||||
<input type="hidden" name="token" value="{{ token }}">
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="new_password">
|
||||
New Password
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="new_password"
|
||||
name="new_password"
|
||||
type="password"
|
||||
placeholder="Enter your new password"
|
||||
required
|
||||
oninput="checkPasswordStrength()"
|
||||
>
|
||||
<div class="mt-2">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div class="bg-red-600 h-2.5 rounded-full" id="password-strength-meter" style="width: 0%"></div>
|
||||
</div>
|
||||
<p class="text-xs mt-1" id="password-strength-text">Password strength: Too weak</p>
|
||||
</div>
|
||||
<ul class="text-xs text-gray-600 mt-2 list-disc pl-5">
|
||||
<li id="length-check" class="text-red-500">At least 8 characters</li>
|
||||
<li id="lowercase-check" class="text-red-500">At least one lowercase letter</li>
|
||||
<li id="uppercase-check" class="text-red-500">At least one uppercase letter</li>
|
||||
<li id="number-check" class="text-red-500">At least one number</li>
|
||||
<li id="special-check" class="text-red-500">At least one special character</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="confirm_password">
|
||||
Confirm New Password
|
||||
</label>
|
||||
<input
|
||||
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
id="confirm_password"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
placeholder="Confirm your new password"
|
||||
required
|
||||
oninput="checkPasswordMatch()"
|
||||
>
|
||||
<p id="password-match" class="text-xs mt-1 hidden text-red-500">Passwords do not match</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
<button
|
||||
class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"
|
||||
type="submit"
|
||||
id="submit-button"
|
||||
>
|
||||
Reset Password
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function checkPasswordStrength() {
|
||||
const password = document.getElementById('new_password').value;
|
||||
const meter = document.getElementById('password-strength-meter');
|
||||
const strengthText = document.getElementById('password-strength-text');
|
||||
|
||||
// Check requirements
|
||||
const hasLength = password.length >= 8;
|
||||
const hasLower = /[a-z]/.test(password);
|
||||
const hasUpper = /[A-Z]/.test(password);
|
||||
const hasNumber = /\d/.test(password);
|
||||
const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
||||
|
||||
// Update requirement indicators
|
||||
document.getElementById('length-check').className = hasLength ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('lowercase-check').className = hasLower ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('uppercase-check').className = hasUpper ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('number-check').className = hasNumber ? 'text-green-500' : 'text-red-500';
|
||||
document.getElementById('special-check').className = hasSpecial ? 'text-green-500' : 'text-red-500';
|
||||
|
||||
// Calculate strength percentage (20% for each criteria)
|
||||
let strength = 0;
|
||||
if (hasLength) strength += 20;
|
||||
if (hasLower) strength += 20;
|
||||
if (hasUpper) strength += 20;
|
||||
if (hasNumber) strength += 20;
|
||||
if (hasSpecial) strength += 20;
|
||||
|
||||
// Update meter
|
||||
meter.style.width = `${strength}%`;
|
||||
|
||||
// Set color based on strength
|
||||
if (strength < 40) {
|
||||
meter.className = 'bg-red-600 h-2.5 rounded-full';
|
||||
strengthText.textContent = 'Password strength: Too weak';
|
||||
strengthText.className = 'text-xs mt-1 text-red-600';
|
||||
} else if (strength < 80) {
|
||||
meter.className = 'bg-yellow-500 h-2.5 rounded-full';
|
||||
strengthText.textContent = 'Password strength: Medium';
|
||||
strengthText.className = 'text-xs mt-1 text-yellow-600';
|
||||
} else {
|
||||
meter.className = 'bg-green-500 h-2.5 rounded-full';
|
||||
strengthText.textContent = 'Password strength: Strong';
|
||||
strengthText.className = 'text-xs mt-1 text-green-600';
|
||||
}
|
||||
}
|
||||
|
||||
function checkPasswordMatch() {
|
||||
const password = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_password').value;
|
||||
const matchMessage = document.getElementById('password-match');
|
||||
|
||||
if (confirmPassword) {
|
||||
if (password !== confirmPassword) {
|
||||
matchMessage.classList.remove('hidden');
|
||||
} else {
|
||||
matchMessage.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function validateForm() {
|
||||
const password = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_password').value;
|
||||
|
||||
// Check if passwords match
|
||||
if (password !== confirmPassword) {
|
||||
alert('Passwords do not match.');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check password requirements
|
||||
const hasLength = password.length >= 8;
|
||||
const hasLower = /[a-z]/.test(password);
|
||||
const hasUpper = /[A-Z]/.test(password);
|
||||
const hasNumber = /\d/.test(password);
|
||||
const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(password);
|
||||
|
||||
if (!hasLength || !hasLower || !hasUpper || !hasNumber || !hasSpecial) {
|
||||
alert('Password does not meet the strength requirements.');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Initial check on page load
|
||||
window.onload = function() {
|
||||
if (document.getElementById('new_password').value) {
|
||||
checkPasswordStrength();
|
||||
}
|
||||
if (document.getElementById('confirm_password').value) {
|
||||
checkPasswordMatch();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,38 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="flex justify-center mt-10">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
||||
<div class="text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
|
||||
<h2 class="text-2xl font-bold text-red-600 mt-4">Password Reset Error</h2>
|
||||
|
||||
{% if error %}
|
||||
<p class="mt-2 text-gray-600">{{ error }}</p>
|
||||
{% else %}
|
||||
<p class="mt-2 text-gray-600">The password reset link is invalid or has expired.</p>
|
||||
{% endif %}
|
||||
|
||||
<p class="mt-4 text-gray-600">
|
||||
Please request a new password reset link.
|
||||
</p>
|
||||
|
||||
<div class="mt-8">
|
||||
<a href="/auth/forgot-password" class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-4 rounded">
|
||||
Request New Password Reset
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<a href="/auth/login" class="text-irish-green hover:underline">
|
||||
Back to Login
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-md mx-auto my-8">
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-exclamation-circle text-red-500 text-5xl mb-4"></i>
|
||||
<h1 class="text-2xl font-bold text-red-600 mb-3">Verification Failed</h1>
|
||||
|
||||
{% if error %}
|
||||
<p class="text-gray-600 mb-6">{{ error }}</p>
|
||||
{% else %}
|
||||
<p class="text-gray-600 mb-6">We couldn't verify your email address with the provided link.</p>
|
||||
{% endif %}
|
||||
|
||||
<p class="text-gray-600 mb-6">If your verification link has expired, you can request a new one by logging in with your credentials.</p>
|
||||
|
||||
<a href="/auth/login" class="inline-block bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
|
||||
Return to Login
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,16 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-md mx-auto my-8">
|
||||
<div class="bg-white p-8 rounded-lg shadow-md">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-check-circle text-green-500 text-5xl mb-4"></i>
|
||||
<h1 class="text-2xl font-bold text-irish-green mb-3">Email Verified!</h1>
|
||||
<p class="text-gray-600 mb-6">Your email has been successfully verified. You can now log in to your account.</p>
|
||||
|
||||
<a href="/auth/login" class="inline-block bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
|
||||
Log In
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Verify Your Email - LeagueLedger</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #2D7738;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: #2D7738;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Verify Your Email Address</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>Hello {{ username }},</p>
|
||||
|
||||
<p>Thank you for registering with LeagueLedger! To complete your registration, please verify your email address by clicking the button below:</p>
|
||||
|
||||
<p style="text-align: center;">
|
||||
<a href="{{ verification_link }}" class="button">Verify Email</a>
|
||||
</p>
|
||||
|
||||
<p>Or copy and paste this link into your browser:</p>
|
||||
<p>{{ verification_link }}</p>
|
||||
|
||||
<p>If you did not create an account with us, please ignore this email.</p>
|
||||
|
||||
<p>Best regards,<br>The LeagueLedger Team</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© LeagueLedger. All rights reserved.</p>
|
||||
<p>This is an automated message, please do not reply to this email.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Password Reset - LeagueLedger</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #2D7738;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: #2D7738;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>LeagueLedger Password Reset</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>Hello {{ username }},</p>
|
||||
|
||||
<p>We received a request to reset your password for your LeagueLedger account. If you didn't make this request, you can safely ignore this email.</p>
|
||||
|
||||
<p>To reset your password, please click the button below:</p>
|
||||
|
||||
<p style="text-align: center;">
|
||||
<a href="{{ reset_link }}" class="button">Reset Password</a>
|
||||
</p>
|
||||
|
||||
<p>Or copy and paste this link into your browser:</p>
|
||||
<p>{{ reset_link }}</p>
|
||||
|
||||
<p>This link will expire in 24 hours.</p>
|
||||
|
||||
<p>If you have any questions, please contact us at {{ support_email }}</p>
|
||||
|
||||
<p>Best regards,<br>The LeagueLedger Team</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© LeagueLedger. All rights reserved.</p>
|
||||
<p>This is an automated message, please do not reply to this email.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Welcome to LeagueLedger</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background-color: #2D7738;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: #2D7738;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Welcome to LeagueLedger!</h1>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>Hello {{ username }},</p>
|
||||
|
||||
<p>Welcome to LeagueLedger! We're excited to have you join our community.</p>
|
||||
|
||||
<p>With LeagueLedger, you can:</p>
|
||||
<ul>
|
||||
<li>Track your team's progress</li>
|
||||
<li>Participate in events</li>
|
||||
<li>Collect points and earn achievements</li>
|
||||
<li>Connect with other teams and players</li>
|
||||
</ul>
|
||||
|
||||
<p>If you have any questions or need assistance, feel free to reach out to our support team.</p>
|
||||
|
||||
<p style="text-align: center;">
|
||||
<a href="{{ base_url }}/dashboard" class="button">Go to Dashboard</a>
|
||||
</p>
|
||||
|
||||
<p>Best regards,<br>The LeagueLedger Team</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>© LeagueLedger. All rights reserved.</p>
|
||||
<p>This is an automated message, please do not reply to this email.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+17
-14
@@ -1,19 +1,22 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-2xl mx-auto mt-8 p-8 bg-white rounded-lg shadow-md">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-exclamation-circle text-red-600 text-5xl mb-4"></i>
|
||||
<h1 class="text-2xl font-bold mb-4">{{ error_title|default("Error") }}</h1>
|
||||
<p class="text-gray-700 mb-6">{{ error_message|default("An error occurred. Please try again.") }}</p>
|
||||
|
||||
<div class="mt-8">
|
||||
<a href="/" class="text-irish-green hover:underline mr-6">
|
||||
<i class="fas fa-home mr-1"></i> Go to Home
|
||||
</a>
|
||||
<a href="javascript:history.back()" class="text-irish-green hover:underline">
|
||||
<i class="fas fa-arrow-left mr-1"></i> Go Back
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center min-h-[60vh] px-4 py-12">
|
||||
<div class="text-center">
|
||||
<div class="mb-6">
|
||||
<svg class="mx-auto h-16 w-16 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-2">Oops! Something went wrong</h1>
|
||||
<p class="text-gray-600 mb-6">{{ error }}</p>
|
||||
<div class="flex justify-center">
|
||||
<a href="/" class="bg-irish-green hover:bg-opacity-90 text-white font-bold py-2 px-6 rounded-md mr-4">
|
||||
Go Home
|
||||
</a>
|
||||
<button onclick="window.history.back()" class="border border-irish-green text-irish-green hover:bg-gray-100 font-bold py-2 px-6 rounded-md">
|
||||
Go Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user