thrillwiki_django_no_react/templates/account/login.html

{% extends "base/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% load static %}

{% block title %}Login - ThrillWiki{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
    <div class="w-full max-w-md">
        <div class="auth-card">
            <h1 class="auth-title">{% trans "Welcome Back" %}</h1>

            {% get_providers as socialaccount_providers %}
            
            {% if socialaccount_providers %}
                <div class="space-y-3">
                    {% for provider in socialaccount_providers %}
                        <a href="{% provider_login_url provider.id process='login' %}"
                           class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
                           role="button"
                           tabindex="0"
                           onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
                            {% if provider.id == 'google' %}
                                <i class="fab fa-google w-5 h-5 mr-3"></i>
                                <span>Continue with Google</span>
                            {% elif provider.id == 'discord' %}
                                <i class="fab fa-discord w-5 h-5 mr-3"></i>
                                <span>Continue with Discord</span>
                            {% endif %}
                        </a>
                    {% endfor %}
                </div>
                
                <div class="auth-divider">
                    <span>Or continue with email</span>
                </div>
            {% endif %}

            <form class="space-y-6" method="POST" action="{% url 'account_login' %}">
                {% csrf_token %}
                
                {% if form.non_field_errors %}
                    <div class="alert alert-error">
                        <div class="text-sm">{{ form.non_field_errors }}</div>
                    </div>
                {% endif %}

                <div>
                    <label for="id_login" class="form-label">
                        {% trans "Username or Email" %}
                    </label>
                    <input type="text" name="login" id="id_login" required
                           autocomplete="username email"
                           class="form-input">
                    {% if form.login.errors %}
                        <p class="form-error">{{ form.login.errors }}</p>
                    {% endif %}
                </div>

                <div>
                    <label for="id_password" class="form-label">
                        {% trans "Password" %}
                    </label>
                    <input type="password" name="password" id="id_password" required
                           autocomplete="current-password"
                           class="form-input">
                    {% if form.password.errors %}
                        <p class="form-error">{{ form.password.errors }}</p>
                    {% endif %}
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" name="remember" id="id_remember"
                               class="w-4 h-4 border-gray-300 rounded text-primary focus:ring-primary/50 dark:border-gray-700">
                        <label for="id_remember" class="block ml-2 text-sm text-gray-700 dark:text-gray-300">
                            {% trans "Remember me" %}
                        </label>
                    </div>

                    <div class="text-sm">
                        <a href="{% url 'account_reset_password' %}" 
                           class="font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
                           onkeydown="if(event.key === 'Enter') { this.click(); }">
                            {% trans "Forgot Password?" %}
                        </a>
                    </div>
                </div>

                {% if redirect_field_value %}
                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
                {% endif %}

                <div>
                    <button type="submit" class="w-full btn-primary">
                        <i class="mr-2 fas fa-sign-in-alt"></i>
                        {% trans "Sign In" %}
                    </button>
                </div>
            </form>

            <div class="mt-6 text-sm text-center">
                <p class="text-gray-600 dark:text-gray-400">
                    {% trans "Don't have an account?" %}
                    <a href="{% url 'account_signup' %}" 
                       class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
                       onkeydown="if(event.key === 'Enter') { this.click(); }">
                        {% trans "Sign up" %}
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}