Django Allauth Customized Login Template Not Working - django

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

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.

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

Related

CSS definitions in django-allauth account templates

I am trying out django-allauth and have come across a block while customizing the allauth account templates. I am presently working on the emails.html template but I am unable to find any definition for the css classes used inside the default templates.
CSS classed such as ctrlHolder or primary_email. Please help me with figuring out where these are defined. I can use the bootstrap css but was hoping to keep the default ones if they are good enough.
accounts/emails.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "E-mail Addresses" %}{% endblock %}
{% block content %}
<h1>{% trans "E-mail Addresses" %}</h1>
{% if user.emailaddress_set.all %}
<p>{% trans 'The following e-mail addresses are associated with your account:' %}</p>
<form action="{% url 'account_email' %}" method="post">
{% csrf_token %}
<div class="form-group">
{% for emailaddress in user.emailaddress_set.all %}
<div class="ctrlHolder">
<label for="email_radio_{{ forloop.counter }}"
class="{% if emailaddress.primary %}primary_email{% endif %}">
<input id="email_radio_{{ forloop.counter }}" type="radio" name="email"
{% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{% endif %}
value="{{ emailaddress.email }}"/>
{{ emailaddress.email }}
{% if emailaddress.verified %}
<span class="verified">{% trans "Verified" %}</span>
{% else %}
<span class="unverified">{% trans "Unverified" %}</span>
{% endif %}
{% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
</label>
</div>
{% endfor %}
<div class="buttonHolder">
<button class="secondaryAction" type="submit"
name="action_primary">{% trans 'Make Primary' %}</button>
<button class="secondaryAction" type="submit"
name="action_send">{% trans 'Re-send Verification' %}</button>
<button class="primaryAction" type="submit" name="action_remove">{% trans 'Remove' %}</button>
</div>
</div>
</form>
{% else %}
<p>
<strong>{% trans 'Warning:' %}</strong> {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
</p>
{% endif %}
<h2>{% trans "Add E-mail Address" %}</h2>
<form method="post" action="{% url 'account_email' %}" class="add_email">
{% csrf_token %}
{{ form.as_p }}
<button name="action_add" type="submit">{% trans "Add E-mail" %}</button>
</form>
{% endblock %}
{% block extra_body %}
<script type="text/javascript">
(function () {
var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
var actions = document.getElementsByName('action_remove');
if (actions.length) {
actions[0].addEventListener("click", function (e) {
if (!confirm(message)) {
e.preventDefault();
}
});
}
})();
</script>
{% endblock %}
Here I have my custom base page being called via the accounts base.html
{% extends "shared/base.html" %}
The class is not defined in allauth. It is there so that you can define it in your CSS. I guess the names are ctrlHolder and buttonHolder because they are placeholder class names for the input-control and button html statements.

create() takes 1 positional argument but 2 were given

I'm using Django and allauth trying to get a signup page working but for some reason it does not work.
Whenever I have entered all the sign up data that's required and press Create an account it gives me this error;
TypeError at /accounts/signup/
create() takes 1 positional argument but 2 were given
This is my signup script;
{% extends "account/base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
<main>
<div class="container">
<section class="mb-4">
<div class="row wow fadeIn">
<div class='col-6 offset-3'>
<h1>{% trans "Sign Up" %}</h1>
<p>{% blocktrans %}Already have an account? Then please sign in.{% endblocktrans %}</p>
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{{ form|crispy }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button class='btn btn-primary' type="submit">{% trans "Sign Up" %} »</button>
</form>
</div>
</div>
</section>
</div>
</main>
{% endblock %}
Update: I'm unable to find where the problem is located at.
I have found something like this down here but I don't think that's the issue.
def userprofile_receiver(sender, instance, created, *args, **kwargs):
if created:
userprofile = UserProfile.objects.create(
userprofile_receiver, user=instance)
post_save.connect(userprofile_receiver, sender=settings.AUTH_USER_MODEL)

django: extending allauth.account

allauth.account comes with a signup.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign Up" %}</h1>
<p>{% blocktrans %}Already have an account? Then please sign in.{% endblocktrans %}</p>
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit">{% trans "Sign Up" %} »</button>
</form>
{% endblock %}
i would like to override it instead of using the form
what do i need to post to the url account_signup?
thank you
The 'account_signup' url is aimed to receive the POST request passing
at least the form fields marked as required in order to create an account.
But keep in mind that the name of the fields may vary based on the allauth settings.
I ended up doing the same thing, ealeon. Here is what I went with and it works well. Pardon the bootstrap classes, but you get the gist.
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.login.errors }}
{{ form.login }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
{{ form.password }}
</div>
<div class="login-options pull-left">
{{ form.remember.errors }}
<label for="{{ form.remember.id_for_label }}">Stay signed in?</label>
{{ form.remember }}
</div>
<div class="login-options pull-right">
<a class="button secondaryAction"
href="{% url 'account_reset_password' %}">
{% trans "Forgot Password?" %}
</a>
</div>
<button class="btn btn-block btn-primary" type="submit">{% trans "Sign In" %}</button>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
</form>

How can I use django-userena login and logout forms in every page with djangocms?

I have a site running with djangocms and I need the login and logout capabilities of django-userena, it's easy for me to use this because every user will have a profile page too. The design for the menu in every page states that a simple login form has to be in the top right corner of the menu. I have already done that, but I need the django-userena login to work with it. How can I do it?
I have tried to add the form in my base.html. Also tried with a middleware.py like this
class LoginFormMiddleware(object):
def process_request(self, request):
from userena.forms import AuthenticationForm
if request.method == 'POST' and request.POST.has_key('base-account') and request.POST['base-account'] == 'Login':
form = AuthenticationForm(data=request.POST, prefix="login")
if form.is_valid():
from django.contrib.auth import login
login(request, form.get_user())
request.method = 'GET'
else:
form = AuthenticationForm(request, prefix="login")
request.login_form = form
class LogoutFormMiddleware(object):
def process_request(self, request):
if request.method == 'POST' and request.POST.has_key('base-account') and request.POST['base-account'] == 'Logout':
from userena.views import signout
signout(request)
request.method = 'GET'
base.html
<form class="navbar-form navbar-right login-strip" action="" method="post">
{% csrf_token %}
<p id="login">
{{ request.login_form.non_field_errors }}
{% for field in request.login_form %}
{{ field.errors }}
{{ field.label_tag}}: {{ field }}
{% endfor %}
<input type="submit" name="base-account" value="Login" />
</p>
</form>
{% else %}
<form class="navbar-form navbar-right login-strip" action="" method="post">
{% csrf_token %}
<p id="logout">Logged in as <b>{{ request.user.username }}</b>.
<input type="submit" name="base-account" value="Logout" />
</p>
</form>
{% endif %}
This gives me this error
'WSGIRequest' object has no attribute 'get'
I have tried a lot of thighs in this.
Now I'm not using any side django-authetication I just put some code in my menu.html this way I can login and log out as need.
My problem was the normal account has no way to logout.
My work around is that:
menu.html
{% load i18n menu_tags cache %}
{% for child in children %}
<li class="{% if child.ancestor %}ancestor{% endif %}
{% if child.selected %} active{% endif %}
{% if child.children %} dropdown{% endif %}">
{% if child.children %}
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
{{ child.get_menu_title }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
{% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
</ul>
{% else %}
<span>{{ child.get_menu_title }}</span>
{% endif %}
</li>
{% if class and forloop.last and not forloop.parentloop %}{% endif %}
{% endfor %}
<li class="User" style="position: absolute; right: 0;">
<a >
{% if user.is_authenticated %}
<form method="post" action= "accounts/logout/?next={{ request.path }}">
{% csrf_token %}
<button type="submit" class="cms-btn cms-btn-action"><span class="glyphicon glyphicon-user"></span> {{ request.user.username }}</button>
</form>
{% else %}
<form action="{% url 'pages-root' %}{% if request.path != logout_url %}?next={{ request.path }}&{{ cms_edit_on }}&cms-toolbar-login=1{% endif %}"
class="cms-toolbar-item cms-form-login" method="post">
{% csrf_token %}
<label{% if request.toolbar.login_form.username.errors or request.toolbar.login_form.non_field_errors or cms_toolbar_login_error %} class="cms-error"{% endif %}>
<span>{% trans request.toolbar.login_form.username.label %}</span>
{{ request.toolbar.login_form.username }}
</label>
<label{% if request.toolbar.login_form.password.errors or request.toolbar.login_form.non_field_errors or cms_toolbar_login_error %} class="cms-error"{% endif %}>
<span>{% trans request.toolbar.login_form.password.label %}</span>
{{ request.toolbar.login_form.password }}
</label>
<label>
<input class="cms-btn cms-btn-action" type="submit" value="{% trans 'Login' %}">
</label>
</form>
{% endif %}
</a>
</li>
urls.py added this:
url(r'^accounts/', include('django.contrib.auth.urls')),
I end up with this code, more mobile friend.
<li class="User" style="position: absolute; right: 0;">
<a >
{% if user.is_authenticated %}
<form method="post" action= "accounts/logout/?next={{ request.path }}">
{% csrf_token %}
<p id="logout"><span class="glyphicon glyphicon-user"></span> <b>{{ request.user.username }}</b>
<button type="submit" class="cms-btn cms-btn-action"><span class="glyphicon glyphicon-off"></span> {% trans "Logout" %}</button>
</form>
{% else %}
<form method="post" action="{{request.path}}?edit">
{% csrf_token %}
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span> {% trans "Login" %}</button>
</form>
{% endif %}
</a>
</li>

Django AllAuth How do you Customize your own HTML or CSS

{% extends "account/base.html" %}
{% load url from future %}
{% load i18n %}
{% block head_title %}{% trans "Signup" %}{% endblock %}
{% block content %}
</style>
<h1><b>Free Membership</b>Sign up Today</h1>
<h1>{% trans "Sign Up" %}</h1>
<p>{% blocktrans %}Already have an account? Then please sign in.{% endblocktrans %}</p>
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit">{% trans "Sign Up" %} »</button>
</form>
<h1><b>Free Membership</b>Sign up Today</h1>
{% endblock %}
{% block content2 %}
{% endblock %}
This is the original Code from Django All Auth.
What I want to do is bring it more to life like add some better HTML5 or CSS to it when I do it does not change?
Here's my login.html template (I'm using Bootstrap, Jquery and Font-Awesome for the icons).
{% extends "account/base.html" %} {% load i18n custom_tags account %} {% block head_title %}{% trans "Sign In" %}{% endblock %} {% block common_scripts %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
// Load jquery straight from the cdn for this page.
$(function() {
// We need some mappings for Providers names from AllAuth to the icon class names.
$('.btn-google').addClass('btn-google-plus');
$('.btn-linkedin_oauth2').addClass('btn-linkedin');
$('.fa-linkedin_oauth2').addClass('fa-linkedin');
$('#id_login').addClass('form-control').removeAttr('autofocus').blur();
$('#id_password').addClass('form-control');
});
</script>
{% endblock %} {% block content %}
<div class="container col-md-12">
<div class="well login-well">
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% load socialaccount %} {% for provider in socialaccount.providers %} {% if provider.id == "openid" %} {% for brand in provider.get_brands %}
<li>
<a title="{{ brand.name }}" class="btn btn-block btn-social btn-md btn-{{ provider.id }} socialaccount_provider {{ brand.id }}" href="{% provider_login_url provider.id openid=brand.openid_url process=" login " %}">
<i class="fa fa-{{ provider.id }}"></i>Log in with {{ brand.name }}
</a>
</li>
{% endfor %} {% endif %}
<li>
<a title="{{ provider.name }}" class="btn btn-block btn-social btn-md socialaccount_provider btn-{{ provider.id }}" href="{% provider_login_url provider.id process=" login " %}">
<i class="fa fa-{{ provider.id }}"></i>Log in with {{ provider.name }}
</a>
</li>
{% endfor %}
</ul>
<hr>
<form class="django-login" method="POST" action="{% url 'login' %}">
{% csrf_token %} {% if form.non_field_errors %}
<div class="alert alert-warning">
<ul class="alert-message">
{% for error in form.non_field_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="input-group {% if form.login.errors %}has-error{% endif %}">
<span class="input-group-addon glyphicon glyphicon-envelope"></span>
{{ form.login }}
</div>
<div class="input-group {% if form.password.errors %}has-error{% endif %}">
<span class="input-group-addon glyphicon glyphicon-lock"></span>
{{ form.password }}
</div>
<div class="fieldWrapper form-inline remember text-center">
{{ form.remember }}
<label for="id_remember" class="text-muted">Remember me</label>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />{% endif %}
<div class="btn-div pull-center">
<button class="btn btn-primary btn-block" type="submit">{% trans "Sign In" %}</button>
</div>
</form>
</div>
<hr>
<div>
<small><a class="text-muted" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a></small>
<br>
<small><a class="text-muted" href="{% url 'signup' %}">Sign up</a></small>
</div>
</div>
</div>
{% endblock %}
And how it looks:
You can put custom templates for allauth in your template directory under account folder. Django allauth would take the custom template from it and renders it.
Following is sample signup page I have created some days ago:
{% extends "base.html" %}
{% load staticfiles %}
{% load socialaccount %}
{% block extra_body %}account-bg{% endblock %}
{% block partial %}
<div class="container">
<div class="row">
<div class="account-form-container">
<div class="row">
<div class="col-md-12">
<h3>Create New Account</h3>
</div>
</div>
<div class="row">
<form class="form-horizontal signup-form" id="userSignupForm" action="{% url "account_signup" %}" method="post" role="form">
{% csrf_token %}
{% if request.GET.next %}
<input type="hidden" name="next" value="{{request.GET.next}}">
{% endif %}
{% if form.non_field_errors %}
<div class="fieldWrapper alert alert-danger">
<ul>
{% for error in form.non_field_errors %}
<li>{{ error | lower}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="col-lg-12">
<div class="form-group inner-addon left-addon {% if form.email.errors %}has-error{% endif %}">
<i class="icon-user"></i>
<input class="form-control login-field" type="text" id="id_email" name="email" placeholder="Email">
<span class="help-block">{{ form.email.errors }}</span>
</div>
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="icon-lock"></i>
<input class="form-control login-field" type="password" id="id_password1" name="password1" placeholder="Password">
<span class="help-block">{{ form.password1.errors }}</span>
</div>
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="icon-lock"></i>
<input class="form-control login-field" type="password" id="id_password2" name="password2" placeholder="Confirm Password">
<span class="help-block">{{ form.password1.errors }}</span>
</div>
<div class="form-group">
<div class="col-md-5">
<button type="submit" class="btn btn-complete btn-bold pull-right">Sign Up</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
I hope this would help you.