password_change_form.html

{% extends "base.html" %}

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

{% block navbar_items %}
    {{ block.super }}
    <a class="nav-link active" aria-current="page" href="{% url "profile" %}">Profile</a>
{% endblock %}

{% block content %}
    <br>
    <div class="card">
        <div class="card-header">
            Change Password
        </div>
        <div class="card-body">
            {% if form.errors %}
                <p class="errornote"><strong>
                    {% if form.errors.items|length > 1 %}
                        Please correct the errors below.
                    {% else %}
                        Please correct the error below.
                    {% endif %}
                </strong></p>
            {% endif %}
            <p class="lead">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>
            <form method="post">
                {% csrf_token %}
                <div class="mb-3">
                    {{ form.old_password.errors }}
                    <label for="id_old_password" class="form-label">Old Password:</label>
                    <input type="password" class="form-control" id="id_old_password" name="old_password">
                </div>
                <div class="mb-3">
                    {{ form.new_password1.errors }}
                    <label for="id_new_password1" class="form-label">New Password:</label>
                    <input type="password" class="form-control" id="id_new_password1" name="new_password1">
                </div>
                <div class="mb-3">
                    {{ form.new_password2.errors }}
                    <label for="id_new_password2" class="form-label">New Password (repeat):</label>
                    <input type="password" class="form-control" id="id_new_password2" name="new_password2">
                </div>
                <button type="submit" class="btn btn-primary">Change my password</button>
            </form>
        </div>
    </div>

{% endblock %}