Part 3: Django Reset Password and Change Password

django reset password
Image by Jan Alexander from Pixabay

Hello Techies,

In this blog, we will check how to use Django reset password, and Django change password functionality. In this tutorial, we are going to use email functionality but not console email functionality.

In my previous blog, I have covered the basic of  Django login and registration features which is Part 1, and Django Email Confirmation which is Part 2. So you can check that blog also.

Below are the points you are going to learn

  1. Requirements
  2. Django Change Password
  3. Django Reset Password

1. Requirements

  • django.contrib.auth in your INSTALLED_APPS.
  • An email service should be configured properly.

2. Django Change Password

Here we are using a class-based view of change password functionality and we will manually create a template without using the default template.

By default, PasswordChangeView will render the registration/change_password.html template but we need some customization in the template so we will create change-password.html.

Add the below code in urls.py and If you are following my previous blogs then add the below code in accounts/urls.py file.

from django.contrib.auth import views as auth_views

    # Change Password
    path(
        'change-password/',auth_views.PasswordChangeView.as_view(
            template_name='registration/change-password.html',
            success_url='/'
        ),name='change_password'),

Create the change-password.html in accounts/templates/registration folder and add the below HTML code.

{% extends 'base.html' %}

{% block title %}Change Password Page{% endblock title %}

{% block content %}
    <h2 style="font-size: 25px;font-weight: 600;color:white">Change Password</h2>
    <div class="body_container box box--big">
		<!-- form starts here -->
		<form id="change-password-form" method="post" action="#">
            {% csrf_token %}
			<div class="agile-field-txt">
				<label>
					<i class="fa fa-user" aria-hidden="true"></i> old password </label>
				<input id="old_password" name="old_password" placeholder="Enter your old password" required=""
                                   type="text" class="form-control">
			</div>
			<div class="agile-field-txt">
				<label>
					<i class="fa fa-envelope" aria-hidden="true"></i> New Password </label>
					<input name="new_password1" type="password" class="form-control"
					   placeholder="Enter your new password " required="" id="new_password1">
			</div>
			<div class="agile-field-txt">
				<label>
					<i class="fa fa-envelope" aria-hidden="true"></i> New Password Confirmation </label>
					<input name="new_password2" type="password" class="form-control"
					   placeholder="Enter your new password " required="" id="new_password2">
			</div>
				{% if form.errors %}
                    {% for field in form %}
						{{field.name}}
                        {% for error in field.errors %}
                            <p style="color: red">{{ error }}</p>
                        {% endfor %}
                    {% endfor %}
                {% endif %}
			<div class="w3ls-bot">
				<div class="form-end">
					<input type="submit" value="Submit">
				</div>
				<div class="clearfix"></div>
                <br/>

			</div>

		</form>
	</div>
{% endblock content %}
Django change password

3. Django Reset Password

To reset the password we required the 4 different Django reset password views that are PasswordResetView, PasswordResetDoneView, PasswordResetConfirmView, and PasswordResetCompleteView and here also we will manually create the template without using any default template. So let’s check the use of these Django reset password views one by one.

3.1. PasswordResetView

Using this view user will submit his/her registered email to reset the password using the form.

Add the below code in urls.py and If you are following my previous blogs then add the below code in accounts/urls.py file.

from django.contrib.auth import views as auth_views 

path('password-reset/',
         auth_views.PasswordResetView.as_view(
             template_name='registration/password_reset.html',
             subject_template_name='registration/password_reset_subject.txt',
             email_template_name='registration/password_reset_email.html',
         ),name='password_reset'),

Create the password_reset.html template in accounts/templates/registration folder and add the below HTML code.


{% block content %}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <div class="form-gap" style="padding-top: 70px;"></div>
    <div class="container">
    <a href="{% url 'home' %}" style="font-size: 25px;font-weight: 600;float:right">Back</a>
    <h2 style="text-align-last: center;">Reset Password</h2>
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="text-center">
                  <h3><i class="fa fa-lock fa-4x"></i></h3>
                  <h2 class="text-center">Forgot Password?</h2>
                  <p>You can reset your password here.</p>
                  <div class="panel-body">
                    <form id="reset-form" role="form" autocomplete="off" class="form" method="post">
                        {% csrf_token %}
                      <div class="form-group">
                        <div class="input-group">
                          <span class="input-group-addon"><i class="glyphicon glyphicon-envelope color-blue"></i></span>
                            <input type="email" name="email"  placeholder="email address" class="form-control" autocomplete="email" maxlength="254" required="" id="id_email">
                        </div>
                      </div>
                        {% if form.errors %}
                            {% for field in form %}
                                {{field.name}}
                                {% for error in field.errors %}
                                    <p style="color: red">{{ error }}</p>
                                {% endfor %}
                            {% endfor %}
                        {% endif %}
                      <div class="form-group">
                         <button class="btn btn-lg btn-primary btn-block" type="submit">Reset Password</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
	</div>
</div>
{% endblock %}
Django reset password

Also we need to create the subject template and email template.

HTML Code for password_reset_subject.txt

