diff --git a/data/web/js/site/mailbox.js b/data/web/js/site/mailbox.js index 684fb8fd..bd0878aa 100644 --- a/data/web/js/site/mailbox.js +++ b/data/web/js/site/mailbox.js @@ -1179,10 +1179,6 @@ jQuery(function($){ }); }; - $('body').on('click', 'span.footable-toggle', function () { - event.stopPropagation(); - }) - // detect element visibility changes function onVisible(element, callback) { $(element).ready(function() { diff --git a/data/web/js/site/user.js b/data/web/js/site/user.js index f601d61c..2375a25c 100644 --- a/data/web/js/site/user.js +++ b/data/web/js/site/user.js @@ -128,23 +128,15 @@ jQuery(function($){ } function draw_tla_table() { - ft_tla_table = FooTable.init('#tla_table', { - "columns": [ - {"name":"chkbox","title":"","style":{"min-width":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"}, - {"name":"address","title":lang.alias}, - {"name":"validity","formatter":function unix_time_format(tm) { var date = new Date(tm ? tm * 1000 : 0); return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});},"title":lang.alias_valid_until,"style":{"width":"170px"}}, - {"sorted": true,"sortValue": function(value){res = new Date(value);return res.getTime();},"direction":"DESC","name":"created","formatter":function date_format(datetime) { var date = new Date(datetime.replace(/-/g, "/")); return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"});},"title":lang.created_on,"style":{"width":"170px"}}, - {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"220px","width":"220px"},"type":"html","title":lang.action,"breakpoints":"xs sm"} - ], - "empty": lang.empty, - "rows": $.ajax({ - dataType: 'json', - url: '/api/v1/get/time_limited_aliases', - jsonp: false, - error: function () { - console.log('Cannot draw tla table'); - }, - success: function (data) { + $('#tla_table').DataTable({ + processing: true, + serverSide: false, + language: lang_datatables, + ajax: { + type: "GET", + url: "/api/v1/get/time_limited_aliases", + dataSrc: function(data){ + console.log(data); $.each(data, function (i, item) { if (acl_data.spam_alias === 1) { item.action = '
' + @@ -158,46 +150,52 @@ jQuery(function($){ item.action = '-'; } }); + + return data; } - }), - "paging": { - "enabled": true, - "limit": 5, - "size": pagination_size }, - "state": {"enabled": true}, - "sorting": { - "enabled": true - }, - "toggleSelector": "table tbody span.footable-toggle" + columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, + { + title: lang.alias, + data: 'address' + }, + { + title: lang.alias_valid_until, + data: 'validity', + render: function (data, type) { + var date = new Date(data ? data * 1000 : 0); + return date.toLocaleDateString(undefined, {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit"}); + } + }, + { + title: lang.action, + data: 'action' + } + ] }); } function draw_sync_job_table() { - ft_syncjob_table = FooTable.init('#sync_job_table', { - "columns": [ - {"name":"chkbox","title":"","style":{"min-width":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"}, - {"sorted": true,"name":"id","title":"ID","style":{"maxWidth":"60px","width":"60px","text-align":"center"}}, - {"name":"server_w_port","title":"Server","breakpoints":"xs sm md","style":{"word-break":"break-all"}}, - {"name":"enc1","title":lang.encryption,"breakpoints":"all"}, - {"name":"user1","title":lang.username}, - {"name":"exclude","title":lang.excludes,"breakpoints":"all"}, - {"name":"mins_interval","title":lang.interval + " (min)","breakpoints":"all"}, - {"name":"last_run","title":lang.last_run,"breakpoints":"xs sm md"}, - {"name":"exit_status","filterable": false,"title":lang.syncjob_last_run_result}, - {"name":"log","title":"Log"}, - {"name":"active","filterable": false,"style":{"maxWidth":"70px","width":"70px"},"title":lang.active,"formatter": function(value){return 1==value?'':0==value&&'';}}, - {"name":"is_running","filterable": false,"style":{"maxWidth":"120px","width":"100px"},"title":lang.status}, - {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"260px","width":"260px"},"type":"html","title":lang.action,"breakpoints":"xs sm"} - ], - "empty": lang.empty, - "rows": $.ajax({ - dataType: 'json', + $('#sync_job_table').DataTable({ + processing: true, + serverSide: false, + language: lang_datatables, + ajax: { + type: "GET", url: '/api/v1/get/syncjobs/' + encodeURIComponent(mailcow_cc_username) + '/no_log', - jsonp: false, - error: function () { - console.log('Cannot draw sync job table'); - }, - success: function (data) { + dataSrc: function(data){ + console.log(data); $.each(data, function (i, item) { item.user1 = escapeHtml(item.user1); item.log = '' + lang.open_logs + '' @@ -239,39 +237,87 @@ jQuery(function($){ } item.exit_status = item.success + ' ' + item.exit_status; }); + + return data; } - }), - "paging": { - "enabled": true, - "limit": 5, - "size": pagination_size }, - "state": {"enabled": true}, - "sorting": { - "enabled": true - }, - "toggleSelector": "table tbody span.footable-toggle" + columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, + { + title: 'ID', + data: 'id' + }, + { + title: 'Server', + data: 'server_w_port' + }, + { + title: lang.encryption, + data: 'enc1' + }, + { + title: lang.username, + data: 'user1' + }, + { + title: lang.excludes, + data: 'exclude' + }, + { + title: lang.interval + " (min)", + data: 'mins_interval' + }, + { + title: lang.last_run, + data: 'last_run' + }, + { + title: lang.syncjob_last_run_result, + data: 'exit_status' + }, + { + title: 'Log', + data: 'log' + }, + { + title: lang.active, + data: 'active', + render: function (data, type) { + return 1==data?'':0==data&&'' + } + }, + { + title: lang.status, + data: 'is_running' + }, + { + title: lang.action, + data: 'action' + } + ] }); } function draw_app_passwd_table() { - ft_apppasswd_table = FooTable.init('#app_passwd_table', { - "columns": [ - {"name":"chkbox","title":"","style":{"maxWidth":"60px","width":"60px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"}, - {"sorted": true,"name":"id","title":"ID","style":{"maxWidth":"60px","width":"60px","text-align":"center"}}, - {"name":"name","title":lang.app_name}, - {"name":"protocols","title":lang.allowed_protocols}, - {"name":"active","filterable": false,"style":{"maxWidth":"70px","width":"70px"},"title":lang.active,"formatter": function(value){return 1==value?'':0==value&&'';}}, - {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"220px","width":"220px"},"type":"html","title":lang.action,"breakpoints":"xs sm"} - ], - "empty": lang.empty, - "rows": $.ajax({ - dataType: 'json', + $('#app_passwd_table').DataTable({ + processing: true, + serverSide: false, + language: lang_datatables, + ajax: { + type: "GET", url: '/api/v1/get/app-passwd/all', - jsonp: false, - error: function () { - console.log('Cannot draw app passwd table'); - }, - success: function (data) { + dataSrc: function(data){ + console.log(data); $.each(data, function (i, item) { item.name = escapeHtml(item.name) item.protocols = [] @@ -294,37 +340,59 @@ jQuery(function($){ item.chkbox = ''; } }); + + return data; } - }), - "paging": { - "enabled": true, - "limit": 5, - "size": pagination_size }, - "state": {"enabled": true}, - "sorting": { - "enabled": true - }, - "toggleSelector": "table tbody span.footable-toggle" + columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, + { + title: 'ID', + data: 'id' + }, + { + title: lang.app_name, + data: 'name' + }, + { + title: lang.allowed_protocols, + data: 'protocols' + }, + { + title: lang.active, + data: 'active', + render: function (data, type) { + return 1==data?'':0==data&&'' + } + }, + { + title: lang.action, + data: 'action' + } + ] }); } function draw_wl_policy_mailbox_table() { - ft_wl_policy_mailbox_table = FooTable.init('#wl_policy_mailbox_table', { - "columns": [ - {"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"}, - {"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false}, - {"sorted": true,"name":"value","title":lang.spamfilter_table_rule}, - {"name":"object","title":"Scope"} - ], - "empty": lang.empty, - "rows": $.ajax({ - dataType: 'json', + $('#wl_policy_mailbox_table').DataTable({ + processing: true, + serverSide: false, + language: lang_datatables, + ajax: { + type: "GET", url: '/api/v1/get/policy_wl_mailbox', - jsonp: false, - error: function () { - console.log('Cannot draw mailbox policy wl table'); - }, - success: function (data) { + dataSrc: function(data){ + console.log(data); $.each(data, function (i, item) { if (validateEmail(item.object)) { item.chkbox = ''; @@ -336,36 +404,48 @@ jQuery(function($){ item.chkbox = ''; } }); + + return data; } - }), - "state": {"enabled": true}, - "paging": { - "enabled": true, - "limit": 5, - "size": pagination_size }, - "sorting": { - "enabled": true - } + columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, + { + title: 'ID', + data: 'prefid' + }, + { + title: lang.spamfilter_table_rule, + data: 'name' + }, + { + title:'Scope', + data: 'object' + } + ] }); } function draw_bl_policy_mailbox_table() { - ft_bl_policy_mailbox_table = FooTable.init('#bl_policy_mailbox_table', { - "columns": [ - {"name":"chkbox","title":"","style":{"maxWidth":"40px","width":"40px","text-align":"center"},"filterable": false,"sortable": false,"type":"html"}, - {"name":"prefid","style":{"maxWidth":"40px","width":"40px"},"title":"ID","filterable": false,"sortable": false}, - {"sorted": true,"name":"value","title":lang.spamfilter_table_rule}, - {"name":"object","title":"Scope"} - ], - "empty": lang.empty, - "rows": $.ajax({ - dataType: 'json', + $('#bl_policy_mailbox_table').DataTable({ + processing: true, + serverSide: false, + language: lang_datatables, + ajax: { + type: "GET", url: '/api/v1/get/policy_bl_mailbox', - jsonp: false, - error: function () { - console.log('Cannot draw mailbox policy bl table'); - }, - success: function (data) { + dataSrc: function(data){ + console.log(data); $.each(data, function (i, item) { if (validateEmail(item.object)) { item.chkbox = ''; @@ -377,31 +457,39 @@ jQuery(function($){ item.chkbox = ''; } }); + + return data; } - }), - "paging": { - "enabled": true, - "limit": 5, - "size": pagination_size }, - "state": {"enabled": true}, - "sorting": { - "enabled": true - } + columns: [ + { + // placeholder, so checkbox will not block child row toggle + title: '', + data: null, + searchable: false, + orderable: false, + defaultContent: '' + }, + { + title: '', + data: 'chkbox' + }, + { + title: 'ID', + data: 'prefid' + }, + { + title: lang.spamfilter_table_rule, + data: 'name' + }, + { + title:'Scope', + data: 'object' + } + ] }); } - $('body').on('click', 'span.footable-toggle', function () { - event.stopPropagation(); - }) - - draw_sync_job_table(); - draw_app_passwd_table(); - draw_tla_table(); - draw_wl_policy_mailbox_table(); - draw_bl_policy_mailbox_table(); - last_logins('get'); - // FIDO2 friendly name modal $('#fido2ChangeFn').on('show.bs.modal', function (e) { rename_link = $(e.relatedTarget) @@ -433,4 +521,29 @@ jQuery(function($){ $('#userFilterModal').on('hidden.bs.modal', function () { $('#user_sieve_filter').text(lang.loading); }); + + // detect element visibility changes + function onVisible(element, callback) { + $(element).ready(function() { + element_object = document.querySelector(element) + new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if(entry.intersectionRatio > 0) { + callback(element_object); + observer.disconnect(); + } + }); + }).observe(element_object); + }); + } + + // Load only if the tab is visible + onVisible("[id^=SpamAliases]", () => draw_tla_table()); + onVisible("[id^=Spamfilter]", () => { + draw_wl_policy_mailbox_table(); + draw_bl_policy_mailbox_table(); + }); + onVisible("[id^=Syncjobs]", () => draw_sync_job_table()); + onVisible("[id^=AppPasswds]", () => draw_app_passwd_table()); + last_logins('get'); }); diff --git a/data/web/templates/user/AppPasswds.twig b/data/web/templates/user/AppPasswds.twig index 5079ff9a..d1e31ad3 100644 --- a/data/web/templates/user/AppPasswds.twig +++ b/data/web/templates/user/AppPasswds.twig @@ -1,22 +1,27 @@
-

{{ lang.user.app_hint|raw }}

-
-
-
-
-
-
- {{ lang.mailbox.toggle_all }} - {{ lang.mailbox.quick_actions }} - +
+
{{ lang.user.app_passwds }}
+
+

{{ lang.user.app_hint|raw }}

+
+
-
- {{ lang.user.create_app_passwd }} +
+
+
+ {{ lang.mailbox.toggle_all }} + {{ lang.mailbox.quick_actions }} + +
+
+ {{ lang.user.create_app_passwd }} +
+
diff --git a/data/web/templates/user/Pushover.twig b/data/web/templates/user/Pushover.twig index f68cb833..5fdca3e8 100644 --- a/data/web/templates/user/Pushover.twig +++ b/data/web/templates/user/Pushover.twig @@ -1,78 +1,83 @@
-
- - - -
-
-

-
-
-

{{ lang.user.pushover_info|format(mailcow_cc_username)|raw }}

-

{{ lang.user.pushover_vars|raw }}: {SUBJECT}, {SENDER}

+
+
Pushover API
+
+ + + +
-
-
- - -
+
+

-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
-
- -
-
-
- - {{ lang.user.advanced_settings }} - -
-
-
-
-
- - -
- +
+

{{ lang.user.pushover_info|format(mailcow_cc_username)|raw }}

