User Registration & Sign Up

User Registration

Up until this point we have only created users from the command line and were logging into our accounts using the django admin dashboard. This is obviously not ideal and does not work if we want people to be able to create accounts from the front end of our site. This tutorial will show you how to create a sign up page where users can create an account.

Installing Crispy Forms

The first thing we should do before continuing is install a pip package called crispy forms which does some nice styling of our forms for us.

To do this simply run: pip install django-crispy-forms from the command line.

Now that we have installed crispy we need to add the following line into settings.py to configure what css framework it will use.

CRISPY_TEMPLATE_PACK="bootstrap4"

This can go anywhere in the file.

Creating a New Application

We will start by creating a new application that will hold all of the pages and functionality of our user sign up and log in. I will call my application "register".

To create a new app run: python manage.py startapp

After we have done this we will need to add the app to our project from settings.py within our mysite directory.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "crispy_forms",
    'main.apps.MainConfig',
    'register.apps.RegisterConfig', # <--- add this
]

Creating a Sign Up Page

Fortunately for us Django has created a few templates that we can modify to create a sign up page. The first step to start using these is to create a new file inside of our register app called forms.py.

The file should contain the following:

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User


class RegisterForm(UserCreationForm):
    email = forms.EmailField()

    class Meta:
	model = User
	fields = ["username", "email", "password1", "password2"]

By doing this we have modified the default sign up page and added an email field. If there are other feilds that you would like to add define them as calss variables and add them into the "field" list in the order you'd like them to appear in the form.

Creating the View

Now time to write the html that will render our sign up page!

We will start by creating a new templates folder inside of our register app. Then we will create a folder inside templates called "register". Finally we will create "register.html" in that folder.

{% extends "main/base.html" %}

{% block title %}Create an Account{% endblock %}
{% load crispy_forms_tags %}

{% block content %}
    <form method="POST" class="form-group">
	{% csrf_token %}
	{{ form|crispy }}
	<button type="submit" class="btn btn-success">Register</button>
    </form>
{% endblock %}

Now we need to add a function inside the views.py file of our register app to render this page.

# views.py
from django.shortcuts import render, redirect
from .forms import RegisterForm


# Create your views here.
def register(response):
    if response.method == "POST":
	form = RegisterForm(response.POST)
	if form.is_valid():
	    form.save()

	return redirect("/home")
    else:
	form = RegisterForm()

    return render(response, "register/register.html", {"form":form})

Finally we need to add a url to this page. We will do this from the urls.py file inside of the mysite directory.

from django.contrib import admin
from django.urls import path, include
from register import views as v

urlpatterns = [
    path('admin/', admin.site.urls),
    path("register/", v.register, name="register"),  # <-- added
    path('', include("main.urls")),
]

Final Product

If you've done all of the steps outlined above you should now have a functional sign up page that you can access by going to /register.