Implement team join request functionality with views and actions

- Added join_requests.html template for displaying pending join requests.
- Created join_team.html template for users to submit join requests.
- Implemented request_processed.html template to show the result of join request processing.
- Developed authentication utilities for user session management.
- Introduced convenience redirects for common URL patterns.
- Established team management routes and actions for creating, editing, and joining teams.
- Added functionality for approving and denying join requests with email notifications.
- Enhanced team views to include user permissions and team member details.
- Implemented utility functions for team-related operations such as calculating total points and team rank.
This commit is contained in:
Christian Krakau-Louis
2025-04-14 17:00:57 +02:00
parent 5cf3f944b1
commit 7323c12168
26 changed files with 2138 additions and 319 deletions
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Join Request Response - 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>Team Join Request {{ "Approved" if is_approved else "Denied" }}</h1>
</div>
<div class="content">
<p>Hello {{ username }},</p>
{% if is_approved %}
<p>Good news! Your request to join <strong>{{ team_name }}</strong> has been approved. You are now a member of the team.</p>
{% else %}
<p>We regret to inform you that your request to join <strong>{{ team_name }}</strong> has been denied.</p>
{% endif %}
<p>You can view your teams by visiting your dashboard:</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>
+8 -10
View File
@@ -45,27 +45,25 @@
</head>
<body>
<div class="header">
<h1>LeagueLedger Password Reset</h1>
<h1>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>We received a request to reset your password. 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>To reset your password, click the button below:</p>
<p style="text-align: center;">
<a href="{{ reset_link }}" class="button">Reset Password</a>
</p>
<div style="margin: 30px 0; text-align: center;">
<a href="{{ reset_url }}" class="button">Reset Password</a>
</div>
<p>Or copy and paste this link into your browser:</p>
<p>{{ reset_link }}</p>
<p>Or you can copy and paste this link into your browser:</p>
<p>{{ reset_url }}</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>
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Team Join Request - 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;
}
.button.approve {
background-color: #4CAF50;
}
.button.deny {
background-color: #f44336;
margin-left: 10px;
}
.footer {
margin-top: 20px;
font-size: 12px;
text-align: center;
color: #777;
}
</style>
</head>
<body>
<div class="header">
<h1>Team Join Request</h1>
</div>
<div class="content">
<p>Hello {{ captain_name }},</p>
<p><strong>{{ requester_name }}</strong> has requested to join your team <strong>{{ team_name }}</strong>.</p>
{% if message %}
<p>Message from {{ requester_name }}:<br><em>"{{ message }}"</em></p>
{% endif %}
<p>You can approve or deny this request by clicking one of the buttons below:</p>
<div style="margin: 30px 0; text-align: center;">
<a href="{{ approve_url }}" class="button approve">Approve Request</a>
<a href="{{ deny_url }}" class="button deny">Deny Request</a>
</div>
<p>Or you can copy and paste one of these links into your browser:</p>
<p>Approve: {{ approve_url }}</p>
<p>Deny: {{ deny_url }}</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>
+21 -14
View File
@@ -1,22 +1,29 @@
{% extends "base.html" %}
{% block content %}
<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 class="max-w-md mx-auto my-12">
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<div class="text-red-500 text-5xl mb-6">
<i class="fas fa-exclamation-circle"></i>
</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
<h1 class="text-2xl font-bold mb-4">{{ error|default("An error occurred", true) }}</h1>
{% if details %}
<p class="text-gray-600 mb-6">{{ details }}</p>
{% endif %}
<div class="mt-8">
<a href="/" class="inline-block bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
Return to 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>
{% if debug_info %}
<div class="mt-8 p-4 bg-gray-100 rounded text-left">
<h3 class="font-semibold mb-2">Debug Information:</h3>
<pre class="text-xs overflow-auto">{{ debug_info }}</pre>
</div>
{% endif %}
</div>
</div>
{% endblock %}
+17 -5
View File
@@ -21,11 +21,23 @@
Login to Join
</a>
{% elif not is_team_member %}
<form action="/teams/join/{{ team.id }}" method="post" class="inline">
<button type="submit" class="bg-white text-irish-green font-medium py-2 px-4 rounded-md hover:bg-opacity-90">
Join Team
</button>
</form>
<div class="my-4 p-4 bg-gray-100 rounded">
<h3 class="text-xl font-semibold mb-2">Join This Team</h3>
{% if is_open %}
<p class="mb-3">This is an open team. You can join immediately.</p>
<form action="/teams/join/{{ team.id }}" method="post">
<button type="submit" class="bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
Join Team
</button>
</form>
{% else %}
<p class="mb-3">This is a closed team. You need to request to join and be approved by a team captain.</p>
<a href="/teams/{{ team.id }}/join" class="inline-block bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
Request to Join
</a>
{% endif %}
</div>
{% else %}
<button class="bg-white text-irish-green font-medium py-2 px-4 rounded-md hover:bg-opacity-90">
<i class="fas fa-share-alt mr-1"></i> Share Team
+17
View File
@@ -0,0 +1,17 @@
<!-- Add this to the form, right before the submit button -->
<div class="mb-6">
<div class="flex items-center">
<input
type="checkbox"
id="is_open"
name="is_open"
class="h-4 w-4 text-irish-green focus:ring-irish-green border-gray-300 rounded"
>
<label for="is_open" class="ml-2 block text-gray-700">
Open Team (anyone can join without approval)
</label>
</div>
<p class="mt-1 text-sm text-gray-500">
If unchecked, users will need to request to join and be approved by a captain.
</p>
</div>
+18
View File
@@ -0,0 +1,18 @@
<!-- Add this to the form, right before the submit button -->
<div class="mb-6">
<div class="flex items-center">
<input
type="checkbox"
id="is_open"
name="is_open"
{% if team.is_open %}checked{% endif %}
class="h-4 w-4 text-irish-green focus:ring-irish-green border-gray-300 rounded"
>
<label for="is_open" class="ml-2 block text-gray-700">
Open Team (anyone can join without approval)
</label>
</div>
<p class="mt-1 text-sm text-gray-500">
If unchecked, users will need to request to join and be approved by a captain.
</p>
</div>
+90
View File
@@ -0,0 +1,90 @@
{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto my-8">
<div class="bg-white p-8 rounded-lg shadow-md">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Join Requests - {{ team.name }}</h1>
<a href="/teams/{{ team.id }}" class="text-irish-green hover:underline">Back to Team</a>
</div>
{% if request.query_params.get('message') %}
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6" role="alert">
<p>{{ request.query_params.get('message') }}</p>
</div>
{% endif %}
{% if requests|length > 0 %}
<div class="bg-blue-50 p-4 rounded-md mb-6">
<p class="text-blue-800">
<i class="fas fa-info-circle mr-2"></i>
You have {{ requests|length }} pending join request{% if requests|length > 1 %}s{% endif %}.
</p>
</div>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border border-gray-200">
<thead>
<tr>
<th class="py-3 px-4 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b">User</th>
<th class="py-3 px-4 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b">Date</th>
<th class="py-3 px-4 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b">Message</th>
<th class="py-3 px-4 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
{% for item in requests %}
<tr>
<td class="py-4 px-4 whitespace-nowrap">
<div class="flex items-center">
{% if item.user.picture %}
<img src="{{ item.user.picture }}" alt="{{ item.user.username }}" class="w-8 h-8 rounded-full mr-3">
{% else %}
<div class="w-8 h-8 rounded-full bg-irish-green flex items-center justify-center text-white mr-3">
<span>{{ item.user.username[0]|upper }}</span>
</div>
{% endif %}
<div>
<div class="text-sm font-medium text-gray-900">{{ item.user.username }}</div>
<div class="text-sm text-gray-500">{{ item.user.email }}</div>
</div>
</div>
</td>
<td class="py-4 px-4 whitespace-nowrap text-sm text-gray-500">
{{ item.request.created_at.strftime('%Y-%m-%d %H:%M') }}
</td>
<td class="py-4 px-4 text-sm text-gray-500 max-w-xs truncate">
{% if item.request.message %}
{{ item.request.message }}
{% else %}
<span class="text-gray-400 italic">No message</span>
{% endif %}
</td>
<td class="py-4 px-4 whitespace-nowrap text-sm font-medium">
<form action="/teams/{{ team.id }}/requests/{{ item.request.id }}" method="post" class="inline-block">
<input type="hidden" name="decision" value="approve">
<button type="submit" class="bg-green-500 hover:bg-green-600 text-white py-1 px-3 rounded mr-2">
Approve
</button>
</form>
<form action="/teams/{{ team.id }}/requests/{{ item.request.id }}" method="post" class="inline-block">
<input type="hidden" name="decision" value="deny">
<button type="submit" class="bg-red-500 hover:bg-red-600 text-white py-1 px-3 rounded">
Deny
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-12">
<i class="fas fa-inbox text-gray-300 text-5xl mb-4"></i>
<p class="text-xl text-gray-500">No pending join requests</p>
</div>
{% endif %}
</div>
</div>
{% endblock %}
+56
View File
@@ -0,0 +1,56 @@
{% 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="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Join Request - {{ team.name }}</h1>
<a href="/teams/{{ team.id }}" class="text-irish-green hover:underline">Back to Team</a>
</div>
{% if error %}
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
<p>{{ error }}</p>
</div>
{% endif %}
{% if is_open %}
<div class="text-center">
<div class="bg-green-100 p-4 rounded-md mb-6">
<p class="text-green-800">
<i class="fas fa-info-circle mr-2"></i>
This is an open team. You can join immediately without approval.
</p>
</div>
<form action="/teams/join/{{ team.id }}" method="post">
<button type="submit" class="bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition w-full">
Join Now
</button>
</form>
</div>
{% else %}
<div class="mb-6">
<p class="text-gray-700 mb-4">You're requesting to join <strong>{{ team.name }}</strong>. Your request will need to be approved by a team captain.</p>
<form action="/teams/{{ team.id }}/join" method="post" class="space-y-4">
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message (Optional)</label>
<textarea
id="message"
name="message"
rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-irish-green"
placeholder="Tell the team why you'd like to join..."
></textarea>
</div>
<button type="submit" class="w-full bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
Send Join Request
</button>
</form>
</div>
{% endif %}
</div>
</div>
{% endblock %}
@@ -0,0 +1,26 @@
{% extends "base.html" %}
{% block title %}Request Processed{% endblock %}
{% block content %}
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
<h3>Team Join Request Processed</h3>
</div>
<div class="card-body">
<div class="alert alert-success">
{{ message }}
</div>
<div class="text-center mt-4">
<a href="/teams/{{ team_id }}" class="btn btn-primary">Go to Team Page</a>
<a href="/teams" class="btn btn-outline-secondary">Back to Teams List</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}