Let user change their passords

The authentication module comed with a default page where users can change their own password when logged in. You only have to add the link somewhere in your solution. The url is /authentication/passwordchange/, and is normally added somewhere in approximation to the logout og user profile link. When successfully changed, you are redirected to the /authentication/passwordchanged/ page.

URLs for change password

To make the page look a little nicer just use the same tecnique as you did on the login page.

<form action="" method="post">[% csrf_token %]
<div>
[% if form.errors %]
    <p class="errornote">Please correct the error(s).</p>
[% endif %]

<h1> Password change</h1>

<p>Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly.</p>

<fieldset class="module aligned wide">
<div class="form-group">
	[{ form.old_password.errors }]
	<label for="id_old_password" class="col-sm-2 control-label required">Old password:</label>
	<div class="col-sm-10">
	<input id="id_old_password" class="form-control" name="old_password" type="password" />
	</div>
</div>
<div class="form-group">
	[{ form.new_password1.errors }]
	<label for="id_new_password1" class="col-sm-2 control-label required">New password:</label>
	<div class="col-sm-10">
	<input id="id_new_password1" class="form-control" name="new_password1" type="password" />
	</div>
</div>
<div class="form-group">
	[{ form.new_password2.errors }]
	<label for="id_new_password2"  class="col-sm-2 control-label required">Password (again):</label>
	<div class="col-sm-10">
	<input id="id_new_password2" class="form-control" name="new_password2" type="password" />
	</div>
</div>
</fieldset>
<div class="form-group">
    <input class="btn btn-success default"  type="submit" value="Change my password" />
</div>

<script type="text/javascript">document.getElementById("id_old_password").focus();</script>
</div>
</form>
</div>

The bootstrap version of password change