The full user-authentication lifecycle in Django, with testing at every step — The step-by-step tutorial I wish I had (part seven)

…This chapter is complete except no tests yet…


In parts one, two, and three, we set up the model and trivial website, and in four, five, and six, a working login page and logout links. In this post, we’re going to add a final feature to the login page: a password reset link, which sends a one-time-use-only link to the user’s email account. When clicked on, they are presented with a set-your-new-password form.

[TOC: one, two, three, four, five, six, seven, eight, nine, ten]

Reset your password: Overview

This is a time-consuming, although straight-forward feature to implement. By far the hardest thing is understanding the sequence of events, particularly because the views are confusingly named. This is how it works (with specifics based on the implementation in this chapter):

  1. On the login page there is an “I forgot my password” link.
  2. Click on it and you are taken to a page on which you need to enter your the email address from when you created the account. Pressing submit sends a one-time-only reset-my-password link to the user’s email. The view for this page is django.contrib.auth.views.password_reset.
  3. After it’s submitted, another page appears whose only purpose is to inform that the the email was sent, and they should go and view it for further instructions. The view for this page is django.contrib.auth.views.password_reset_done.
  4. The email itself is sent. The template for this email is specified by the email_template_name parameter of the password_reset view. See the next section for an example email.
  5. The link in the email takes you to the “set your new password” form, which includes a redundant confirmation field. The view for this page is django.contrib.auth.views.password_reset_confirm.
  6. After the form is submitted, the final page is presented, which only states “your password has been changed”, and likely provides a link back to the login page. The view for this page is django.contrib.auth.views.password_reset_complete.

Although I would choose these views to have clearer names more along the lines of

  • password_reset_1of4_email_request,
  • password_reset_2of4_email_sent,
  • pwd_reset_3of4_new_pwd_form, and
  • password_reset_4of4_finished

the existing names are here to stay. We are going to use the “better” ones as much as possible, though.

Set up email: Print to console only

Normally an email is actually sent (how to do this). Instead, we’re going to print its contents to the console. This is trivially-implemented by adding a single variable to
    /home/myname/django_auth_lifecycle/djauth_root/django_auth_lifecycle/settings.py

# https://docs.djangoproject.com/en/1.7/topics/email/#django.core.mail.backends.smtp.EmailBackend
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

This is what the email looks like when printed to the console, with some empty lines removed (the 127.0.0.1.:8001 in the link must be changed to the name of your webserver):

MIME-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
Subject: Password reset on 127.0.0.1:8001
From: webmaster@localhost
To: myemailaddress@yahoo.com
Date: Wed, 18 Feb 2015 16:38:02 -0000
Message-ID: 

You're receiving this email because you requested a password reset for your user account at 127.0.0.1:8001.
Please go to the following page and choose a new password:

http://127.0.0.1:8001/auth/pwd_reset_3of4_new_pwd_form/MQ/3zd-add9dfa05216b9ead4cc/

Your username, in case you've forgotten: admin
Thanks for using our site!
The 127.0.0.1:8001 team
-------------------------------------------------------------------------------

Set the login view name

One more change in the settings file.

In order for the final “your password was successfully changed” view (password_reset_complete) to link back to the login page, we must tell it where to link to, since ours is not using the default name. Add the LOGIN_URL variable:

# https://docs.djangoproject.com/en/1.7/ref/settings/#login-url
LOGIN_URL="login"     #View name in auth_lifecycle.registration.urls

Activate the forgot-my-password link

In
    /home/myname/django_auth_lifecycle/djauth_root/auth_lifecycle/templates/registration/login.html

Change

...I forgot my password...

to

<a href="{% url 'password_reset' %}">I forgot my password</a>

Custom templates: Overview

Aside from the email itself, each of the four views has its own template. Creating custom versions of these templates is optional. You could use all of the built-in defaults and skip straight to updating urls.py. The directory containing all default templates, as installed with Django, is:
    /home/myname/django_auth_lifecycle/djauth_venv/lib/python3.4/site-packages/django/contrib/admin/templates/registration/

To create a custom template, you can

  • Duplicate the entire custom template and tweak what you like, or
  • Extend the template and override only the needed sections

Regardless which way you choose, these default templates should be used as a reference if you encounter any problems.

