Login page with Crispyforms Bootstrap5

Posted under » Django on 13 April 2023

We have created superuser login but what about for normal users? Again we will be using the django auth. We already have made the display app as the main app but we still can specify the login urls at the main urls.py file at www/briles/briles/urls.py. However, we need to add the auth bit because we won't be putting the functions at the display app because it has already been built for us by Django.

from django.contrib.auth import views as auth_views
from django.urls import include, path

urlpatterns = [
    path('', include('display.urls')),
    path('login',auth_views.LoginView.as_view(template_name='display/login.html'),name='login'),
    path('logout',auth_views.LogoutView.as_view(template_name='display/logout.html'),name='logout'),
    path('password-reset',
        auth_views.PasswordResetView.as_view(template_name='display/password_reset.html'),
        name='password_reset'),
    path('password-reset/done',
        auth_views.PasswordResetDoneView.as_view(template_name='display/password_reset_done.html'),
        name='password_reset_done'),
    path('password-reset-confirm/<uidb64>/<token>/',
        auth_views.PasswordResetConfirmView.as_view(template_name='display/password_reset_confirm.html'),
        name='password_reset_confirm'),
    path('password-reset-complete',
        auth_views.PasswordResetCompleteView.as_view(template_name='display/password_reset_complete.html'),
        name='password_reset_complete'),
]

I am using django 4.2 and when I pip install Crispyforms it was for version 2. Previously, I was using version 1 when using Django ver. 3.2. I also found out that version 2 now supports Bootstrap 5. Here is how I update my settings.py

INSTALLED_APPS = [
    "crispy_bootstrap5",
]

CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
CRISPY_TEMPLATE_PACK = "bootstrap5"

I believe you already know what Crispyforms is. I just want to share the changes from the previous settings.

I won't go into all forms but will show you just the login.html.

{% load crispy_forms_tags %}

{% block content %}
<div class = 'content-section'>
 <form method="POST">
  {%csrf_token%}
  <fieldset class = 'form-group'>
  <legend class = 'border-bottom mb-4'>Login</legend>
   {{form|crispy}}
	</fieldset>
                  <div class = 'form-group'>
	<button class='btn btn-outline-info' type='submit'>Login</button>
<small class="text-muted" ml-2><a href="{%url 'password_reset'%}">Forgot password?</a>
	</small>
	</div>
	</form>  </div>
{% endblock content %}

You will notice that {{form|crispy}} will appear as the username and password fields appear automagically on the page

<div id="div_id_username" class="mb-3"> <label for="id_username" class="form-label requiredField">
Username<span class="asteriskField">*</span> </label> <input type="text" name="username" autofocus 
autocapitalize="none" autocomplete="username" maxlength="150" class="textinput form-control" required id="id_username"> 
</div> 
<div id="div_id_password" class="mb-3"> <label for="id_password" class="form-label requiredField">
Password<span class="asteriskField">*</span> </label> <input 
type="password" name="password" autocomplete="current-password" class="passwordinput form-control" required id="id_password"> </div>

Auth aleady has a Django Forms class for login but Crispyforms just made it nicer and professional with the Bootstrap glow etc..