Christian Krakau-Louis
2f55f898ed
- Implemented Spotify OAuth handling in spotify_client_manager.py to ensure valid access tokens for users. - Created helper functions in spotify_helper.py for refreshing tokens and retrieving user information. - Developed manage_spotify.html template for connecting and managing Spotify accounts, displaying connection status and token information. - Added logging for token management processes to enhance debugging and monitoring. - Introduced a debug client for Spotify interactions to facilitate easier testing and development.
82 lines
4.5 KiB
HTML
82 lines
4.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Login{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-md mx-auto my-8 p-6 bg-white rounded-lg shadow-md">
|
|
<h2 class="text-2xl font-bold mb-6 text-navy-800">Login to Quizzical Beats</h2>
|
|
|
|
<form method="POST" action="{{ url_for('users.login') }}">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
|
|
Username or Email
|
|
</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="username" name="username" type="text" placeholder="Enter your username or email">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
|
|
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="password" name="password" type="password" placeholder="Enter your password">
|
|
</div>
|
|
|
|
<div class="mb-6 flex items-center">
|
|
<input class="mr-2" type="checkbox" id="remember" name="remember">
|
|
<label class="text-sm text-gray-700" for="remember">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<button class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
|
|
Login
|
|
</button>
|
|
<a class="inline-block align-baseline font-bold text-sm text-teal-500 hover:text-teal-800" href="{{ url_for('users.forgot_password') }}">
|
|
Forgot Password?
|
|
</a>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Social Login Options -->
|
|
{% if oauth_providers and (oauth_providers.google or oauth_providers.authentik) %}
|
|
<div class="mt-6 pt-6 border-t border-gray-200">
|
|
<div class="flex flex-col space-y-3">
|
|
{% if oauth_providers.google %}
|
|
<a href="{{ url_for('users.google_login') }}"
|
|
class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
|
<svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
|
<path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
|
|
<path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
|
|
<path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
|
|
<path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
|
|
</svg>
|
|
Sign in with Google
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if oauth_providers.authentik %}
|
|
<a href="{{ url_for('users.authentik_login') }}"
|
|
class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
|
<img src="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/authentik.svg" class="h-5 w-5 mr-2" alt="Authentik logo" />
|
|
Sign in with Authentik
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-6 pt-6 border-t border-gray-200 text-center">
|
|
<p class="text-gray-700">
|
|
Don't have an account?
|
|
<a href="{{ url_for('users.register') }}" class="font-bold text-teal-500 hover:text-teal-800">
|
|
Register
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |