zoneconf.cgi: Add NIC selection highlighting

This improves the usability of the zone configuration by marking assigned
NICs in the zone color. The highlighting is initially applied to the static
HTML output, and JavaScript is used to follow changes made by the user.

Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/config/rootfiles/common/web-user-interface b/config/rootfiles/common/web-user-interface
index 44856fcc22274e170869e5bedac9d60fb10676e8..3eac4411af1af1ff20fb165bfae4320f9619426c 100644 (file)
--- a/config/rootfiles/common/web-user-interface
+++ b/config/rootfiles/common/web-user-interface
@@ -308,6 +308,7 @@ srv/web/ipfire/html/images/wakeup.gif
 srv/web/ipfire/html/images/window-new.png
 srv/web/ipfire/html/include
 srv/web/ipfire/html/include/snortupdateutility.js
+srv/web/ipfire/html/include/zoneconf.js
 srv/web/ipfire/html/index.cgi
 srv/web/ipfire/html/redirect-templates
 srv/web/ipfire/html/redirect-templates/legacy

diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
index ef361af9544a6aee6afc6fa3556df9b811b59d7e..0914ceb78ea5b23a51f359a843677630b4073ce6 100644 (file)
--- a/html/cgi-bin/zoneconf.cgi
+++ b/html/cgi-bin/zoneconf.cgi
@@ -26,7 +26,7 @@ require '/var/ipfire/general-functions.pl';
 require "${General::swroot}/lang.pl";
 require "${General::swroot}/header.pl";
 
-my $css = <<END
+my $extraHead = <<END
 <style>
        table#zoneconf {
                width: 100%;
@@ -101,6 +101,8 @@ my $css = <<END
                margin-left: auto;
        }
 </style>
+
+<script src="/include/zoneconf.js"></script>
 END
 ;
 
@@ -151,7 +153,7 @@ foreach (@nics) {
        }
 }
 
-&Header::openpage($Lang::tr{"zoneconf title"}, 1, $css);
+&Header::openpage($Lang::tr{"zoneconf title"}, 1, $extraHead);
 &Header::openbigbox('100%', 'center');
 
 ### Evaluate POST parameters ###
@@ -364,6 +366,7 @@ foreach (@nics) {
        foreach (@zones) {
                my $uc = uc $_;
                my $dev_name = $ethsettings{"${uc}_DEV"};
+               my $highlight = "";
 
                if ($dev_name eq "") { # Again, skip the zone if it is not activated
                        next;
@@ -379,11 +382,12 @@ foreach (@nics) {
 
                                if ($mac eq $ethsettings{"${uc}_MACADDR"}) {
                                        $checked = "checked";
+                                       $highlight = $_;
                                }
 
                                print <<END
-               <td class="">
-                       <input type="radio" name="PPPACCESS" value="$mac" $checked>
+               <td class="$highlight">
+                       <input type="radio" name="PPPACCESS" value="$mac" data-zone="RED" data-mac="$mac" onchange="highlightAccess(this)" $checked>
                </td>
 END
 ;
@@ -424,9 +428,14 @@ END
                $access_selected{"NONE"} = ($access_selected{"NATIVE"} eq "") && ($access_selected{"VLAN"} eq "") ? "selected" : "";
                my $vlan_disabled = ($wlan) ? "disabled" : "";
 
+               # If the interface is assigned, hightlight table cell
+               if ($access_selected{"NONE"} eq "") {
+                       $highlight = $_;
+               }
+
                print <<END
-               <td class="">
-                       <select name="ACCESS $uc $mac" onchange="document.getElementById('TAG-$uc-$mac').disabled = (this.value === 'VLAN' ? false : true)">
+               <td class="$highlight">
+                       <select name="ACCESS $uc $mac" data-zone="$uc" data-mac="$mac" onchange="highlightAccess(this)">
                                <option value="NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf access none"} -</option>
                                <option value="NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
                                <option value="VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>

diff --git a/html/html/include/zoneconf.js b/html/html/include/zoneconf.js
new file mode 100644 (file)
index 0000000..d76f0ab
--- /dev/null
+++ b/html/html/include/zoneconf.js
@@ -0,0 +1,56 @@
+/*#############################################################################
+#                                                                             #
+# IPFire.org - A linux based firewall                                         #
+# Copyright (C) 2007-2020  IPFire Team  <info@ipfire.org>                     #
+#                                                                             #
+# This program is free software: you can redistribute it and/or modify        #
+# it under the terms of the GNU General Public License as published by        #
+# the Free Software Foundation, either version 3 of the License, or           #
+# (at your option) any later version.                                         #
+#                                                                             #
+# This program is distributed in the hope that it will be useful,             #
+# but WITHOUT ANY WARRANTY; without even the implied warranty of              #
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the               #
+# GNU General Public License for more details.                                #
+#                                                                             #
+# You should have received a copy of the GNU General Public License           #
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.       #
+#                                                                             #
+#############################################################################*/
+
+//zoneconf.cgi dynamic highlighting of interface access selection
+//(call this from "onchange" event of selection elements)
+function highlightAccess(selectObj) {
+       if(!(selectObj && ('zone' in selectObj.dataset) && ('mac' in selectObj.dataset))) {
+               return; //required parameters are missing
+       }
+
+       var zoneColor = selectObj.dataset.zone.trim().toLowerCase(); //zone color (red/green/blue/orange) CSS class
+
+       function colorParentCell(obj, color, enabled = true) { //find nearest parent table cell of "obj" and set its CSS color class
+               do {
+                       obj = obj.parentElement;
+               } while(obj && (obj.nodeName.toUpperCase() !== 'TD'));
+               if(obj && (['green', 'red', 'orange', 'blue'].includes(color))) {
+                       obj.classList.toggle(color, enabled);
+               }
+       }
+
+       //handle other associated input fields
+       if(selectObj.type.toUpperCase() === 'RADIO') { //this is a radio button group: clear all highlights
+               let radios = document.getElementsByName(selectObj.name);
+               radios.forEach(function(button) {
+                       if(button.nodeName.toUpperCase() === 'INPUT') { //make sure the found element is a button
+                               colorParentCell(button, zoneColor, false); //remove css
+                       }
+               });
+       } else { //this is a dropdown menu: enable/disable additional VLAN tag input box
+               let tagInput = document.getElementById('TAG-' + selectObj.dataset.zone + '-' + selectObj.dataset.mac); //tag input element selector
+               if(tagInput) {
+                       tagInput.disabled = (selectObj.value !== 'VLAN'); //enable tag input if VLAN mode selected
+               }
+       }
+
+       //if interface is assigned, highlight table cell in zone color
+       colorParentCell(selectObj, zoneColor, (selectObj.value !== 'NONE'));
+}