Refactor Add/Edit Firewall Rule JS (#3522)

web/js/src/addIpLists.js

@@ -0,0 +1,25 @@
+import { parseAndSortIpLists } from './helpers';
+
+// Populates the "IP address / IP list" select with created IP lists
+// on the Add Firewall Rule page
+export default function handleAddIpLists() {
+	const ipListSelect = document.querySelector('.js-ip-list-select');
+
+	if (!ipListSelect) {
+		return;
+	}
+
+	const ipSetLists = parseAndSortIpLists(ipListSelect.dataset.ipsetLists);
+
+	const headerOption = document.createElement('option');
+	headerOption.textContent = 'IP address lists:';
+	headerOption.disabled = true;
+	ipListSelect.appendChild(headerOption);
+
+	ipSetLists.forEach((ipSet) => {
+		const ipOption = document.createElement('option');
+		ipOption.textContent = ipSet.name;
+		ipOption.value = `ipset:${ipSet.name}`;
+		ipListSelect.appendChild(ipOption);
+	});
+}

web/js/src/helpers.js

@@ -37,6 +37,12 @@ export function showSpinner() {
 	document.querySelector('.js-spinner').classList.add('active');
 }
 
+// Parses and sorts IP lists from HTML
+export function parseAndSortIpLists(ipListsData) {
+	const ipLists = JSON.parse(ipListsData || '[]');
+	return ipLists.sort((a, b) => a.name.localeCompare(b.name));
+}
+
 // Creates a confirmation <dialog> on the fly
 export function createConfirmationDialog({
 	title,

web/js/src/ipListDataSource.js

@@ -1,3 +1,5 @@
+import { parseAndSortIpLists } from './helpers';
+
 // Populates the "Data Source" select with various IP lists on the New IP List page
 export default function handleIpListDataSource() {
 	const dataSourceSelect = document.querySelector('.js-datasource-select');
@@ -7,26 +9,21 @@ export default function handleIpListDataSource() {
 	}
 
 	// Parse IP lists from HTML and sort them alphabetically
-	const countryIplists = parseAndSortIplists(dataSourceSelect.dataset.countryIplists);
-	const blacklistIplists = parseAndSortIplists(dataSourceSelect.dataset.blacklistIplists);
+	const countryIpLists = parseAndSortIpLists(dataSourceSelect.dataset.countryIpLists);
+	const blacklistIpLists = parseAndSortIpLists(dataSourceSelect.dataset.blacklistIpLists);
 
 	// Add IP lists to the "Data Source" select
-	addIPListsToSelect(dataSourceSelect, Alpine.store('globals').BLACKLIST, blacklistIplists);
-	addIPListsToSelect(dataSourceSelect, Alpine.store('globals').IPVERSE, countryIplists);
-}
-
-function parseAndSortIplists(iplistsData) {
-	const iplists = JSON.parse(iplistsData || '[]');
-	return iplists.sort((a, b) => a.name.localeCompare(b.name));
+	addIPListsToSelect(dataSourceSelect, Alpine.store('globals').BLACKLIST, blacklistIpLists);
+	addIPListsToSelect(dataSourceSelect, Alpine.store('globals').IPVERSE, countryIpLists);
 }
 
-function addIPListsToSelect(dataSourceSelect, label, iplists) {
+function addIPListsToSelect(dataSourceSelect, label, ipLists) {
 	// Add a disabled option as a label
 	addOption(dataSourceSelect, label, '', true);
 
 	// Add IP lists to the select element
-	iplists.forEach((iplist) => {
-		addOption(dataSourceSelect, iplist.name, iplist.source, false);
+	ipLists.forEach((ipList) => {
+		addOption(dataSourceSelect, ipList.name, ipList.source, false);
 	});
 }
 

web/js/src/main.js

@@ -1,5 +1,6 @@
 import alpineInit from './alpineInit';
 import focusFirstInput from './focusFirstInput';
+import handleAddIpLists from './addIpLists';
 import handleConfirmAction from './confirmAction';
 import handleCopyCreds from './copyCreds';
 import handleCronGenerator from './cronGenerator';
@@ -32,6 +33,7 @@ initListeners();
 focusFirstInput();
 
 function initListeners() {
+	handleAddIpLists();
 	handleConfirmAction();
 	handleCopyCreds();
 	handleCronGenerator();

web/templates/pages/add_firewall.php

@@ -50,7 +50,12 @@
 					<?= _("IP address / IPset") ?> <span class="optional">(<?= _("CIDR format is supported") ?>)</span>
 				</label>
 				<div class="u-pos-relative">
-					<select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
+					<select
+						class="form-select js-ip-list-select"
+						tabindex="-1"
+						onchange="this.nextElementSibling.value=this.value"
+						data-ipset-lists="<?= htmlspecialchars($ipset_lists_json, ENT_QUOTES, 'UTF-8') ?>"
+					>
 						<option value="">&nbsp;</option>
 					</select>
 					<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?= htmlentities(trim($v_ip, "'")) ?>">
@@ -67,24 +72,3 @@
 	</form>
 
 </div>
-
-<script>
-	var ipLists = JSON.parse('<?= $ipset_lists_json ?>');
-	ipLists.sort(function (a, b) {
-		return a.name > b.name;
-	});
-
-	var targetElement = document.getElementById('quickips_list');
-
-	var newEl = document.createElement("option");
-	newEl.text = "IP address lists:";
-	newEl.disabled = true;
-	targetElement.appendChild(newEl);
-
-	ipLists.forEach(iplist => {
-		var newEl = document.createElement("option");
-		newEl.text = iplist.name;
-		newEl.value = "ipset:" + iplist.name;
-		targetElement.appendChild(newEl);
-	});
-</script>

web/templates/pages/edit_firewall.php

@@ -50,7 +50,12 @@
 					<?= _("IP address / IPset") ?> <span class="optional">(<?= _("CIDR format is supported") ?>)</span>
 				</label>
 				<div class="u-pos-relative">
-					<select class="form-select" tabindex="-1" id="quickips_list" onchange="this.nextElementSibling.value=this.value">
+					<select
+						class="form-select js-ip-list-select"
+						tabindex="-1"
+						onchange="this.nextElementSibling.value=this.value"
+						data-ipset-lists="<?= htmlspecialchars($ipset_lists_json, ENT_QUOTES, 'UTF-8') ?>"
+					>
 						<option value="">&nbsp;</option>
 					</select>
 					<input type="text" class="form-control list-editor" name="v_ip" id="v_ip" value="<?= htmlentities(trim($v_ip, "'")) ?>">
@@ -67,24 +72,3 @@
 	</form>
 
 </div>
-
-<script>
-	var ipLists = JSON.parse('<?= $ipset_lists_json ?>');
-	ipLists.sort(function (a, b) {
-		return a.name > b.name;
-	});
-
-	var targetElement = document.getElementById('quickips_list');
-
-	var newEl = document.createElement("option");
-	newEl.text = "IP address lists:";
-	newEl.disabled = true;
-	targetElement.appendChild(newEl);
-
-	ipLists.forEach(iplist => {
-		var newEl = document.createElement("option");
-		newEl.text = iplist.name;
-		newEl.value = "ipset:" + iplist.name;
-		targetElement.appendChild(newEl);
-	});
-</script>