Symons
Passionate developer with 3 years of building web apps with python Django. Symons is a graduate from Maseno University with Bsc Computer Science degree. He is mostly happy when his students make strides

CHAPTER 6: Authentication(continued)

Lets quickly use what we just created! we will redirect links on homepage appropriately and add login/logout links and finally learn styling forms with crispy-forms

Let us have the links on home page redirect to the respective signup page.

 

Go to home.html and change the following links:

 

<p><a href="{% url 'support_home' %}">Support Page</a></p> 
<p><a href="{% url 'director_home' %}">Director Page</a></p>
<p><a href="{% url 'client_home' %}">Client Page</a></p>

 

To

<p><a href="{% url 'support_signup' %}">Support Page</a></p> 
<p><a href="{% url 'director_signup' %}">Director Page</a></p>
 <p><a href="{% url 'client_signup' %}">Client Page</a></p>

 

Now, let us add login and logout links in base.html

<h1>Support Page [{{request.user}}]</h1>
<h6><span><a href="{%url 'login'%}">login</a></span> | <span><a href="{% url 'logout'%}">logout</a></span></h6>

 

Currently, logout seems ok. but login gives an error:

You are right we need a template.

Let us Create registration/login.html

have the following in it:

{% extends 'base.html' %}

 {% block content %}
 <div class="row"> <div class="col-md-8 col-sm-10 col-12">
 <h2>Login</h2>
 <form method="post" novalidate> {% csrf_token %} 
<input type="hidden" name="next" value="{{ next }}"> 
{{ form }}
 <button type="submit" class="btn btn-success">Submit</button>
 </form> 
</div>
 </div>
 {% endblock %}

 

Login now works but it doesn’t know where to redirect to. so lets set that in settings.py ASP

open settings.py and add:

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'

 

so Currently login and logout redirect to the home page. We will change the login redirect URL to our URL of choice.

And we are done with that for now. lets style.

our forms are currently looking bad:

We can make it better:

1. lets download Django-crispy-forms in terminal activate venv and do.

pip install django-crispy-forms

 

2. add it to installed apps in settings.py

'crispy_forms',

 

we now have:

INSTALLED_APPS = [ 
                     'django.contrib.admin', 
                     'django.contrib.auth', 
                     'django.contrib.contenttypes', 
                     'django.contrib.sessions', 
                     'django.contrib.messages', 
                     'django.contrib.staticfiles', 
                     'ticketing',
                     'crispy_forms',
                 ]

 

in templates whenever there’s form. login and signup, in this case, do this

{% extends 'base.html' %}
 {% load crispy_forms_tags %} 
{% block content %}
 <div class="row">
 <div class="col-md-8 col-sm-10 col-12">
 <h2>Login</h2> 
<form method="post" novalidate> {% csrf_token %}
 <input type="hidden" name="next" value="{{ next }}"> 
{{ form|crispy }}
 <button type="submit" class="btn btn-success">Submit</button>
 </form>
 </div> 
</div> 
{% endblock %}

 

And we are good.

I added

{% load crispy_forms_tags %}

 

and

{{ form | crispy }}

 

Its starting to take shape.

Quick Update

Let us make the form more beautiful. as I said styling Django forms isn’t easy, make the following changes.

settings.py

add CRISPY_TEMPLATE_PACK = 'bootstrap4' at the end of the file

That should make every form look better but I chose to make them centred by using columns and placing them inside a container.

login.html

{% extends 'base.html' %} 
{% load crispy_forms_tags %}
 {% block content %}
 <div class="row"> <div class="col-md-3"></div> 
<div class="col-md-6">
 <div class="container">
 <h2>Login</h2> 
<form method="post" novalidate> {% csrf_token %}
 <input type="hidden" name="next" value="{{ next }}"> {{ form|crispy }}
 <be>
 <button type="submit" class="btn btn-success">Submit</button> 
</form>
 </div>
 </div>
 <div class="col-md-3">
</div>
 </div> 
{% endblock %}

 

Signup.html

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

{% block content %}
<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <div class="container">
            <h2>Add a {{ user_type }}</h2>
            <form method="post" novalidate>
                {% csrf_token %}
                <input type="hidden" name="next" value="{{ next }}">
                {{ form | crispy }}
                <button type="submit" class="btn btn-success">Submit</button>
            </form>
        </div>
    </div>
    <div class="col-md-3"></div>
</div>
{% endblock %}

I also made a change in base.html 

<h1>
 Welcome TO Sticketing : {% if request.user.is_authenticated %} [{{request.user}}]{% else %} <small> Login or signup to continue</small>
 {% endif %}
 </h1>

 

and that is!

django form styled with crispy forms

styling django forms with crispy forms

Let us meet in the next chapter, give me your feedback. Also, comment below and help others if they are stack

Get the code from github

You may join my whatsapp group

or Contact me personally info@omborisymons.com

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *