Build a Job Search Portal with Django — Part 2
By: Kumar Shubham
Tags: Programming, Bycetutorial, Coding, Django, Python

Build a Job Search Portal with Django — Users App (Part 2)

In the second part, we will deal with all of Users App and will overwrite some templates for the social account login Kumar Shubham Dec 9, 2020·7 min read

Photo by Andrew Neel on Unsplash

Hello friends! This is the second part of the new Django series I have started writing on, which is Building a Job Search Portal with Django. I hope every one of you has already read the first part.

If you have not yet read the first part of this series, I would strongly recommend reading the first part first and then come back to this one. Here I am linking the first part:-

So, in this part of the series, we would be discussing the Users app and will also overwrite some pre-defined templates present in allauth which we are using for social login in our app.

So, we will first start with Users app backend part (models, views, forms etc.) then we will move on to the part of the templates.

Users app has nothing to do with any models and forms since we are only using this app for all authentication, profile and account purpose. All our major backend is stored in the candidates and recruiters app. Here, in the Users app, we only have some views to deal with which are needed to show the relevant templates.

You may be wondering why so less work is needed for authentication purposes. Actually, a lot is happening but we do not need to care about them. All of this can be attributed to the fact that we are using allauth package to handle our authentication and we are not doing this on our own.

Also, we are only using social login providers so we are free from any password handling and recovery issues. So, we do not need to bother on this part.

So, let’s have a look at views.py of the Users app.

from django.shortcuts import render

from django.contrib.auth.decorators import login_required





def login(request):

return render(request, 'users/login.html')





@login_required

def account(request):

context = {

'account_page': "active",

}

return render(request, 'users/account.html', context)

So, as you can see, we have two imports and two functions in this part. The imports are regular Django terms which are used for rendering a template and making a page accessible only when logged in respectively.

Now let’s see the two functions one by one:-

login — This is a simple render page which displays the login template. account — This renders the account template. It also passes a context which signifies that user is on the account page currently and so we need to highlight it in the navigation bar. Also, the account page can only be accessed when the user is logged in.

If the user tries to access the accounts page when he is not logged in, it redirects the user to the login page and once the user logs in, then it takes them to the account page.

Now, let’s move to the templates part of the Users app. So, we will be seeing four templates in this section — login, logout, account and layout.

login.html

So, in this login file, we will first extend the layout (which we will create soon).

So, it will have three social login providers. We are here using a Card based layout in which we display all the three social providers. So, let’s have a look at the login.html code.

So, as you see, we have added the three social providers one by one. So, let’s have a look at how it looks.

login page

logout.html

This is the page which shows up when a user logs out. It is a very simple page and shows the user that they have logged out and also shows a button to login again.

Here’s a look at the code of the logout page:-

Now let’s have a look at how this logout page looks.

logout page

account.html

This page will show all the relevant details like username, email and will have an option to link your social accounts.

Linking social accounts help you to login with a different social login provider than the one which with you first logged in. So, if you used Google for the first time and you want to use LinkedIn or Github too, you can connect these.

Let’s have a look at the code:-

Here is how it looks in the browser:-

layout.html

This is the layout of the entire website which each other webpage extends from. It contains the header and footer of the website.

It links this template to all the CSS and JS files we will be using. We are not using any JS scripts since we are focusing on the Django part rather than frontend. So, we have used Bootstrap4 CSS and JS files and a pair of other CSS files.

We have two sections for the navigation bar, one for the recruiter side and the other for the candidate side and also have a button to move to the other side.

The default opening is on the candidate side though. It also has the login button when we are not signed in and when we log in, the login button disappears and the logout button appears.

The navigation bar also signifies what page is currently active to let the user know where they are.

The footer is the same everywhere, with some links to pages and some details about the website and links to some social media handles.

So let’s have a look at the layout file here:-

Now, we have covered all the four templates of the Users section. We now move on to the section where we need to overwrite a few templates which come built-in with allauth. Those do not pretty and we need to overwrite them to match those pages with the same feel as our website’s.

So, to overwrite the pages related to the social login providers, we need to create a folder named templates/socialaccount.

In that folder, we have four templates which we want to overwrite. Let’s look at them one by one:-

authentication_error.html

This page just displays that some authentication error has occurred and we need to log in again. So, it displays a button for the login page.

connections.html

It just displays the social account linking/connection was successful and shows a button to go back to the accounts page.

login_cancelled.html

This page just shows that the login process was cancelled and the user needs to login again.

signup.html

This page is shown when a user tries to login via a different social provider than the one they used before. So, this page tells them to first connect those accounts and then they can use other providers to log in.

So, this is all for this article. Hopefully, you enjoyed reading this article. The next parts of this tutorial series are:-

Have a look at the five-part Social Media Website with Django series which was quite well received. It is a different project based on Django and you will surely love it.

Here are some of the other articles you might enjoy reading:-