From 7d3c9d412d430d7fbd578df1cb738126f7e1c53e Mon Sep 17 00:00:00 2001
From: DjVinnii <vincentkling@msn.com>
Date: Thu, 1 Apr 2021 16:05:30 +0200
Subject: [PATCH] Change tables to datatables

---
 core/admin/assets/app.js                      | 11 ++-
 core/admin/assets/vendor.js                   |  2 +
 core/admin/mailu/ui/templates/admin/list.html | 28 ++++---
 core/admin/mailu/ui/templates/alias/list.html | 46 ++++++------
 .../mailu/ui/templates/alternative/list.html  | 32 ++++----
 .../admin/mailu/ui/templates/domain/list.html | 74 ++++++++++---------
 core/admin/mailu/ui/templates/fetch/list.html | 54 +++++++-------
 core/admin/mailu/ui/templates/macros.html     |  4 +-
 .../mailu/ui/templates/manager/list.html      | 12 ++-
 core/admin/mailu/ui/templates/relay/list.html | 46 ++++++------
 core/admin/mailu/ui/templates/token/list.html | 36 +++++----
 core/admin/mailu/ui/templates/user/list.html  | 68 +++++++++--------
 12 files changed, 228 insertions(+), 185 deletions(-)

diff --git a/core/admin/assets/app.js b/core/admin/assets/app.js
index dc981081..d87832a6 100644
--- a/core/admin/assets/app.js
+++ b/core/admin/assets/app.js
@@ -1,10 +1,17 @@
 require('./app.css');
 
 import 'select2';
+import 'admin-lte/plugins/datatables/jquery.dataTables.js';
+import 'admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.js';
+import 'admin-lte/plugins/datatables-responsive/js/dataTables.responsive.js';
+import 'admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.js';
+
 jQuery("document").ready(function() {
     jQuery(".mailselect").select2({
         tags: true,
         tokenSeparators: [',', ' ']
-    })
+    });
+    jQuery(".table").DataTable({
+        "responsive": true,
+    });
 });
-
diff --git a/core/admin/assets/vendor.js b/core/admin/assets/vendor.js
index a5ff7a3c..65bee27f 100644
--- a/core/admin/assets/vendor.js
+++ b/core/admin/assets/vendor.js
@@ -14,6 +14,8 @@ import 'admin-lte/plugins/fontawesome-free/css/solid.css';
 
 // AdminLTE
 import 'admin-lte/build/scss/adminlte.scss';
+import 'admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.css';
+import 'admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.css';
 // import 'admin-lte/build/less/AdminLTE-without-plugins.less'; // doesn't exist
 // import 'admin-lte/build/less/select2.less'; // doesn't exist
 // import 'admin-lte/build/less/skins/skin-blue.less'; // doesn't exist
diff --git a/core/admin/mailu/ui/templates/admin/list.html b/core/admin/mailu/ui/templates/admin/list.html
index 856f6830..f2f5d229 100644
--- a/core/admin/mailu/ui/templates/admin/list.html
+++ b/core/admin/mailu/ui/templates/admin/list.html
@@ -12,17 +12,21 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Email{% endtrans %}</th>
-</tr>
-{% for admin in admins %}
-<tr>
-  <td>
-    <a href="{{ url_for('.admin_delete', admin=admin.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
-  </td>
-  <td>{{ admin }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Email{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for admin in admins %}
+  <tr>
+    <td>
+      <a href="{{ url_for('.admin_delete', admin=admin.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
+    </td>
+    <td>{{ admin }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/alias/list.html b/core/admin/mailu/ui/templates/alias/list.html
index 4bb69169..e8ddc862 100644
--- a/core/admin/mailu/ui/templates/alias/list.html
+++ b/core/admin/mailu/ui/templates/alias/list.html
@@ -14,26 +14,30 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Email{% endtrans %}</th>
-  <th>{% trans %}Destination{% endtrans %}</th>
-  <th>{% trans %}Comment{% endtrans %}</th>
-  <th>{% trans %}Created{% endtrans %}</th>
-  <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for alias in domain.aliases %}
-<tr>
-  <td>
-    <a href="{{ url_for('.alias_edit', alias=alias.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
-    <a href="{{ url_for('.alias_delete', alias=alias.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
-  </td>
-  <td>{{ alias }}</td>
-  <td>{{ alias.destination|join(', ') or '-' }}</td>
-  <td>{{ alias.comment or '' }}</td>
-  <td>{{ alias.created_at }}</td>
-  <td>{{ alias.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Email{% endtrans %}</th>
+    <th>{% trans %}Destination{% endtrans %}</th>
+    <th>{% trans %}Comment{% endtrans %}</th>
+    <th>{% trans %}Created{% endtrans %}</th>
+    <th>{% trans %}Last edit{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for alias in domain.aliases %}
+  <tr>
+    <td>
+      <a href="{{ url_for('.alias_edit', alias=alias.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
+      <a href="{{ url_for('.alias_delete', alias=alias.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
+    </td>
+    <td>{{ alias }}</td>
+    <td>{{ alias.destination|join(', ') or '-' }}</td>
+    <td>{{ alias.comment or '' }}</td>
+    <td>{{ alias.created_at }}</td>
+    <td>{{ alias.updated_at or '' }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/alternative/list.html b/core/admin/mailu/ui/templates/alternative/list.html
index dc981ef6..f123eb9f 100644
--- a/core/admin/mailu/ui/templates/alternative/list.html
+++ b/core/admin/mailu/ui/templates/alternative/list.html
@@ -14,19 +14,23 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Name{% endtrans %}</th>
-  <th>{% trans %}Created{% endtrans %}</th>
-</tr>
-{% for alternative in domain.alternatives %}
-<tr>
-  <td>
-    <a href="{{ url_for('.alternative_delete', alternative=alternative.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
-  </td>
-  <td>{{ alternative }}</td>
-  <td>{{ alternative.created_at }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Name{% endtrans %}</th>
+    <th>{% trans %}Created{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for alternative in domain.alternatives %}
+  <tr>
+    <td>
+      <a href="{{ url_for('.alternative_delete', alternative=alternative.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
+    </td>
+    <td>{{ alternative }}</td>
+    <td>{{ alternative.created_at }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/domain/list.html b/core/admin/mailu/ui/templates/domain/list.html
index fcc3a72c..c82647df 100644
--- a/core/admin/mailu/ui/templates/domain/list.html
+++ b/core/admin/mailu/ui/templates/domain/list.html
@@ -12,40 +12,44 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Manage{% endtrans %}</th>
-  <th>{% trans %}Domain name{% endtrans %}</th>
-  <th>{% trans %}Mailbox count{% endtrans %}</th>
-  <th>{% trans %}Alias count{% endtrans %}</th>
-  <th>{% trans %}Comment{% endtrans %}</th>
-  <th>{% trans %}Created{% endtrans %}</th>
-  <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for domain in current_user.get_managed_domains() %}
-<tr>
-  <td>
-    <a href="{{ url_for('.domain_details', domain_name=domain.name) }}" title="{% trans %}Details{% endtrans %}"><i class="fa fa-list"></i></a>&nbsp;
-    {% if current_user.global_admin %}
-    <a href="{{ url_for('.domain_edit', domain_name=domain.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
-    <a href="{{ url_for('.domain_delete', domain_name=domain.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>&nbsp;
-    {% endif %}
-  </td>
-  <td>
-    <a href="{{ url_for('.user_list', domain_name=domain.name) }}" title="{% trans %}Users{% endtrans %}"><i class="fa fa-envelope-o"></i></a>&nbsp;
-    <a href="{{ url_for('.alias_list', domain_name=domain.name) }}" title="{% trans %}Aliases{% endtrans %}"><i class="fa fa-at"></i></a>&nbsp;
-    <a href="{{ url_for('.manager_list', domain_name=domain.name) }}" title="{% trans %}Managers{% endtrans %}"><i class="fa fa-user"></i></a>&nbsp;
-    {% if current_user.global_admin %}
-    <a href="{{ url_for('.alternative_list', domain_name=domain.name) }}" title="{% trans %}Alternatives{% endtrans %}"><i class="fa fa-asterisk"></i></a>&nbsp;
-    {% endif %}
-  </td>
-  <td>{{ domain.name }}</td>
-  <td>{{ domain.users | count }} / {{ '∞' if domain.max_users == -1 else domain.max_users }}</td>
-  <td>{{ domain.aliases | count }} / {{ '∞' if domain.max_aliases == -1 else domain.max_aliases }}</td>
-  <td>{{ domain.comment or '' }}</td>
-  <td>{{ domain.created_at }}</td>
-  <td>{{ domain.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Manage{% endtrans %}</th>
+    <th>{% trans %}Domain name{% endtrans %}</th>
+    <th>{% trans %}Mailbox count{% endtrans %}</th>
+    <th>{% trans %}Alias count{% endtrans %}</th>
+    <th>{% trans %}Comment{% endtrans %}</th>
+    <th>{% trans %}Created{% endtrans %}</th>
+    <th>{% trans %}Last edit{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for domain in current_user.get_managed_domains() %}
+  <tr>
+    <td>
+      <a href="{{ url_for('.domain_details', domain_name=domain.name) }}" title="{% trans %}Details{% endtrans %}"><i class="fa fa-list"></i></a>&nbsp;
+      {% if current_user.global_admin %}
+      <a href="{{ url_for('.domain_edit', domain_name=domain.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fas fa-pencil-alt"></i></a>&nbsp;
+      <a href="{{ url_for('.domain_delete', domain_name=domain.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>&nbsp;
+      {% endif %}
+    </td>
+    <td>
+      <a href="{{ url_for('.user_list', domain_name=domain.name) }}" title="{% trans %}Users{% endtrans %}"><i class="far fa-envelope"></i></a>&nbsp;
+      <a href="{{ url_for('.alias_list', domain_name=domain.name) }}" title="{% trans %}Aliases{% endtrans %}"><i class="fa fa-at"></i></a>&nbsp;
+      <a href="{{ url_for('.manager_list', domain_name=domain.name) }}" title="{% trans %}Managers{% endtrans %}"><i class="fa fa-user"></i></a>&nbsp;
+      {% if current_user.global_admin %}
+      <a href="{{ url_for('.alternative_list', domain_name=domain.name) }}" title="{% trans %}Alternatives{% endtrans %}"><i class="fa fa-asterisk"></i></a>&nbsp;
+      {% endif %}
+    </td>
+    <td>{{ domain.name }}</td>
+    <td>{{ domain.users | count }} / {{ '∞' if domain.max_users == -1 else domain.max_users }}</td>
+    <td>{{ domain.aliases | count }} / {{ '∞' if domain.max_aliases == -1 else domain.max_aliases }}</td>
+    <td>{{ domain.comment or '' }}</td>
+    <td>{{ domain.created_at }}</td>
+    <td>{{ domain.updated_at or '' }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/fetch/list.html b/core/admin/mailu/ui/templates/fetch/list.html
index 09253a21..77f66bb1 100644
--- a/core/admin/mailu/ui/templates/fetch/list.html
+++ b/core/admin/mailu/ui/templates/fetch/list.html
@@ -14,30 +14,34 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Endpoint{% endtrans %}</th>
-  <th>{% trans %}Username{% endtrans %}</th>
-  <th>{% trans %}Keep emails{% endtrans %}</th>
-  <th>{% trans %}Last check{% endtrans %}</th>
-  <th>{% trans %}Status{% endtrans %}</th>
-  <th>{% trans %}Created{% endtrans %}</th>
-  <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for fetch in user.fetches %}
-<tr>
-  <td>
-    <a href="{{ url_for('.fetch_edit', fetch_id=fetch.id) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
-    <a href="{{ url_for('.fetch_delete', fetch_id=fetch.id) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
-  </td>
-  <td>{{ fetch.protocol }}{{ 's' if fetch.tls else '' }}://{{ fetch.host }}:{{ fetch.port }}</td>
-  <td>{{ fetch.username }}</td>
-  <td>{% if fetch.keep %}{% trans %}yes{% endtrans %}{% else %}{% trans %}no{% endtrans %}{% endif %}</td>
-  <td>{{ fetch.last_check or '-' }}</td>
-  <td>{{ fetch.error or '-' }}</td>
-  <td>{{ fetch.created_at }}</td>
-  <td>{{ fetch.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Endpoint{% endtrans %}</th>
+    <th>{% trans %}Username{% endtrans %}</th>
+    <th>{% trans %}Keep emails{% endtrans %}</th>
+    <th>{% trans %}Last check{% endtrans %}</th>
+    <th>{% trans %}Status{% endtrans %}</th>
+    <th>{% trans %}Created{% endtrans %}</th>
+    <th>{% trans %}Last edit{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for fetch in user.fetches %}
+  <tr>
+    <td>
+      <a href="{{ url_for('.fetch_edit', fetch_id=fetch.id) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
+      <a href="{{ url_for('.fetch_delete', fetch_id=fetch.id) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
+    </td>
+    <td>{{ fetch.protocol }}{{ 's' if fetch.tls else '' }}://{{ fetch.host }}:{{ fetch.port }}</td>
+    <td>{{ fetch.username }}</td>
+    <td>{% if fetch.keep %}{% trans %}yes{% endtrans %}{% else %}{% trans %}no{% endtrans %}{% endif %}</td>
+    <td>{{ fetch.last_check or '-' }}</td>
+    <td>{{ fetch.error or '-' }}</td>
+    <td>{{ fetch.created_at }}</td>
+    <td>{{ fetch.updated_at or '' }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/macros.html b/core/admin/mailu/ui/templates/macros.html
index a1fc2919..6d821ef8 100644
--- a/core/admin/mailu/ui/templates/macros.html
+++ b/core/admin/mailu/ui/templates/macros.html
@@ -86,11 +86,9 @@
 {% macro table(theme="primary") %}
 <div class="row">
   <div class="col-lg-12">
-    <div class="box box-{{ theme }}">
+    <div class="card card-{{ theme }}">
       <table class="table table-bordered">
-        <tbody>
           {{ caller() }}
-        </tbody>
       </table>
     </div>
   </div>
diff --git a/core/admin/mailu/ui/templates/manager/list.html b/core/admin/mailu/ui/templates/manager/list.html
index b660bf6d..9a78e3ca 100644
--- a/core/admin/mailu/ui/templates/manager/list.html
+++ b/core/admin/mailu/ui/templates/manager/list.html
@@ -14,10 +14,13 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Email{% endtrans %}</th>
-</tr>
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Email{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
 {% for manager in domain.managers %}
 <tr>
   <td>
@@ -26,5 +29,6 @@
   <td>{{ manager }}</td>
 </tr>
 {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/relay/list.html b/core/admin/mailu/ui/templates/relay/list.html
index aef189ad..6c8c9196 100644
--- a/core/admin/mailu/ui/templates/relay/list.html
+++ b/core/admin/mailu/ui/templates/relay/list.html
@@ -12,26 +12,30 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Domain name{% endtrans %}</th>
-  <th>{% trans %}Remote host{% endtrans %}</th>
-  <th>{% trans %}Comment{% endtrans %}</th>
-  <th>{% trans %}Created{% endtrans %}</th>
-  <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for relay in relays %}
-<tr>
-  <td>
-<a href="{{ url_for('.relay_edit', relay_name=relay.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
-    <a href="{{ url_for('.relay_delete', relay_name=relay.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>&nbsp;
-  </td>
-  <td>{{ relay.name }}</td>
-  <td>{{ relay.smtp or '-' }}</td>
-  <td>{{ relay.comment or '' }}</td>
-  <td>{{ relay.created_at }}</td>
-  <td>{{ relay.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Domain name{% endtrans %}</th>
+    <th>{% trans %}Remote host{% endtrans %}</th>
+    <th>{% trans %}Comment{% endtrans %}</th>
+    <th>{% trans %}Created{% endtrans %}</th>
+    <th>{% trans %}Last edit{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for relay in relays %}
+  <tr>
+    <td>
+      <a href="{{ url_for('.relay_edit', relay_name=relay.name) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
+      <a href="{{ url_for('.relay_delete', relay_name=relay.name) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>&nbsp;
+    </td>
+    <td>{{ relay.name }}</td>
+    <td>{{ relay.smtp or '-' }}</td>
+    <td>{{ relay.comment or '' }}</td>
+    <td>{{ relay.created_at }}</td>
+    <td>{{ relay.updated_at or '' }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/token/list.html b/core/admin/mailu/ui/templates/token/list.html
index 99f67383..09d0fe76 100644
--- a/core/admin/mailu/ui/templates/token/list.html
+++ b/core/admin/mailu/ui/templates/token/list.html
@@ -14,21 +14,25 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}Comment{% endtrans %}</th>
-  <th>{% trans %}Authorized IP{% endtrans %}</th>
-  <th>{% trans %}Created{% endtrans %}</th>
-</tr>
-{% for token in user.tokens %}
-<tr>
-  <td>
-    <a href="{{ url_for('.token_delete', token_id=token.id) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
-  </td>
-  <td>{{ token.comment }}</td>
-  <td>{{ token.ip or "any" }}</td>
-  <td>{{ token.created_at }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}Comment{% endtrans %}</th>
+    <th>{% trans %}Authorized IP{% endtrans %}</th>
+    <th>{% trans %}Created{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for token in user.tokens %}
+  <tr>
+    <td>
+      <a href="{{ url_for('.token_delete', token_id=token.id) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
+    </td>
+    <td>{{ token.comment }}</td>
+    <td>{{ token.ip or "any" }}</td>
+    <td>{{ token.created_at }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}
diff --git a/core/admin/mailu/ui/templates/user/list.html b/core/admin/mailu/ui/templates/user/list.html
index ab896ee6..3cc724c8 100644
--- a/core/admin/mailu/ui/templates/user/list.html
+++ b/core/admin/mailu/ui/templates/user/list.html
@@ -14,37 +14,41 @@
 
 {% block content %}
 {% call macros.table() %}
-<tr>
-  <th>{% trans %}Actions{% endtrans %}</th>
-  <th>{% trans %}User settings{% endtrans %}</th>
-  <th>{% trans %}Email{% endtrans %}</th>
-  <th>{% trans %}Features{% endtrans %}</th>
-  <th>{% trans %}Quota{% endtrans %}</th>
-  <th>{% trans %}Comment{% endtrans %}</th>
-  <th>{% trans %}Created{% endtrans %}</th>
-  <th>{% trans %}Last edit{% endtrans %}</th>
-</tr>
-{% for user in domain.users %}
-<tr {% if not user.enabled %}class="warning"{% endif %}>
-  <td>
-    <a href="{{ url_for('.user_edit', user_email=user.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fa fa-pencil"></i></a>&nbsp;
-    <a href="{{ url_for('.user_delete', user_email=user.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
-  </td>
-  <td>
-    <a href="{{ url_for('.user_settings', user_email=user.email) }}" title="{% trans %}Settings{% endtrans %}"><i class="fa fa-wrench"></i></a>&nbsp;
-    <a href="{{ url_for('.user_reply', user_email=user.email) }}" title="{% trans %}Auto-reply{% endtrans %}"><i class="fa fa-plane"></i></a>&nbsp;
-    <a href="{{ url_for('.fetch_list', user_email=user.email) }}" title="{% trans %}Fetched accounts{% endtrans %}"><i class="fa fa-download"></i></a>&nbsp;
-  </td>
-  <td>{{ user }}</td>
-  <td>
-    {% if user.enable_imap %}<span class="label label-info">imap</span>{% endif %}
-    {% if user.enable_pop %}<span class="label label-info">pop3</span>{% endif %}
-  </td>
-  <td>{{ user.quota_bytes_used | filesizeformat }} / {{ (user.quota_bytes | filesizeformat) if user.quota_bytes else '∞' }}</td>
-  <td>{{ user.comment or '-' }}</td>
-  <td>{{ user.created_at }}</td>
-  <td>{{ user.updated_at or '' }}</td>
-</tr>
-{% endfor %}
+<thead>
+  <tr>
+    <th>{% trans %}Actions{% endtrans %}</th>
+    <th>{% trans %}User settings{% endtrans %}</th>
+    <th>{% trans %}Email{% endtrans %}</th>
+    <th>{% trans %}Features{% endtrans %}</th>
+    <th>{% trans %}Quota{% endtrans %}</th>
+    <th>{% trans %}Comment{% endtrans %}</th>
+    <th>{% trans %}Created{% endtrans %}</th>
+    <th>{% trans %}Last edit{% endtrans %}</th>
+  </tr>
+</thead>
+<tbody>
+  {% for user in domain.users %}
+  <tr {% if not user.enabled %}class="warning"{% endif %}>
+    <td>
+      <a href="{{ url_for('.user_edit', user_email=user.email) }}" title="{% trans %}Edit{% endtrans %}"><i class="fas fa-pencil-alt"></i></a>&nbsp;
+      <a href="{{ url_for('.user_delete', user_email=user.email) }}" title="{% trans %}Delete{% endtrans %}"><i class="fa fa-trash"></i></a>
+    </td>
+    <td>
+      <a href="{{ url_for('.user_settings', user_email=user.email) }}" title="{% trans %}Settings{% endtrans %}"><i class="fa fa-wrench"></i></a>&nbsp;
+      <a href="{{ url_for('.user_reply', user_email=user.email) }}" title="{% trans %}Auto-reply{% endtrans %}"><i class="fa fa-plane"></i></a>&nbsp;
+      <a href="{{ url_for('.fetch_list', user_email=user.email) }}" title="{% trans %}Fetched accounts{% endtrans %}"><i class="fa fa-download"></i></a>&nbsp;
+    </td>
+    <td>{{ user }}</td>
+    <td>
+      {% if user.enable_imap %}<span class="label label-info">imap</span>{% endif %}
+      {% if user.enable_pop %}<span class="label label-info">pop3</span>{% endif %}
+    </td>
+    <td>{{ user.quota_bytes_used | filesizeformat }} / {{ (user.quota_bytes | filesizeformat) if user.quota_bytes else '∞' }}</td>
+    <td>{{ user.comment or '-' }}</td>
+    <td>{{ user.created_at }}</td>
+    <td>{{ user.updated_at or '' }}</td>
+  </tr>
+  {% endfor %}
+</tbody>
 {% endcall %}
 {% endblock %}