{% load i18n %}{% autoescape off %}
{% blocktrans %}Password reset on {{ site_name }}{% endblocktrans %}
{% endautoescape %}

HTML code for password_reset_email.html (Django password reset email template)

{% load i18n %}{% autoescape off %}
{% blocktrans %}Hey, You're receiving this email because you requested a password reset for your user account at {{ site_name }}.{% endblocktrans %}

{% trans "Please go to the following page and choose a new password:" %}
{% block reset_link %}
{{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
{% endblock %}
{% trans "Your username, in case you've forgotten:" %} {{ user.get_username }}

{% trans "Thanks for using our site!" %}

{% blocktrans %}The {{ site_name }} team{% endblocktrans %}

{% endautoescape %}
Django password reset email template (Django reset password)

3.2. PasswordResetDoneView

This view will be displayed with some messages after the email is submitted.

Add the below code in urls.py

from django.contrib.auth import views as auth_views

path('password-reset/done/',
         auth_views.PasswordResetDoneView.as_view(
             template_name='registration/password_reset_mail_sent.html'
         ),name='password_reset_done')

HTML code for Password Reset Done View. Create the password_reset_mail_sent.html template in accounts/templates/register folder.


<!DOCTYPE html>
<html>
    <head>
      {% load static %}
      <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
    </head>
    <body>
          <a href="{% url 'home' %}" style="font-size: 25px;font-weight: 600;float:right;margin-top: -99px;
    margin-right: 50px;">Back</a>
        <main>
            <p style="font-size: 25px;font-weight: 600;color:#fd5c63;margin-top: 160px;">We have sended you reset password link on your email. Please Check Your Email.</p>
        </main>
    </body>

</html>
Password Reset Done View (django reset password)

3.3. PasswordResetConfirmView

An activation link will be emailed to the user using this view. Here the token gets validated against the user’s details. A form will then be displayed or an error against invalidity.

Add below code in urls.py

from django.contrib.auth import views as auth_views

path('password-reset-confirm/<uidb64>/<token>/',
         auth_views.PasswordResetConfirmView.as_view(
             template_name='registration/password_reset_confirmation.html'
         ),name='password_reset_confirm'),

HTML Code for Password Reset Confirm View. Create the password_reset_confirmation.html template in accounts/templates/register folder.

{% block content %}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <div class="form-gap" style="padding-top: 70px;"></div>
    <div class="container">
    <a href="{% url 'home' %}" style="font-size: 25px;font-weight: 600;float:right">Back</a>
    <h2 style="text-align-last: center;">Reset Password</h2>
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
              <div class="panel-body">
                  {% if validlink  %}
                    <div class="text-center">
                  <h3><i class="fa fa-lock fa-4x"></i></h3>
                  <h3>Enter your new password</h3>
                  <div class="panel-body">
                    <form id="reset-password" role="form" autocomplete="off" class="form" action="" method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                      <div class="form-group">
                        <div class="input-group">
                          <span>New password</span>
                          <input type="password" name="new_password1" class="form-control" autocomplete="new-password" required="" id="id_new_password1">
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="input-group">
                          <span>New password Confirmation</span>
                          <input type="password" name="new_password2" class="form-control" autocomplete="new-password" required="" id="id_new_password2">
                        </div>
                      </div>
                      {% if form.errors %}
                        {% for field in form %}
                            {% for error in field.errors %}
                                <p style="color: red">{{ error }}</p>
                            {% endfor %}
                        {% endfor %}
                      {% endif %}
                      <div class="form-group">
                          <button type="submit" class="btn btn-lg btn-primary btn-block"><i class="icon-lock4"></i> Change Password</button>
                      </div>
                    </form>
                  </div>
                </div>
                  {% else %}
                    <h3>Password reset unsuccessful</h3>
                    <p>The password reset link was invalid, possibly because it has already been used.  Please request a new password reset.</p>
                  {% endif %}
              </div>
            </div>
          </div>
	</div>
</div>
{% endblock %}
Password Reset Confirm View (Django reset password)

3.4. PasswordResetCompleteView 

Using this view display the page with a successful Password Reset message.

Add the below code in urls.py

from django.urls import path

path('password-reset-complete/',
         auth_views.PasswordResetCompleteView.as_view(
             template_name='registration/password_reset_completed.html'
         ),name='password_reset_complete')

HTML Code for Password Reset Complete View. Create the password_reset_completed.html template in accounts/templates/register folder.

{% block content %}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <div class="form-gap" style="padding-top: 70px;"></div>
    <div class="container">
    <h2 style="text-align-last: center;">Password reset complete</h2>
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="text-center">
                    Your password has been set. You may go ahead and log in now.
                    <a href="{% url 'login' %}">Click here to Login</a>
                </div>
              </div>
            </div>
          </div>
	</div>
</div>
{% endblock %}
Password Reset Complete View (Django reset password)

I hope you understand all the steps of Django reset password and Django change password. Still you have any query do comment below.

Refer a below GitHub link for source code(Django reset password and change password)

https://github.com/pranalikambli/django_login_registration

Leave a Comment