…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):
- On the login page there is an “I forgot my password” link.
- 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. - 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. - The email itself is sent. The template for this email is specified by the
email_template_nameparameter of thepassword_resetview. See the next section for an example email. - 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. - 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, andpassword_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_nameparameter, as specified in each view’s documentation. For example, thepassword_resetview states “Defaults toregistration/password_change_done.htmlif 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>
› {% 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:
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)
my.website/auth_lifecycle/static/temp.txt
my.website/admin/
aliteralmind -- Computer Programming Blog 