8 How to Build an Entire Functioning Login Page

The first step is to import the Django login view in accounts/urls.py:

from django.contrib.auth.views import login

Now add a url for the login view that was just imported:

    url(r'^login/$', login, {'template_name': 'accounts/login.html'})

You can view the page in development at localhost:8000/account/login. That page you see is now utilising the Django login view.

The view we just rendered in the browser also gives us access to a functional login form, but before we can use it, we’re going to need to display it in the corresponding template that we just associated with the view called accounts/login.html.

First though, let’s clean up those templates. Since we already have the head and body tags in the base template, they can be removed everywhere except the base template. We’ll leave only the head and body blocks instead. In home.html, you should now have something along these lines:

{% extends 'base.html' %}
<h1>Home</h1>
{% block head %}
<title>Home</title>
{% endblock %}

{% block body %}
<h1>Home</h1>
{% endblock %}

We can also refactor the login.html template in a similar fashion:

{% extends 'base.html' %}

{% block body %}
<div class="container">
    <h1>Welcome</h1>
    <p>You can log in here!</p>
    <h2>Login</h2>
</div>
{% endblock %}

This template forms the base of the login page, the final step is to put the form itself on the page. Under the login header <h2>Login</h2> above let’s add that:

    <form method="post">
        {% csrf_token %}
        
        <button type="submit">Login</button>
    </form>

There you go, now you have a login page! We just need to fix our database to be able to use it…