+

{{ lang.user.pushover_vars|raw }}: {SUBJECT}, {SENDER}

+
+
+
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
- + +
+
+
+ + {{ lang.user.advanced_settings }} + +
+
+
+
+
+ + +
+ +
+
+ +
+
+
+ {{ lang.user.save }} + {{ lang.user.pushover_verify }} + {{ lang.user.remove }} +
-
- {{ lang.user.save }} - {{ lang.user.pushover_verify }} - {{ lang.user.remove }} -
-
+
- +
diff --git a/data/web/templates/user/SpamAliases.twig b/data/web/templates/user/SpamAliases.twig index f07b89be..9695ee46 100644 --- a/data/web/templates/user/SpamAliases.twig +++ b/data/web/templates/user/SpamAliases.twig @@ -1,38 +1,41 @@
-
-
-
-
+
+
{{ lang.user.spam_aliases }}
+
+
+
+
+
-
-
-
-
-
- {{ lang.mailbox.toggle_all }} - {{ lang.mailbox.quick_actions }} - -
-
- {{ lang.user.alias_create_random }}, 1 {{ lang.user.year }} - +
+
+
+ {{ lang.mailbox.toggle_all }} + {{ lang.mailbox.quick_actions }} + +
+
+ {{ lang.user.alias_create_random }}, 1 {{ lang.user.year }} + +
+
diff --git a/data/web/templates/user/Spamfilter.twig b/data/web/templates/user/Spamfilter.twig index 13aa371e..89e72919 100644 --- a/data/web/templates/user/Spamfilter.twig +++ b/data/web/templates/user/Spamfilter.twig @@ -1,75 +1,80 @@
-

