Search code examples
djangodjango-templatesdjango-allauth

Django allauth override default template with custom template

I'm currently trying to override a Django allauth template. So far, I followed all the recommendations on similar questions to mine:

overriding default templates of django-allauth

How to override template in django-allauth?

However, my goal is just change the default Django allauth without making new views or forms. (In previous projects I used to override the default forms constructor classes with the helper of Django Crispy Forms which is not possible in this particular case.)

I believe there is a way to ignore the {{form}} variable and just define a working form from scratch. Currently, I have my template being successfully being displayed when I navigate to 'account_login'. However, when I press Sign In nothing happens.

Here is my myapp/templates/account/login.html file:

{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}
Sign In to {{ SITE_NAME }}
{% endblock %}

{% block body %}  
<div class="centered">  
  <img class="logo" src={% static 'imgs/logo.png' %} alt="" width="100" height="100">
  <form id="login_form" class="form-signin" method="post" action="{% url 'account_login'%}">
  {% csrf_token %}
    <label for="inputLogin" class="sr-only">Email address or Username</label>
    <input type="text" id="login" class="form-control" placeholder="Email or Username" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="password" class="form-control" placeholder="Password" required>
    <div class="note mb-3">
      <label>
        <input type="checkbox" value="remember" id="remember"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    <div class="note mb-3 text-center">
      <p>Forgot? <a href="#">Retrieve your login.</a></p>
      <p>Not registered? <a href={% url 'account_signup'%}>Sign Up!</a></p>
    </div>       
  </form>
</div>
{% endblock %}
Solution

  • Yes, you can customize it the way you want. It is rather simple.

    When you use {{ form.as_p }} the page renders the form. And if you inspect the form you will notice that the page rendered the following form:

    enter image description here

    notice the id="" and the name="" you have to name it the exact same.

    With that your code should look like this:

    <form id="login_form" class="form-signin" method="post" action="{% url 'account_login'%}">
  {% csrf_token %}
    <label for="inputLogin" class="sr-only">Email address or Username</label>
    <input type="text" name="login" id="id_login" class="form-control" placeholder="Email or Username" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="password" id="id_password" class="form-control" placeholder="Password" required>
    <div class="note mb-3">
      <label>
        <input type="checkbox" name="remember" value="remember" id="id_remember"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    <div class="note mb-3 text-center">
      <p>Forgot? <a href="#">Retrieve your login.</a></p>
      <p>Not registered? <a href={% url 'account_signup'%}>Sign Up!</a></p>
    </div>       
  </form>

    And you should be good to go.