Form buttons right (#1167)

* Add template function * Update the button in forms * Add new template tag to the rest of the forms * Fix issue with tests
lookit · Apr 6, 2023 · dc3da6e · dc3da6e
1 parent c543ddc
commit dc3da6e
Show file tree

Hide file tree

Showing 18 changed files with 88 additions and 32 deletions.
diff --git a/accounts/templates/accounts/2fa-setup.html b/accounts/templates/accounts/2fa-setup.html
@@ -29,7 +29,9 @@ <h3 class="card-title">QR Code</h3>
                                 <form method="post">
                                     {% csrf_token %}
                                     {% bootstrap_form form %}
-                                    {% bootstrap_button "Test Code" button_type="submit" button_class=btn_primary_classes %}
+                                    {% form_buttons %}
+                                        {% bootstrap_button "Test Code" button_type="submit" button_class=btn_primary_classes %}
+                                    {% endform_buttons %}
                                 </form>
                             </li>
                         </ol>

diff --git a/accounts/templates/accounts/account-update.html b/accounts/templates/accounts/account-update.html
@@ -1,5 +1,6 @@
 {% extends "web/base.html" %}
 {% load django_bootstrap5 %}
+{% load web_extras %}
 {% load i18n %}
 {% block title %}
     {% trans "Update account information" %}
@@ -15,7 +16,9 @@ <h1 class="card-title">{% trans "Account Information" %}</h1>
                     <form method="post">
                         {% csrf_token %}
                         {% bootstrap_form update_account_form %}
-                        {% bootstrap_button "Save" name="form-handle" value="update-account" %}
+                        {% form_buttons %}
+                            {% bootstrap_button "Save" name="form-handle" value="update-account" %}
+                        {% endform_buttons %}
                     </form>
                 </div>
             </div>
@@ -26,7 +29,9 @@ <h1 class="card-title">{% trans "Change Your Password" %}</h1>
                     <form method="post">
                         {% csrf_token %}
                         {% bootstrap_form change_password_form %}
-                        {% bootstrap_button "Save" name="form-handle" value="change-password" %}
+                        {% form_buttons %}
+                            {% bootstrap_button "Save" name="form-handle" value="change-password" %}
+                        {% endform_buttons %}
                     </form>
                 </div>
             </div>
@@ -51,11 +56,13 @@ <h1 class="card-title">{% trans "Manage Two-Factor Authentication" %}</h1>
                                 {% endif %}
                                 {% csrf_token %}
                                 {% bootstrap_form otp_check_form %}
-                                {% if otp.activated %}
-                                    {% bootstrap_button "Submit" name="form-handle" value="deactivate-otp" %}
-                                {% else %}
-                                    {% bootstrap_button "Submit" name="form-handle" value="activate-otp" %}
-                                {% endif %}
+                                {% form_buttons %}
+                                    {% if otp.activated %}
+                                        {% bootstrap_button "Submit" name="form-handle" value="deactivate-otp" %}
+                                    {% else %}
+                                        {% bootstrap_button "Submit" name="form-handle" value="activate-otp" %}
+                                    {% endif %}
+                                {% endform_buttons %}
                             </form>
                         {% else %}
                             {# if we don't have OTP, link to 2FA setup directly. #}

diff --git a/accounts/templates/accounts/researcher-registration.html b/accounts/templates/accounts/researcher-registration.html
@@ -1,6 +1,7 @@
 {% extends "web/base.html" %}
 {% load django_bootstrap5 %}
 {% load bootstrap_icons %}
+{% load web_extras %}
 {% block title %}
     Researcher Registration
 {% endblock title %}
@@ -19,7 +20,9 @@
                     <a href="{% url 'web:privacy' %}" target="_blank" rel="noopener">Privacy Statement</a>
                     .
                 </p>
-                {% bootstrap_button bs_icon_plus|add:"Create Account" %}
+                {% form_buttons %}
+                    {% bootstrap_button bs_icon_plus|add:"Create Account" %}
+                {% endform_buttons %}
             </form>
         </div>
     </div>

diff --git a/studies/templates/studies/lab_create.html b/studies/templates/studies/lab_create.html
@@ -15,6 +15,8 @@
     <form action="" enctype="multipart/form-data" method="post">
         {% csrf_token %}
         {% bootstrap_form form %}
-        {% bootstrap_button "Submit" %}
+        {% form_buttons %}
+            {% bootstrap_button "Submit" %}
+        {% endform_buttons %}
     </form>
 {% endblock content %}
diff --git a/studies/templates/studies/lab_member_list.html b/studies/templates/studies/lab_member_list.html
@@ -77,7 +77,9 @@
                                         Send password reset email
                                     </option>
                                 </select>
-                                {% bootstrap_button "Submit" %}
+                                {% form_buttons %}
+                                    {% bootstrap_button "Submit" %}
+                                {% endform_buttons %}
                             </form>
                         </div>
                     {% endif %}

diff --git a/studies/templates/studies/lab_update.html b/studies/templates/studies/lab_update.html
@@ -19,7 +19,9 @@
     <form action="" enctype="multipart/form-data" method="post">
         {% csrf_token %}
         {% bootstrap_form form %}
-        {% bootstrap_button "Discard Changes" href=url_lab_edit button_class=btn_secondary_classes %}
-        {% bootstrap_button "Save" type="submit" button_class=btn_primary_classes %}
+        {% form_buttons %}
+            {% bootstrap_button "Discard Changes" href=url_lab_edit button_class=btn_secondary_classes %}
+            {% bootstrap_button "Save" type="submit" button_class=btn_primary_classes %}
+        {% endform_buttons %}
     </form>
 {% endblock content %}
diff --git a/studies/templates/studies/study_edit.html b/studies/templates/studies/study_edit.html
@@ -26,6 +26,7 @@
     {% url 'exp:preview-detail' uuid=study.uuid as url_preview_detail %}
     {% url 'exp:study-edit' pk=study.id as url_cancel %}
     {% button_secondary_classes as btn_secondary_classes %}
+    {% button_primary_classes as btn_primary_classes %}
     <div class="row">
         <div class="col-lg-10 offset-lg-1">
             <div class="card bg-light my-4">
@@ -42,7 +43,7 @@ <h3 class="card-subtitle my-1">
                         {% csrf_token %}
                         {% include "studies/_study_fields.html" with form=form study=study %}
                         {% include "studies/_study_type.html" with types=types create=0 currentType=study.study_type.id %}
-                        <div class="me-4 float-end">
+                        {% form_buttons %}
                             {% bootstrap_button "Cancel" button_class=btn_secondary_classes href=url_cancel %}
                             <button type="button"
                                     class="{% button_primary_classes %}"
@@ -51,7 +52,7 @@ <h3 class="card-subtitle my-1">
                                     data-bs-toggle="modal">
                                 Save Changes
                             </button>
-                        </div>
+                        {% endform_buttons %}
                         <div class="modal fade"
                              id="save-study-confirmation"
                              tabindex="-1"

diff --git a/studies/templates/studies/study_form.html b/studies/templates/studies/study_form.html
@@ -33,10 +33,10 @@ <h3 class="card-subtitle my-1">Create Study</h3>
                         {% csrf_token %}
                         {% include "studies/_study_fields.html" with form=form %}
                         {% include "studies/_study_type.html" with types=types create=1 %}
-                        <div class="me-4 float-end">
+                        {% form_buttons %}
                             {% bootstrap_button "Cancel" button_class=btn_secondary_classes href=url_cancel %}
                             {% bootstrap_button bs_icon_plus|add:"Create Study" button_class=btn_primary_classes button_type="submit" id="create-study-button" %}
-                        </div>
+                        {% endform_buttons %}
                     </form>
                 </div>
             </div>

diff --git a/studies/templates/studies/study_participant_contact.html b/studies/templates/studies/study_participant_contact.html
@@ -140,7 +140,9 @@
             <form method="post">
                 {% csrf_token %}
                 {% bootstrap_form form %}
-                {% bootstrap_button "Submit" %}
+                {% form_buttons %}
+                    {% bootstrap_button "Submit" %}
+                {% endform_buttons %}
             </form>
         </div>
     </div>

diff --git a/web/templates/registration/login.html b/web/templates/registration/login.html
@@ -1,5 +1,6 @@
 {% extends "web/base.html" %}
 {% load django_bootstrap5 %}
+{% load web_extras %}
 {% load i18n %}
 {% block title %}
     {% trans "Login" %}
@@ -12,7 +13,9 @@
             <form action="" method="post" autocomplete="off">
                 {% csrf_token %}
                 {% bootstrap_form form %}
-                {% bootstrap_button button_type="submit" content=login %}
+                {% form_buttons %}
+                    {% bootstrap_button button_type="submit" content=login %}
+                {% endform_buttons %}
                 <input type="hidden" name="next" value="{{ next }}" />
             </form>
             {# Assumes you setup the password_reset view in your URLconf #}

diff --git a/web/templates/registration/password_reset_confirm.html b/web/templates/registration/password_reset_confirm.html
@@ -12,7 +12,9 @@
                 <form method="post">
                     {% csrf_token %}
                     {% bootstrap_form form %}
-                    {% bootstrap_button trans_change_my_password %}
+                    {% form_buttons %}
+                        {% bootstrap_button trans_change_my_password %}
+                    {% endform_buttons %}
                 </form>
             {% else %}
                 <p>

diff --git a/web/templates/registration/password_reset_form.html b/web/templates/registration/password_reset_form.html
@@ -13,7 +13,9 @@
             <form method="post">
                 {% csrf_token %}
                 {% bootstrap_form form %}
-                {% bootstrap_button trans_reset_password %}
+                {% form_buttons %}
+                    {% bootstrap_button trans_reset_password %}
+                {% endform_buttons %}
             </form>
         </div>
     </div>

diff --git a/web/templates/web/child-add.html b/web/templates/web/child-add.html
@@ -27,8 +27,10 @@ <h1 class="card-title">{% trans "Add Child" %}</h1>
                     <form method="post" action="">
                         {% csrf_token %}
                         {% bootstrap_form form %}
-                        {% bootstrap_button trans_cancel href=url_children_list button_class=btn_secondary_classes %}
-                        {% bootstrap_button bs_icon_plus|add:trans_add_child button_class=btn_primary_classes %}
+                        {% form_buttons %}
+                            {% bootstrap_button trans_cancel href=url_children_list button_class=btn_secondary_classes %}
+                            {% bootstrap_button bs_icon_plus|add:trans_add_child button_class=btn_primary_classes %}
+                        {% endform_buttons %}
                     </form>
                 </div>
             </div>

diff --git a/web/templates/web/child-update.html b/web/templates/web/child-update.html
@@ -29,11 +29,13 @@ <h1 class="card-title">{% trans "Update" %} {{ child.given_name }}</h1>
                     <form method="post" action="">
                         {% csrf_token %}
                         {% bootstrap_form form %}
-                        {% bootstrap_button trans_delete button_class="btn-danger" name="deleteChild" %}
-                        {% bootstrap_button trans_cancel href=url_children_list button_class=btn_secondary_classes %}
-                        {% bootstrap_button trans_save button_class=btn_primary_classes %}
-                    </form>
-                </div>
+                        {% form_buttons %}
+                            {% bootstrap_button trans_delete button_class="btn-danger" name="deleteChild" %}
+                            {% bootstrap_button trans_cancel href=url_children_list button_class=btn_secondary_classes %}
+                            {% bootstrap_button trans_save button_class=btn_primary_classes %}
+                        {% endform_buttons %}
+                    </div>
+                </form>
             </div>
         </div>
     </div>

diff --git a/web/templates/web/demographic-data-update.html b/web/templates/web/demographic-data-update.html
@@ -1,6 +1,7 @@
 {% extends "web/base.html" %}
 {% load i18n %}
 {% load django_bootstrap5 %}
+{% load web_extras %}
 {% load static %}
 {% block title %}
     {% trans "Update demographics" %}
@@ -49,7 +50,9 @@
                     <form method="post" action="">
                         {% csrf_token %}
                         {% bootstrap_form form %}
-                        {% bootstrap_button trans_save %}
+                        {% form_buttons %}
+                            {% bootstrap_button trans_save %}
+                        {% endform_buttons %}
                     </form>
                 </div>
             </div>

diff --git a/web/templates/web/participant-email-preferences.html b/web/templates/web/participant-email-preferences.html
@@ -20,8 +20,10 @@ <h1 class="card-title">{% trans "I would like to be contacted when:" %}</h1>
                     <form method="post" action="">
                         {% csrf_token %}
                         {% bootstrap_form form %}
-                        {% bootstrap_button trans_cancel href=url_email_prefs button_class=btn_secondary_classes %}
-                        {% bootstrap_button trans_save name="password_update" button_class=btn_primary_classes %}
+                        {% form_buttons %}
+                            {% bootstrap_button trans_cancel href=url_email_prefs button_class=btn_secondary_classes %}
+                            {% bootstrap_button trans_save name="password_update" button_class=btn_primary_classes %}
+                        {% endform_buttons %}
                     </form>
                 </div>
             </div>

diff --git a/web/templates/web/participant-signup.html b/web/templates/web/participant-signup.html
@@ -1,6 +1,7 @@
 {% extends "web/base.html" %}
 {% load django_bootstrap5 %}
 {% load bootstrap_icons %}
+{% load web_extras %}
 {% load i18n %}
 {% block title %}
     {% trans "Sign up to participate" %}
@@ -26,7 +27,9 @@
                 <p>
                     {% trans "By clicking 'Create Account', I agree that I have read and accepted the " %} <a href="{% url 'web:privacy' %}" target="_blank" rel="noopener">{% trans "Privacy Statement" %}.</a>
                 </p>
-                {% bootstrap_button bs_icon_plus|add:trans_create_account %}
+                {% form_buttons %}
+                    {% bootstrap_button bs_icon_plus|add:trans_create_account %}
+                {% endform_buttons %}
             </form>
         </div>
     </div>

diff --git a/web/templatetags/web_extras.py b/web/templatetags/web_extras.py
@@ -283,3 +283,19 @@ def render(self, context):
         )
         result.append("</ol></nav>")
         return "".join(result)
+
+
+@register.tag(name="form_buttons")
+def form_buttons(parser, token):
+    nodelist = parser.parse(("endform_buttons",))
+    parser.delete_first_token()
+    return FormButtonsNode(nodelist)
+
+
+class FormButtonsNode(template.Node):
+    def __init__(self, nodelist):
+        self.nodelist = nodelist
+
+    def render(self, context):
+        rendered_buttons = (n.render(context) for n in self.nodelist)
+        return f'<div class="d-flex justify-content-end gap-1">{"".join(rendered_buttons)}</div>'