From patchwork Tue Nov 17 06:29:04 2020 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit X-Patchwork-Submitter: Leo-Andres Hofmann X-Patchwork-Id: 3668 Return-Path: Received: from mail01.ipfire.org (mail01.haj.ipfire.org [172.28.1.202]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature ECDSA (P-384) client-signature ECDSA (P-384)) (Client CN "mail01.haj.ipfire.org", Issuer "Let's Encrypt Authority X3" (verified OK)) by web04.haj.ipfire.org (Postfix) with ESMTPS id 4CZwyY64q6z3wlY for ; Tue, 17 Nov 2020 06:29:25 +0000 (UTC) Received: from mail02.haj.ipfire.org (mail02.haj.ipfire.org [172.28.1.201]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature ECDSA (P-384) client-signature ECDSA (P-384)) (Client CN "mail02.haj.ipfire.org", Issuer "Let's Encrypt Authority X3" (verified OK)) by mail01.ipfire.org (Postfix) with ESMTPS id 4CZwyT22Lhz1qv; Tue, 17 Nov 2020 06:29:21 +0000 (UTC) Received: from mail02.haj.ipfire.org (localhost [127.0.0.1]) by mail02.haj.ipfire.org (Postfix) with ESMTP id 4CZwyT1TJ9z2ygf; Tue, 17 Nov 2020 06:29:21 +0000 (UTC) Received: from mail01.ipfire.org (mail01.haj.ipfire.org [172.28.1.202]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature ECDSA (P-384) client-signature ECDSA (P-384)) (Client CN "mail01.haj.ipfire.org", Issuer "Let's Encrypt Authority X3" (verified OK)) by mail02.haj.ipfire.org (Postfix) with ESMTPS id 4CZwyR4Ycbz2y3s for ; Tue, 17 Nov 2020 06:29:19 +0000 (UTC) Received: from arche.uberspace.de (arche.uberspace.de [185.26.156.147]) (using TLSv1.2 with cipher ECDHE-ECDSA-AES256-GCM-SHA384 (256/256 bits)) (Client did not present a certificate) by mail01.ipfire.org (Postfix) with ESMTPS id 4CZwyQ5D2rzj7 for ; Tue, 17 Nov 2020 06:29:18 +0000 (UTC) Received: (qmail 11069 invoked from network); 17 Nov 2020 06:29:18 -0000 Received: from localhost (HELO localhost) (127.0.0.1) by arche.uberspace.de with SMTP; 17 Nov 2020 06:29:18 -0000 From: Leo-Andres Hofmann To: development@lists.ipfire.org Subject: [PATCH 4/4] zoneconf.cgi: Add NIC selection highlighting Date: Tue, 17 Nov 2020 07:29:04 +0100 Message-Id: <20201117062904.1547-4-hofmann@leo-andres.de> X-Mailer: git-send-email 2.27.0.windows.1 In-Reply-To: <20201117062904.1547-1-hofmann@leo-andres.de> References: <20201117062904.1547-1-hofmann@leo-andres.de> MIME-Version: 1.0 ARC-Authentication-Results: i=1; mail01.ipfire.org; dkim=none; dmarc=none; spf=pass (mail01.ipfire.org: domain of hofmann@leo-andres.de designates 185.26.156.147 as permitted sender) smtp.mailfrom=hofmann@leo-andres.de ARC-Seal: i=1; s=202003rsa; d=lists.ipfire.org; t=1605594558; a=rsa-sha256; cv=none; b=iCziCR6M0CbkZ7PD1xhTFZDg95Roe3u55cH9P73rvkyhD7rgCa4ldI055/zO7j+FnaJ3h6 gtznEw1w+3cautFvFasbMdSQX47YycAim6eGXUcYxmYNg/giwl1Touc6q5JIZznwaLKUwL UizwaKoSgy3NIc5jbK9SMXlVTMML7yMaXdSmtYP/f4+2Vu3bq2KvxtKQ9hil1/omhX2dSf mTttVlKkOkUUztplxo8FE6KDwg4B0NwVJnhOyjwg0cvjr/uz549JK/gLpmAFKffiEYecXb GFZz/nJi4KPApi/tY47R1wJKBIBm/ArfxFVcJ4k3gjfo5MBxnjd5Ye2Tt5v2kw== ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=lists.ipfire.org; s=202003rsa; t=1605594558; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version: content-transfer-encoding:content-transfer-encoding: in-reply-to:in-reply-to:references:references; bh=e4ehhl6enoAm0gUSm4wxG2GvxVjCUAL5yIdR1+vVz4M=; b=He29LwXJZ6+6koYjPMNQj7VytfTRkoTJD679r8I/05RHzP1Q5qkn7uyZXuzBuNlkxIo8P6 1SJ08Bo6s+cj00Xpl2k0edwS5bgEWfu3lANYxYd4bnLSduFkJJl1vkQ0cSXYmRXM9nuwM9 maAPZtgUGntF/nM0A6L8uyZhmC1N2tSV2xngrxCWpImfRdGa5nEB9F7ycB3wszK2jCThik Eh5K2OcIXUZCNMg5j06RGUneuYhu0+4l3IsOJJVhw40oOYk2WHAX6OoEe2CGrT2OFukM3D kptBhLOLhTeVP1lBKwPgNc54g1t7jlHqlPRzVuj/OiW4s+iHeINoLNNdaOsXNA== X-Rspamd-Server: mail01.haj.ipfire.org X-Spamd-Result: default: False [0.69 / 11.00]; ARC_NA(0.00)[]; BAYES_HAM(-3.00)[99.99%]; FROM_HAS_DN(0.00)[]; R_SPF_ALLOW(-0.20)[+mx:c]; R_MISSING_CHARSET(2.50)[]; MIME_GOOD(-0.10)[text/plain]; TO_DN_NONE(0.00)[]; BROKEN_CONTENT_TYPE(1.50)[]; RCPT_COUNT_ONE(0.00)[1]; RCVD_TLS_LAST(0.00)[]; TO_MATCH_ENVRCPT_ALL(0.00)[]; MID_CONTAINS_FROM(1.00)[]; NEURAL_HAM(-1.00)[-1.000]; IP_REPUTATION_HAM(-0.01)[asn: 205766(0.00), country: DE(-0.00), ip: 185.26.156.147(0.00)]; DMARC_NA(0.00)[leo-andres.de]; FROM_EQ_ENVFROM(0.00)[]; R_DKIM_NA(0.00)[]; MIME_TRACE(0.00)[0:+]; ASN(0.00)[asn:205766, ipnet:185.26.156.0/24, country:DE]; RCVD_COUNT_TWO(0.00)[2]; ARC_SIGNED(0.00)[lists.ipfire.org:s=202003rsa:i=1] X-Rspamd-Queue-Id: 4CZwyQ5D2rzj7 Authentication-Results: mail01.ipfire.org; dkim=none; dmarc=none; spf=pass (mail01.ipfire.org: domain of hofmann@leo-andres.de designates 185.26.156.147 as permitted sender) smtp.mailfrom=hofmann@leo-andres.de X-BeenThere: development@lists.ipfire.org X-Mailman-Version: 2.1.29 Precedence: list List-Id: IPFire development talk List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: development-bounces@lists.ipfire.org Sender: "Development" 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 --- config/rootfiles/common/web-user-interface | 1 + html/cgi-bin/zoneconf.cgi | 21 +++++--- html/html/include/zoneconf.js | 56 ++++++++++++++++++++++ 3 files changed, 72 insertions(+), 6 deletions(-) create mode 100644 html/html/include/zoneconf.js diff --git a/config/rootfiles/common/web-user-interface b/config/rootfiles/common/web-user-interface index 44856fcc2..3eac4411a 100644 --- 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 ef361af95..0914ceb78 100644 --- 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 = < table#zoneconf { width: 100%; @@ -101,6 +101,8 @@ my $css = < + + 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 ; @@ -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 < - diff --git a/html/html/include/zoneconf.js b/html/html/include/zoneconf.js new file mode 100644 index 000000000..d76f0ab68 --- /dev/null +++ b/html/html/include/zoneconf.js @@ -0,0 +1,56 @@ +/*############################################################################# +# # +# IPFire.org - A linux based firewall # +# Copyright (C) 2007-2020 IPFire Team # +# # +# 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 . # +# # +#############################################################################*/ + +//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')); +}