Django Login/Logout System Part-II

What's up guys! In this second and last part of our login/logout system, we are going to:

Create the login and logout templates in our app's template directory.
Modify base.html and home.html to customize what the user sees based on his authentication status.
Modify the RegisterView inside views.py to avoid users from accessing the register page while they are authenticated.
Modify the dead links to point to the login/logout templates now that we have them.

{% extends "users/base.html" %}
{% block title %} Login Page {% endblock title%}
{% block content %}
    <div class="form-content my-3 p-3">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-5">
                    <div class="card shadow-lg border-0 rounded-lg mt-0 mb-3">
                        <div class="card-header justify-content-center">
                          <h3 class="font-weight-light my-1 text-center">Sign In</h3>
                        </div>
                        {% if form.errors %}
                            <div class="alert alert-danger alert-dismissible" role="alert">
                                <div id="form_errors">
                                    {% for key, value in form.errors.items %}
                                        <strong>{{ value }}</strong>
                                    {% endfor %}
                                </div>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        {% endif %}
                        <div class="card-body">
                            <form method="POST">
                                {% csrf_token %}
                                <div class="form-row">
                                    <div class="col-md-10 offset-md-1">
                                        <div class="form-group">
                                            <a href="#"
                                                   class="btn btn-link btn-lg active btn-block">Sign in with GitHub</a>
                                            <a href="#"
                                                   class="btn btn-link btn-lg active btn-block">Sign in with Google</a>
                                            <hr>
                                            <p class="text-center"><strong>OR</strong></p>
                                            <hr>
                                            <label class="small mb-1">Username</label>
                                            {{ form.username }}
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-10 offset-md-1">
                                        <div class="form-group">
                                          <label class="small mb-1">Password</label>
                                          {{ form.password }}
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-10 offset-md-1">
                                        <div class="form-group">
                                            <!-- Add a Remember me functionality -->
                                            {{ form.remember_me }}
                                            <label> Remember me</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-10 offset-md-1">
                                        <div class="form-group mt-0 mb-1">
                                          <button name="login" class="col-md-12 btn btn-dark" id="login">Sign in</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-footer text-center">
                            <div class="small">
                                <a href="{% url 'users-register' %}">Don't have an account yet? Go to signup</a><br>
                                <a href="#"><i>Forgot Password?</i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     </div>
{% endblock content %}

We will add a social authentication in another part, but for now the sign in with google and sign in with github are dead links.

logout.html

{% extends "users/base.html" %}
{% block title %}Logout{% endblock title %}
{% block content %}
    <div class="card" style="width: 18rem;">
        <div class="card-body">
        <h5 class="card-title">You have been logged out</h5>
        <p class="card-text">
            Thanks for your time, contact me for any comments or suggestions using my email address.
        </p>
        <br><hr><a href="{% url 'login' %}" class="btn btn-primary">Sign in again</a>
        </div>
    </div>


{% endblock content %}

Modifications

Open base.html and go to the line where we have a list of navigation items and in place of that add the following snippet. This will display the right navigation item depending on what user.is_authenticated returns.

base.html

<div class="navbar-nav ml-auto">
                  {% if user.is_authenticated %}
                    <a href="#" class="nav-item nav-link">Profile</a>
                    <a href="{% url 'logout' %}" class="nav-item nav-link">Logout</a>
                  {% else %}
                    <a href="{% url 'login' %}" class="nav-item nav-link">Sign in</a>
                  {% endif %}

                </div>

Modify the dead links in register.html and home.html to point to the login and logout pages since we now have them.
Modify the register view inside views.py - users might want to access the register page while they are authenticated so to avoid that let's override the dispatch method.

Add the following method above the get method of the RegisterView class.

views.py

    def dispatch(self, request, *args, **kwargs):
        # will redirect to the home page if a user tries to access the register page while logged in
        if request.user.is_authenticated:
            return redirect(to='/')

        # else process dispatch as it otherwise normally would
        return super(RegisterView, self).dispatch(request, *args, **kwargs)

Last but not least it's better to redirect the user to the login page after registering. Since we didn't have a login page when creating the sign up page we redirected the user to the home page, but now that we have a login page do something like this inside the RegisterView class - return redirect(to='login').

Alright, almost finished ...

Is it working as it should?

Start the development server and run the usual command python manage.py runserver in your terminal.
Go to localhost and play around with it, see if everything is working fine.

Thanks for your time. You can find the finished app in github. See you next time with another part of the series.

Any comments and suggestions are welcome.

Blog

Django Login/Logout System Part-II

Hana Belay

Modifications

Is it working as it should?

Join Our Newsletter. No Spam, Only the good stuff.

Related