mirror of
https://github.com/dani-garcia/vaultwarden.git
synced 2024-11-08 20:12:34 +01:00
- Changed the table layout a bit. - Added functions to the tables: + Search + Sort + Paginate
This commit is contained in:
BlackDex
parent
99da5fbebb
commit
6a291040bd
@ -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)),
|
||||
}
|
||||
}
|
||||
|
||||
223
src/static/scripts/datatables.css
Normal file
223
src/static/scripts/datatables.css
Normal file
@ -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;
|
||||
}
|
||||
|
||||
|
||||
15587
src/static/scripts/datatables.js
Normal file
15587
src/static/scripts/datatables.js
Normal file
File diff suppressed because it is too large
Load Diff
8777
src/static/scripts/jquery-3.5.1.slim.js
Normal file
8777
src/static/scripts/jquery-3.5.1.slim.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
<span class="mr-2">({{BillingEmail}})</span>
|
||||
<span class="d-block">
|
||||
<span class="badge badge-success">{{Id}}</span>
|
||||
</span>
|
||||
<img class="mr-2 float-left rounded identicon" data-src="{{Id}}">
|
||||
<div class="float-left">
|
||||
<strong>{{Name}}</strong>
|
||||
<span class="mr-2">({{BillingEmail}})</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>
|
||||
@ -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></th>
|
||||
<th>User</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>
|
||||
<span class="d-block">{{Email}}</span>
|
||||
<span class="d-block">
|
||||
{{#if TwoFactorEnabled}}
|
||||
<span class="badge badge-success mr-2" title="2FA is enabled">2FA</span>
|
||||
{{/if}}
|
||||
{{#case _Status 1}}
|
||||
<span class="badge badge-warning mr-2" title="User is invited">Invited</span>
|
||||
{{/case}}
|
||||
{{#if EmailVerified}}
|
||||
<span class="badge badge-success mr-2" title="Email has been verified">Verified</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
<img class="float-left mr-2 rounded identicon" data-src="{{Email}}">
|
||||
<div class="float-left">
|
||||
<strong>{{Name}}</strong>
|
||||
<span class="d-block">{{Email}}</span>
|
||||
<span class="d-block">
|
||||
{{#if TwoFactorEnabled}}
|
||||
<span class="badge badge-success mr-2" title="2FA is enabled">2FA</span>
|
||||
{{/if}}
|
||||
{{#case _Status 1}}
|
||||
<span class="badge badge-warning mr-2" title="User is invited">Invited</span>
|
||||
{{/case}}
|
||||
{{#if EmailVerified}}
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user