refactor(templates): Improved change email

pennersr · Dec 30, 2023 · 4c3b84a · 4c3b84a
1 parent 329925b
commit 4c3b84a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 35 deletions.
diff --git a/allauth/templates/account/email_change.html b/allauth/templates/account/email_change.html
@@ -15,41 +15,54 @@
     {% element form method="post" action=action_url %}
         {% slot body %}
             {% csrf_token %}
-            {% element field readonly=True type="email" value=current_emailaddress.email %}
-                {% slot label %}
-                    {% translate "Current email" %}:
-                {% endslot %}
-            {% endelement %}
+            {% if current_emailaddress %}
+                {% element field disabled=True type="email" value=current_emailaddress.email %}
+                    {% slot label %}
+                        {% translate "Current email" %}:
+                    {% endslot %}
+                {% endelement %}
+            {% endif %}
             {% if new_emailaddress %}
-                {% element field name="email" value=new_emailaddress.email readonly=True type="email" %}
+                {% element field name="email" value=new_emailaddress.email disabled=True type="email" %}
                     {% slot label %}
-                        {% translate "Changing to" %}:
+                        {% if not current_emailaddress %}
+                            {% translate "Current email" %}:
+                        {% else %}
+                            {% translate "Changing to" %}:
+                        {% endif %}
                     {% endslot %}
                     {% slot help_text %}
                         {% blocktranslate %}Your email address is still pending verification.{% endblocktranslate %}
-                    {% endslot %}
-                {% endelement %}
-            {% else %}
-                {% element field name="email" value=form.email.value errors=form.email.errors type="email" %}
-                    {% slot label %}
-                        {% translate "Change to" %}:
+                        {% element button form="pending-email" type="submit" name="action_send" tags="minor,secondary" %}
+                            {% trans 'Re-send Verification' %}
+                        {% endelement %}
+                        {% if current_emailaddress %}
+                            {% element button form="pending-email" type="submit" name="action_remove" tags="danger,minor" %}
+                                {% trans 'Cancel Change' %}
+                            {% endelement %}
+                        {% endif %}
                     {% endslot %}
                 {% endelement %}
             {% endif %}
+            {% element field name="email" value=form.email.value errors=form.email.errors type="email" %}
+                {% slot label %}
+                    {% translate "Change to" %}:
+                {% endslot %}
+            {% endelement %}
         {% endslot %}
         {% slot actions %}
-            {% if new_emailaddress %}
-                {% element button type="submit" name="action_send" %}
-                    {% trans 'Re-send Verification' %}
-                {% endelement %}
-                {% element button type="submit" name="action_remove" %}
-                    {% trans 'Cancel Change' %}
-                {% endelement %}
-            {% else %}
-                {% element button name="action_add" type="submit" %}
-                    {% trans "Change Email" %}
-                {% endelement %}
-            {% endif %}
+            {% element button name="action_add" type="submit" %}
+                {% trans "Change Email" %}
+            {% endelement %}
         {% endslot %}
     {% endelement %}
+    {% if new_emailaddress %}
+        <form style="display: none"
+              id="pending-email"
+              method="post"
+              action="{% url 'account_email' %}">
+            {% csrf_token %}
+            <input type="hidden" name="email" value="{{ new_emailaddress.email }}">
+        </form>
+    {% endif %}
 {% endblock content %}
diff --git a/allauth/templates/allauth/elements/button.html b/allauth/templates/allauth/elements/button.html
@@ -1,6 +1,8 @@
 {% load allauth %}
 {% comment %} djlint:off {% endcomment %}
 <{% if attrs.href %}a href="{{ attrs.href }}"{% else %}button{% endif %}
+{% if attrs.form %}form="{{ attrs.form }}"{% endif %}
+{% if attrs.id %}id="{{ attrs.id }}"{% endif %}
 {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
 {% if attrs.type %}type="{{ attrs.type }}"{% endif %}
 >

diff --git a/allauth/templates/allauth/elements/field.html b/allauth/templates/allauth/elements/field.html
@@ -25,5 +25,8 @@
                value="{{ attrs.value|default_if_none:"" }}"
                type="{{ attrs.type }}">
     {% endif %}
-    {% if attrs.help_text %}<span class="helptext">{{ attrs.help_text }}</span>{% endif %}
+    {% if slots.help_text %}
+        <span>{% slot help_text %}</span>
+        {% endslot %}
+    {% endif %}
 </p>
diff --git a/example/example/templates/allauth/elements/button.html b/example/example/templates/allauth/elements/button.html
@@ -1,19 +1,22 @@
 {% load allauth %}
 {% comment %} djlint:off {% endcomment %}
 <{% if attrs.href %}a href="{{ attrs.href }}"{% else %}button{% endif %}
+{% if attrs.form %}form="{{ attrs.form }}"{% endif %}
+{% if attrs.id %}id="{{ attrs.id }}"{% endif %}
 {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
 {% if attrs.type %}type="{{ attrs.type }}"{% endif %}
-{% if attrs.id %}id="{{ attrs.id }}"{% endif %}
 class="{% block class %}
     btn
-    {% if "prominent" in attrs.tags %}btn-lg
-    {% elif "minor" in attrs.tags %}btn-sm{% endif %}
-{% if "danger" in attrs.tags %}btn-danger
-{% elif "secondary" in attrs.tags %}btn-secondary
-{% elif "warning" in attrs.tags %}btn-warning
-{% else %}btn-primary
-{% endif %}
-{% endblock %}">
+    {% if "link" in attrs.tags %}btn-link
+    {% else %}
+      {% if "prominent" in attrs.tags %}btn-lg
+      {% elif "minor" in attrs.tags %}btn-sm{% endif %}
+      {% if "danger" in attrs.tags %}btn-danger
+      {% elif "secondary" in attrs.tags %}btn-secondary
+      {% elif "warning" in attrs.tags %}btn-warning
+      {% else %}btn-primary
+      {% endif %}
+    {% endif %}{% endblock %}">
     {% if "tool" in attrs.tags %}
     {% if "delete" in attrs.tags %}
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">