refactor(templates): Improve external stylability

Refactored the built-in templates, with the goal of being able to adjust the look and feel of the whole project by only overriding a few core templates. This approach allows you to achieve visual results fast, but is of course more limited compared to styling all templates yourself.
pennersr · Oct 6, 2023 · 537ac9c · 537ac9c
1 parent 62becf5
commit 537ac9c
Show file tree

Hide file tree

Showing 97 changed files with 1,423 additions and 1,354 deletions.
diff --git a/.djlintrc b/.djlintrc
@@ -0,0 +1,3 @@
+{
+"custom_blocks": "element,slot"
+}
diff --git a/ChangeLog.rst b/ChangeLog.rst
@@ -1,10 +1,15 @@
 0.58.0 (unreleased)
 *******************
 
-Note worthy changes
--------------------
+Backwards incompatible changes
+------------------------------
 
-- ...
+- Refactored the built-in templates, with the goal of being able to adjust the
+  look and feel of the whole project by only overriding a few core templates.
+  This approach allows you to achieve visual results fast, but is of course more
+  limited compared to styling all templates yourself. If your project provided
+  its own templates then this change will not affect anything, but if you rely
+  on (some of) the built-in templates your project may be affected.
 
 
 0.57.0 (2023-09-24)

diff --git a/allauth/account/forms.py b/allauth/account/forms.py
@@ -8,6 +8,7 @@
 from django.contrib.sites.shortcuts import get_current_site
 from django.core import exceptions, validators
 from django.urls import reverse