{{ lang.user.spamfilter_behavior }}

-
-
-
-
-
-
- -
    -
  • {{ lang.user.spamfilter_green }}
    • -
  • {{ lang.user.spamfilter_yellow }}
    • -
  • {{ lang.user.spamfilter_red }}
    • -
+
+
{{ lang.user.spamfilter }}
+
+

{{ lang.user.spamfilter_behavior }}

+
+
+ +
+
+
+ +
    +
  • {{ lang.user.spamfilter_green }}
    • +
  • {{ lang.user.spamfilter_yellow }}
    • +
  • {{ lang.user.spamfilter_red }}
    • +
+
+
+
+ {{ lang.user.save_changes }} + {{ lang.user.spam_score_reset }} +
+ +
+
+
+
+
+

{{ lang.user.spamfilter_wl }}

+

{{ lang.user.spamfilter_wl_desc|raw }}

+
+
+ + + + +
+
+
+
+
+
+
+ {{ lang.mailbox.toggle_all }} + {{ lang.mailbox.remove }} +
-
- {{ lang.user.save_changes }} - {{ lang.user.spam_score_reset }} -
- -
-
-
-
-
-

{{ lang.user.spamfilter_wl }}

-

{{ lang.user.spamfilter_wl_desc|raw }}

-
-
- - - - -
-
-
-
-
-
-
- {{ lang.mailbox.toggle_all }} - {{ lang.mailbox.remove }} -
-
-
-
-

