Log in / Sign up directly on home page

Question

Instead of logging in on page '../account/login/' i would like to make avaliable for users to log directly on home page for example. What should i do to make it possible? How to connect input fields on home page with allauth? I don't know if this is too complicated to make it work in such way?

Answer 1

There is a solution that works for me. It's not the optimal solution because it's not DRY, so I would be grateful is somebody improves it!

Basically what I did is to render the official allauth login template and copy the HTML code of the form. Then I changed the csrf token and the urls and pasted it to the home page template.

Here is the example code for login/logout. You can do the same with sign up. (Note that I'm using e-mail only and not username to login, your code might be different based on your allauth settings. Take a look at your login and signup templates to see what input fields do you need and its names.)

{% load account %}

<h1>Login / Logout</h1>

{% if user.is_authenticated %}
    <p>Loged in with e-mail: {{ request.user.email }}</p>
    <a href="{% url "account_logout" %}">Logout</a>
{% else %}
    <form action="{% url "account_login" %}" method="post">
        {% csrf_token %}
        <input type="email" placeholder="E-mail" name="login">
        <input type="password" placeholder="Password" name="password">
        <label for="id_remember_menu" class="text-primary">Remember Me:</label>
        <input id="id_remember_menu" name="remember" type="checkbox">
        {% if redirect_field_value %}
            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
        {% endif %}
        <button type="submit">Login</button>
        <a href="{% url 'account_reset_password' %}">Forgot Password?</a>
    </form>
{% endif %}

I would like to improve the code and be able to render the form directly in the home page template with {{ form }} instead of copying the HTML. If I manage to do it I will update the reply later.

Answer 2

If you really have to, you can put allauth URLs below a different path. allauth uses name based URL reversal, so the new path prefix will be picked up automatically.