Django Allauth Customized Login Template Not Working - django

Question

I have customized the login template of allauth with bootstrap styles and widget_tweaks. When I try logging in with that template, It doesn't redirect me to the home page but remains in the same login.html template. However, when I log in with the original template from allauth in /account/login.html/ everything works well and it redirects me to my homepage. There is something that I'm not customizing right in my custom login.html template.
Below is django-allauth login.html and my custom login.html
django-allauth login.html
{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign In" %}</h1>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, sign up
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
<div class="login-or">{% trans 'or' %}</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
sign up first.{% endblocktrans %}</p>
{% endif %}
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
<button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>
{% endblock %}
my custom login.html
{% comment %}
{% extends "layouts/base-fullscreen.html" %}
{% load i18n %}
{% block title %} Login {% endblock %}
{% load widget_tweaks %}
{% block content %}
<div class="auth-wrapper">
<div class="auth-content">
<div class="auth-bg">
<span class="r"></span>
<span class="r s"></span>
<span class="r s"></span>
<span class="r"></span>
</div>
<div class="card">
<div class="card-body text-center">
<div class="mb-4">
<i class="feather icon-unlock auth-icon"></i>
</div>
<h3 class="mb-4">Login</h3>
<span class="mb-0 text-muted">
{% if msg %}
{{ msg | safe }}
{% else %}
Add your credentials
{% endif %}
</span>
<br />
<br />
<form method="post" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="md-form mb-2">
{% render_field form.login class="form-control" placeholder=form.login.label %}
</div>
<span class="text-error">{{ form.login.errors }}</span>
<div class="md-form mb-2">
{% render_field form.password class="form-control" placeholder=form.password.label %}
</div>
<span class="text-error">{{ form.password.errors }}</span>
<p class="mb-0 text-muted"><a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot password?</a>
</p>
<div class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<!-- <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked=""> -->
{% render_field form.remember class="form-control" placeholder=form.remember.label type="checkbox"%}
<label for="id_remember" class="cr"> Remember me</label>
</div>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit" name="login" class="btn btn-primary shadow-2 mb-4">Login</button>
</form>
<p class="mb-0 text-muted">Don’t have an account? <a href="{% url 'account_signup' %}" >Signup</a></p>
<br />
</div>
</div>
</div>
</div>
{% endblock content %}
allauth settings in settings.py
LOGIN_REDIRECT_URL = '/'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
SITE_ID = 1
ACCOUNT_LOGOUT_REDIRECT_URL = '/' #couterpart to Django's LOGIN_REDIRECT_URL
ACCOUNT_LOGOUT_REDIRECT = '/'
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_EMAIL_VERIFICATION = 'optional'
The other change I've made is to customize the allauth signup form to take extra two fields (first_name and last_name). That one works fine and redirects to the login url

Answer 1

you might be getting an error from the form validator. keep the original form on the page to check if its giving any errors. copy the {{ form.as_p }} from the original page 'accounts/login.html' and paste it in your custom template. if there are any errors, it'll display it.

Answer 2

this right here is your problem
{% extends "account/base.html" %}
If you have all the boostrap, jquery and widget_tweaks in your local base.html, then thats what you need to extend. The default accounts/base.html provided by django-allauth, does not come customized with bootstrap.
Use:
{% extends "base.html" %} instead