As requested here: https://bitwardenrs.discourse.group/t/searchable-user-list-on-admin-panel/299

- Changed the table layout a bit.
- Added functions to the tables:
  + Search
  + Sort
  + Paginate

src/api/web.rs

@@ -81,6 +81,9 @@ fn static_files(filename: String) -> Result<Content<&'static [u8]>, Error> {
         "bootstrap-native.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/bootstrap-native.js"))),
         "md5.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/md5.js"))),
         "identicon.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/identicon.js"))),
+        "datatables.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/datatables.js"))),
+        "datatables.css" => Ok(Content(ContentType::CSS, include_bytes!("../static/scripts/datatables.css"))),
+        "jquery-3.5.1.slim.js" => Ok(Content(ContentType::JavaScript, include_bytes!("../static/scripts/jquery-3.5.1.slim.js"))),
         _ => err!(format!("Static file not found: {}", filename)),
     }
 }

src/static/scripts/datatables.css

@@ -0,0 +1,223 @@
+/*
+ * This combined file was created by the DataTables downloader builder:
+ *   https://datatables.net/download
+ *
+ * To rebuild or modify this file with the latest versions of the included
+ * software please visit:
+ *   https://datatables.net/download/#bs4/dt-1.10.22
+ *
+ * Included libraries:
+ *   DataTables 1.10.22
+ */
+
+table.dataTable {
+  clear: both;
+  margin-top: 6px !important;
+  margin-bottom: 6px !important;
+  max-width: none !important;
+  border-collapse: separate !important;
+  border-spacing: 0;
+}
+table.dataTable td,
+table.dataTable th {
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+table.dataTable td.dataTables_empty,
+table.dataTable th.dataTables_empty {
+  text-align: center;
+}
+table.dataTable.nowrap th,
+table.dataTable.nowrap td {
+  white-space: nowrap;
+}
+
+div.dataTables_wrapper div.dataTables_length label {
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+}
+div.dataTables_wrapper div.dataTables_length select {
+  width: auto;
+  display: inline-block;
+}
+div.dataTables_wrapper div.dataTables_filter {
+  text-align: right;
+}
+div.dataTables_wrapper div.dataTables_filter label {
+  font-weight: normal;
+  white-space: nowrap;
+  text-align: left;
+}
+div.dataTables_wrapper div.dataTables_filter input {
+  margin-left: 0.5em;
+  display: inline-block;
+  width: auto;
+}
+div.dataTables_wrapper div.dataTables_info {
+  padding-top: 0.85em;
+}
+div.dataTables_wrapper div.dataTables_paginate {
+  margin: 0;
+  white-space: nowrap;
+  text-align: right;
+}
+div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+  margin: 2px 0;
+  white-space: nowrap;
+  justify-content: flex-end;
+}
+div.dataTables_wrapper div.dataTables_processing {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200px;
+  margin-left: -100px;
+  margin-top: -26px;
+  text-align: center;
+  padding: 1em 0;
+}
+
+table.dataTable > thead > tr > th:active,
+table.dataTable > thead > tr > td:active {
+  outline: none;
+}
+table.dataTable > thead > tr > th:not(.sorting_disabled),
+table.dataTable > thead > tr > td:not(.sorting_disabled) {
+  padding-right: 30px;
+}
+table.dataTable > thead .sorting,
+table.dataTable > thead .sorting_asc,
+table.dataTable > thead .sorting_desc,
+table.dataTable > thead .sorting_asc_disabled,
+table.dataTable > thead .sorting_desc_disabled {
+  cursor: pointer;
+  position: relative;
+}
+table.dataTable > thead .sorting:before, table.dataTable > thead .sorting:after,
+table.dataTable > thead .sorting_asc:before,
+table.dataTable > thead .sorting_asc:after,
+table.dataTable > thead .sorting_desc:before,
+table.dataTable > thead .sorting_desc:after,
+table.dataTable > thead .sorting_asc_disabled:before,
+table.dataTable > thead .sorting_asc_disabled:after,
+table.dataTable > thead .sorting_desc_disabled:before,
+table.dataTable > thead .sorting_desc_disabled:after {
+  position: absolute;
+  bottom: 0.9em;
+  display: block;
+  opacity: 0.3;
+}
+table.dataTable > thead .sorting:before,
+table.dataTable > thead .sorting_asc:before,
+table.dataTable > thead .sorting_desc:before,
+table.dataTable > thead .sorting_asc_disabled:before,
+table.dataTable > thead .sorting_desc_disabled:before {
+  right: 1em;
+  content: "\2191";
+}
+table.dataTable > thead .sorting:after,
+table.dataTable > thead .sorting_asc:after,
+table.dataTable > thead .sorting_desc:after,
+table.dataTable > thead .sorting_asc_disabled:after,
+table.dataTable > thead .sorting_desc_disabled:after {
+  right: 0.5em;
+  content: "\2193";
+}
+table.dataTable > thead .sorting_asc:before,
+table.dataTable > thead .sorting_desc:after {
+  opacity: 1;
+}
+table.dataTable > thead .sorting_asc_disabled:before,
+table.dataTable > thead .sorting_desc_disabled:after {
+  opacity: 0;
+}
+
+div.dataTables_scrollHead table.dataTable {
+  margin-bottom: 0 !important;
+}
+
+div.dataTables_scrollBody table {
+  border-top: none;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+div.dataTables_scrollBody table thead .sorting:before,
+div.dataTables_scrollBody table thead .sorting_asc:before,
+div.dataTables_scrollBody table thead .sorting_desc:before,
+div.dataTables_scrollBody table thead .sorting:after,
+div.dataTables_scrollBody table thead .sorting_asc:after,
+div.dataTables_scrollBody table thead .sorting_desc:after {
+  display: none;
+}
+div.dataTables_scrollBody table tbody tr:first-child th,
+div.dataTables_scrollBody table tbody tr:first-child td {
+  border-top: none;
+}
+
+div.dataTables_scrollFoot > .dataTables_scrollFootInner {
+  box-sizing: content-box;
+}
+div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
+  margin-top: 0 !important;
+  border-top: none;
+}
+
+@media screen and (max-width: 767px) {
+  div.dataTables_wrapper div.dataTables_length,
+  div.dataTables_wrapper div.dataTables_filter,
+  div.dataTables_wrapper div.dataTables_info,
+  div.dataTables_wrapper div.dataTables_paginate {
+    text-align: center;
+  }
+  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+    justify-content: center !important;
+  }
+}
+table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
+  padding-right: 20px;
+}
+table.dataTable.table-sm .sorting:before,
+table.dataTable.table-sm .sorting_asc:before,
+table.dataTable.table-sm .sorting_desc:before {
+  top: 5px;
+  right: 0.85em;
+}
+table.dataTable.table-sm .sorting:after,
+table.dataTable.table-sm .sorting_asc:after,
+table.dataTable.table-sm .sorting_desc:after {
+  top: 5px;
+}
+
+table.table-bordered.dataTable {
+  border-right-width: 0;
+}
+table.table-bordered.dataTable th,
+table.table-bordered.dataTable td {
+  border-left-width: 0;
+}
+table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
+table.table-bordered.dataTable td:last-child,
+table.table-bordered.dataTable td:last-child {
+  border-right-width: 1px;
+}
+table.table-bordered.dataTable tbody th,
+table.table-bordered.dataTable tbody td {
+  border-bottom-width: 0;
+}
+
+div.dataTables_scrollHead table.table-bordered {
+  border-bottom-width: 0;
+}
+
+div.table-responsive > div.dataTables_wrapper > div.row {
+  margin: 0;
+}
+div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
+  padding-left: 0;
+}
+div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
+  padding-right: 0;
+}
+
+

src/static/templates/admin/organizations.hbs

@@ -1,12 +1,12 @@
 <main class="container">
     <div id="organizations-block" class="my-3 p-3 bg-white rounded shadow">
-        <h6 class="border-bottom pb-2 mb-0">Organizations</h6>
+        <h6 class="border-bottom pb-2 mb-3">Organizations</h6>
 
         <div class="table-responsive-xl small">
-            <table class="table table-sm table-striped table-hover">
+            <table id="orgs-table" class="table table-sm table-striped table-hover">
                 <thead>
                     <tr>
-                        <th style="width: 24px;" colspan="2">Organization</th>
+                        <th>Organization</th>
                         <th>Users</th>
                         <th>Items</th>
                         <th>Attachments</th>
@@ -15,13 +15,15 @@
                 <tbody>
                     {{#each organizations}}
                     <tr>
-                        <td><img class="rounded identicon" data-src="{{Id}}"></td>
                         <td>
-                            <strong>{{Name}}</strong>
+                            <img class="mr-2 float-left rounded identicon" data-src="{{Id}}">
-                            <span class="mr-2">({{BillingEmail}})</span>
+                            <div class="float-left">
-                            <span class="d-block">
+                                <strong>{{Name}}</strong>
-                                <span class="badge badge-success">{{Id}}</span>
+                                <span class="mr-2">({{BillingEmail}})</span>
-                            </span>
+                                <span class="d-block">
+                                    <span class="badge badge-success">{{Id}}</span>
+                                </span>
+                            </div>
                         </td>
                         <td>
                             <span class="d-block">{{user_count}}</span>
@@ -40,12 +42,23 @@
                 </tbody>
             </table>
         </div>
-        
+
     </div>
 </main>
 
+<link rel="stylesheet" href="{{urlpath}}/bwrs_static/datatables.css" />
+<script src="{{urlpath}}/bwrs_static/jquery-3.5.1.slim.js"></script>
+<script src="{{urlpath}}/bwrs_static/datatables.js"></script>
 <script>
     document.querySelectorAll("img.identicon").forEach(function (e, i) {
         e.src = identicon(e.dataset.src);
     });
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+        $('#orgs-table').DataTable({
+            "responsive": true,
+            "lengthMenu": [ [-1, 5, 10, 25, 50], ["All", 5, 10, 25, 50] ],
+            "pageLength": -1, // Default show all
+        });
+    });
 </script>

src/static/templates/admin/users.hbs

@@ -1,37 +1,38 @@
 <main class="container">
     <div id="users-block" class="my-3 p-3 bg-white rounded shadow">
-        <h6 class="border-bottom pb-2 mb-0">Registered Users</h6>
+        <h6 class="border-bottom pb-2 mb-3">Registered Users</h6>
 
         <div class="table-responsive-xl small">
-            <table class="table table-sm table-striped table-hover">
+            <table id="users-table" class="table table-sm table-striped table-hover">
                 <thead>
                     <tr>
-                        <th style="width: 24px;">User</th>
+                        <th>User</th>
-                        <th></th>
                         <th style="width:60px; min-width: 60px;">Items</th>
                         <th>Attachments</th>
-                        <th style="min-width: 140px;">Organizations</th>
+                        <th style="min-width: 120px;">Organizations</th>
                         <th style="width: 140px; min-width: 140px;">Actions</th>
                     </tr>
                 </thead>
                 <tbody>
                     {{#each users}}
                     <tr>
-                        <td><img class="mr-2 rounded identicon" data-src="{{Email}}"></td>
                         <td>
-                            <strong>{{Name}}</strong>
+                            <img class="float-left mr-2 rounded identicon" data-src="{{Email}}">
-                            <span class="d-block">{{Email}}</span>
+                            <div class="float-left">
-                            <span class="d-block">
+                                <strong>{{Name}}</strong>
-                                {{#if TwoFactorEnabled}}
+                                <span class="d-block">{{Email}}</span>
-                                    <span class="badge badge-success mr-2" title="2FA is enabled">2FA</span>
+                                <span class="d-block">
-                                {{/if}}
+                                    {{#if TwoFactorEnabled}}
-                                {{#case _Status 1}}
+                                        <span class="badge badge-success mr-2" title="2FA is enabled">2FA</span>
-                                    <span class="badge badge-warning mr-2" title="User is invited">Invited</span>
+                                    {{/if}}
-                                {{/case}}
+                                    {{#case _Status 1}}
-                                {{#if EmailVerified}}
+                                        <span class="badge badge-warning mr-2" title="User is invited">Invited</span>
-                                    <span class="badge badge-success mr-2" title="Email has been verified">Verified</span>
+                                    {{/case}}
-                                {{/if}}
+                                    {{#if EmailVerified}}
-                            </span>
+                                        <span class="badge badge-success mr-2" title="Email has been verified">Verified</span>
+                                    {{/if}}
+                                </span>
+                            </div>
                         </td>
                         <td>
                             <span class="d-block">{{cipher_count}}</span>
@@ -83,6 +84,9 @@
     </div>
 </main>
 
+<link rel="stylesheet" href="{{urlpath}}/bwrs_static/datatables.css" />
+<script src="{{urlpath}}/bwrs_static/jquery-3.5.1.slim.js"></script>
+<script src="{{urlpath}}/bwrs_static/datatables.js"></script>
 <script>
     function deleteUser(id, mail) {
         var input_mail = prompt("To delete user '" + mail + "', please type the email below")
@@ -140,4 +144,19 @@
         e.style.backgroundColor = orgtype.color;
         e.title = orgtype.name;
     });
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+        $('#users-table').DataTable({
+            "responsive": true,
+            "lengthMenu": [ [-1, 5, 10, 25, 50], ["All", 5, 10, 25, 50] ],
+            "pageLength": -1, // Default show all
+            "columns": [
+                null,                                        // Userdata
+                null,                                        // Items
+                null,                                        // Attachments
+                null,                                        // Organizations
+                { "searchable": false, "orderable": false }, // Actions
+            ],
+        });
+    });
 </script>