fix js integrations

Signed-off-by: Michael Kaufmann <d00p@froxlor.org>

install/froxlor.sql.php

@@ -356,23 +356,6 @@ CREATE TABLE `panel_htpasswds` (
 ) ENGINE=InnoDB CHARSET=utf8 COLLATE=utf8_general_ci;
 
 
-DROP TABLE IF EXISTS `panel_sessions`;
-CREATE TABLE `panel_sessions` (
-  `hash` varchar(32) NOT NULL default '',
-  `userid` int(11) unsigned NOT NULL default '0',
-  `ipaddress` varchar(255) NOT NULL default '',
-  `useragent` varchar(255) NOT NULL default '',
-  `lastactivity` int(11) unsigned NOT NULL default '0',
-  `lastpaging` varchar(255) NOT NULL default '',
-  `formtoken` char(32) NOT NULL default '',
-  `language` varchar(64) NOT NULL default '',
-  `adminsession` tinyint(1) unsigned NOT NULL default '0',
-  `theme` varchar(255) NOT NULL default '',
-  PRIMARY KEY  (`hash`),
-  KEY `userid` (`userid`)
-) ENGINE=HEAP;
-
-
 DROP TABLE IF EXISTS `panel_settings`;
 CREATE TABLE `panel_settings` (
   `settingid` int(11) unsigned NOT NULL auto_increment,

templates/Froxlor/assets/js/app.js

@@ -1,33 +1,14 @@
 import '@fortawesome/fontawesome-free';
-
-import jQuery from 'jquery';
-window.$ = jQuery;
-
-import 'jquery-validation';
-import 'bootstrap';
-import 'chart.js/auto';
-
-// Axios
-import axios from 'axios';
-window.axios = axios;
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+import './bootstrap';
 
 // Vue
 import {createApp} from 'vue';
+
 const app = createApp({});
 
-// import ExampleComponent from './components/ExampleComponent.vue';
-// app.component('example-component', ExampleComponent);
-//
-// or
-//
-// Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
-//     app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
-// });
-
-app.mount('#app');
-
 // Load jquery components
 Object.entries(import.meta.glob('./jquery/*.js', {eager: true})).forEach(([path, definition]) => {
 	definition.default();
 });
+
+app.mount('#app');

templates/Froxlor/assets/js/bootstrap.js

@@ -0,0 +1,20 @@
+import _ from 'lodash';
+window._ = _;
+
+// jQuery
+import jQuery from 'jquery';
+window.$ = jQuery;
+import 'jquery-validation';
+
+// Bootstrap
+import * as bootstrap from 'bootstrap';
+window.bootstrap = bootstrap;
+
+// ChartJS
+import Chart from 'chart.js/auto';
+window.Chart = Chart;
+
+// Axios
+import axios from 'axios';
+window.axios = axios;
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

templates/Froxlor/assets/js/jquery/apikeys.js

@@ -1,5 +1,5 @@
 export default function () {
-
+	$(function () {
 		var timer, delay = 500;
 		$('div[data-action="apikeys"] #allowed_from').on('keyup change', function () {
 			var _this = $(this);
@@ -10,7 +10,11 @@ export default function() {
 					url: "lib/ajax.php?action=editapikey",
 					type: "POST",
 					dataType: "json",
-				data: { id: akid, allowed_from: _this.val(), valid_until: $('div[data-entry="' + akid + '"] #valid_until').val() },
+					data: {
+						id: akid,
+						allowed_from: _this.val(),
+						valid_until: $('div[data-entry="' + akid + '"] #valid_until').val()
+					},
 					success: function (data) {
 						if (data.message) {
 							_this.removeClass('is-valid');
@@ -38,7 +42,11 @@ export default function() {
 					url: "lib/ajax.php?action=editapikey",
 					type: "POST",
 					dataType: "json",
-				data: { id: akid, valid_until: _this.val(), allowed_from: $('div[data-entry="' + akid + '"] #allowed_from').val() },
+					data: {
+						id: akid,
+						valid_until: _this.val(),
+						allowed_from: $('div[data-entry="' + akid + '"] #allowed_from').val()
+					},
 					success: function (data) {
 						if (data.message) {
 							_this.removeClass('is-valid');
@@ -56,5 +64,5 @@ export default function() {
 				});
 			}, delay);
 		});
-
+	});
 }

templates/Froxlor/assets/js/jquery/configfiles.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * config files - select all recommended
 		 */
@@ -25,9 +26,9 @@ export default function() {
 		 * for selected daemon
 		 */
 		$('.show-config').on('click', function () {
-		var distro = $(this).data('dist');
-		var section = $(this).data('section');
-		var daemon = $(this).data('daemon');
+			const distro = $(this).data('dist');
+			const section = $(this).data('section');
+			const daemon = $(this).data('daemon');
 
 			$.ajax({
 				url: "lib/ajax.php?action=getConfigDetails",
@@ -37,16 +38,17 @@ export default function() {
 				success: function (data) {
 					$('#configTplShowLabel').html(data.title);
 					$('#configTplShow .modal-body').html(data.content);
-				var myModal = new bootstrap.Modal(document.getElementById('configTplShow'));
+					const myModal = new bootstrap.Modal(document.getElementById('configTplShow'));
 					myModal.show();
 				},
 				error: function (request, status, error) {
 					$('#configTplShowLabel').html('Error');
 					$('#configTplShow .modal-body').html('<div class="alert alert-danger" role="alert">' + request.responseJSON.message + '</div>');
-				var myModal = new bootstrap.Modal(document.getElementById('configTplShow'));
+					const myModal = new bootstrap.Modal(document.getElementById('configTplShow'));
 					myModal.show();
 				}
 			});
 
 		});
+	});
 }

templates/Froxlor/assets/js/jquery/customer.js

@@ -1,5 +1,5 @@
 export default function () {
-
+	$(function () {
 		// Make inputs with enabled unlimited checked disabled
 		$("input[name$='_ul']").each(function () {
 			var fieldname = $(this).attr("name").substring(0, $(this).attr("name").length - 3);
@@ -73,4 +73,5 @@ export default function() {
 				});
 			}
 		});
+	});
 }

templates/Froxlor/assets/js/jquery/dnseditor.js

@@ -1,5 +1,5 @@
 export default function () {
-
+	$(function () {
 		// Display helptext to content box according to dns-record type selected
 		$("select[name='dns_type']").on('change', function () {
 			var selVal = $(this).val();
@@ -16,4 +16,5 @@ export default function() {
 				}
 			});
 		});
+	});
 }

