Add ability for customers to change password from account

src/static/styles/main.css

@@ -485,7 +485,7 @@ section:not(:last-child) {
     background-blend-mode: multiply;
     background-size: cover;
     background-position: center;
-    color: white;
+    color: #f1e8e2;
     text-align: center;
     padding: 2rem 1rem;
     font-family: 'Vollkorn', serif;
@@ -577,6 +577,11 @@ article > header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    align-content: center;
+}
+
+.article__header--with-action h1 {
+    margin-bottom: 0;
 }
 
 article + article {
@@ -883,6 +888,16 @@ article + article {
 }
 
 
+/* ==========================================================================
+   Customer/User
+   ========================================================================== */
+.customer__detail-section {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4rem;
+}
+
+
 
 
 /* ==========================================================================

src/storefront/templates/storefront/customer_detail.html

@@ -11,12 +11,13 @@
     </header>
     <section>
         <h4>Info</h4>
-        <p>
+        <div class="customer__detail-section">
+            <div>
                 <strong>Email address</strong><br>
                 {{customer.email}}<br>
                 <a href="{% url 'account_email' %}">Manage</a>
-        </p>
+            </div>
-        <p>
+            <div>
                 <strong>Default shipping address</strong>
                 {% with shipping_address=customer.default_shipping_address  %}
                     <address>
@@ -29,7 +30,8 @@
                         {{shipping_address.city}}, {{shipping_address.state}}, {{shipping_address.postal_code}}
                     </address>
                 {% endwith %}
-        </p>
+            </div>
+        </div>
     </section>
     <section>
         <h4>Your addresses</h4>

src/storefront/templates/storefront/customer_form.html

@@ -5,6 +5,9 @@
     <header>
         <p><a href="{% url 'storefront:customer-detail' customer.pk %}">&larr; Back</a></p>
         <h1>Update your profile</h1>
+        <p>
+            <a href="{% url 'account_change_password' %}">Change password</a>
+        </p>
     </header>
     <section>
         <form method="POST" action="{% url 'storefront:customer-update' customer.pk %}">

src/templates/account/password_change.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% load i18n %}
+
+{% block head_title %}{% trans "Change Password" %}{% endblock %}
+
+{% block content %}
+<article>
+    <header>
+        <p><a href="{% url 'storefront:customer-detail' user.pk %}">&larr; Back</a></p>
+        <h1>{% trans "Change Password" %}</h1>
+        <a href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
+    </header>
+
+    <form method="POST" action="{% url 'account_change_password' %}" class="password_change">
+        {% csrf_token %}
+        {{ form.as_p }}
+        <input type="submit" value="{% trans "Save changes" %}">
+    </form>
+</article>
+{% endblock %}