Implement OAuth login with Authentik integration, update user management, and enhance team functionalities
- Added OAuth login functionality using Authentik, allowing users to log in via OpenID. - Updated user registration and login processes to handle OAuth users. - Enhanced team management features, including joining and leaving teams, and displaying user-specific team information. - Improved error handling and user feedback for team actions. - Added new database migrations for OAuth-related fields in the users table. - Updated templates to reflect changes in user authentication and team management. - Refactored dashboard and leaderboard views to include user context and team memberships.
This commit is contained in:
Christian Krakau-Louis
@@ -78,7 +78,7 @@
|
||||
<p class="text-center text-gray-600 mb-4">Or sign in with</p>
|
||||
<div class="flex justify-center">
|
||||
<a href="/auth/oauth-login" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition w-full flex items-center justify-center">
|
||||
<i class="fas fa-sign-in-alt mr-2"></i> {{ oauth_provider_name }}
|
||||
<i class="fas fa-sign-in-alt mr-2"></i> Authentik
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -50,6 +50,36 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Teams Section -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-semibold text-irish-green">Your Teams</h2>
|
||||
<a href="/teams" class="text-irish-green hover:underline">View All</a>
|
||||
</div>
|
||||
|
||||
{% if user_teams %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{% for team in user_teams %}
|
||||
<div class="border rounded-lg p-4 hover:bg-gray-50">
|
||||
<h3 class="font-medium mb-2">{{ team.name }}</h3>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>Rank: #{{ team.rank|default('N/A') }}</span>
|
||||
<span>{{ team.points|default(0) }} pts</span>
|
||||
</div>
|
||||
<a href="/teams/{{ team.id }}" class="block w-full bg-irish-green bg-opacity-10 text-irish-green text-center mt-3 py-1 rounded">
|
||||
View Team
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-gray-500 mb-4">You haven't joined any teams yet.</p>
|
||||
<a href="/teams" class="inline-block bg-irish-green text-white py-2 px-4 rounded-md hover:bg-opacity-90 transition">
|
||||
Join a Team
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
|
||||
@@ -16,9 +16,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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
|
||||
</button>
|
||||
{% if not user %}
|
||||
<a href="/auth/login?next=/teams/{{ team.id }}" class="bg-white text-irish-green font-medium py-2 px-4 rounded-md hover:bg-opacity-90">
|
||||
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>
|
||||
{% 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
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,34 +168,54 @@
|
||||
</div>
|
||||
|
||||
<!-- Team Management -->
|
||||
{% if is_user_admin %}
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 class="text-xl font-semibold text-irish-green mb-4">Team Management</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Team Name</label>
|
||||
<div class="flex">
|
||||
<input type="text" value="{{ team.name }}" class="flex-grow border border-gray-300 rounded-l-md px-3 py-2" {% if not is_user_admin %}disabled{% endif %}>
|
||||
<button class="bg-irish-green text-white px-4 py-2 rounded-r-md" {% if not is_user_admin %}disabled{% endif %}>Save</button>
|
||||
{% if is_user_owner %}
|
||||
<div class="bg-irish-green bg-opacity-10 p-3 rounded-md mb-4">
|
||||
<p class="text-irish-green font-medium">You are the owner of this team</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Team Privacy</label>
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="public-team" name="is_public" class="mr-2"
|
||||
{% if team.is_public %}checked{% endif %}
|
||||
{% if not is_user_admin %}disabled{% endif %}>
|
||||
<label for="public-team">Make team publicly joinable (no invitation needed)</label>
|
||||
{% elif is_user_admin %}
|
||||
<div class="bg-golden-ale bg-opacity-10 p-3 rounded-md mb-4">
|
||||
<p class="text-golden-ale font-medium">You are an admin of this team</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="pt-4 border-t">
|
||||
<button class="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md">
|
||||
Leave Team
|
||||
</button>
|
||||
</div>
|
||||
<form action="/teams/{{ team.id }}/update" method="post">
|
||||
<div class="mb-4">
|
||||
<label for="team_name" class="block text-sm font-medium text-gray-700 mb-2">Team Name</label>
|
||||
<div class="flex">
|
||||
<input type="text" id="team_name" name="team_name" value="{{ team.name }}" class="flex-grow border border-gray-300 rounded-l-md px-3 py-2">
|
||||
<button type="submit" class="bg-irish-green text-white px-4 py-2 rounded-r-md">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Team Privacy</label>
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="is_public" name="is_public" class="mr-2"
|
||||
{% if team.is_public %}checked{% endif %}>
|
||||
<label for="is_public">Make team publicly joinable (no invitation needed)</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Leave team option - only for members -->
|
||||
{% if is_team_member and not is_user_owner %}
|
||||
<div class="bg-white rounded-lg shadow-md p-6 mt-6">
|
||||
<h2 class="text-xl font-semibold text-irish-green mb-4">Team Membership</h2>
|
||||
<p class="mb-4">You are currently a member of this team.</p>
|
||||
<form action="/teams/{{ team.id }}/leave" method="post">
|
||||
<button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md">
|
||||
Leave Team
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
+73
-20
@@ -1,6 +1,13 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<h2 class="text-2xl font-bold mb-6">Teams</h2>
|
||||
|
||||
{% if error %}
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6" role="alert">
|
||||
<span class="block sm:inline">{{ error }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-4" style="color: var(--irish-green);">Available Teams</h3>
|
||||
@@ -8,14 +15,26 @@
|
||||
<ul class="space-y-3">
|
||||
{% for team in teams %}
|
||||
<li class="border-b pb-2 flex justify-between items-center">
|
||||
<span class="font-medium">{{ team.name }}</span>
|
||||
<form action="/teams/join/{{ team.id }}" method="post" class="inline">
|
||||
<button type="submit"
|
||||
class="px-3 py-1 text-sm rounded-md"
|
||||
style="background-color: var(--golden-ale); color: var(--black-stout);">
|
||||
Join Team
|
||||
</button>
|
||||
</form>
|
||||
<a href="/teams/{{ team.id }}" class="font-medium hover:text-irish-green">{{ team.name }}</a>
|
||||
{% if user %}
|
||||
{% if team.id in user_team_ids %}
|
||||
<span class="px-3 py-1 text-sm rounded-md bg-gray-200 text-gray-800">Member</span>
|
||||
{% else %}
|
||||
<form action="/teams/join/{{ team.id }}" method="post" class="inline">
|
||||
<button type="submit"
|
||||
class="px-3 py-1 text-sm rounded-md"
|
||||
style="background-color: var(--golden-ale); color: var(--black-stout);">
|
||||
Join Team
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a href="/auth/login?next=/teams"
|
||||
class="px-3 py-1 text-sm rounded-md"
|
||||
style="background-color: var(--cream-white); color: var(--irish-green); border: 1px solid var(--irish-green);">
|
||||
Login to Join
|
||||
</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@@ -26,22 +45,56 @@
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-4" style="color: var(--irish-green);">Create New Team</h3>
|
||||
<form action="/teams/create" method="post" class="mt-4">
|
||||
<div class="mb-4">
|
||||
<label for="name" class="block text-sm font-medium mb-1">Team Name</label>
|
||||
<input type="text" name="name" id="name" placeholder="Enter team name" required
|
||||
class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
|
||||
style="border-color: var(--irish-green); focus:ring-color: var(--irish-green);">
|
||||
{% if user %}
|
||||
<form action="/teams/create" method="post" class="mt-4">
|
||||
<div class="mb-4">
|
||||
<label for="name" class="block text-sm font-medium mb-1">Team Name</label>
|
||||
<input type="text" name="name" id="name" placeholder="Enter team name" required
|
||||
class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
|
||||
style="border-color: var(--irish-green); focus:ring-color: var(--irish-green);">
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full px-4 py-2 text-white rounded-md font-medium"
|
||||
style="background-color: var(--irish-green);">
|
||||
Create Team
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="p-4 bg-gray-100 rounded-md">
|
||||
<p class="text-center mb-2">You need to be logged in to create a team</p>
|
||||
<a href="/auth/login"
|
||||
class="block w-full text-center px-4 py-2 text-white rounded-md font-medium"
|
||||
style="background-color: var(--irish-green);">
|
||||
Log In
|
||||
</a>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full px-4 py-2 text-white rounded-md font-medium"
|
||||
style="background-color: var(--irish-green);">
|
||||
Create Team
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if user and user_team_ids %}
|
||||
<div class="mt-8">
|
||||
<h2 class="text-2xl font-bold mb-4">Your Teams</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{% for team in teams %}
|
||||
{% if team.id in user_team_ids %}
|
||||
<div class="bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-2" style="color: var(--irish-green);">{{ team.name }}</h3>
|
||||
<div class="mb-4">
|
||||
<span class="text-gray-600">{{ team.description|default("No description available", true)|truncate(120) }}</span>
|
||||
</div>
|
||||
<a href="/teams/{{ team.id }}"
|
||||
class="block text-center w-full px-4 py-2 text-white rounded-md font-medium"
|
||||
style="background-color: var(--irish-green);">
|
||||
View Team
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-10 bg-white p-6 rounded-lg shadow-md">
|
||||
<h3 class="text-xl font-semibold mb-4" style="color: var(--irish-green);">About Teams</h3>
|
||||
<p class="mb-4">
|
||||
|
||||
Reference in New Issue
Block a user