+from django.utils.safestring import mark_safe
 from django.utils.translation import gettext, gettext_lazy as _, pgettext
 
 from ..utils import (
@@ -139,6 +140,7 @@ def __init__(self, *args, **kwargs):
         set_form_field_order(self, ["login", "password", "remember"])
         if app_settings.SESSION_REMEMBER is not None:
             del self.fields["remember"]
+        self.fields["password"].help_text=mark_safe(_('<a href="{}">Forgot your password?</a>').format(reverse('account_reset_password')))
 
     def user_credentials(self):
         """

diff --git a/allauth/socialaccount/providers/facebook/templates/facebook/fbconnect.html b/allauth/socialaccount/providers/facebook/templates/facebook/fbconnect.html
@@ -1,6 +1,4 @@
 {% load static %}
 <div id="fb-root"></div>
-<script id="allauth-facebook-settings" type="application/json">
-{{ fb_data }}
-</script>
+<script id="allauth-facebook-settings" type="application/json">{{ fb_data }}</script>
 <script type="text/javascript" src="{% static 'facebook/js/fbconnect.js' %}"></script>
diff --git a/allauth/socialaccount/providers/openid/forms.py b/allauth/socialaccount/providers/openid/forms.py
@@ -1,10 +1,11 @@
 from django import forms
+from django.utils.html import mark_safe
 
 
 class LoginForm(forms.Form):
     openid = forms.URLField(
         label=("OpenID"),
-        help_text=('Get an <a href="http://openidexplained.com/get">OpenID</a>'),
+        help_text=mark_safe('Get an <a href="http://openidexplained.com/get">OpenID</a>'),
     )
     next = forms.CharField(widget=forms.HiddenInput, required=False)
     process = forms.CharField(widget=forms.HiddenInput, required=False)
diff --git a/allauth/socialaccount/providers/telegram/templates/telegram/callback.html b/allauth/socialaccount/providers/telegram/templates/telegram/callback.html
@@ -1,6 +1,6 @@
 {% load static %}
 <html>
-  <body>
-    <script type="text/javascript" src="{% static 'telegram/js/telegram.js' %}"></script>
-  </body>
+    <body>
+        <script type="text/javascript" src="{% static 'telegram/js/telegram.js' %}"></script>
+    </body>
 </html>
diff --git a/allauth/templates/account/account_inactive.html b/allauth/templates/account/account_inactive.html
@@ -1,11 +1,12 @@
-{% extends "account/base.html" %}
-
+{% extends "allauth/layouts/entrance.html" %}
 {% load i18n %}
-
-{% block head_title %}{% trans "Account Inactive" %}{% endblock head_title %}
-
+{% load allauth %}
+{% block head_title %}
+    {% trans "Account Inactive" %}
+{% endblock head_title %}
 {% block content %}
-<h1>{% trans "Account Inactive" %}</h1>
-
-<p>{% trans "This account is inactive." %}</p>
+    {% element h1 %}
+        {% trans "Account Inactive" %}
+    {% endelement %}
+    <p>{% trans "This account is inactive." %}</p>
 {% endblock content %}
diff --git a/allauth/templates/account/base.html b/allauth/templates/account/base.html
diff --git a/allauth/templates/account/base_entrance.html b/allauth/templates/account/base_entrance.html
@@ -0,0 +1 @@
+{% extends "allauth/layouts/entrance.html" %}
diff --git a/allauth/templates/account/base_manage.html b/allauth/templates/account/base_manage.html
@@ -0,0 +1 @@
+{% extends "allauth/layouts/manage.html" %}
diff --git a/allauth/templates/account/base_manage_email.html b/allauth/templates/account/base_manage_email.html
@@ -0,0 +1 @@
+{% extends "account/base_manage.html" %}
diff --git a/allauth/templates/account/base_manage_password.html b/allauth/templates/account/base_manage_password.html
@@ -0,0 +1 @@
+{% extends "account/base_manage.html" %}
diff --git a/allauth/templates/account/email.html b/allauth/templates/account/email.html
@@ -1,63 +1,76 @@
-{% extends "account/base.html" %}
-
-{% load i18n %}
-
-{% block head_title %}{% trans "Email Addresses" %}{% endblock head_title %}
-
+{% extends "account/base_manage_email.html" %}
+{% load allauth i18n %}
+{% block head_title %}
+    {% trans "Email Addresses" %}
+{% endblock head_title %}
 {% block content %}
-    <h1>{% trans "Email Addresses" %}</h1>
-{% if emailaddresses %}
-<p>{% trans 'The following email addresses are associated with your account:' %}</p>
-
-<form action="{% url 'account_email' %}" class="email_list" method="post">
-{% csrf_token %}
-<fieldset class="blockLabels">
-
-  {% for emailaddress in emailaddresses %}
-<div class="ctrlHolder">
-      <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">
-
-      <input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary or emailaddresses|length == 1 %}checked="checked"{%endif %} value="{{emailaddress.email}}"/>
-
-{{ emailaddress.email }}
-    {% if emailaddress.verified %}
-    <span class="verified">{% trans "Verified" %}</span>
+    {% element h1 %}
+        {% trans "Email Addresses" %}
+    {% endelement %}
+    {% if emailaddresses %}
+        <p>{% trans 'The following email addresses are associated with your account:' %}</p>
+        {% url 'account_email' as email_url %}
+        {% element form form=form action=email_url method="post" %}
+            {% slot body %}
+                {% csrf_token %}
+                {% for emailaddress in emailaddresses %}
+                    <div class="ctrlHolder">
+                        <label for="email_radio_{{ forloop.counter }}"
+                               class="{% if emailaddress.primary %}primary_email{% endif %}">
+                            <input id="email_radio_{{ forloop.counter }}"
+                                   type="radio"
+                                   name="email"
+                                   {% if emailaddress.primary or emailaddresses|length == 1 %}checked="checked"{% endif %}
+                                   value="{{ emailaddress.email }}" />
+                            {{ emailaddress.email }}
+                            {% if emailaddress.verified %}
+                                <span class="verified">{% trans "Verified" %}</span>
+                            {% else %}
+                                <span class="unverified">{% trans "Unverified" %}</span>
+                            {% endif %}
+                            {% if emailaddress.primary %}
+                                <span class="primary">{% trans "Primary" %}</span>
+                            {% endif %}
+                        </label>
+                    </div>
+                {% endfor %}
+            {% endslot %}
+            {% slot actions %}
+                {% element button variant="primary" type="submit" name="action_primary" %}
+                    {% trans 'Make Primary' %}
+                {% endelement %}
+                {% element button variant="secondary" type="submit" name="action_send" %}
+                    {% trans 'Re-send Verification' %}
+                {% endelement %}
+                {% element button variant="danger" type="submit" name="action_remove" %}
+                    {% trans 'Remove' %}
+                {% endelement %}
+            {% endslot %}
+        {% endelement %}
     {% else %}
-    <span class="unverified">{% trans "Unverified" %}</span>
+        {% include "account/snippets/warn_no_email.html" %}
+    {% endif %}
+    {% if can_add_email %}
+        <h2>{% trans "Add Email Address" %}</h2>
+        {% url 'account_email' as action_url %}
+        {% element form form=form method="post" action=action_url %}
+            Hoi bef bod
+            {% slot body %}
+                {% csrf_token %}
+                {% element fields form=form %}
+                {% endelement %}
+            {% endslot %}
+            befac
+            {% slot actions %}
+                {% element button name="action_add" type="submit" %}
+                    {% trans "Add Email" %}
+                {% endelement %}
+            {% endslot %}
+        {% endelement %}
     {% endif %}
-      {% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
-</label>
-</div>
-  {% endfor %}
-
-<div class="buttonHolder">
-      <button class="secondaryAction" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
-      <button class="secondaryAction" type="submit" name="action_send" >{% trans 'Re-send Verification' %}</button>
-      <button class="primaryAction" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
-</div>
-
-</fieldset>
-</form>
-
-{% else %}
-{% include "account/snippets/warn_no_email.html" %}
-{% endif %}
-
-  {% if can_add_email %}
-    <h2>{% trans "Add Email Address" %}</h2>
-
-    <form method="post" action="{% url 'account_email' %}" class="add_email">
-        {% csrf_token %}
-        {{ form.as_p }}
-        <button name="action_add" type="submit">{% trans "Add Email" %}</button>
-    </form>
-  {% endif %}
-
 {% endblock content %}
-
-
 {% block extra_body %}
-<script type="text/javascript">
+    <script type="text/javascript">
 (function() {
   var message = "{% trans 'Do you really want to remove the selected email address?' %}";
   var actions = document.getElementsByName('action_remove');
@@ -69,5 +82,5 @@ <h2>{% trans "Add Email Address" %}</h2>
     });
   }
 })();
-</script>
+    </script>
 {% endblock extra_body %}
diff --git a/allauth/templates/account/email_change.html b/allauth/templates/account/email_change.html
@@ -1,10 +1,13 @@
-{% extends "account/base.html" %}
+{% extends "account/base_manage_email.html" %}
 {% load i18n %}
+{% load allauth %}
 {% block head_title %}
     {% trans "Email Address" %}
 {% endblock head_title %}
 {% block content %}
-    <h1>{% trans "Email Address" %}</h1>
+    {% element h1 %}
+        {% trans "Email Address" %}
+    {% endelement %}
     {% if emailaddresses %}
         {% if current_emailaddress %}
             <p>
@@ -15,19 +18,34 @@ <h1>{% trans "Email Address" %}</h1>
             <p>
                 {% trans 'Your email address is still pending verification:' %} <a href="mailto:{{ new_emailaddress.email }}">{{ new_emailaddress.email }}</a>
             </p>
-            <form method="post" action="{% url 'account_email' %}">
-                {% csrf_token %}
-                <input type="hidden" name="email" value="{{ new_emailaddress.email }}">
-                <button type="submit" name="action_send">{% trans 'Re-send Verification' %}</button>
-            </form>
+            {% url 'account_email' as action_url %}
+            {% element form method="post" action="" tags="button-only" %}
+                {% slot body %}
+                    {% csrf_token %}
+                    <input type="hidden" name="email" value="{{ new_emailaddress.email }}">
+                {% endslot %}
+                {% slot actions %}
+                    {% element button type="submit" name="action_send" %}
+                        {% trans 'Re-send Verification' %}
+                    {% endelement %}
+                {% endslot %}
+            {% endelement %}
         {% endif %}
     {% else %}
         {% include "account/snippets/warn_no_email.html" %}
     {% endif %}
     <h2>{% trans "Change Email Address" %}</h2>
-    <form method="post" action="{% url 'account_email' %}">
-        {% csrf_token %}
-        {{ form.as_p }}
-        <button name="action_add" type="submit">{% trans "Change Email" %}</button>
-    </form>
+    {% url 'account_email' as action_url %}
+    {% element form method="post" action=action_url %}
+        {% slot body %}
+            {% csrf_token %}
+            {% element fields form=form %}
+            {% endelement %}
+        {% endslot %}
+        {% slot actions %}
+            {% element button name="action_add" type="submit" %}
+                {% trans "Change Email" %}
+            {% endelement %}
+        {% endslot %}
+    {% endelement %}
 {% endblock content %}