Login Page using UserCreationForm (Django) – Part 5

#django #html #css #webdev

For the last part of this Django series, we will style the login page and add a decorator, so that only users who are logged in can access the homepage.

Login.html


<!-- path -> users/templates/users/login.html -->

{% load static %}

<link rel="stylesheet"  href="{% static 'css/login.css' %}">

<div class="login-page">
  <div class="form">
    <form method="POST" action="">
      {% csrf_token %}
      <h3 class="login-title">LOGIN</h3>
      <div class="input-group mb-3">
        <input type="text" name="username" placeholder="Username..." class="form-control">
      </div>
      <div class="input-group mb-2">
          <input type="password" name="password" placeholder="Password..." class="form-control" >
      </div>
      <button type="submit"> Submit </button>
      <p class="message">Don't have an account? <a href="{% url 'users:register' %}">Register</a></p>
    </form>
{% for message in messages %}
   <p class= "text-center">{{message}}</p>
{% endfor %}
  </div>
</div>


<!-- baltlogs.com -->

— Added the static tag at the top of the template in order to import files from the static folder.

— Imported login.css (css file to be created later in this tutorial).

Create a new CSS file named login.css in the css folder.

Login.css

Open login.css and add the following code.


/* path-> static/css/login.css */

.login-page {
    width: 500px;
    padding: 10% 0 0;
    margin: auto;
  }

  .form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }
  .form input {
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #102a43;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
    margin-top: 10px;
  }
  .form button:hover,.form button:active,.form button:focus {
    background: #2f5579;
  }
  .form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
  }
  .form .message a {
    color: #102a43;

  }

  body {
    background: #102a43;
    font-family: "Roboto", sans-serif;

  }

  .login-title {
    font-family: "Changa", sans-serif;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 24px;
    color: #6C2A6A;
  }

/* baltlogs.com */

Save changes and run the server. The login page should look like the image below.

If you fail at logging in, you should still get the error message.

Optional Section: Decorators

Finally to finish the series, we will add a decorator which will take care of sending users to the login page if they haven’t logged in and try to access the homepage.

Views.py


#path -> users/views.py

from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm
from .forms import CustomUserForm
from django.contrib.auth import authenticate, login, logout
from django.contrib import messages
from django.contrib.auth.decorators import login_required


def login_page(request):
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        user = authenticate(request, username=username, password=password)

        if user is not None:
            login(request, user)
            return redirect('users:home')
        else:
            messages.info(request, 'Try again! username or password is incorrect')

    context = {}
    return render(request, 'users/login.html', context)


def logout_page(request):
    logout(request)
    return redirect('users:login')


@login_required(login_url='users:login')
def home_page(request):
    return render(request, 'users/home.html')


def register_page(request):
    if request.method != 'POST':
        form = CustomUserForm()
    else:
        form = CustomUserForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('users:login')

    context = {'form': form}
    return render(request, 'users/register.html', context)

#batlogs.com

— Imported the login_required decorator from django.contrib.auth.decorators.

— Added the decorator above the homepage view in order to restrict users who have not logged in yet.

You can check that the decorator works by trying to access the homepage. If you are not logged in, you will be redirected to the login page. After logging in successfully, you should be taken to the homepage.

I will tackle decorators more in depth in a different tutorial. The series ends here, but subscribe below for more posts.

The end

Twitter

Registration Page using UserCreationForm (Django) – Part 1

Registration Page using UserCreationForm (Django) – Part 2

Registration Page using UserCreationForm (Django) – Part 3

Django 3..2..1..Takeoff Book