Django Login Forms

4/29/2017

While amusing myself with a quick proof of concept for an MRP (material resource planning) for work, I was attempting to implement a login form without using any existing Django packages such as Django All-Auth. Luckily, Django conveniently provides a built-in login view as part of the authentication system. Using this, one can easily utilize the login view to implement a customized login page to their liking.

Requirements

Django 1.11
Python 3.6

All code can be found HERE

Setup, Settings, and URLs

Start a new project, use the migrate command to create a new database, and configure a new super user. I left the Django settings in its default state. Depending on what version of Django you're using, it should already have the correct APPS installed in the settings file. Note: I'm using Python 3, so the syntax may differ if you're using a previous version of Python.

We have to update the settings.py file to ensure Django knows where to find our templates. Normally, templates are kept within their respective apps. However, I like to organize mine into a single directory, outside of all apps in the project directory.

Next up, configure the URLs to redirect to the Django login view. You'll notice the login URL has a dict being passed as a parameter. Normally, django.contrib.auth will attempt to render registration/login.html. However, by passing the dict, we can specify which html template we want rendered in the URL.

Create and Update views.py

Then, let's create a views.py file in the main app folder so that the request knows which html file to render.

Create a base.html, login.html, and implement MDL

Next, we'll want to set up our base html template to make our login page look pretty and refined. While most people tend to stick with the tried and true Bootstrap, I've decided to take a different route and go for Google's homegrown Material Design Lite. We can create a new templates folder in the project directory and create a base.html file. Make sure the project organization looks like the following:

In base.html let's implement MDL (Material Design Lite). I like to be a bit lazy and use the CDN method for the sake of simplicity. Don't forget to add our Django template blocks!

Okay, now that the base.html is squared away, let's create the login.html in the templates folder. We'll go ahead and use the bare minimum.

Run the Server and Make it sexier

Let's see what this looks like in it's current state. Running the server and navigating to the login screen yields the following:

Hmmm. Not bad, but we can do better. Let's bring Google's MDL to its full potential. Let's update the home.html file to the following and let's run the server again.

Nice, it's starting to look better already! But, we can certainly do better. If you notice in the login.html, it defers to the base form's username and password fields. It's not exactly the prettiest, and doesn't adhere to Google MDL, but it works. Ideally, we'd like to use MDL's nice looking text field input type in our login form. We can customize this by creating a form and importing the built-in Django login form and using our own CSS. Create a forms.py in the main app folder and use the following code block. Refer to the project hierarchy code block above if you need additional reference. You'll notice we modify the username and password fields in the form and add additional attributes. Feel free to use any of the attributes in Google MDL!

Then we'll have to update our URLs to pass in a custom form to the login URL. Make sure to import the forms.py file.

Finally, when we run the server with our new changes, we finally get the super awesome login page we wanted!

That's it! For more information regarding the Django Authentication system and Google's MDL, check out the following links:

0 Comments