Las plantillas predeterminadas de django-allauth parecen contundentes y es posible que no se ajusten a sus necesidades. Así es como puedes anularlos.

django-allauth es un paquete de Django que le permite crear un sistema de autenticación para sus aplicaciones Django de forma rápida y sencilla. Tiene plantillas integradas que le permiten concentrarse en otras partes importantes de su aplicación.

Aunque las plantillas integradas son útiles, querrás cambiarlas porque no tienen la mejor interfaz de usuario.

Cómo instalar y configurar django-allauth

Siguiendo unos sencillos pasos, puedes instalar django-allauth sin problemas en tu proyecto Django.

  1. puedes instalar django-allauth paquete utilizando el administrador de paquetes Pip:
    pip install django-allauth
  2. En el archivo de configuración de su proyecto, agregue estas aplicaciones a sus aplicaciones instaladas:
    INSTALLED_APPS = [

     Add your other apps here
    # Djang-allauth configuration apps
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount', # add this if you want to enable social authentication
    ]
    3. instagram viewer
  3. Agregue servidores de autenticación a su archivo de configuración:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Agregue una ID de sitio a su proyecto:
    SITE_ID = 1
  5. Configure las URL para django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Si realiza las configuraciones anteriores correctamente, debería ver una plantilla como esta cuando navegue a http://127.0.0.1:8000/accounts/signup/:

Puede ver la lista de URL disponibles navegando a http://127.0.0.1:8000/accounts/ con DEPURACIÓN = Verdadero en su archivo de configuración.

Cómo anular la plantilla de inicio de sesión en django-allauth

Primero, necesita configurar su plantillas carpeta si no lo ha hecho. Abra su archivo de configuración y navegue hasta el PLANTILLAS lista. En su interior localiza el DIRS lista y modifíquela así:

'DIRS': [BASE_DIR/'templates'],

Asegúrese de tener un plantillas carpeta en el directorio raíz de su proyecto. Puede anular la plantilla de inicio de sesión predeterminada en django-allauth siguiendo estos siguientes pasos.

Paso 1: cree sus archivos de plantilla

En tus plantillas carpeta, cree una nueva carpeta llamada cuenta para contener las plantillas relacionadas con django-allauth.

Las plantillas de registro e inicio de sesión deben ser registro.html y iniciar sesión.html respectivamente. Puede determinar el nombre correcto de la plantilla abriendo su Entorno virtual de Python y navegando hacia Lib > paquetes de sitio > allauth > plantillas > cuenta carpeta para encontrar las plantillas. Debes revisar el código para comprender cómo funcionan las plantillas. Por ejemplo, la plantilla de inicio de sesión tiene este código:

Paso 2: agregue código HTML a sus archivos de plantilla

Después de crear sus archivos, debe agregar el código HTML personalizado para su plantilla. Por ejemplo, para anular la plantilla de inicio de sesión anterior, es posible que desee copiar todo desde el {% demás %} bloque, que contiene el formulario y el botón de envío, y agréguelo a su plantilla personalizada. He aquí un ejemplo:

{% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
<ahref="{{ signup_url }}">sign upa> first.p>

<formclass="login"method="POST"action="{% url 'account_login' %}">
 {% csrf_token %}
 {{ form.as_p }}
 {% if redirect_field_value %}
<inputtype="hidden"name="{{ redirect_field_name }}"value="{{ redirect_field_value }}" />
 {% endif %}
<aclass="button secondaryAction"href="{% url 'account_reset_password' %}">Forgot password?a>
<buttonclass="primaryAction"type="submit">SIgn inbutton>
form>
 {% endblock content %}

El código anterior utiliza Herencia de plantillas de Django heredar características del base.html plantilla. Asegúrese de eliminar etiquetas innecesarias, como {% blocktrans%} etiqueta. Si ha hecho esto, su página de inicio de sesión debería ser similar a esta:

El encabezado y pie de página de la imagen de arriba serán diferentes a los suyos.

Paso 3: agregue estilos personalizados a su formulario

En el paso anterior, el formulario de inicio de sesión se representa como un párrafo utilizando el {{ formulario.as_p }} etiqueta. Para agregar estilos a su formulario, necesita saber el valor del nombre atributo asociado con cada campo de entrada.

Puede inspeccionar su página para obtener los valores que necesita.

La imagen de arriba muestra el atributo de nombre asociado con el correo electrónico campo del formulario.

Ahora puede agregar los campos del formulario individualmente en su proyecto. Por ejemplo, puede agregar el campo de correo electrónico de esta manera:

{{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
{{ form.login.errors|safe }}

Puede usa Bootstrap con tu proyecto Django para diseñar fácilmente su formulario. He aquí un ejemplo:

<divclass="form-floating form-group">
 {{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
 {{ form.login.errors|safe }}
div>

El código anterior agrega clases de formulario Bootstrap al formulario. Ahora puede agregar los otros campos que necesita y diseñarlos según sus preferencias. Si no te gusta usar Bootstrap para diseñar, django-crispy-forms es una alternativa para diseñar tus formularios. El siguiente ejemplo utiliza Bootstrap para diseñar.

<divclass="container d-flex justify-content-center align-items-center vh-100">
<formmethod="post"class="login"id="signup_form"action="{% url 'account_login' %}">
<divclass="text-center mb-4">
<h1class="h3 mb-3 font-weight-normal">Sign inh1>
div>
 {{ form.non_field_errors | safe }}
 {% csrf_token %}
<divclass="row g-3">
<divclass="col-12">
<divclass="form-floating form-group">
 {{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
 {{ form.login.errors|safe }}
div>
div>
<divclass="col-12">
<divclass="form-floating form-group my-3">
 {{ form.password }}
<labelfor="{{form.password.id_for_label}}">Passwordlabel>
 {{ form.password.errors|safe }}
div>
div>
<divclass="col-12">
<divclass="form-check">
<labelfor="{{form.remember.id_for_label}}"class="form-check-label">Remember melabel>
 {{ form.remember }}
div>
div>
<divclass="col-6">
 {% if redirect_field_value %}
<inputtype="hidden"name="{{ redirect_field_name }}"value="{{ redirect_field_value }}" />
 {% endif %}
<buttonclass="btn btn-primary w-100 py-3 bg-accent"type="submit">Sign inbutton>
<aclass="button secondaryAction text-accent"href="{% url 'account_reset_password' %}">Forgot
 Password?a>
div>
div>
form>
div>

El bloque de código anterior producirá un resultado similar a la siguiente imagen:

Puedes aprender más sobre los formularios en django-allauth leyendo el documentación oficial.

Anular cualquier plantilla en django-allauth

django-allauth contiene muchas plantillas predeterminadas que puedes anular. Con los pasos de esta guía, puedes anular cualquier plantilla en django-allauth. Debería considerar el uso de este paquete para manejar su sistema de autenticación, de modo que pueda concentrarse en desarrollar las otras características importantes de su aplicación.