Skip to content

Commit 2d42bd3

Browse files
AlecRustAlecRust
authored
Refactor Add/Edit Firewall Rule JS (hestiacp#3522)
1 parent ba7c2c5 commit 2d42bd3

File tree

8 files changed

+61
-63
lines changed

8 files changed

+61
-63
lines changed

‎web/js/dist/main.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/dist/main.min.js.map‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/js/src/addIpLists.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { parseAndSortIpLists } from './helpers';
2+
3+
// Populates the "IP address / IP list" select with created IP lists
4+
// on the Add Firewall Rule page
5+
export default function handleAddIpLists() {
6+
const ipListSelect = document.querySelector('.js-ip-list-select');
7+
8+
if (!ipListSelect) {
9+
return;
10+
}
11+
12+
const ipSetLists = parseAndSortIpLists(ipListSelect.dataset.ipsetLists);
13+
14+
const headerOption = document.createElement('option');
15+
headerOption.textContent = 'IP address lists:';
16+
headerOption.disabled = true;
17+
ipListSelect.appendChild(headerOption);
18+
19+
ipSetLists.forEach((ipSet) => {
20+
const ipOption = document.createElement('option');
21+
ipOption.textContent = ipSet.name;
22+
ipOption.value = `ipset:${ipSet.name}`;
23+
ipListSelect.appendChild(ipOption);
24+
});
25+
}

‎web/js/src/helpers.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@ export function showSpinner() {
3737
document.querySelector('.js-spinner').classList.add('active');
3838
}
3939

40+
// Parses and sorts IP lists from HTML
41+
export function parseAndSortIpLists(ipListsData) {
42+
const ipLists = JSON.parse(ipListsData || '[]');
43+
return ipLists.sort((a, b) => a.name.localeCompare(b.name));
44+
}
45+
4046
// Creates a confirmation <dialog> on the fly
4147
export function createConfirmationDialog({
4248
title,

‎web/js/src/ipListDataSource.js‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { parseAndSortIpLists } from './helpers';
2+
13
// Populates the "Data Source" select with various IP lists on the New IP List page
24
export default function handleIpListDataSource() {
35
const dataSourceSelect = document.querySelector('.js-datasource-select');
@@ -7,26 +9,21 @@ export default function handleIpListDataSource() {
79
}
810

911
// Parse IP lists from HTML and sort them alphabetically
10-
const countryIplists = parseAndSortIplists(dataSourceSelect.dataset.countryIplists);
11-
const blacklistIplists = parseAndSortIplists(dataSourceSelect.dataset.blacklistIplists);
12+
const countryIpLists = parseAndSortIpLists(dataSourceSelect.dataset.countryIpLists);
13+
const blacklistIpLists = parseAndSortIpLists(dataSourceSelect.dataset.blacklistIpLists);
1214

1315
// Add IP lists to the "Data Source" select
14-
addIPListsToSelect(dataSourceSelect, Alpine.store('globals').BLACKLIST, blacklistIplists);
15-
addIPListsToSelect(dataSourceSelect, Alpine.store('globals').IPVERSE, countryIplists);
16-
}
17-
18-
function parseAndSortIplists(iplistsData) {
19-
const iplists = JSON.parse(iplistsData || '[]');
20-
return iplists.sort((a, b) => a.name.localeCompare(b.name));
16+
addIPListsToSelect(dataSourceSelect, Alpine.store('globals').BLACKLIST, blacklistIpLists);
17+
addIPListsToSelect(dataSourceSelect, Alpine.store('globals').IPVERSE, countryIpLists);
2118
}
2219

23-
function addIPListsToSelect(dataSourceSelect, label, iplists) {
20+
function addIPListsToSelect(dataSourceSelect, label, ipLists) {
2421
// Add a disabled option as a label
2522
addOption(dataSourceSelect, label, '', true);
2623

2724
// Add IP lists to the select element
28-
iplists.forEach((iplist) => {
29-
addOption(dataSourceSelect, iplist.name, iplist.source, false);
25+
ipLists.forEach((ipList) => {
26+
addOption(dataSourceSelect, ipList.name, ipList.source, false);
3027
});
3128
}
3229

‎web/js/src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import alpineInit from './alpineInit';
22
import focusFirstInput from './focusFirstInput';
3+
import handleAddIpLists from './addIpLists';
34
import handleConfirmAction from './confirmAction';
45
import handleCopyCreds from './copyCreds';
56
import handleCronGenerator from './cronGenerator';
@@ -32,6 +33,7 @@ initListeners();
3233
focusFirstInput();
3334

3435
function initListeners() {
36+
handleAddIpLists();
3537
handleConfirmAction();
3638
handleCopyCreds();
3739
handleCronGenerator();

‎web/templates/pages/add_firewall.php‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@
5050
<?= _("IP address / IPset") ?> <span class="optional">(<?= _("CIDR format is supported") ?>)</span>
5151
</label>
5252
<div class="u-pos-relative">
53-
<select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
53+
<select
54+
class="form-select js-ip-list-select"
55+
tabindex="-1"
56+
onchange="this.nextElementSibling.value=this.value"
57+
data-ipset-lists="<?= htmlspecialchars($ipset_lists_json, ENT_QUOTES, 'UTF-8') ?>"
58+
>
5459
<option value="">&nbsp;</option>
5560
</select>
5661
<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?= htmlentities(trim($v_ip, "'")) ?>">
@@ -67,24 +72,3 @@
6772
</form>
6873

6974
</div>
70-
71-
<script>
72-
var ipLists = JSON.parse('<?= $ipset_lists_json ?>');
73-
ipLists.sort(function (a, b) {
74-
return a.name > b.name;
75-
});
76-
77-
var targetElement = document.getElementById('quickips_list');
78-
79-
var newEl = document.createElement("option");
80-
newEl.text = "IP address lists:";
81-
newEl.disabled = true;
82-
targetElement.appendChild(newEl);
83-
84-
ipLists.forEach(iplist => {
85-
var newEl = document.createElement("option");
86-
newEl.text = iplist.name;
87-
newEl.value = "ipset:" + iplist.name;
88-
targetElement.appendChild(newEl);
89-
});
90-
</script>

‎web/templates/pages/edit_firewall.php‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@
5050
<?= _("IP address / IPset") ?> <span class="optional">(<?= _("CIDR format is supported") ?>)</span>
5151
</label>
5252
<div class="u-pos-relative">
53-
<select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
53+
<select
54+
class="form-select js-ip-list-select"
55+
tabindex="-1"
56+
onchange="this.nextElementSibling.value=this.value"
57+
data-ipset-lists="<?= htmlspecialchars($ipset_lists_json, ENT_QUOTES, 'UTF-8') ?>"
58+
>
5459
<option value="">&nbsp;</option>
5560
</select>
5661
<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?= htmlentities(trim($v_ip, "'")) ?>">
@@ -67,24 +72,3 @@
6772
</form>
6873

6974
</div>
70-
71-
<script>
72-
var ipLists = JSON.parse('<?= $ipset_lists_json ?>');
73-
ipLists.sort(function (a, b) {
74-
return a.name > b.name;
75-
});
76-
77-
var targetElement = document.getElementById('quickips_list');
78-
79-
var newEl = document.createElement("option");
80-
newEl.text = "IP address lists:";
81-
newEl.disabled = true;
82-
targetElement.appendChild(newEl);
83-
84-
ipLists.forEach(iplist => {
85-
var newEl = document.createElement("option");
86-
newEl.text = iplist.name;
87-
newEl.value = "ipset:" + iplist.name;
88-
targetElement.appendChild(newEl);
89-
});
90-
</script>

0 commit comments

Comments
 (0)