{{ lang.user.spamfilter_bl }}

-

{{ lang.user.spamfilter_bl_desc|raw }}

-
-
- - - - -
-
-
-
-
-
-
- {{ lang.mailbox.toggle_all }} - {{ lang.mailbox.remove }} +
+

{{ lang.user.spamfilter_bl }}

+

{{ lang.user.spamfilter_bl_desc|raw }}

+
+
+ + + + +
+
+
+
+
+
+
+ {{ lang.mailbox.toggle_all }} + {{ lang.mailbox.remove }} +
+
diff --git a/data/web/templates/user/Syncjobs.twig b/data/web/templates/user/Syncjobs.twig index 2df2ec90..628b9e78 100644 --- a/data/web/templates/user/Syncjobs.twig +++ b/data/web/templates/user/Syncjobs.twig @@ -1,21 +1,24 @@
-
-
-
-
-
-
- {{ lang.mailbox.toggle_all }} - {{ lang.mailbox.quick_actions }} - -
-
- {{ lang.user.create_syncjob }} +
+
{{ lang.user.sync_jobs }}
+
+
+
+
+
+ {{ lang.mailbox.toggle_all }} + {{ lang.mailbox.quick_actions }} + +
+
+ {{ lang.user.create_syncjob }} +
+
diff --git a/data/web/templates/user_domainadmin_common.twig b/data/web/templates/user_domainadmin_common.twig index be8bff23..8a7ace39 100644 --- a/data/web/templates/user_domainadmin_common.twig +++ b/data/web/templates/user_domainadmin_common.twig @@ -7,4 +7,5 @@ var pagination_size = '{{ pagination_size }}'; var mailcow_cc_username = '{{ mailcow_cc_username }}'; var user_spam_score = [{{ user_spam_score }}]; + var lang_datatables = {{ lang_datatables|raw }}; diff --git a/data/web/user.php b/data/web/user.php index 5bf60917..1ab93e81 100644 --- a/data/web/user.php +++ b/data/web/user.php @@ -88,6 +88,7 @@ elseif (isset($_SESSION['mailcow_cc_role']) && $_SESSION['mailcow_cc_role'] == ' 'pushover_data' => $pushover_data, 'lang_user' => json_encode($lang['user']), 'number_of_app_passwords' => $number_of_app_passwords, + 'lang_datatables' => json_encode($lang['datatables']), ]; }