templates/Froxlor/assets/js/jquery/domains.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * domains
 		 */
@@ -106,4 +107,5 @@ export default function() {
 				$('#section_bssl>.formfields>.row').not(":first").addClass("d-none");
 			}
 		})
+	});
 }

templates/Froxlor/assets/js/jquery/global.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * global
 		 */
@@ -11,4 +12,9 @@ export default function() {
 			e.preventDefault();
 			navigator.clipboard.writeText($('#ccSysInfo').text().trim());
 		})
+
+		$('[data-bs-toggle="popover"]').each(function () {
+			new bootstrap.Popover($(this));
+		})
+	});
 }

templates/Froxlor/assets/js/jquery/install.js

@@ -1,6 +1,7 @@
 export default function () {
+	$(function () {
 		/*
-	 * switch between basic and advanced install mode
+		 * switch between basic and advanced installation mode
 		 */
 		$('#switchInstallMode').on('click', function () {
 			var checked = $(this).prop('checked');
@@ -47,7 +48,7 @@ export default function() {
 				$('#submitManual').removeClass('d-none');
 			} else {
 				cTimer = setInterval(checkConfigState, 1000);
-			// spinner fürs warten
+				// spinner fürs Warten
 				$('#submitAuto').removeClass('d-none');
 				$('#submitManual').addClass('d-none');
 			}
@@ -58,5 +59,5 @@ export default function() {
 			clearInterval(cTimer);
 			cTimer = setInterval(checkConfigState, 1000);
 		}
-
+	});
 }

templates/Froxlor/assets/js/jquery/ipsandports.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * ipsandports - check for internal ip and output a notice if private-range ip is given
 		 */
@@ -26,5 +27,5 @@ export default function() {
 				});
 			}
 		});
