Reset Password - Part 2

In this video, we are going to implement the rest of the feature of password reset. In the previous video, we completed the email sending portion.
In this part of video, we will learn how to verify the user and set a new password for that user.

Resources:

Reset Password Confirm View

Form

At first, open your forms.py file and inherit the set password form.

from django.contrib.auth.forms import SetPasswordForm

We will use this form to set a new password for a user. We are inheriting this form to add a form-control class to every field of this form.

class SetPasswordForm(SetPasswordForm):
    def __init__(self, *args, **kwargs):
        super(SetPasswordForm, self).__init__(*args, **kwargs)
        for visible in self.visible_fields():
            visible.field.widget.attrs["class"] = "form-control"

Views

Now, in the views.py file, import the form.

from user.forms import SetPasswordForm

Then create a password reset confirm view.
Basically, when the user open the password reset link from their email inbox they will be redirected to this view.
From this view, django will show an option to reset the password.

class PasswordResetConfirmView(DefaultAuthViews.PasswordResetConfirmView):

    # Specify the form class as set password form
    form_class = SetPasswordForm

    # Then specify the template name for this view
    template_name = "user/password-reset-confirm.html"

    # Then specify the success_url for this view
    success_url = reverse_lazy("accounts:password-reset-complete")

Templates

Now, create a html file named "password-reset-confirm.html" in the templates folder.
In the resources section, I have attached a file named "password-reset-confirm.html". Download it, copy its content and paste it in this html file.

{% extends 'mysite/base.html' %}

{% block title %} 
    <title>Reset Password</title>
{% endblock title %}

{% block content %}
<div class="m-2 p-2">
  <h4>Fill the following details to reset your password</h4>
  {% include "components/form.html" with form_name="Reset Password" %}
</div>
{% endblock content %}

URL

Now, add a url path for this view.

path("password-reset-confirm/<uidb64>/<token>/", views.PasswordResetConfirmView.as_view(),name="password-reset-confirm"),

This view basically takes user id in base 64 format and a token. Using this two parameter django will verify the password reset link.

Now, open the password-reset-email.html file and add the url path which we created.

{{ protocol }}://{{ domain }}{% url "accounts:password-reset-confirm" uid token %}

[Run the development server and see the changes]

Password Reset Complete View

Views

At last, we need to create a view that shows that the password is successfully reset.

class PasswordResetCompleteView(DefaultAuthViews.PasswordResetCompleteView):
    template_name = "user/password-reset-complete.html"

Templates

Now create a template named "password-reset-complete.html" file.
I have attached "password-reset-complete.html" file in the resources section. Download it, copy its content and paste it in the html file.

{% extends 'mysite/base.html' %}

{% block title %} 
    <title>Email Sent</title>
{% endblock title %}

{% block content %}
<div class="m-2 p-2">
    <h3>You have successfully reset your password.</h3>
    <a href="{% url 'accounts:login' %}">Goto Login Page</a>
</div>
{% endblock content %}

URL

At last, add a url path for this view.

path("password-reset-complete/", views.PasswordResetCompleteView.as_view(), name="password-reset-complete"),

[Run the development server and see the changes.]

[Commit the changes and push it in the remote repository.]