Django Login/Logout System Part-II
Tags: python, django, webdev, codenewbie
Published: 2021-08-27 14:08:56

What's up guys! In this second and last part of our login/logout system, we are going to:
1. Create the login and logout templates in our app's template directory.
2. Modify *base.html* and *home.html* to customize what the user sees based on his authentication status.
3. Modify the `RegisterView` inside *views.py* to avoid users from accessing the register page while they are authenticated.
4. Modify the dead links to point to the login/logout templates now that we have them.

------------------------------------------------------------------

login.html
```html
{% 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
```python
{% 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
```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](https://docs.djangoproject.com/en/3.2/ref/class-based-views/base/#django.views.generic.base.View.dispatch) method.

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

views.py
```python
    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](https://github.com/earthcomfy/Django-registration-and-login-system). See you next time with another part of the series.

Any comments and suggestions are welcome.