The relative path of the file (as based off of one of the TEMPLATE_DIRS) must be either

  • Equal to the default value of the view’s template_name parameter, as specified in each view’s documentation. For example, the password_reset view states “Defaults to registration/password_change_done.html if not supplied.”
  • Or set to an alternate value, by passing it through it’s url-entry:
    url(r"^pwd_reset_3of4_new_pwd_form/(?P<uidb64>\w+)/(?P<token>[\w-]+)/$",
        "django.contrib.auth.views.password_reset_confirm",
        { "template_name": "registration/pwd_reset_3of4_new_pwd_form.html" }

(The email itself is specified by the email_template_name parameter in password_reset.)

Custom template: pwd_reset_3of4_new_pwd_form

The only custom template we’ll be creating is for the set-your-new-password form (django.contrib.auth.views.password_reset_done), so we can also do a client-side check for the password lengths, and that they’re equal. This will be implemented with JQuery Validation.

This is the default template, as installed by Django:
    /home/myname/django_auth_lifecycle/djauth_venv/lib/python3.4/site-packages/django/contrib/admin/templates/registration/password_reset_confirm.html

{% extends "admin/base_site.html" %}
{% load i18n %}

{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
&rsaquo; {% trans 'Password reset confirmation' %}
</div>
{% endblock %}

{% block title %}{{ title }}{% endblock %}
{% block content_title %}<h1>{{ title }}</h1>{% endblock %}
{% block content %}

{% if validlink %}

<p>{% trans "Please enter your new password twice so we can verify you typed it in correctly." %}</p>

<form action="" method="post">{% csrf_token %}
{{ form.new_password1.errors }}
<p class="aligned wide"><label for="id_new_password1">{% trans 'New password:' %}</label>{{ form.new_password1 }}</p>
{{ form.new_password2.errors }}
<p class="aligned wide"><label for="id_new_password2">{% trans 'Confirm password:' %}</label>{{ form.new_password2 }}</p>
<p><input type="submit" value="{% trans 'Change my password' %}" /></p>
</form>

{% else %}

<p>{% trans "The password reset link was invalid, possibly because it has already been used.  Please request a new password reset." %}</p>

{% endif %}

{% endblock %}

The entire “content” block must be replaced with our custom code. The form as associated to the JavaScript by giving it the name “newPwdForm“.

Save the following as
    /home/myname/django_auth_lifecycle/djauth_root/auth_lifecycle/templates/registration/pwd_reset_3of4_new_pwd_form.html

{% extends "registration/password_reset_confirm.html" %}
{% comment %}
   The extends Must be the first line in the template. This comment may
   not be before it.

   Example use:
   - http://stackoverflow.com/a/28570678/2736496
   Documentation:
   - https://docs.djangoproject.com/en/1.7/ref/templates/builtins/#std:templatetag-extends
{% endcomment %}
{% load i18n %}       {# For the "trans" tag #}
{% block content %}

{% if validlink %}

<p>{% trans "Please enter your new password twice so we can verify." %}</p>
<p>{% trans "you typed it in correctly." %}</p>

<form action="" method="post" id="newPwdForm"><!-- Form id rqd by JS. -->
   {% csrf_token %}
   {{ form.new_password1.errors }}
   <p class="aligned wide">
      <label for="id_new_password1">{% trans 'New password:' %}</label>
      {{ form.new_password1 }}</p>
   {{ form.new_password2.errors }}
   <p class="aligned wide">
      <label for="id_new_password2">{% trans 'Confirm password:' %}</label>
      {{ form.new_password2 }}</p>
   <p><input type="submit" value="{% trans 'Change my password' %}" /></p>
</form>

{% else %}

<p>{% trans "The password reset link was invalid, possibly because it" %}
{% trans "has already been used.  Please request a new password reset." %}</p>

{% endif %}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
   //These values come from auth_lifecycle.models
   var minPassLen = {{ PASSWORD_MIN_LEN }}; //PASSWORD_MIN_LEN
   var maxPassLen = {{ PASSWORD_MAX_LEN }}; //PASSWORD_MAX_LEN

   var passwordMsg = "{% trans "Password must be between " %}" + minPassLen +
      "{% trans " and " %}" + maxPassLen +
      "{% trans " characters, inclusive." %}";

   jQuery.validator.setDefaults({
      success: "valid",
      //Avoids form submit. Comment when in production...START
      //debug: true
      //submitHandler: function() {
      //   alert("Success! The form was pretend-submitted!");
      //}
      //Avoids form submit. Comment when in production...END
   });
   $( "#newPwdForm" ).validate({
      rules: {
         new_password1: {
            required: true,
            minlength: minPassLen,
            maxlength: maxPassLen
         },
         new_password2: {
            //http://jqueryvalidation.org/equalTo-method
            equalTo: "#id_new_password1"
         }
      },
      messages:  {
         new_password1: {
            required: "{% trans "Password required" %}",
            minlength: passwordMsg,
            maxlength: passwordMsg
         }
      }
   });
</script>

{% endblock %}

Server-side check

As done with the login form, we’re going to update the set-a-new-password form to enforce length. The default form used by this view, django.contrib.auth.forms.SetPasswordForm, does check for the passwords being equal, but does not have any min or max lengths:

new_password1 = forms.CharField(label=_("New password"),
                                widget=forms.PasswordInput)

Save the following as
    /home/myname/django_auth_lifecycle/djauth_root/auth_lifecycle/registration/form_reset_set_new_pwd.py

from auth_lifecycle.models     import PASSWORD_MIN_LEN, PASSWORD_MAX_LEN
from auth_lifecycle.registration.view_login import get_min_max_incl_err_msg
from django                    import forms    #NOT django.contrib.auth.forms
from django.contrib.auth.forms import SetPasswordForm
from django.utils.translation  import ugettext, ugettext_lazy as _

min_max_len_err_msg = get_min_max_incl_err_msg(PASSWORD_MIN_LEN, PASSWORD_MAX_LEN)

class SetPasswordFormEnforceLength(SetPasswordForm):
    """
    A `SetPasswordForm` that enforces min/max lengths.
    - https://docs.djangoproject.com/en/1.7/_modules/django/contrib/auth/forms/#SetPasswordForm

    Pass this into the login form via the `set_password_form` parameter.
    - https://docs.djangoproject.com/en/1.7/topics/auth/default/#django.contrib.auth.views.password_reset_confirm
    Which is done in `registration/urls.py`.
    """
    new_password1 = forms.CharField(label=_("New password"),
                                    widget=forms.PasswordInput,
                                    min_length=PASSWORD_MIN_LEN,
                                    max_length=PASSWORD_MAX_LEN,
                                    error_messages={
                                        'min_length': min_max_len_err_msg,
                                        'max_length': min_max_len_err_msg })

(To repeat the warning from the top of part six: The server-side length checks are “succeeding” but crashing–that is, they only crash when the lengths are incorrect. While this is a critical problem, it only applies when the client-side JavaScript is disabled. Here is a Stack Overflow question documenting the problem. A solution would be greatly appreciated.)

Configure the urls

Replace the contents of
    /home/myname/django_auth_lifecycle/djauth_root/auth_lifecycle/registration/urls.py
with

from auth_lifecycle.models import PASSWORD_MIN_LEN, PASSWORD_MAX_LEN
from auth_lifecycle.registration.view_login import AuthenticationFormEnforceLength
from auth_lifecycle.registration.form_reset_set_new_pwd import SetPasswordFormEnforceLength
from django.conf.urls      import patterns, url
#Passing keyword arguments through url entries:
# - https://docs.djangoproject.com/en/1.7/topics/http/urls/#passing-extra-options-to-view-functions
urlpatterns = patterns('',
    url(r"^login/$",
        "auth_lifecycle.registration.view_login.login_maybe_remember",
        { "authentication_form": AuthenticationFormEnforceLength },
        name="login"),
    url(r"^logout_then_login/$", "django.contrib.auth.views.logout_then_login",
        {"login_url": "login"}, name="logout_then_login"),
    url(r"^password_reset_1of4_email_request/$",
        "django.contrib.auth.views.password_reset", name="password_reset"),
    url(r"^password_reset_2of4_email_sent/$",
        "django.contrib.auth.views.password_reset_done",
        name="password_reset_done"),
    url(r"^pwd_reset_3of4_new_pwd_form/(?P<uidb64>\w+)/(?P<token>[\w-]+)/$",
        "django.contrib.auth.views.password_reset_confirm",
        { "template_name": "registration/pwd_reset_3of4_new_pwd_form.html",
          "extra_context": { "PASSWORD_MIN_LEN": PASSWORD_MIN_LEN,
                             "PASSWORD_MAX_LEN": PASSWORD_MAX_LEN },
          "set_password_form": SetPasswordFormEnforceLength },
        name="password_reset_confirm"),
    #If NOT using a custom template:
    # url(r"^pwd_reset_3of4_new_pwd_form/(?P<uidb64>\w+)/(?P<token>[\w-]+)/$",
    #     "django.contrib.auth.views.password_reset_confirm",
    #     name="password_reset_confirm"),
    url(r"^password_reset_4of4_finished/$",
        "django.contrib.auth.views.password_reset_complete",
        name="password_reset_complete" ),
)

Tests

Save the following as

    /home/myname/django_auth_lifecycle/djauth_root/auth_lifecycle/registration/....py

...

Output:


Our tests passed.

Give it a try!

Follow these steps to start your server. A reminder to check your console for the text of email.

In the next post, we move on to the change your password form. After that, the final steps are creating and deleting an account.

[TOC: one, two, three, four, five, six, seven, eight, nine, ten]

…to be continued…

(cue cliffhanger segue music)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s