Add card component

src/newsreader/templates/components/card/card.html

@@ -0,0 +1,13 @@
+<div class="card">
+  {% if header_text %}
+    {% include "components/card/header.html" %}
+  {% endif %}
+
+  {% if content %}
+    {% include "components/card/content.html" %}
+  {% endif %}
+
+  {% if footer_text %}
+    {% include "components/card/footer.html" %}
+  {% endif %}
+</div>

src/newsreader/templates/components/card/content.html

@@ -0,0 +1,3 @@
+<div class="card__content">
+  <p>{{ content }}</p>
+</div>

src/newsreader/templates/components/card/footer.html

@@ -0,0 +1,3 @@
+<div class="card__footer">
+  <p>{{ footer_text }}</p>
+</div>

src/newsreader/templates/components/card/header.html

@@ -0,0 +1,3 @@
+<div class="card__header">
+  <h1>{{ header_text }}</h1>
+</div>

src/newsreader/templates/password-reset/password-reset-complete.html

@@ -1,23 +1,13 @@
 {% extends "base.html" %}
-{% load static i18n %}
+{% load i18n %}
-
-{% block title %}{% trans "Password reset complete" %}{% endblock %}
 
 {% block content %}
 <main class="main">
-  <div class="card">
+  {% trans "Password reset complete" as header_text %}
-    <div class="card__header">
+  {% blocktrans asvar content %}
-      <h1>{% trans "Password reset complete" %}</h1>
+    You may now <a href="{{ login_url }}">log in</a>
-    </div>
+  {% endblocktrans %}
-    <div class="card__content">
+
-    <p>
+  {% include "components/card/card.html" with header_text=header_text content=content %}
-        {% trans "Your password has been reset!" %}
-        {% blocktrans %}
-          You may now <a href="{{ login_url }}">log in</a>
-        {% endblocktrans %}.
-    </p>
-    </div>
-    <div class="card__footer" />
-  </div>
 </main>
 {% endblock %}

src/newsreader/templates/password-reset/password-reset-confirm.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load static i18n %}
+{% load i18n %}
 
 {% block meta %}
   <!-- NOTE(joshblum): This prevents leaking the password reset token via the
@@ -15,23 +15,15 @@
     {% trans "Change password" as confirm_text %}
     {% include "components/form/form.html" with form=form title=title confirm_text=confirm_text cancel_url=cancel_url %}
   {% else %}
-    <div class="card">
+    {% trans "Password reset unsuccessful" as header_text %}
-      <div class="card__header">
+    {% url 'accounts:password-reset' as reset_url %}
-        <h1>{% trans "Password reset unsuccessful" %}</h1>
+    {% blocktrans asvar content %}
-      </div>
+      Password reset unsuccessful. Please
-      <div class="card__content">
+      <a class="link" href="{{ reset_url }}">try again.</a>
-        <p>
+    {% endblocktrans %}
-          {% url 'accounts:password-reset' as reset_url %}
-          {% blocktrans %}
-            Password reset unsuccessful. Please
-            <a class="link" href="{{ reset_url }}">try again.</a>
-          {% endblocktrans %}
-        </p>
-      </div>
-      <div class="card__footer" />
-    </div>
-  {% endif %}
 
+    {% include "components/card/card.html" with header_text=header_text content=content %}
+  {% endif %}
 </main>
 {% endblock %}
 

src/newsreader/templates/password-reset/password-reset-done.html

@@ -5,19 +5,12 @@
 
 {% block content %}
 <main class="main">
-  <div class="card">
+  {% trans "Password reset" as header_text %}
-    <div class="card__header">
+  {% blocktrans asvar content %}
-      <h1>{% trans "Password reset" %}</h1>
+    We have sent you an email with a link to reset your password. Please check
-    </div>
+    your email and click the link to continue.
-    <div class="card__content">
+  {% endblocktrans %}
-      <p>
+
-        {% blocktrans %}
+  {% include "components/card/card.html" with header_text=header_text content=content %}
-          We have sent you an email with a link to reset your password. Please check
-          your email and click the link to continue.
-        {% endblocktrans %}
-      </p>
-    </div>
-    <div class="card__footer" />
-  </div>
 </main>
 {% endblock %}

src/newsreader/templates/registration/activation_complete.html

@@ -1,7 +1,5 @@
 {% extends "base.html" %}
-{% load static i18n %}
+{% load i18n %}
-
-{% block title %}{% trans "Account Activated" %}{% endblock %}
 
 {% comment %}
 **registration/activation_complete.html**
