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

[Guillaume Bernard <gbernard src gnome org>]

commit 54db38bc9d38764a28a607c78f551da04ae9f7dc
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      | 42 +++++++++++++----------
 4 files changed, 58 insertions(+), 68 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 9a50c436..989e3889 100644
--- a/templates/people/person_team_membership.html
+++ b/templates/people/person_team_membership.html
@@ -1,22 +1,28 @@
 {% load stats_extras %}
 
 {% if person.role_set.all %}
-<div class="col-sm-12">
-    <h2>{% trans "Team membership" %}</h2>
-    <ul class="foot">
-      {% for role in person.role_set.all %}
-      {% with role.get_role_display as role_name %}
-      <li>{% blocktrans with role.team|linked_with:role.team.get_description|safe as team_name %}Member of 
{{ team_name }} team ({{ role_name }}){% endblocktrans %}
-          {% if on_own_page %}
-          <form class="inline" method="post" action="{% url 'person_team_leave' role.team.name %}">
-            {% csrf_token %}
-            <button type="submit" class="confirm"
-                    data-confirm="{% trans 'Are you sure you want to leave the team?' %}">{% trans 'Leave' 
%}</button>
-          </form>
-          {% endif %}
-      </li>
-      {% endwith %}
-      {% endfor %}
-    </ul>
-</div>
+    <div class="col-sm-12 my-3">
+        <h2>{% trans "Team membership" %}</h2>
+        <ul class="list-group">
+            {% for role in person.role_set.all %}
+                {% with role.get_role_display as role_name %}
+                    <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 %}
+                            {% 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>
+
+                            {% endif %}
+                        </form>
+                    </li>
+                {% endwith %}
+            {% endfor %}
+        </ul>
+    </div>
 {% endif %}