thrillwiki_django_no_react/templates/account/signup.html

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

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

{% block content %}
<div class="max-w-md mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">{% trans "Sign Up" %}</h1>

        {% get_providers as socialaccount_providers %}
        
        {% if socialaccount_providers %}
            <div class="space-y-3 mb-6">
                {% for provider in socialaccount_providers %}
                    <a href="{% provider_login_url provider.id process='signup' %}"
                       class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                       role="button"
                       tabindex="0"
                       onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
                        {% if provider.id == 'google' %}
                            <img src="{% static 'images/google-icon.svg' %}" alt="Google" class="h-5 w-5 mr-2">
                        {% elif provider.id == 'discord' %}
                            <img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="h-5 w-5 mr-2">
                        {% endif %}
                        Sign up with {{ provider.name }}
                    </a>
                {% endfor %}
            </div>
            
            <div class="relative my-6">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-white dark:bg-gray-800 text-gray-500">Or continue with</span>
                </div>
            </div>
        {% endif %}

        <form class="space-y-4" method="POST" action="{% url 'account_signup' %}" 
              onkeydown="if(event.key === 'Enter' && !event.shiftKey) { 
                  const activeElement = document.activeElement;
                  if (activeElement.tagName === 'TEXTAREA') {
                      if (!event.shiftKey) {
                          event.preventDefault();
                          this.submit();
                      }
                  } else {
                      event.preventDefault();
                      this.submit();
                  }
              }">
            {% csrf_token %}
            
            {% if form.non_field_errors %}
                <div class="bg-red-50 dark:bg-red-900 border-l-4 border-red-400 p-4 mb-4">
                    <div class="text-sm text-red-700 dark:text-red-200">
                        {{ form.non_field_errors }}
                    </div>
                </div>
            {% endif %}

            <div>
                <label for="id_username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    {% trans "Username" %}
                </label>
                <input type="text" name="username" id="id_username" required
                       autocomplete="username"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                {% if form.username.errors %}
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.username.errors }}</p>
                {% endif %}
            </div>

            <div>
                <label for="id_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    {% trans "Email" %}
                </label>
                <input type="email" name="email" id="id_email" required
                       autocomplete="email"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                {% if form.email.errors %}
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.email.errors }}</p>
                {% endif %}
            </div>

            <div>
                <label for="id_password1" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    {% trans "Password" %}
                </label>
                <input type="password" name="password1" id="id_password1" required
                       autocomplete="new-password"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                {% if form.password1.errors %}
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.password1.errors }}</p>
                {% endif %}
                {% if form.password1.help_text %}
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ form.password1.help_text }}</p>
                {% endif %}
            </div>

            <div>
                <label for="id_password2" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    {% trans "Confirm Password" %}
                </label>
                <input type="password" name="password2" id="id_password2" required
                       autocomplete="new-password"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                {% if form.password2.errors %}
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ form.password2.errors }}</p>
                {% endif %}
            </div>

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

            <div class="mt-6">
                <button type="submit" 
                        class="w-full inline-flex justify-center items-center px-4 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <i class="fas fa-user-plus mr-2"></i>
                    {% trans "Create Account" %}
                </button>
            </div>
        </form>

        <div class="mt-6 text-center text-sm">
            <p class="text-gray-600 dark:text-gray-400">
                {% trans "Already have an account?" %}
                <a href="{% url 'account_login' %}" 
                   class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 focus:outline-none focus:underline"
                   onkeydown="if(event.key === 'Enter') { this.click(); }">
                    {% trans "Sign in" %}
                </a>
            </p>
        </div>
    </div>
</div>
{% endblock %}