[damned-lies/bootstrap-5: 4/7] feat: profile pages with form use bootstrap

[Guillaume Bernard <gbernard src gnome org>]

commit 7b11cef84060243504291b5d3c2f6ad52e7efb4a
Author: Guillaume Bernard <associations guillaume-bernard fr>
Date:   Thu Sep 22 10:58:16 2022 +0200

    feat: profile pages with form use bootstrap

 templates/people/person_detail_change_form.html   | 19 +++++-------
 templates/people/person_password_change_form.html | 36 +++++++----------------
 templates/people/person_team_join_form.html       | 29 ++++++++++--------
 templates/people/person_team_membership.html      | 13 ++++----
 4 files changed, 39 insertions(+), 58 deletions(-)
---
diff --git a/templates/people/person_detail_change_form.html b/templates/people/person_detail_change_form.html
index fe568356..0bb57686 100644
--- a/templates/people/person_detail_change_form.html
+++ b/templates/people/person_detail_change_form.html
@@ -1,19 +1,14 @@
 {% extends "people/person_base.html" %}
 {% load stats_extras %}
+{% load bootstrap5 %}
 
 {% block subcontent %}
 
-<h2 class="clear">{% trans "Change your details" %}</h2>
-
-<form action="{{ request.path }}" method="POST" class="djform">
-  {% csrf_token %}
-  <table>
-    {{ form.as_table }}
-    <tr>
-      <td colspan="2" align="center"><input type="submit" value="{% trans "Save" %}"></td>
-    </tr>
-  </table>
-  <input type="hidden" name="detail_change_form" value="1" />
-</form>
+    <h2 class="clear">{% trans "Change your details" %}</h2>
 
+    <form action="{{ request.path }}" method="POST" class="form">
+        {% csrf_token %}
+        {% bootstrap_form form layout="horizontal" %}
+        <button class="btn btn-success float-end w-25" type="submit">{% trans "Update personal details" 
%}</button>
+    </form>
 {% endblock %}
diff --git a/templates/people/person_password_change_form.html 
b/templates/people/person_password_change_form.html
index 527bde60..840413b2 100644
--- a/templates/people/person_password_change_form.html
+++ b/templates/people/person_password_change_form.html
@@ -1,30 +1,14 @@
 {% extends "people/person_base.html" %}
+{% load bootstrap5 %}
 
 {% block subcontent %}
-
-<h2>{% trans 'Password change' %}</h2>
-
-<p>{% trans "Please enter your old password, for security’s sake, and then enter your new password twice so 
we can verify you typed it in correctly." %}</p>
-
-<form action="{{ request.path }}"  method="post" class="djform form">
-  {% csrf_token %}
-  <table>
-  <div class="form-group">
-    <label for="id_old_password">{% trans 'Old password:' %}</label>{{ form.old_password }}
-    <span class="help-block">{{ form.old_password.errors }}</span>
-  </div>
-  <div class="form-group">
-    <label for="id_new_password1">{% trans 'New password:' %}</label>{{ form.new_password1 }}
-    <span class="help-block">{{ form.new_password1.errors }}</span>
-  </div>
-  <div class="form-group">
-    <label for="id_new_password2">{% trans 'Confirm password:' %}</label>{{ form.new_password2 }}
-    <span class="help-block">{{ form.new_password2.errors }}</span>
-  </div>
-  <div class="form-group">
-    <button type="submit" class="btn btn-default">{% trans 'Change my password' %}</button>
-  </div>
-  </table>
-</form>
-
+    <h2>{% trans 'Password change' %}</h2>
+    <p>{% trans "Please enter your old password, for security’s sake, and then enter your new password twice 
so we can verify you typed it in correctly." %}</p>
+    <form action="{{ request.path }}" method="post" class="form">
+        {% csrf_token %}
+        <div class="form-group">
+            {% bootstrap_form form layout="horizontal" %}
+            <button type="submit" class="btn btn-success float-end w-25">{% trans 'Change my password' 
%}</button>
+        </div>
+    </form>
 {% endblock %}
diff --git a/templates/people/person_team_join_form.html b/templates/people/person_team_join_form.html
index e18b7006..e9c49100 100644
--- a/templates/people/person_team_join_form.html
+++ b/templates/people/person_team_join_form.html
@@ -1,16 +1,21 @@
 {% extends "people/person_base.html" %}
+{% load bootstrap5 %}
 
 {% block subcontent %}
-
-{% include "people/person_team_membership.html" %}
-
-<h2>{% trans "Join a new team" %}</h2>
-
-<form action="{{ request.path }}" method="POST">
-  {% csrf_token %}
-  <p><em>{% trans "I would like to join the following team as “translator”:" %}</em><br />
-    {{ form.teams }}
-    <input type="submit" value="{% trans "Join" %}">
-</form>
-
+    {% include "people/person_team_membership.html" %}
+    <div class="col-sm-12 my-3">
+        <h2>{% trans "Join a new team" %}</h2>
+        <form action="{{ request.path }}" method="POST">
+            {% csrf_token %}
+            <p>{% trans "I would like to join the following team as “translator”:" %}<br/>
+            <div class="row">
+                <div class="col-12 col-xs-12 col-sm-12 col-md-10">
+                    {% bootstrap_form form layout="horizontal" %}
+                </div>
+                <div class="col-12 col-xs-12 col-sm-12 col-md-2">
+                    <button type="submit" class="btn btn-success w-100">{% trans "Join" %}</button>
+                </div>
+            </div>
+        </form>
+    </div>
 {% endblock %}
diff --git a/templates/people/person_team_membership.html b/templates/people/person_team_membership.html
index 49b46b68..f062ee91 100644
--- a/templates/people/person_team_membership.html
+++ b/templates/people/person_team_membership.html
@@ -6,22 +6,19 @@
         <ul class="list-group">
             {% for role in person.role_set.all %}
                 {% with role.get_role_display as role_name %}
-                    <li class="list-group-item d-flex justify-content-between align-items-center">
-                        <span>
+                    <li class="list-group-item">
+                        <form method="post" action="{% url 'person_team_leave' role.team.name %}">
                             {% blocktrans trimmed with role.team|linked_with:role.team.get_description|safe 
as team_name %}
                                 Member of {{ team_name }} team ({{ role_name }})
                             {% endblocktrans %}
-                        </span>
-                        {% if on_own_page %}
-                            <form method="post"
-                                  action="{% url 'person_team_leave' role.team.name %}">
+                            {% if on_own_page %}
                                 {% csrf_token %}
                                 <button type="submit" class="btn btn-danger float-end"
                                         onclick="return confirm('{% trans 'Are you sure you want to leave 
the team?' %}')">
                                     <i class='fa fa-trash-alt'></i> {% trans 'Leave' %}
                                 </button>
-                            </form>
-                        {% endif %}
+                            {% endif %}
+                        </form>
                     </li>
                 {% endwith %}
             {% endfor %}