-
+	});
 }

templates/Froxlor/assets/js/jquery/newsfeed.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * newsfeed
 		 */
@@ -21,4 +22,5 @@ export default function() {
 				}
 			});
 		}
+	});
 }

templates/Froxlor/assets/js/jquery/search.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * search
 		 */
@@ -56,4 +57,5 @@ export default function() {
 				}
 			});
 		});
+	});
 }

templates/Froxlor/assets/js/jquery/tablecolumns.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * table columns - manage columns modal
 		 */
@@ -41,4 +42,5 @@ export default function() {
 		$('.manageColumnsModal form button[data-action="unselect-all"]').on('click', function () {
 			$(this).parents('form:first').find('input:checkbox').prop('checked', false);
 		});
+	});
 }

templates/Froxlor/assets/js/jquery/traffic.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * traffic - display helptext to content box according to dns-record type selected
 		 */
@@ -7,4 +8,5 @@ export default function() {
 			var baseRef = $(this).data('baseref');
 			window.location.href = baseRef + '?range=' + selVal;
 		});
+	});
 }

templates/Froxlor/assets/js/jquery/updatecheck.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * updatecheck
 		 */
@@ -18,4 +19,5 @@ export default function() {
 				}
 			});
 		}
+	});
 }

templates/Froxlor/assets/js/jquery/validation.js

@@ -1,4 +1,5 @@
 export default function () {
+	$(function () {
 		/*
 		 * validation
 		 */
@@ -37,4 +38,5 @@ export default function() {
 				}
 			});
 		});
+	});
 }

templates/Froxlor/assets/scss/_variables-dark.scss

@@ -1,2 +0,0 @@
-// Heading
-$heading-border-color-dark: rgba(0,0,0,0.15);

templates/Froxlor/assets/scss/_variables.scss

@@ -82,6 +82,7 @@ $card-border-width: 0;
 $heading-bg: $navbar-bg;
 $heading-color: $body-color;
 $heading-border-color: #dee2e6;
+$heading-border-color-dark: rgba(0,0,0,0.15);
 
 // Search
 $search-bg: $navbar-bg;

templates/Froxlor/assets/scss/app.scss

@@ -2,7 +2,6 @@
 
 // Bootstrap
 @import "variables";
-@import "variables-dark";
 @import "bootstrap/scss/bootstrap";
 
 // Theme

templates/Froxlor/form/form.html.twig

@@ -51,6 +51,6 @@
 
 	{# add translation for custom validations #}
 	{% if form_data.id is defined and form_data.id in ['customer_add', 'customer_edit', 'domain_add', 'domain_edit'] %}
-		<script>$(function() { $.extend($.validator.messages, {required: "{{ lng('error.requiredfield') }}"}) });</script>
+		<script type="module">$(function() { $.extend($.validator.messages, {required: "{{ lng('error.requiredfield') }}"}) });</script>
 	{% endif %}
 {% endmacro %}

templates/Froxlor/user/traffic.html.twig

@@ -106,7 +106,7 @@
 		{% endif %}
 	{% endif %}
 
-	<script>
+	<script type="module">
 		const labelsS = ['{{ lng('traffic.http') }}', '{{ lng('traffic.ftp') }}', '{{ lng('traffic.mail') }}'];
 
 		const dataS = {

vite.config.js

@@ -5,9 +5,6 @@ import { viteRequire } from 'vite-require'
 
 export default defineConfig({
 	build: {
-		rollupOptions: {
-			external: ['extras/install'],
-		},
 		chunkSizeWarningLimit: 1000,
 	},
 	plugins: [