From 40999506c83c8ef13746c464850192d91c37db56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Bouzour=C3=A8ne?= <william@bouzourene.ch>
Date: Sun, 12 Jan 2025 17:14:39 +0100
Subject: [PATCH] Rework forms

---
 views/account_manage.html   | 104 +++---
 views/account_totp.html     |   2 +-
 views/field.html            | 115 +++++--
 views/field_form.html       | 110 ++++---
 views/list.html             |  66 +++-
 views/list_form.html        |  46 +--
 views/listitem_form.html    |  48 +--
 views/role.html             | 634 +++++++++++++++++++++++++++++++-----
 views/role_form.html        | 430 +++++++++++++-----------
 views/section.html          | 140 ++++++--
 views/section_form.html     | 122 ++++---
 views/user.html             | 199 ++++++++---
 views/user_form.html        | 128 ++++----
 views/user_permissions.html |  74 ++---
 14 files changed, 1539 insertions(+), 679 deletions(-)

diff --git a/views/account_manage.html b/views/account_manage.html
index 14e1f29..7a7c946 100644
--- a/views/account_manage.html
+++ b/views/account_manage.html
@@ -24,62 +24,70 @@
 	
 	<form id="user" method="post">
 
-		<div class="mb-3">
-			<label for="name" class="form-label">
+		<div class="row mb-3">
+			<label for="name" class="col-md-2 form-label">
 				Nom complet
 			</label>
-			<input
-				id="name"
-				class="form-control"
-				type="text"
-				name="name"
-				required
-				value="{{ User.Name }}"
-			>
-		</div>
-
-		<div class="mb-3">
-			<label for="email" class="form-label">
-				Email
-			</label>
-			<input
-				id="email"
-				class="form-control"
-				type="email"
-				name="email"
-				required
-				value="{{ User.Email }}"
-			>
-		</div>
-
-		<div class="mb-3">
-			<label for="password" class="form-label">
-				Mot de passe
-			</label>
-			<input
-				id="password"
-				class="form-control"
-				type="password"
-				name="password"
-			>
-			<div class="form-text">
-				Laisser vide pour ne pas changer
+			<div class="col-md-10">
+				<input
+					id="name"
+					class="form-control"
+					type="text"
+					name="name"
+					required
+					value="{{ User.Name }}"
+				>
 			</div>
 		</div>
 
-		<div class="mb-3">
-			<label for="password" class="form-label">
-				Confirmer le mot de passe
+		<div class="row mb-3">
+			<label for="email" class="col-md-2 form-label">
+				Email
 			</label>
-			<input
-				id="password-verify"
-				class="form-control"
-				type="password"
-				name="password-verify"
-			>
+			<div class="col-md-10">
+				<input
+					id="email"
+					class="form-control"
+					type="email"
+					name="email"
+					required
+					value="{{ User.Email }}"
+				>
+			</div>
 		</div>
 
-		<div class="mt-4">
+		<div class="row mb-3">
+			<label for="password" class="col-md-2 form-label">
+				Mot de passe
+			</label>
+			<div class="col-md-10">
+				<input
+					id="password"
+					class="form-control"
+					type="password"
+					name="password"
+				>
+				<div class="form-text">
+					Laisser vide pour ne pas changer
+				</div>
+			</div>
+		</div>
+
+		<div class="row mb-3">
+			<label for="password" class="col-md-2 form-label">
+				Confirmer le mot de passe
+			</label>
+			<div class="col-md-10">
+				<input
+					id="password-verify"
+					class="form-control"
+					type="password"
+					name="password-verify"
+				>
+			</div>
+		</div>
+
+		<div class="my-4">
 			<button class="btn btn-primary" type="submit">
 				<i class="me-1 bi-floppy"></i>
 				Enregistrer
diff --git a/views/account_totp.html b/views/account_totp.html
index 1ec8dc0..8e035e8 100644
--- a/views/account_totp.html
+++ b/views/account_totp.html
@@ -31,7 +31,7 @@
 			</div>
 		</div>
 
-		<div class="mt-4">
+		<div class="my-4">
 			<button class="btn btn-primary" type="submit">
 				<i class="me-1 bi-floppy"></i>
 				Enregistrer
diff --git a/views/field.html b/views/field.html
index c0dd7ea..169c146 100644
--- a/views/field.html
+++ b/views/field.html
@@ -14,40 +14,97 @@
 		<hr>
 	</div>
 
