Django AllAuth and Django Crispy Forms

Question

I am trying to override the default django-allauth templates and use django-crispy-forms from improved rendering but having no luck getting the forms to actually submit, meaning I press submit and nothing happens.

Here is my settings.py:

INSTALLED_APPS = [
    'about.apps.AboutConfig',
    'content.apps.ContentConfig',
    'users.apps.UsersConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
]

...

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# All Auth settings

AUTHENTICATION_BACKENDS = (
    # Needed to login by username in Django admin, regardless of `allauth`
    'django.contrib.auth.backends.ModelBackend',

    # `allauth` specific authentication methods, such as login by e-mail
    'allauth.account.auth_backends.AuthenticationBackend',

)

SITE_ID = 1

ACCOUNT_USER_MODEL_USERNAME_FIELD = None
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_AUTHENTICATION_METHOD = 'email'

Here is my custom template:

{% extends "about/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% block navbar %}{% endblock %}

<div class="site-section mb-5">
  <div class="container">
   <div class="form-register">
     <form method="POST" class="signup" id="signup_form" action="{% url 'account_signup' %}">
         {% csrf_token %}
             <legend>Signup</legend>
             <div class="form-group">
               {{ form | crispy }}
            </div>
            <div class="form-group">
              <input type="submit" class="btn btn-primary" value="Sign Up">
            </div>
     </form>
    </div>
  </div>
</div>
{% endblock %}

I know the template is in the correct location and correctly overriding the django-allauth default templates because it renders, but why won't the submit button submit the form? I also know everything with django-allauth is working, because if I remove the custom template and use the django-allauth template, it will submit the form and redirect properly.

qqqqq · Answer 1 · 2020-06-12T22:31:17.997

I'm doing this myself now. Really, I'd need to see the data for the {{ form|crispy }} to know exactly what is going on.

However, it isn't enough to simply render a similar form and submit. allauth has stuff running in the background (some of which is not entirely known to me). I would recommend pulling the templates from the allauth github and editing them directly, removing tags you know are sure you don't need, like "extends 'allauth/base.html', headings, etc.. They're found Here.

Then, I followed the details of the second method from this answer to add the forms as context processors (most useful for my case use):

2. Contex processor

a) Make folder your_project/your_app/context_processor. Put there 2 files - __init__.py and login_ctx.py

b) In login_ctx.py add:
from allauth.account.forms import LoginForm

def login_ctx_tag(request):
    return {'loginctx': LoginForm()}
c) In project's SETTINGS add your_app.context_processors.login_ctx.login_form_ctx' inTEMPLATES` section. Something like:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'templates', 'allauth')],
        'APP_DIRS': True,
        'OPTIONS': {
            'debug': DEBUG,
            'context_processors': [
                'your_app.context_processors.login_ctx.login_form_ctx',  # <- put your
processor here 'django.template.context_processors.debug', # [...other processors...] ], }, }, ]

d) In your *.html where you need add the next:
{% if not user.is_authenticated %}
    <form action="{% url 'account_login' %}" method="post">
        {% csrf_token %}
        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
        {{ loginctx }}
        <button type="submit">Login</button>
    </form>
{% else %}
    {# display something else here... (username?) #}
{% endif %}

So if you are rendering your own forms, I would recommend rendering the very same allauth forms instead in the custom template.

Add the crispy tag and all is good.

Django AllAuth and Django Crispy Forms

1 Answers1