@@ -13,19 +11,14 @@ account is now active.
 
 {% block content %}
   <main class="main">
-    <div class="card">
+    {% trans "Account activated" as header_text %}
-      <div class="card__header">
+
-        <h1>{% trans "Account activated" %}</h1>
+    {% if user.is_authenticated %}
-      </div>
+      {% trans "Your account is activated. You can now log in." as content %}
-      <div class="card__content">
+    {% else %}
-        <p>
+      {% trans "Your account is activated." as content %}
-            {% trans "Your account is now activated." %}
+    {% endif %}
-            {% if not user.is_authenticated %}
+
-            {% trans "You can log in." %}
+    {% include "components/card/card.html" with header_text=header_text content=content %}
-            {% endif %}
-        </p>
-      </div>
-      <div class="card__footer" />
-    </div>
   </main>
 {% endblock %}

src/newsreader/templates/registration/activation_failure.html

@@ -1,7 +1,5 @@
 {% extends "base.html" %}
-{% load static i18n %}
+{% load i18n %}
-
-{% block title %}{% trans "Activation Failure" %}{% endblock %}
 
 {% comment %}
 **registration/activate.html**
@@ -14,14 +12,8 @@ Used if account activation fails. With the default setup, has the following cont
 
 {% block content %}
   <main class="main">
-    <div class="card">
+    {% trans "Activation Failure" as header_text %}
-      <div class="card__header">
+    {% trans "Account activation failed." as content %}
-        <h1>{% trans "Activation Failure" %}</h1>
+    {% include "components/card/card.html" with header_text=header_text content=content %}
-      </div>
-      <div class="card__content">
-        <p>{% trans "Account activation failed." %}</p>
-      </div>
-      <div class="card__footer" />
-    </div>
   </main>
 {% endblock %}

src/newsreader/templates/registration/activation_resend_complete.html

@@ -14,18 +14,10 @@ the following context:
 
 {% block content %}
   <main class="main">
-    <div class="card">
+    {% trans "Account activation resent" as header_text %}
-      <div class="card__header">
+    {% blocktrans asvar content %}
-        <h1>{% trans "Account activation resent" %}</h1>
+      We have sent an email to {{ email }} with further instructions.
-      </div>
+    {% endblocktrans %}
-      <div class="card__content">
+    {% include "components/card/card.html" with header_text=header_text content=content %}
-        <p>
-          {% blocktrans %}
-          We have sent an email to {{ email }} with further instructions.
-          {% endblocktrans %}
-        </p>
-      </div>
-      <div class="card__footer" />
-    </div>
   </main>
 {% endblock %}

src/newsreader/templates/registration/registration_closed.html

@@ -1,20 +1,10 @@
 {% extends "base.html" %}
 {% load static i18n %}
 
-{% block title %}{% trans "Registration is closed" %}{% endblock %}
-
 {% block content %}
   <main class="main">
-    <div class="card">
+    {% trans "Registration is closed" as header_text %}
-      <div class="card__header">
+    {% trans "Sorry, but registration is closed at this moment. Come back later." as content %}
-        <h1>{% trans "Registration is closed" %}</h1>
+    {% include "components/card/card.html" with header_text=header_text content=content %}
-      </div>
-      <div class="card__content">
-        <p>
-          {% trans "Sorry, but registration is closed at this moment. Come back later." %}
-        </p>
-      </div>
-      <div class="card__footer" />
-    </div>
   </main>
 {% endblock %}

src/newsreader/templates/registration/registration_complete.html

@@ -1,7 +1,5 @@
 {% extends "base.html" %}
-{% load static i18n %}
+{% load i18n %}
-
-{% block title %}{% trans "Activation email sent" %}{% endblock %}
 
 {% comment %}
 **registration/registration_complete.html**
@@ -14,16 +12,8 @@ been sent.
 
 {% block content %}
   <main class="main">
-    <div class="card">
+    {% trans "Activation email sent" as header_text %}
-      <div class="card__header">
+    {% trans "Please check your email to complete the registration process." as content %}
-        <h1>{% trans "Activation email sent" %}</h1>
+    {% include "components/card/card.html" with header_text=header_text content=content %}
-      </div>
-      <div class="card__content">
-        <p>
-          {% trans "Please check your email to complete the registration process." %}
-        </p>
-      </div>
-      <div class="card__footer" />
-    </div>
   </main>
 {% endblock %}