-	<div class="mb-3">
-			<b>Nom du champ</b><br>
-			{{ Field.Name }}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Nom du champ
+		</div>
+		<div class="col-md-10">
+			<input
+				type="text"
+				class="form-control"
+				value="{{ Field.Name }}"
+				disabled
+				readonly
+			>
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Population</b><br>
-		{% for Key, Value in PersonTypes %}
-			{% if Key == Field.PersonType %}
-				{{ Value }}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Population
+		</div>
+		<div class="col-md-10">
+			{% for Key, Value in PersonTypes %}
+				{% if Key == Field.PersonType %}
+					<input
+						type="text"
+						class="form-control"
+						value="{{ Value }}"
+						disabled
+						readonly
+					>
+				{% endif %}
+			{% endfor %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Type de champ
+		</div>
+		<div class="col-md-10">
+			{% for Key, Value in FieldTypes %}
+				{% if Key == Field.FieldType %}
+					<input
+						type="text"
+						class="form-control"
+						value="{{ Value }}"
+						disabled
+						readonly
+					>
+				{% endif %}
+			{% endfor %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Liste
+		</div>
+		<div class="col-md-10">
+			<div class="input-group">
+				{% if Field.ListID %}
+					<input
+						type="text"
+						class="form-control"
+						value="{{ Field.List.Name }}"
+						readonly
+						disabled
+					>
+					<span class="input-group-text">
+						<a href="/admin/lists/{{ Field.List.ID }}">
+							Afficher
+							<i class="bi-box-arrow-up-right ms-1"></i>
+						</a>
+					</span>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
 			{% endif %}
-		{% endfor %}
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Type de champ</b><br>
-		{% for Key, Value in FieldTypes %}
-			{% if Key == Field.FieldType %}
-				{{ Value }}
-			{% endif %}
-		{% endfor %}
-	</div>
-
-	{% if Field.ListID %}
-	<div class="mb-3">
-		<b>Liste</b><br>
-		<a href="/admin/lists/{{ Field.List.ID }}">
-			{{ Field.List.Name }}
-		</a>
-	</div>
-
-	{% endif %}
-
-	<div class="mt-3">
+	<div class="my-4">
 		<a class="btn btn-md btn-primary" href="/admin/fields/{{ Field.ID }}/edit">
 			<i class="bi-pencil-square"></i>
 			Modifier
diff --git a/views/field_form.html b/views/field_form.html
index f1d58d0..8da9bd4 100644
--- a/views/field_form.html
+++ b/views/field_form.html
@@ -34,73 +34,81 @@
 	
 	<form id="field" method="post">
 
-		<div class="mb-3">
-			<label for="name" class="form-label">
+		<div class="row mb-3">
+			<label for="name" class="form-label col-md-2">
 				Nom du champ
 			</label>
-			<input
-				id="name"
-				class="form-control"
-				type="text"
-				name="name"
-				required
-				value="{{ Field.Name }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="name"
+					class="form-control"
+					type="text"
+					name="name"
+					required
+					value="{{ Field.Name }}"
+				>
+			</div>
 		</div>
 
 		{% if !Field.ID %}
-		<div class="mb-3">
-			<label for="person_type" class="form-label">
+		<div class="row mb-3">
+			<label for="person_type" class="form-label col-md-2">
 				Population
 			</label>
-			<select
-				name="person_type"
-				id="person_type"
-				class="form-control"
-				required
-			>
-				{% for Key, Value in PersonTypes %}
-				<option value="{{ Key }}">{{ Value }}</option>
-				{% endfor %}
-			</select>
+			<div class="col-md-10">
+				<select
+					name="person_type"
+					id="person_type"
+					class="form-control"
+					required
+				>
+					{% for Key, Value in PersonTypes %}
+					<option value="{{ Key }}">{{ Value }}</option>
+					{% endfor %}
+				</select>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<label for="field_type" class="form-label">
+		<div class="row mb-3">
+			<label for="field_type" class="form-label col-md-2">
 				Type de champ
 			</label>
-			<select
-				name="field_type"
-				id="field_type"
-				class="form-control"
-				required
-			>
-				{% for Key, Value in FieldTypes %}
-				<option value="{{ Key }}">{{ Value }}</option>
-				{% endfor %}
-			</select>
+			<div class="col-md-10">
+				<select
+					name="field_type"
+					id="field_type"
+					class="form-control"
+					required
+				>
+					{% for Key, Value in FieldTypes %}
+					<option value="{{ Key }}">{{ Value }}</option>
+					{% endfor %}
+				</select>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<label for="list" class="form-label">
+		<div class="row mb-3">
+			<label for="list" class="form-label col-md-2">
 				Liste
 			</label>
-			<select
-				name="list"
-				id="list"
-				class="form-control"
-				required
-			>
-				{% for List in Lists %}
-					<option value="{{ List.ID }}">
-						{{ List.Name }}
-					</option>
-				{% endfor %}
-			</select>
+			<div class="col-md-10">
+				<select
+					name="list"
+					id="list"
+					class="form-control"
+					required
+				>
+					{% for List in Lists %}
+						<option value="{{ List.ID }}">
+							{{ List.Name }}
+						</option>
+					{% endfor %}
+				</select>
+			</div>
 		</div>
 		{% endif %}
 
-		<div class="mt-4">
+		<div class="my-4">
 			<button class="btn btn-primary" type="submit">
 				<i class="me-1 bi-floppy"></i>
 				Enregistrer
@@ -118,6 +126,10 @@
 			var enable = false;
 			if ($(this).val() == "list") {
 				enable = true;
+
+				$("#list-disabled").remove();
+			} else {
+				$("#list").append("<option id=\"list-disabled\" selected></option>");
 			}
 
 			$("#list").prop("disabled", !enable);
diff --git a/views/list.html b/views/list.html
index 0b04778..9974101 100644
--- a/views/list.html
+++ b/views/list.html
@@ -14,17 +14,55 @@
 		<hr>
 	</div>
 
-	<div class="mb-3">
-			<b>Nom</b><br>
-			{{ List.Name }}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Nom
+		</div>
+		<div class="col-md-10">
+			<input
+				type="text"
+				class="form-control"
+				value="{{ List.Name }}"
+				disabled
+				readonly
+			>
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Liste à choix multiples</b><br>
-		{% if List.Multi %}Oui{% else %}Non{% endif %}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Liste à choix multiples
+		</div>
+		<div class="col-md-10">
+			{% if Section.Multi %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
 	</div>
 
-	<div class="mt-3">
+	<div class="my-4">
 		<a class="btn btn-md btn-primary" href="/admin/lists/{{ List.ID }}/edit">
 			<i class="bi-pencil-square"></i>
 			Modifier
@@ -41,7 +79,11 @@
 		</form>
 	</div>
 
-	<hr>
+	<div class="mt-4 mb-3">
+		<span class="h4">
+			Contenu de la liste
+		</span>
+	</div>
 	{% if ListItems %}	
 	<table class="table">
 		<thead>
@@ -61,18 +103,20 @@
 				</td>
 				<td>
 					{% if Item.Default %}
+						<i class="bi-check-lg text-success me-1"></i>
 						Oui
 					{% else %}
+						<i class="bi-x-lg text-danger me-1"></i>
 						Non
 					{% endif %}
 				</td>
-				<td>
+				<td class="text-end">
 					<form
 						action="/admin/lists/{{ List.ID }}/items/{{ Item.ID }}/delete"
 						method="post"
 						class="d-inline p-0"
 					>
-						<button class="btn btn-md btn-danger areyousure" type="submit">
+						<button class="btn btn-sm btn-danger areyousure" type="submit">
 							<i class="bi-trash3"></i>
 							Supprimer
 						</button>
@@ -88,7 +132,7 @@
 	</div>
 	{% endif %}
 
-	<div class="mt-3">
+	<div class="my-4">
 		<a class="btn btn-md btn-primary" href="/admin/lists/{{ List.ID }}/items/add">
 			<i class="bi-plus-lg"></i>
 			Ajouter
diff --git a/views/list_form.html b/views/list_form.html
index 2889514..4f308e4 100644
--- a/views/list_form.html
+++ b/views/list_form.html
@@ -32,31 +32,35 @@
 	
 	<form id="list" method="post">
 
-		<div class="mb-3">
-			<label for="name" class="form-label">
+		<div class="row mb-3">
+			<label for="name" class="form-label col-md-2">
 				Nom
 			</label>
-			<input
-				id="name"
-				class="form-control"
-				type="text"
-				name="name"
-				required
-				value="{{ List.Name }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="name"
+					class="form-control"
+					type="text"
+					name="name"
+					required
+					value="{{ List.Name }}"
+				>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="multi"
-				name="multi"
-				{% if List.Multi %}checked{% endif %}
-			>
-			<label for="multi" class="form-label">
-				Liste à choix multiples
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="multi"
+					name="multi"
+					{% if List.Multi %}checked{% endif %}
+				>
+				<label for="multi" class="form-label">
+					Liste à choix multiples
+				</label>
+			</div>
 		</div>
 
 		<div class="mt-3">
diff --git a/views/listitem_form.html b/views/listitem_form.html
index f8f3ecd..ca732b5 100644
--- a/views/listitem_form.html
+++ b/views/listitem_form.html
@@ -32,31 +32,37 @@
 	
 	<form id="list" method="post">
 
-		<div class="mb-3">
-			<label for="value" class="form-label">
+		<div class="row mb-3">
+			<label for="value" class="form-label col-md-2">
 				Valeur
 			</label>
-			<input
-				id="value"
-				class="form-control"
-				type="text"
-				name="value"
-				required
-				value="{{ ListItem.Value }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="value"
+					class="form-control"
+					type="text"
+					name="value"
+					required
+					value="{{ ListItem.Value }}"
+				>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="default"
-				name="default"
-				{% if ListItem.Default %}checked{% endif %}
-			>
-			<label for="default" class="form-label">
-				Valeur sélectionnée par défaut
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="default"
+					name="default"
+					{% if ListItem.Default %}
+					checked
+					{% endif %}
+				>
+				<label for="default" class="form-label">
+					Valeur sélectionnée par défaut
+				</label>
+			</div>
 		</div>
 
 		<div class="mt-3">
diff --git a/views/role.html b/views/role.html
index 5cf357a..24af2c9 100644
--- a/views/role.html
+++ b/views/role.html
@@ -14,100 +14,562 @@
 		<hr>
 	</div>
 
-	<div class="mb-3">
-			<b>Nom</b><br>
-			{{ Role.Name }}
-	</div>
-
-	<div class="mb-4">
-		<div class="mb-3">
-			<b>Permissions - Membres</b>
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Nom
 		</div>
-		<div style="max-width: 400px;">
-			<table class="table table-bordered">
-				<tbody>
-					<tr>
-						<td>Afficher membres</td>
-						<td>{% if Role.ShowMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Créer membres</td>
-						<td>{% if Role.CreateMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Modifier membres</td>
-						<td>{% if Role.EditMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Afficher membres archivés</td>
-						<td>{% if Role.ShowArchivedMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Archiver membres</td>
-						<td>{% if Role.ArchiveMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Restaurer membres</td>
-						<td>{% if Role.RestoreMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Purger membres (suppression définitive)</td>
-						<td>{% if Role.PurgeMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Convertir membres en contacts</td>
-						<td>{% if Role.ConvertMemberToContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-				</tbody>
-			</table>
+		<div class="col-md-10">
+			<input
+				type="text"
+				class="form-control"
+				value="{{ Role.Name }}"
+				disabled
+				readonly
+			>
 		</div>
 	</div>
 
-	<div class="mb-4">
-		<div class="mb-3">
-			<b>Permissions - Contacts</b>
+	<div class="mt-4 mb-3">
+		<span class="h4">
+			Permissions membres
+		</span>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Afficher membres
 		</div>
-		<div style="max-width: 400px;">
-			<table class="table table-bordered">
-				<tbody>
-					<tr>
-						<td>Afficher contacts</td>
-						<td>{% if Role.ShowContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Créer contacts</td>
-						<td>{% if Role.CreateContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Modifier contacts</td>
-						<td>{% if Role.EditContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Afficher contacts archivés</td>
-						<td>{% if Role.ShowArchivedContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Archiver contacts</td>
-						<td>{% if Role.ArchiveContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Restaurer contacts</td>
-						<td>{% if Role.RestoreContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Purger contacts (suppression définitive)</td>
-						<td>{% if Role.PurgeContact %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-					<tr>
-						<td>Convertir contacts en membres</td>
-						<td>{% if Role.ConvertContactToMember %}Oui{% else %}Non{% endif %}</td>
-					</tr>
-				</tbody>
-			</table>
+		<div class="col-md-10">
+			{% if Role.ShowMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
 		</div>
 	</div>
 
-	<div class="mt-3">
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Créer membres
+		</div>
+		<div class="col-md-10">
+			{% if Role.CreateMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Modifier membres
+		</div>
+		<div class="col-md-10">
+			{% if Role.EditMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Afficher membres archivés
+		</div>
+		<div class="col-md-10">
+			{% if Role.ShowArchivedMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Archiver membres
+		</div>
+		<div class="col-md-10">
+			{% if Role.ArchiveMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Restaurer membres
+		</div>
+		<div class="col-md-10">
+			{% if Role.RestoreMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Purger membres (suppression définitive)
+		</div>
+		<div class="col-md-10">
+			{% if Role.PurgeMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Convertir membres en contacts
+		</div>
+		<div class="col-md-10">
+			{% if Role.ConvertMemberToContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="mt-4 mb-3">
+		<span class="h4">
+			Permissions contacts
+		</span>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Afficher contacts
+		</div>
+		<div class="col-md-10">
+			{% if Role.ShowContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Créer contacts
+		</div>
+		<div class="col-md-10">
+			{% if Role.CreateContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Modifier contacts
+		</div>
+		<div class="col-md-10">
+			{% if Role.EditContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Afficher contacts archivés
+		</div>
+		<div class="col-md-10">
+			{% if Role.ShowArchivedContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Archiver contacts
+		</div>
+		<div class="col-md-10">
+			{% if Role.ArchiveContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Restaurer contacts
+		</div>
+		<div class="col-md-10">
+			{% if Role.RestoreContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Purger contacts (suppression définitive)
+		</div>
+		<div class="col-md-10">
+			{% if Role.PurgeContact %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Convertir contacts en membres
+		</div>
+		<div class="col-md-10">
+			{% if Role.ConvertContactToMember %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="my-4">
 		<a class="btn btn-md btn-primary" href="/admin/roles/{{ Role.ID }}/edit">
 			<i class="bi-pencil-square"></i>
 			Modifier
diff --git a/views/role_form.html b/views/role_form.html
index cc6942a..0566028 100644
--- a/views/role_form.html
+++ b/views/role_form.html
@@ -32,237 +32,285 @@
 	
 	<form id="role" method="post">
 
-		<div class="mb-3">
-			<label for="name" class="form-label">
+		<div class="row mb-3">
+			<label for="name" class="form-label col-md-2">
 				Nom
 			</label>
-			<input
-				id="name"
-				class="form-control"
-				type="text"
-				name="name"
-				required
-				value="{{ Role.Name }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="name"
+					class="form-control"
+					type="text"
+					name="name"
+					required
+					value="{{ Role.Name }}"
+				>
+			</div>
 		</div>
 
-		<div class="mb-3 mt-4">
-			<b>Permissions - Membres</b>
+		<div class="mt-4 mb-3 d-md-none">
+			<span class="h4">
+				Permissions membres
+			</span>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="show_member"
-				name="show_member"
-				{% if Role.ShowMember %}checked{% endif %}
-			>
-			<label for="show_member" class="form-label">
-				Afficher membres
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-2">
+				<div class="d-none d-md-block">
+					Permissions membres
+				</div>
+			</div>
+			<div class="col-md-10">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="show_member"
+					name="show_member"
+					{% if Role.ShowMember %}checked{% endif %}
+				>
+				<label for="show_member" class="form-label">
+					Afficher membres
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="create_member"
-				name="create_member"
-				{% if Role.CreateMember %}checked{% endif %}
-			>
-			<label for="create_member" class="form-label">
-				Créer membres
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="create_member"
+					name="create_member"
+					{% if Role.CreateMember %}checked{% endif %}
+				>
+				<label for="create_member" class="form-label">
+					Créer membres
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="edit_member"
-				name="edit_member"
-				{% if Role.EditMember %}checked{% endif %}
-			>
-			<label for="edit_member" class="form-label">
-				Modifier membres
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="edit_member"
+					name="edit_member"
+					{% if Role.EditMember %}checked{% endif %}
+				>
+				<label for="edit_member" class="form-label">
+					Modifier membres
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="show_archived_member"
-				name="show_archived_member"
-				{% if Role.ShowArchivedMember %}checked{% endif %}
-			>
-			<label for="show_archived_member" class="form-label">
-				Afficher membres archivés
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="show_archived_member"
+					name="show_archived_member"
+					{% if Role.ShowArchivedMember %}checked{% endif %}
+				>
+				<label for="show_archived_member" class="form-label">
+					Afficher membres archivés
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="archive_member"
-				name="archive_member"
-				{% if Role.ArchiveMember %}checked{% endif %}
-			>
-			<label for="archive_member" class="form-label">
-				Archiver membres
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="archive_member"
+					name="archive_member"
+					{% if Role.ArchiveMember %}checked{% endif %}
+				>
+				<label for="archive_member" class="form-label">
+					Archiver membres
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="restore_member"
-				name="restore_member"
-				{% if Role.RestoreMember %}checked{% endif %}
-			>
-			<label for="restore_member" class="form-label">
-				Restaurer membres
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="restore_member"
+					name="restore_member"
+					{% if Role.RestoreMember %}checked{% endif %}
+				>
+				<label for="restore_member" class="form-label">
+					Restaurer membres
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="purge_member"
-				name="purge_member"
-				{% if Role.PurgeMember %}checked{% endif %}
-			>
-			<label for="purge_member" class="form-label">
-				Purger membres (suppression définitive)
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="purge_member"
+					name="purge_member"
+					{% if Role.PurgeMember %}checked{% endif %}
+				>
+				<label for="purge_member" class="form-label">
+					Purger membres (suppression définitive)
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="convert_member_to_contact"
-				name="convert_member_to_contact"
-				{% if Role.ConvertMemberToContact %}checked{% endif %}
-			>
-			<label for="convert_member_to_contact" class="form-label">
-				Convertir membres en contacts
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="convert_member_to_contact"
+					name="convert_member_to_contact"
+					{% if Role.ConvertMemberToContact %}checked{% endif %}
+				>
+				<label for="convert_member_to_contact" class="form-label">
+					Convertir membres en contacts
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3 mt-4">
-			<b>Permissions - Contacts</b>
+		<div class="mt-4 mb-3 d-md-none">
+			<span class="h4">
+				Permissions contacts
+			</span>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="show_contact"
-				name="show_contact"
-				{% if Role.ShowContact %}checked{% endif %}
-			>
-			<label for="show_contact" class="form-label">
-				Afficher contacts
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-2">
+				<div class="d-none d-md-block">
+					Permissions contacts
+				</div>
+			</div>
+			<div class="col-md-10">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="show_contact"
+					name="show_contact"
+					{% if Role.ShowContact %}checked{% endif %}
+				>
+				<label for="show_contact" class="form-label">
+					Afficher contacts
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="create_contact"
-				name="create_contact"
-				{% if Role.CreateContact %}checked{% endif %}
-			>
-			<label for="create_contact" class="form-label">
-				Créer contacts
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="create_contact"
+					name="create_contact"
+					{% if Role.CreateContact %}checked{% endif %}
+				>
+				<label for="create_contact" class="form-label">
+					Créer contacts
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="edit_contact"
-				name="edit_contact"
-				{% if Role.EditContact %}checked{% endif %}
-			>
-			<label for="edit_contact" class="form-label">
-				Modifier contacts
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="edit_contact"
+					name="edit_contact"
+					{% if Role.EditContact %}checked{% endif %}
+				>
+				<label for="edit_contact" class="form-label">
+					Modifier contacts
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="show_archived_contact"
-				name="show_archived_contact"
-				{% if Role.ShowArchivedContact %}checked{% endif %}
-			>
-			<label for="show_archived_contact" class="form-label">
-				Afficher contacts archivés
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="show_archived_contact"
+					name="show_archived_contact"
+					{% if Role.ShowArchivedContact %}checked{% endif %}
+				>
+				<label for="show_archived_contact" class="form-label">
+					Afficher contacts archivés
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="archive_contact"
-				name="archive_contact"
-				{% if Role.ArchiveContact %}checked{% endif %}
-			>
-			<label for="archive_contact" class="form-label">
-				Archiver contacts
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="archive_contact"
+					name="archive_contact"
+					{% if Role.ArchiveContact %}checked{% endif %}
+				>
+				<label for="archive_contact" class="form-label">
+					Archiver contacts
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="restore_contact"
-				name="restore_contact"
-				{% if Role.RestoreContact %}checked{% endif %}
-			>
-			<label for="restore_contact" class="form-label">
-				Restaurer contacts
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="restore_contact"
+					name="restore_contact"
+					{% if Role.RestoreContact %}checked{% endif %}
+				>
+				<label for="restore_contact" class="form-label">
+					Restaurer contacts
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="purge_contact"
-				name="purge_contact"
-				{% if Role.PurgeContact %}checked{% endif %}
-			>
-			<label for="purge_contact" class="form-label">
-				Purger contacts (suppression définitive)
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="purge_contact"
+					name="purge_contact"
+					{% if Role.PurgeContact %}checked{% endif %}
+				>
+				<label for="purge_contact" class="form-label">
+					Purger contacts (suppression définitive)
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="convert_contact_to_member"
-				name="convert_contact_to_member"
-				{% if Role.ConvertContactToMember %}checked{% endif %}
-			>
-			<label for="convert_contact_to_member" class="form-label">
-				Convertir contacts en membres
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="convert_contact_to_member"
+					name="convert_contact_to_member"
+					{% if Role.ConvertContactToMember %}checked{% endif %}
+				>
+				<label for="convert_contact_to_member" class="form-label">
+					Convertir contacts en membres
+				</label>
+			</div>
 		</div>
 
-		<div class="mt-3">
+		<div class="my-4">
 			<button class="btn btn-primary" type="submit">
 				<i class="me-1 bi-floppy"></i>
 				Enregistrer
diff --git a/views/section.html b/views/section.html
index f4b83e1..2b333d1 100644
--- a/views/section.html
+++ b/views/section.html
@@ -14,36 +14,132 @@
 		<hr>
 	</div>
 
-	<div class="mb-3">
-			<b>Nom</b><br>
-			{{ Section.Name }}
+	<div class="row mb-3">
+			<div class="col-md-2">
+				Nom
+			</div>
+			<div class="col-md-10">
+				<input
+					type="text"
+					class="form-control"
+					value="{{ Section.Name }}"
+					disabled
+					readonly
+				>
+			</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Nom technique</b><br>
-		{{ Section.ShortName }}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Nom technique
+		</div>
+		<div class="col-md-10">
+			<input
+				type="text"
+				class="form-control"
+				value="{{ Section.ShortName }}"
+				disabled
+				readonly
+			>
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Section parente</b><br>
-		{% if Section.ParentSectionID %}
-			{{ Section.ParentSection.Name }}
-		{% else %}
-			N/A
-		{% endif %}
-	</div>	
-
-	<div class="mb-3">
-		<b>Contient des membres</b><br>
-		{% if Section.ContainsMembers %}Oui{% else %}Non{% endif %}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Section parente
+		</div>
+		<div class="col-md-10">
+			{% if Section.ParentSectionID %}
+				<input
+					type="text"
+					class="form-control"
+					value="{{ Section.ParentSection.Name }}"
+					disabled
+					readonly
+				>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Contient des contacts</b><br>
-		{% if Section.ContainsContacts %}Oui{% else %}Non{% endif %}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Peut contenir des membres
+		</div>
+		<div class="col-md-10">
+			{% if Section.ContainsMembers %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
 	</div>
 
-	<div class="mt-3">
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Peut contenir des contacts
+		</div>
+		<div class="col-md-10">
+			{% if Section.ContainsContacts %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="my-4">
 		<a class="btn btn-md btn-primary" href="/admin/sections/{{ Section.ID }}/edit">
 			<i class="bi-pencil-square"></i>
 			Modifier
diff --git a/views/section_form.html b/views/section_form.html
index 7c1bbe3..07b26ae 100644
--- a/views/section_form.html
+++ b/views/section_form.html
@@ -32,45 +32,54 @@
 	
 	<form id="section" method="post">
 
-		<div class="mb-3">
-			<label for="name" class="form-label">
+		<div class="row mb-3">
+			<label for="name" class="form-label col-md-2">
 				Nom
 			</label>
-			<input
-				id="name"
-				class="form-control"
-				type="text"
-				name="name"
-				required
-				value="{{ Section.Name }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="name"
+					class="form-control"
+					type="text"
+					name="name"
+					required
+					value="{{ Section.Name }}"
+				>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<label for="short_name" class="form-label">
+		<div class="row mb-3">
+			<label for="short_name" class="form-label col-md-2">
 				Nom technique
 			</label>
-			<input
-				id="short_name"
-				class="form-control"
-				type="text"
-				name="short_name"
-				required
-				value="{{ Section.ShortName }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="short_name"
+					class="form-control"
+					type="text"
+					name="short_name"
+					required
+					value="{{ Section.ShortName }}"
+				>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<label for="parent_section" class="form-label">
+		<div class="row mb-3">
+			<label for="parent_section" class="form-label col-md-2">
 				Section parente
 			</label>
-			<select
-				id="parent_section"
-				class="form-control"
-				name="parent_section"
-				{% if IsParent %}disabled{% endif %}
-			>
-				<option value="0">--- Pas de section parente ---</option>
+			<div class="col-md-10">
+				<select
+					id="parent_section"
+					class="form-control"
+					name="parent_section"
+					{% if IsParent %}
+					disabled
+					{% endif %}
+				>
+					<option value="0">
+						--- Pas de section parente ---
+					</option>
 					{% if !IsParent %}
 						{% for ParentSection in Sections %}
 						<option
@@ -81,33 +90,42 @@
 						</option>
 						{% endfor %}
 					{% endif %}
-			</select>
+				</select>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="contains_members"
-				name="contains_members"
-				{% if Section.ContainsMembers %}checked{% endif %}
-			>
-			<label for="contains_members" class="form-label">
-				Contient des membres
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="contains_members"
+					name="contains_members"
+					{% if Section.ContainsMembers %}
+					checked
+					{% endif %}
+				>
+				<label for="contains_members" class="form-label">
+					Contient des membres
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="contains_contacts"
-				name="contains_contacts"
-				{% if Section.ContainsContacts %}checked{% endif %}
-			>
-			<label for="contains_contacts" class="form-label">
-				Contient des contacts
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="contains_contacts"
+					name="contains_contacts"
+					{% if Section.ContainsContacts %}
+					checked
+					{% endif %}
+				>
+				<label for="contains_contacts" class="form-label">
+					Contient des contacts
+				</label>
+			</div>
 		</div>
 
 		<div class="mt-3">
diff --git a/views/user.html b/views/user.html
index a5cb2dd..f552295 100644
--- a/views/user.html
+++ b/views/user.html
@@ -14,70 +14,175 @@
 		<hr>
 	</div>
 
-	<div class="mb-3">
-			<b>Nom complet</b><br>
-			{{ User.Name }}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Nom complet
+		</div>
+		<div class="col-md-10">
+			<input
+				type="text"
+				class="form-control"
+				value="{{ User.Name }}"
+				disabled
+				readonly
+			>
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Email</b><br>
-		{{ User.Email }}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Email
+		</div>
+		<div class="col-md-10">
+			<input
+				type="text"
+				class="form-control"
+				value="{{ User.Email }}"
+				disabled
+				readonly
+			>
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Administrateur</b><br>
-		{% if User.IsAdmin %}
-			Oui
-		{% else %}
-			Non
-		{% endif %}
-	</div>	
-
-	<div class="mb-3">
-		<b>Ecran de bienvenue à la prochaine connexion</b><br>
-		{% if User.SkipWelcome %}
-			Non
-		{% else %}
-			Oui
-		{% endif %}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Administrateur
+		</div>
+		<div class="col-md-10">
+			{% if User.IsAdmin %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
 	</div>
 
-	<div class="mb-3">
-		<b>Double facteur (TOTP)</b><br>
-		{% if User.TotpSecret.Valid %}
-			Enrollé
-		{% else %}
-			Enrollement lors de la prochaine connexion
-		{% endif %}
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Ecran de bienvenue à la prochaine connexion
+		</div>
+		<div class="col-md-10">
+			{% if User.SkipWelcome %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Non"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Oui"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
 	</div>
 
+	<div class="row mb-3">
+		<div class="col-md-2">
+			Double facteur (TOTP)
+		</div>
+		<div class="col-md-10">
+			{% if User.TotpSecret.Valid %}
+			<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-check-lg text-success"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Enrollé"
+						disabled
+					>
+				</div>
+			{% else %}
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-x-lg text-danger"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="Enrollement lors de la prochaine connexion"
+						disabled
+					>
+				</div>
+			{% endif %}
+		</div>
+	</div>
+
+	<div class="mt-4 mb-3">
+		<span class="h4">
+			Permissions
+		</span>
+	</div>
 	{% if UserRoles %}		
-	<div class="mb-4">
-		<div class="mb-3">
-			<b>Permissions</b>
-		</div>
-		<div style="max-width: 500px;">
-			<table class="table table-bordered">
-				<tbody>
-					{% for UserRole in UserRoles %}
-					<tr>
-						<td>{{ UserRole.Section.Name }}</td>
-						<td>{{ UserRole.Role.Name }}</td>
-					</tr>
-					{% endfor %}
-				</tbody>
-			</table>
+		{% for UserRole in UserRoles %}
+		<div class="row mb-3">
+			<div class="col-md-2">
+				{{ UserRole.Section.Name }}
+			</div>
+			<div class="col-md-10">
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-key"></i>
+					</span>
+					<input
+						type="text"
+						class="form-control"
+						value="{{ UserRole.Role.Name }}"
+						disabled
+						readonly
+					>
+				</div>
+			</div>
 		</div>
+		{% endfor %}
+	{% else %}
+	<div>
+		Pas encore de permissions pour cet utilisateur.
 	</div>
 	{% endif %}
 
-	<div class="mt-3">
+	<div class="my-4">
 		<a class="btn btn-md btn-primary" href="/admin/users/{{ User.ID }}/edit">
-			<i class="bi-pencil-square"></i>
+			<i class="bi-pencil-square me-1"></i>
 			Modifier
 		</a>
 		<a class="btn btn-md btn-primary" href="/admin/users/{{ User.ID }}/permissions">
-			<i class="bi-key"></i>
+			<i class="bi-key me-1"></i>
 			Permissions
 		</a>
 
diff --git a/views/user_form.html b/views/user_form.html
index ced5fd0..8f38283 100644
--- a/views/user_form.html
+++ b/views/user_form.html
@@ -32,84 +32,96 @@
 	
 	<form id="user" method="post">
 
-		<div class="mb-3">
-			<label for="name" class="form-label">
+		<div class="row mb-3">
+			<label for="name" class="form-label col-md-2">
 				Nom complet
 			</label>
-			<input
-				id="name"
-				class="form-control"
-				type="text"
-				name="name"
-				required
-				value="{{ User.Name }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="name"
+					class="form-control"
+					type="text"
+					name="name"
+					required
+					value="{{ User.Name }}"
+				>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<label for="email" class="form-label">
+		<div class="row mb-3">
+			<label for="email" class="form-label col-md-2">
 				Email
 			</label>
-			<input
-				id="email"
-				class="form-control"
-				type="email"
-				name="email"
-				required
-				value="{{ User.Email }}"
-			>
+			<div class="col-md-10">
+				<input
+					id="email"
+					class="form-control"
+					type="email"
+					name="email"
+					required
+					value="{{ User.Email }}"
+				>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="is_admin"
-				name="is_admin"
-				{% if User.IsAdmin %}checked{% endif %}
-			>
-			<label for="is_admin" class="form-label">
-				Administrateur
-			</label>
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="is_admin"
+					name="is_admin"
+					{% if User.IsAdmin %}
+					checked
+					{% endif %}
+				>
+				<label for="is_admin" class="form-label">
+					Administrateur
+				</label>
+			</div>
 		</div>
 
-		<div class="mb-3">
-			<label for="password" class="form-label">
+		<div class="row mb-3">
+			<label for="password" class="form-label col-md-2">
 				Mot de passe
 			</label>
-			<input
-				id="password"
-				class="form-control"
-				type="password"
-				name="password"
-				{% if !User.ID %}required{% endif %}
-			>
-			{% if User.ID %}	
-			<div class="form-text">
-				Laisser vide pour ne pas changer
+			<div class="col-md-10">
+				<input
+					id="password"
+					class="form-control"
+					type="password"
+					name="password"
+					{% if !User.ID %}required{% endif %}
+				>
+				{% if User.ID %}	
+				<div class="form-text">
+					Laisser vide pour ne pas changer
+				</div>
+				{% endif %}
 			</div>
-			{% endif %}
 		</div>
 
 		{% if User.ID %}	
-		<div class="mb-3">
-			<input
-				type="checkbox"
-				class="form-check-input me-2"
-				id="reset_totp"
-				name="reset_totp"
-			>
-			<label for="reset_totp" class="form-label">
-				Réinitialiser le double facteur (TOTP)
-			</label>
-			<div class="form-text">
-				Si la case est cochée, l'utilisateur devra effectuer
-				un enrollement TOTP à la prochaine connexion.
+		<div class="row mb-3">
+			<div class="col-md-10 offset-md-2">
+				<input
+					type="checkbox"
+					class="form-check-input me-2"
+					id="reset_totp"
+					name="reset_totp"
+				>
+				<label for="reset_totp" class="form-label">
+					Réinitialiser le double facteur (TOTP)
+				</label>
+				<div class="form-text">
+					Si la case est cochée, l'utilisateur devra effectuer
+					un enrollement TOTP à la prochaine connexion.
+				</div>
 			</div>
 		</div>
 		{% endif %}
 
-		<div class="mt-3">
+		<div class="my-4">
 			<button class="btn btn-primary" type="submit">
 				<i class="me-1 bi-floppy"></i>
 				Enregistrer
diff --git a/views/user_permissions.html b/views/user_permissions.html
index 4ec8c8d..baf5bc6 100644
--- a/views/user_permissions.html
+++ b/views/user_permissions.html
@@ -27,52 +27,40 @@
 	
 	<form id="user" method="post">
 
-		<div class="table-responsive">
-			<table class="table">
-				<thead>
-					<tr>
-						<th>Section</th>
-						<th>Rôle</th>
-					</tr>
-				</thead>
-				<tbody>
-					{% for Section in Sections %}
-					<tr>
-						<td>
-							<input
-								type="text"
-								class="form-control"
-								readonly
-								value="{{ Section.Name }}"
-							>
-						</td>
-						<td>
-							<select
-								class="form-control"
-								name="section-{{ Section.ID }}"
-								id="section-{{ Section.ID }}"
-							>
-								<option value="0">--- Aucun ---</option>
-								{% for Role in Roles %}
-									<option
-										value="{{ Role.ID }}"
+		{% for Section in Sections %}
+		<div class="row mb-3">
+			<div class="col-md-2">
+				{{ Section.Name }}
+			</div>
+			<div class="col-md-10">
+				<div class="input-group">
+				  <span class="input-group-text">
+						<i class="bi-key"></i>
+					</span>
+					<select
+						class="form-control"
+						name="section-{{ Section.ID }}"
+						id="section-{{ Section.ID }}"
+					>
+						<option value="0">--- Aucun ---</option>
+						{% for Role in Roles %}
+							<option
+								value="{{ Role.ID }}"
 
-										{% for UserRole in UserRoles %}
-											{% if Section.ID == UserRole.SectionID and Role.ID == UserRole.RoleID %}
-												selected
-											{% endif %}
-										{% endfor %}
-									>
-										{{ Role.Name }}
-									</option>
+								{% for UserRole in UserRoles %}
+									{% if Section.ID == UserRole.SectionID and Role.ID == UserRole.RoleID %}
+										selected
+									{% endif %}
 								{% endfor %}
-							</select>
-						</td>
-					</tr>
-					{% endfor %}
-				</tbody>
-			</table>
+							>
+								{{ Role.Name }}
+							</option>
+						{% endfor %}
+					</select>
+				</div>
+			</div>
 		</div>
+		{% endfor %}
 
 		<div class="mt-3">
 			<button class="btn btn-primary" type="submit">