sftpgo-mirror/templates/webadmin/admins.html
Nicola Murino 3dd412f6e3
WebAdmin and REST API: remove too granular permissions
Our permissions system for admin users is too granular and some
permissions overlap. For example, you can define an administrator
with the "manage_system" permission and not with the "manage_admins"
or "manage_user" permission, but the "manage_system" permission
allows you to restore a backup and then create users and
administrators. The following permissions will be removed:
"manage_admins", "manage_apikeys", "manage_system", "retention_checks",
"manage_event_rules", "manage_roles", "manage_ip_lists". Now you
need to add the "*" permission to replace the removed granular
permissions because the removed permissions allow actions that
should only be allowed to super administrators.
There is no point in having separate, overlapping permissions.

Signed-off-by: Nicola Murino <nicola.murino@gmail.com>
2024-11-10 10:46:28 +01:00

614 lines
No EOL
28 KiB
HTML

<!--
Copyright (C) 2024 Nicola Murino
This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:
https://keenthemes.com/products/templates-mega-bundle
KeenThemes HTML/CSS/JS components are allowed for use only within the
SFTPGo product and restricted to be used in a resealable HTML template
that can compete with KeenThemes products anyhow.
This WebUI is allowed for use only within the SFTPGo product and
therefore cannot be used in derivative works/products without an
explicit grant from the SFTPGo Team (support@sftpgo.com).
-->
{{template "base" .}}
{{- define "extra_css"}}
<link href="{{.StaticURL}}/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css"/>
{{- end}}
{{- define "page_body"}}
{{- template "errmsg" ""}}
<div class="card shadow-sm">
<div class="card-header bg-light">
<h3 data-i18n="admin.view_manage" class="card-title section-title">View and manage admins</h3>
</div>
<div id="card_body" class="card-body">
<div id="loader" class="align-items-center text-center my-10">
<span class="spinner-border w-15px h-15px text-muted align-middle me-2"></span>
<span data-i18n="general.loading" class="text-gray-700">Loading...</span>
</div>
<div id="card_content" class="d-none">
<div class="d-flex flex-stack flex-wrap mb-5">
<div class="d-flex align-items-center position-relative my-2">
<i class="ki-solid ki-magnifier fs-1 position-absolute ms-6"></i>
<input name="search" data-i18n="[placeholder]general.search" type="text" data-table-filter="search"
class="form-control rounded-1 w-250px ps-15 me-5" placeholder="Search" />
<button id="export_button" type="button" class="btn btn-light-primary ms-3" data-table-filter="export">
<span data-i18n="general.export" class="indicator-label">
Export
</span>
<span data-i18n="general.wait" class="indicator-progress">
Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
</div>
<div class="d-flex justify-content-end my-2" data-table-toolbar="base">
<button type="button" class="btn btn-light-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom" data-kt-menu-permanent="true">
<span data-i18n="general.colvis">Column visibility</span>
<i class="ki-duotone ki-down fs-3 rotate-180 ms-3 me-0"></i>
</button>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-auto min-w-200 mw-300px py-4" data-kt-menu="true">
<div class="menu-item px-3 py-2 form-check form-check-sm form-check-custom form-check-solid">
<input type="checkbox" class="form-check-input" value="" id="checkColStatus" />
<label class="form-check-label" for="checkColStatus">
<span data-i18n="general.status" class="text-gray-800 fs-6">Status</span>
</label>
</div>
<div class="menu-item px-3 py-2 form-check form-check-sm form-check-custom form-check-solid">
<input type="checkbox" class="form-check-input" value="" id="checkColLastLogin" />
<label class="form-check-label" for="checkColLastLogin">
<span data-i18n="general.last_login" class="text-gray-800 fs-6">Last login</span>
</label>
</div>
<div class="menu-item px-3 py-2 form-check form-check-sm form-check-custom form-check-solid">
<input type="checkbox" class="form-check-input" value="" id="checkColEmail" />
<label class="form-check-label" for="checkColEmail">
<span data-i18n="general.email" class="text-gray-800 fs-6">Email</span>
</label>
</div>
<div class="menu-item px-3 py-2 form-check form-check-sm form-check-custom form-check-solid">
<input type="checkbox" class="form-check-input" value="" id="checkColRole" />
<label class="form-check-label" for="checkColRole">
<span data-i18n="general.role" class="text-gray-800 fs-6">Role</span>
</label>
</div>
<div class="menu-item px-3 py-2 form-check form-check-sm form-check-custom form-check-solid">
<input type="checkbox" class="form-check-input" value="" id="checkCol2FA" />
<label class="form-check-label" for="checkCol2FA">
<span data-i18n="title.two_factor_auth_short" class="text-gray-800 fs-6">2FA</span>
</label>
</div>
<div class="menu-item px-3 py-2 form-check form-check-sm form-check-custom form-check-solid">
<input type="checkbox" class="form-check-input" value="" id="checkColDesc" />
<label class="form-check-label" for="checkColDesc">
<span data-i18n="general.description" class="text-gray-800 fs-6">Description</span>
</label>
</div>
</div>
{{- if .LoggedUser.HasPermission "*"}}
<a href="{{.AdminURL}}" class="btn btn-primary ms-5">
<i class="ki-duotone ki-plus fs-2"></i>
<span data-i18n="general.add">Add</span>
</a>
{{- end}}
</div>
</div>
<table id="dataTable" class="table align-middle table-row-dashed fs-6 gy-5">
<thead>
<tr class="text-start text-muted fw-bold fs-6 gs-0">
<th data-i18n="login.username">Username</th>
<th data-i18n="general.status">Status</th>
<th data-i18n="general.last_login">Last login</th>
<th data-i18n="general.email">Email</th>
<th data-i18n="general.role">Role</th>
<th data-i18n="title.two_factor_auth_short">2FA</th>
<th data-i18n="general.description">Description</th>
<th class="min-w-100px"></th>
</tr>
</thead>
<tbody id="table_body" class="text-gray-800 fw-semibold"></tbody>
</table>
</div>
</div>
</div>
{{- end}}
{{- define "extra_js"}}
<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/assets/plugins/custom/datatables/datatables.bundle.js"></script>
<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/vendor/papaparse/papaparse.min.js"></script>
<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/vendor/file-saver/FileSaver.min.js"></script>
<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
function deleteAction(username) {
ModalAlert.fire({
text: $.t('general.delete_confirm_generic'),
icon: "warning",
confirmButtonText: $.t('general.delete_confirm_btn'),
cancelButtonText: $.t('general.cancel'),
customClass: {
confirmButton: "btn btn-danger",
cancelButton: 'btn btn-secondary'
}
}).then((result) => {
if (result.isConfirmed){
clearLoading();
KTApp.showPageLoading();
let path = '{{.AdminURL}}' + "/" + encodeURIComponent(username);
axios.delete(path, {
timeout: 15000,
headers: {
'X-CSRF-TOKEN': '{{.CSRFToken}}'
},
validateStatus: function (status) {
return status == 200;
}
}).then(function(response){
location.reload();
}).catch(function(error){
KTApp.hidePageLoading();
let errorMessage;
if (error && error.response) {
switch (error.response.status) {
case 400:
if (error.response.data && error.response.data.error){
if (error.response.data.error.includes("delete yourself")){
errorMessage = "admin.self_delete";
}
}
break;
case 403:
errorMessage = "general.delete_error_403";
break;
case 404:
errorMessage = "general.delete_error_404";
break;
}
}
if (!errorMessage){
errorMessage = "general.delete_error_generic";
}
ModalAlert.fire({
text: $.t(errorMessage),
icon: "warning",
confirmButtonText: $.t('general.ok'),
customClass: {
confirmButton: "btn btn-primary"
}
});
});
}
});
}
function disableSeconFactorAction(username) {
ModalAlert.fire({
text: $.t('2fa.disable_confirm'),
icon: "warning",
confirmButtonText: $.t('general.disable_confirm_btn'),
cancelButtonText: $.t('general.cancel'),
customClass: {
confirmButton: "btn btn-danger",
cancelButton: 'btn btn-secondary'
}
}).then((result) => {
if (result.isConfirmed){
clearLoading();
KTApp.showPageLoading();
let path = '{{.AdminURL}}' + "/" + encodeURIComponent(username)+"/2fa/disable";
axios.put(path, null, {
timeout: 15000,
headers: {
'X-CSRF-TOKEN': '{{.CSRFToken}}'
},
validateStatus: function (status) {
return status == 200;
}
}).then(function(response){
location.reload();
}).catch(function(error){
KTApp.hidePageLoading();
ModalAlert.fire({
text: $.t('2fa.save_err'),
icon: "warning",
confirmButtonText: $.t('general.ok'),
customClass: {
confirmButton: "btn btn-primary"
}
});
});
}
});
}
var datatable = function(){
var dt;
var initDatatable = function () {
$('#errorMsg').addClass("d-none");
dt = $('#dataTable').DataTable({
ajax: {
url: "{{.AdminsURL}}/json",
dataSrc: "",
error: function ($xhr, textStatus, errorThrown) {
$(".dt-processing").hide();
$('#loader').addClass("d-none");
let txt = "";
if ($xhr) {
let json = $xhr.responseJSON;
if (json) {
if (json.message){
txt = json.message;
}
}
}
if (!txt){
txt = "general.error500";
}
setI18NData($('#errorTxt'), txt);
$('#errorMsg').removeClass("d-none");
}
},
columns: [
{
data: "username",
render: function(data, type, row) {
if (type === 'display') {
return escapeHTML(data);
}
return data;
}
},
{
data: "status",
render: function(data, type, row) {
if (type === 'display') {
switch (data){
case 1:
return $.t('general.active');
default:
return $.t('general.inactive');
}
}
return data;
}
},
{
data: "last_login",
defaultContent: "",
render: function(data, type, row) {
if (type === 'display') {
if (data > 0){
return $.t('general.datetime', {
val: parseInt(data, 10),
formatParams: {
val: { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' },
}
});
}
return ""
}
return data;
}
},
{
data: "email",
visible: false,
defaultContent: "",
render: function(data, type, row) {
if (type === 'display') {
if (data){
return escapeHTML(data);
}
return "";
}
return data;
}
},
{
data: "role",
visible: false,
defaultContent: "",
render: function(data, type, row) {
if (type === 'display') {
if (data){
return escapeHTML(data);
}
return ""
}
return data;
}
},
{
data: "filters.totp_config",
visible: false,
defaultContent: false,
render: function(data, type, row) {
if (type === 'display') {
if (data && data.enabled){
return $.t('general.active');
}
return $.t('general.inactive')
}
return data && data.enabled;
}
},
{
data: "description",
visible: false,
defaultContent: "",
render: function(data, type, row) {
if (type === 'display') {
if (data){
return escapeHTML(data);
}
return ""
}
return data;
}
},
{
data: "id",
searchable: false,
orderable: false,
className: 'text-end',
render: function (data, type, row) {
if (type === 'display') {
let numActions = 0;
let username = "{{.LoggedUser.Username}}";
let actions = `<button class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
<span data-i18n="general.actions" class="fs-6">Actions</span>
<i class="ki-duotone ki-down fs-5 ms-1 rotate-180"></i>
</button>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-700 menu-state-bg-light-primary fw-semibold fs-6 w-200px py-4" data-kt-menu="true">`;
//{{- if .LoggedUser.HasPermission "*"}}
numActions++;
actions+=`<div class="menu-item px-3">
<a data-i18n="general.edit" href="#" class="menu-link px-3" data-table-action="edit_row">Edit</a>
</div>`;
//{{- end}}
//{{- if .LoggedUser.HasPermission "disable_mfa"}}
if (row.filters.totp_config && row.filters.totp_config.enabled && username != row.username){
numActions++;
actions+=`<div class="menu-item px-3">
<a data-i18n="2fa.disable_msg" href="#" class="menu-link text-danger px-3" data-table-action="disable_2fa_row">Disable 2FA</a>
</div>`;
}
//{{- end}}
//{{- if .LoggedUser.HasPermission "*"}}
if (username != row.username){
numActions++;
actions+=`<div class="menu-item px-3">
<a data-i18n="general.delete" href="#" class="menu-link text-danger px-3" data-table-action="delete_row">Delete</a>
</div>`;
}
//{{- end}}
if (numActions > 0){
actions+=`</div>`;
return actions;
}
}
return "";
}
},
],
deferRender: true,
stateSave: true,
stateDuration: 0,
colReorder: {
enable: true,
fixedColumnsLeft: 1
},
stateLoadParams: function (settings, data) {
if (data.search.search){
const filterSearch = document.querySelector('[data-table-filter="search"]');
filterSearch.value = data.search.search;
}
},
language: {
info: $.t('datatable.info'),
infoEmpty: $.t('datatable.info_empty'),
infoFiltered: $.t('datatable.info_filtered'),
loadingRecords: "",
processing: $.t('datatable.processing'),
zeroRecords: "",
emptyTable: $.t('datatable.no_records')
},
order: [[0, 'asc']],
initComplete: function(settings, json) {
$('#loader').addClass("d-none");
$('#card_content').removeClass("d-none");
let api = $.fn.dataTable.Api(settings);
api.columns.adjust().draw("page");
drawAction();
}
});
dt.on('draw', drawAction);
dt.on('column-reorder', function(e, settings, details){
drawAction();
});
}
function drawAction() {
KTMenu.createInstances();
handleRowActions();
$('#table_body').localize();
}
function handleColVisibilityCheckbox(el, index) {
el.off("change");
el.prop('checked', dt.column(index).visible());
el.on("change", function(e){
dt.column(index).visible($(this).is(':checked'));
dt.draw('page');
});
}
var handleDatatableActions = function () {
const filterSearch = $(document.querySelector('[data-table-filter="search"]'));
filterSearch.off("keyup");
filterSearch.on('keyup', function (e) {
dt.rows().deselect();
dt.search(e.target.value).draw();
});
handleColVisibilityCheckbox($('#checkColStatus'), 1);
handleColVisibilityCheckbox($('#checkColLastLogin'), 2);
handleColVisibilityCheckbox($('#checkColEmail'), 3);
handleColVisibilityCheckbox($('#checkColRole'), 4);
handleColVisibilityCheckbox($('#checkCol2FA'), 5);
handleColVisibilityCheckbox($('#checkColDesc'), 6);
const exportButton = $(document.querySelector('[data-table-filter="export"]'));
exportButton.on('click', function(e){
e.preventDefault();
this.blur();
this.setAttribute('data-kt-indicator', 'on');
this.disabled = true;
let data = [];
dt.rows({ search: 'applied' }).every(function (rowIdx, tableLoop, rowLoop){
let line = {};
let rowData = dt.row(rowIdx).data();
let filters = rowData["filters"];
line["Username"] = rowData["username"];
let status = "Inactive";
if (rowData["status"] == 1){
status = "Active";
}
line["Status"] = status;
line["Permissions"] = rowData["permissions"].join(", ");
if (rowData["created_at"]) {
line["Created At"] = moment(rowData["created_at"]).format("YYYY-MM-DD HH:mm");
} else {
line["Created At"] = "";
}
if (rowData["updated_at"]) {
line["Updated At"] = moment(rowData["updated_at"]).format("YYYY-MM-DD HH:mm");
} else {
line["Updated At"] = "";
}
if (rowData["last_login"]) {
line["Last Login"] = moment(rowData["last_login"]).format("YYYY-MM-DD HH:mm");
} else {
line["Last Login"] = "";
}
if (rowData["email"]){
line["Email"] = rowData["email"];
} else {
line["Email"] = "";
}
let totpConfig = filters["totp_config"];
if (totpConfig && totpConfig["enabled"]){
line["Two-factor auth"] = "Enabled";
} else {
line["Two-factor auth"] = "Disabled";
}
if (filters["allow_list"]){
line["Allow List"] = filters["allow_list"].join(", ");
} else {
line["Allow List"] = "";
}
let groups = [];
let rowGroups = rowData["groups"];
if (rowGroups){
for (i = 0; i < rowGroups.length; i++ ){
groups.push(rowGroups[i].name);
}
}
line["Groups"] = groups.join(", ");
if (rowData["role"]){
line["Role"] = rowData["role"];
} else {
line["Role"] = "";
}
if (rowData["description"]){
line["Description"] = rowData["description"];
} else {
line["Description"] = "";
}
if (rowData["additional_info"]){
line["Additional info"] = rowData["additional_info"];
} else {
line["Additional info"] = "";
}
data.push(line);
});
let csv = Papa.unparse(data, {
quotes: false,
quoteChar: '"',
escapeChar: '"',
delimiter: ",",
header: true,
newline: "\r\n",
skipEmptyLines: false,
columns: null,
escapeFormulae: true
});
let blob = new Blob([csv], {type: "text/csv"});
let ts = moment().format("YYYY_MM_DD_HH_mm_ss");
saveAs(blob, `admins_${ts}.csv`);
this.removeAttribute('data-kt-indicator');
this.disabled = false;
});
}
function handleRowActions() {
const editButtons = document.querySelectorAll('[data-table-action="edit_row"]');
editButtons.forEach(d => {
let el = $(d);
el.off("click");
el.on("click", function(e){
e.preventDefault();
let rowData = dt.row(e.target.closest('tr')).data();
window.location.replace('{{.AdminURL}}' + "/" + encodeURIComponent(rowData['username']));
});
});
const diable2FAButtons = document.querySelectorAll('[data-table-action="disable_2fa_row"]');
diable2FAButtons.forEach(d => {
let el = $(d);
el.off("click");
el.on("click", function(e){
e.preventDefault();
let rowData = dt.row(e.target.closest('tr')).data();
disableSeconFactorAction(rowData['username']);
});
});
const deleteButtons = document.querySelectorAll('[data-table-action="delete_row"]');
deleteButtons.forEach(d => {
let el = $(d);
el.off("click");
el.on("click", function(e){
e.preventDefault();
const parent = e.target.closest('tr');
deleteAction(dt.row(parent).data()['username']);
});
});
}
return {
init: function () {
initDatatable();
handleDatatableActions();
}
}
}();
$(document).on("i18nshow", function(){
datatable.init();
});
</script>
{{- end}}