swissmakers_gmbh/fail2ban-ui
12
1
Fork 0
mirror of https://github.com/swissmakers/fail2ban-ui.git synced 2026-04-11 13:47:05 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Include select2 css/js for alertCountries as a select widget for better handling

Browse Source
This commit is contained in:
Michael Reber
2025-02-05 22:41:53 +01:00
parent 4c8f235b5b
commit d7309503fd
3 changed files with 94 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
pkg/web/templates/index.html
View File

@@ -19,14 +19,13 @@
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Fail2ban UI Dashboard</title>
<!-- Bootstrap 5 (CDN) -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<style>
/* Loading overlay styling */
#loading-overlay {
@@ -159,9 +158,11 @@
<input type="email" class="form-control" id="destEmail" placeholder="alerts@swissmakers.ch" />
</div>
<div class="mb-3">
<label for="alertCountries" class="form-label">Select Alert Countries</label>
<p class="text-muted">Choose which country IP blocks should trigger an email (hold CTRL for multiple).</p>
<select id="alertCountries" class="form-select" multiple size="7">
<label for="alertCountries" class="form-label">Alert Countries</label>
<p class="text-muted">
Choose the countries for which you want to receive email alerts when a block is triggered.
</p>
<select id="alertCountries" class="form-select" multiple>
<option value="ALL">ALL (Every Country)</option>
<option value="CH">Switzerland (CH)</option>
<option value="DE">Germany (DE)</option>
@@ -291,6 +292,10 @@
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
</script>
<!-- jQuery (used by Select2) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script>
// For information: We avoid ES6 backticks in our JS, to prevent confusion with the Go template parser.
@@ -647,7 +652,6 @@ function loadSettings() {
// default to "ALL"
select.options[0].selected = true;
} else {
// Mark them selected
for (let i = 0; i < select.options.length; i++) {
let val = select.options[i].value;
if (data.alertCountries.includes(val)) {
@@ -655,6 +659,8 @@ function loadSettings() {
}
}
}
// Update Select2 UI
$('#alertCountries').trigger('change');
// Get SMTP settings
if (data.smtp) {
@@ -679,13 +685,12 @@ function loadSettings() {
.finally(() => showLoading(false));
}
// Save settings when hit the save button
// Save settings when hitting the save button
function saveSettings(event) {
event.preventDefault(); // prevent form submission
showLoading(true);
// Gather form values
const smtpSettings = {
host: document.getElementById('smtpHost').value.trim(),
port: parseInt(document.getElementById('smtpPort').value, 10) || 587,
@@ -746,7 +751,6 @@ function loadFilters() {
const select = document.getElementById('filterSelect');
select.innerHTML = ''; // clear existing
if (!data.filters || data.filters.length === 0) {
// optional fallback
const opt = document.createElement('option');
opt.value = '';
opt.textContent = 'No Filters Found';
@@ -810,7 +814,6 @@ function testSelectedFilter() {
alert('Error: ' + data.error);
return;
}
// data.matches, for example
renderTestResults(data.matches);
})
.catch(err => {
@@ -868,6 +871,36 @@ function reloadFail2ban() {
});
}
//*******************************************************************
//* Is executed when doc-ready : *
//*******************************************************************
$(document).ready(function() {
// Initialize the Select2 widget with a placeholder and full width.
$('#alertCountries').select2({
placeholder: 'Select countries..',
allowClear: true,
width: '100%'
});
// Custom logic: If "ALL" is selected, remove other selections.
$('#alertCountries').on('select2:select', function(e) {
var selectedValue = e.params.data.id;
var currentValues = $('#alertCountries').val() || [];
if (selectedValue === 'ALL') {
if (currentValues.length > 1) {
$('#alertCountries').val(['ALL']).trigger('change');
}
} else {
if (currentValues.indexOf('ALL') !== -1) {
var newValues = currentValues.filter(function(value) {
return value !== 'ALL';
});
$('#alertCountries').val(newValues).trigger('change');
}
}
});
});
</script>
</body>
</html>