* [PATCH 2/4] WUI: Refactor rrdimage JavaScript
2023-04-01 14:43 [PATCH 1/4] WUI: Start implementing a simple JavaScript framework Leo-Andres Hofmann
@ 2023-04-01 14:43 ` Leo-Andres Hofmann
2023-04-01 14:43 ` [PATCH 3/4] WUI: Implement form confirmation dialog Leo-Andres Hofmann
` (2 subsequent siblings)
3 siblings, 0 replies; 5+ messages in thread
From: Leo-Andres Hofmann @ 2023-04-01 14:43 UTC (permalink / raw)
To: development
[-- Attachment #1: Type: text/plain, Size: 10506 bytes --]
This migrates the rrdimage.js functions to the new WUI framework
and improves some functions.
Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
---
config/cfgroot/graphs.pl | 2 +-
html/html/include/rrdimage.js | 122 -------------------
html/html/include/wui_rrdimage.mjs | 103 +++++++++++++++-
html/html/themes/ipfire/include/functions.pl | 1 -
4 files changed, 102 insertions(+), 126 deletions(-)
delete mode 100644 html/html/include/rrdimage.js
diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl
index 9803dd124..a637e1a6a 100644
--- a/config/cfgroot/graphs.pl
+++ b/config/cfgroot/graphs.pl
@@ -118,7 +118,7 @@ END
# Print range select buttons
foreach my $range (@time_ranges) {
print <<END;
- <li><button data-range="$range" onclick="rrdimage_selectRange(this)">$Lang::tr{$range}</button></li>
+ <li><button type="button" data-range="$range">$Lang::tr{$range}</button></li>
END
}
diff --git a/html/html/include/rrdimage.js b/html/html/include/rrdimage.js
deleted file mode 100644
index c6f5930c9..000000000
--- a/html/html/include/rrdimage.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*#############################################################################
-# #
-# IPFire.org - A linux based firewall #
-# Copyright (C) 2007-2021 IPFire Team <info(a)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/>. #
-# #
-#############################################################################*/
-
-// "onclick" event handler for graph time range select button
-// buttonObj: reference to the button
-function rrdimage_selectRange(buttonObj) {
- if(! (buttonObj && ('range' in buttonObj.dataset))) {
- return; //required parameters are missing
- }
-
- // Get selected time range from button
- const range = buttonObj.dataset.range;
-
- // Get surrounding div box and select new range
- let graphBox = $(buttonObj).closest('div');
- _rrdimg_setRange(graphBox, range);
-}
-
-// Document loaded: Process all graphs, start reload timers
-$(function() {
- $('div.rrdimage').each(function() {
- let graphBox = $(this);
- _rrdimg_setRange(graphBox, graphBox.data('defaultRange'), true);
- });
-});
-
-//--- Internal functions ---
-
-// Set or update graph time range, start automatic reloading
-// graphBox: jQuery object, reference to graph div box
-// range: time range (day, hour, ...)
-// initMode: don't immediately reload graph, but force timers and attributes update
-function _rrdimg_setRange(graphBox, range, initMode = false) {
- if(! ((graphBox instanceof jQuery) && (graphBox.length === 1))) {
- return; //graphBox element missing
- }
-
- // Check range parameter, default to "day" on error
- if(! ["hour", "day", "week", "month", "year"].includes(range)) {
- range = "day";
- }
-
- // Check if the time range is changed
- if((graphBox.data('range') !== range) || initMode) {
- graphBox.data('range', range); //Store new range
-
- // Update button highlighting
- graphBox.find('button').removeClass('selected');
- graphBox.find(`button[data-range="${range}"]`).addClass('selected');
- }
-
- // Clear pending reload timer to prevent multiple image reloads
- let timerId = graphBox.data('reloadTimer');
- if(timerId !== undefined) {
- window.clearInterval(timerId);
- graphBox.removeData('reloadTimer');
- }
-
- // Determine auto reload interval (in seconds),
- // interval = 0 disables auto reloading by default
- let interval = 0;
- switch(range) {
- case 'hour':
- interval = 60;
- break;
-
- case 'day':
- case 'week':
- interval = 300;
- break;
- }
-
- // Start reload timer and store reference
- if(interval > 0) {
- timerId = window.setInterval(function(graphRef) {
- _rrdimg_reload(graphRef);
- }, interval * 1000, graphBox);
- graphBox.data('reloadTimer', timerId);
- }
-
- // Always reload image unless disabled by init mode
- if(! initMode) {
- _rrdimg_reload(graphBox);
- }
-}
-
-// Reload graph image, add timestamp to prevent caching
-// graphBox: jQuery object (graph element must be valid)
-function _rrdimg_reload(graphBox) {
- const origin = graphBox.data('origin');
- const graph = graphBox.data('graph');
- const timestamp = Date.now();
-
- // Get user selected range or fall back to default
- let range = graphBox.data('range');
- if(! range) {
- range = graphBox.data('defaultRange');
- }
-
- // Generate new image URL with timestamp
- const imageUrl = `/cgi-bin/getrrdimage.cgi?origin=${origin}&graph=${graph}&range=${range}×tamp=${timestamp}`;
-
- // Get graph image and set new URL
- graphBox.children('img').first().attr('src', imageUrl);
-}
diff --git a/html/html/include/wui_rrdimage.mjs b/html/html/include/wui_rrdimage.mjs
index 5254b1e98..64b34dfac 100644
--- a/html/html/include/wui_rrdimage.mjs
+++ b/html/html/include/wui_rrdimage.mjs
@@ -24,7 +24,106 @@ import {WUIcore_moduleBase as WUI_module} from "./wui_core.mjs";
//--- RRDtool graph images ---
export class WUImodule_rrdimage extends WUI_module {
- constructor(translations) {
- super(translations);
+
+ // DOMContentLoaded/jQuery.ready event handler
+ _handleDOMReady() {
+ super._handleDOMReady();
+
+ // Process all graphs, start reload timers
+ $("div.rrdimage").each((i, divElem) => {
+ const $graphBox = $(divElem);
+ this.#updateProperties($graphBox, $graphBox.data("defaultRange"), true);
+
+ // Attach event listeners to buttons
+ $graphBox.find("button[data-range]").each((j, buttonElem) => {
+ const $rangeBtn = $(buttonElem);
+ $rangeBtn.on(`click.${this.namespace}`, {"graphBox": $graphBox, "range": $rangeBtn.data("range")}, this.#handleRangeClick.bind(this));
+ });
+ });
+ }
+
+ // Graph range select button "click" event handler
+ #handleRangeClick(event) {
+ event.preventDefault();
+
+ this.#updateProperties(event.data["graphBox"], event.data["range"]);
+ }
+
+ // Update graph range
+ // $graphBox: jQuery object, reference to a single graph div box
+ // range: time range (day, hour, ...)
+ setRange($graphBox, range) {
+ if(($graphBox instanceof jQuery) && ($graphBox.length === 1)) {
+ this.#updateProperties($graphBox, range);
+ }
+ }
+
+ // Update graph range properties, configure automatic reloading
+ // $graphBox: jQuery object, reference to graph div box
+ // range: time range (day, hour, ...)
+ // initialize: don't immediately reload graph, but force timers and attributes update
+ #updateProperties($graphBox, range, initialize = false) {
+ // Check range parameter, default to "day" on error
+ if(! ["hour", "day", "week", "month", "year"].includes(range)) {
+ range = "day";
+ }
+
+ // Check if the time range is changed
+ if(($graphBox.data("range") !== range) || initialize) {
+ $graphBox.data("range", range); //Store new range
+
+ // Update button highlighting
+ $graphBox.find("button[data-range]").removeClass("selected");
+ $graphBox.find(`button[data-range="${range}"]`).addClass("selected");
+ }
+
+ // Clear pending reload timer to prevent multiple image reloads
+ let timerId = $graphBox.data("reloadTimer");
+ if(typeof timerId !== "undefined") {
+ window.clearInterval(timerId);
+ $graphBox.removeData("reloadTimer");
+ }
+
+ // Determine auto reload interval (in seconds),
+ // interval = 0 disables auto reloading by default
+ let interval = 0;
+ switch(range) {
+ case "hour":
+ interval = 60;
+ break;
+
+ case "day":
+ case "week":
+ interval = 300;
+ break;
+ }
+
+ // Start reload timer and store reference
+ if(interval > 0) {
+ timerId = window.setInterval(this.#reloadImage.bind(this), interval * 1000, $graphBox);
+ $graphBox.data("reloadTimer", timerId);
+ }
+
+ // Always reload image unless disabled by init mode
+ if(! initialize) {
+ this.#reloadImage($graphBox);
+ }
+ }
+
+ // Reload graph image, add timestamp to prevent caching
+ // $graphBox: jQuery object (graph element must be valid/previously processed by updateRange)
+ #reloadImage($graphBox) {
+ const origin = $graphBox.data("origin");
+ const graph = $graphBox.data("graph");
+
+ // Get user selected range or fall back to default
+ const range = $graphBox.data("range") ?? $graphBox.data("defaultRange");
+
+ // Generate new image URL with timestamp
+ const timestamp = Date.now();
+ const imageUrl = `/cgi-bin/getrrdimage.cgi?origin=${origin}&graph=${graph}&range=${range}×tamp=${timestamp}`;
+
+ // Get graph image and set new URL
+ $graphBox.children("img").first().attr("src", imageUrl);
}
}
diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/themes/ipfire/include/functions.pl
index 445597e51..bc66d7fdb 100644
--- a/html/html/themes/ipfire/include/functions.pl
+++ b/html/html/themes/ipfire/include/functions.pl
@@ -115,7 +115,6 @@ print <<END;
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/include/jquery.js"></script>
<script src="/include/wui.js" type="module"></script>
- <script src="/include/rrdimage.js"></script>
$extrahead
<script type="text/javascript">
--
2.37.1.windows.1
^ permalink raw reply [flat|nested] 5+ messages in thread* [PATCH 3/4] WUI: Implement form confirmation dialog
2023-04-01 14:43 [PATCH 1/4] WUI: Start implementing a simple JavaScript framework Leo-Andres Hofmann
2023-04-01 14:43 ` [PATCH 2/4] WUI: Refactor rrdimage JavaScript Leo-Andres Hofmann
@ 2023-04-01 14:43 ` Leo-Andres Hofmann
2023-04-01 14:43 ` [PATCH 4/4] ovpnmain.cgi: Add confirm dialog to delete form Leo-Andres Hofmann
2023-04-11 12:58 ` [PATCH 1/4] WUI: Start implementing a simple JavaScript framework Michael Tremer
3 siblings, 0 replies; 5+ messages in thread
From: Leo-Andres Hofmann @ 2023-04-01 14:43 UTC (permalink / raw)
To: development
[-- Attachment #1: Type: text/plain, Size: 13539 bytes --]
This patch adds a modal confirmation dialog for HTML forms.
The dialog can be invoked by setting the "data-confirm-message"
attribute on the form. Default texts can be overridden with the
"data-confirm-title" and "data-confirm-subheading" attributes.
Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
---
html/html/include/wui.js | 6 ++
html/html/include/wui_core.mjs | 77 ++++++++++++++-
html/html/include/wui_dialogs.mjs | 97 +++++++++++++++++++
html/html/themes/ipfire/include/css/style.css | 75 ++++++++++++++
html/html/themes/ipfire/include/functions.pl | 28 ++++++
langs/en/cgi-bin/en.pl | 4 +
6 files changed, 286 insertions(+), 1 deletion(-)
create mode 100644 html/html/include/wui_dialogs.mjs
diff --git a/html/html/include/wui.js b/html/html/include/wui.js
index e65924e29..e219f5ca4 100644
--- a/html/html/include/wui.js
+++ b/html/html/include/wui.js
@@ -23,6 +23,7 @@
import {WUIcore_i18n as WUI_i18n} from "./wui_core.mjs";
+import {WUIdialog_confirm as WUI_confirm} from "./wui_dialogs.mjs";
import {WUImodule_rrdimage as WUI_rrdimage} from "./wui_rrdimage.mjs";
//--- WUI main class ---
@@ -33,11 +34,16 @@ class WUImain {
this.i18n = new WUI_i18n();
//- Modules -
+ // Dialogs
+ this.dialogs = {};
+ this.dialogs.confirm = new WUI_confirm(this.i18n);
+
// RRDtool graph images
this.rrdimage = new WUI_rrdimage(this.i18n);
//- Defaults -
// These modules are available on every page:
+ this.dialogs.confirm.enabled = true;
this.rrdimage.enabled = true;
}
}
diff --git a/html/html/include/wui_core.mjs b/html/html/include/wui_core.mjs
index b7b729396..ab5338f12 100644
--- a/html/html/include/wui_core.mjs
+++ b/html/html/include/wui_core.mjs
@@ -27,7 +27,7 @@ export class WUIcore_moduleBase {
//- Private properties -
#enabled; // Activation state, disabled by default
#readyState; // Loading state similar to Document.readyState
- #namespace; // Namespace derived from the class name (without "WUImod_" prefix)
+ #namespace; // Namespace derived from the class name (without "WUImodule_"/"WUIdialog_" prefix)
//- Class constructor -
constructor(translations) {
@@ -101,6 +101,81 @@ export class WUIcore_moduleBase {
}
}
+//--- Modal dialog template ---
+// Make sure that overridden functions are still executed with super()!
+// Text fields and buttons are identified by their data-... attributes:
+// data-textbox="foo", data-action="bar". See setText for reference.
+// Events should only be managed by the modules, there is no public interface by design.
+export class WUIcore_dialogBase extends WUIcore_moduleBase {
+ //- Private properties -
+ #modalId; // Element ID of the overlay div box with dialog window
+
+ //- Class constructor -
+ constructor(translations) {
+ super(translations);
+
+ //- Protected properties -
+ // jQuery object, reference to dialog div box
+ this._$modal = $();
+ }
+
+ // DOMContentLoaded/jQuery.ready event handler
+ _handleDOMReady() {
+ super._handleDOMReady();
+
+ // modalId was set before, but the document was not ready yet
+ if(this.modalId && (! this.hasModal)) {
+ this._$modal = $(`#${this.modalId}`).first();
+ }
+ }
+
+ // Element ID of dialog overlay div box
+ // This element must be hidden by default and render a modal dialog when activated.
+ set modalId(id) {
+ this.#modalId = id;
+
+ // Delay attaching element until DOM is ready
+ if(this.readyState === "complete") {
+ this._$modal = $(`#${id}`).first();
+ }
+ }
+ get modalId() {
+ return this.#modalId;
+ }
+
+ // Check if modal dialog element has been attached
+ get hasModal() {
+ return (this._$modal.length === 1);
+ }
+
+ // Show/hide modal overlay by setting CSS "display" property
+ // The top modal element should always be a simple overlay, so that display=block does not disturb the layout.
+ showModal() {
+ this._$modal.css("display", "block");
+ }
+ hideModal() {
+ this._$modal.css("display", "none");
+ }
+ get isVisible() {
+ return (this._$modal.css("display") === "block");
+ }
+
+ // Set text field content. Fields are identified by their data-textbox attribute:
+ // <span data-textbox="message"></span> -> field "message"
+ setText(field, value) {
+ this._$modal.find(`[data-textbox="${field}"]`).text(value);
+ }
+
+ //### Protected properties ###
+
+ // Get a dialog window button as a jQuery object. Buttons are identified by their data-action attribute:
+ // <button type="button" data-action="submit">OK</button> -> action "submit"
+ // Button actions must be unique within the modal window. Events are managed internally only, do not add custom handlers.
+ _$getButton(action) {
+ return this._$modal.find(`button[data-action="${action}"]`).first();
+ }
+}
+
//--- Simple translation strings helper ---
export class WUIcore_i18n {
//- Private properties -
diff --git a/html/html/include/wui_dialogs.mjs b/html/html/include/wui_dialogs.mjs
new file mode 100644
index 000000000..a2b3bdbb4
--- /dev/null
+++ b/html/html/include/wui_dialogs.mjs
@@ -0,0 +1,97 @@
+/*#############################################################################
+# #
+# IPFire.org - A linux based firewall #
+# Copyright (C) 2007-2023 IPFire Team <info(a)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/>. #
+# #
+#############################################################################*/
+
+// IPFire Web User Interface - JavaScript module
+
+import {WUIcore_dialogBase as WUI_dialog} from "./wui_core.mjs";
+
+//--- Form submit confirm dialog ---
+// Text fields: data-textbox "title" "subheading" "message"
+// Buttons: data-action "submit" "cancel" "close"
+export class WUIdialog_confirm extends WUI_dialog {
+
+ // DOMContentLoaded/jQuery.ready event handler
+ _handleDOMReady() {
+ super._handleDOMReady();
+
+ // Process all forms with confirmation request, attach submit events
+ $("form[data-confirm-message]").each((i, formElem) => {
+ const $form = $(formElem);
+ $form.on(`submit.${this.namespace}`, {"form": $form, "message": $form.data("confirmMessage")}, this.#handleFormSubmit.bind(this));
+ });
+ }
+
+ // Form with confirmation "submit" event handler
+ async #handleFormSubmit(event) {
+ event.preventDefault();
+
+ const $form = event.data["form"];
+ this.prepareModal(event.data["message"], $form.data("confirmTitle"), $form.data("confirmSubheading"));
+
+ // Show the dialog and wait for user interaction
+ try {
+ const response = await this.requestAsync();
+ if(response === true) {
+ // Trigger native HTML submit() method, since it does not raise another submit event that would cause a loop
+ event.currentTarget.submit();
+ }
+ } catch(error) {
+ // User closed the window, do nothing
+ }
+ }
+
+ // Show modal confirmation request dialog
+ // Returns a promise that resolves true/false upon user interaction and rejects when the window is closed.
+ requestAsync() {
+ // Attach promise to submit/cancel button "click" events
+ const whenConfirm = new Promise((resolve, reject) => {
+ this._$getButton("submit").on(`click.${this.namespace}`, () => { resolve(true); });
+ this._$getButton("cancel").on(`click.${this.namespace}`, () => { resolve(false); });
+
+ this._$getButton("close").on(`click.${this.namespace}`, () => { reject(new Error("dialog window closed")); });
+ }).finally(() => {
+ // Always hide the window and detach all button events after any click,
+ // so that the dialog can be used multiple times without side effects.
+ this.hideModal();
+ this.#clearButtonEvents();
+ });
+
+ // Show dialog, default action is "close"
+ this.showModal();
+ this._$getButton("close").focus();
+
+ return whenConfirm;
+ }
+
+ // Prepare dialog window: set texts, but leave hidden and without events
+ prepareModal(message, title = undefined, subheading = undefined) {
+ this.hideModal();
+ this.#clearButtonEvents();
+
+ this.setText("message", message);
+ this.setText("title", title ?? this._i18n("title"));
+ this.setText("subheading", subheading ?? this._i18n("subheading"));
+ }
+
+ // Remove all active events from dialog window buttons
+ #clearButtonEvents() {
+ this._$modal.find(`button[data-action]`).off(`.${this.namespace}`);
+ }
+}
diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 96d0519f5..f4ef1769c 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -377,3 +377,78 @@ div.rrdimage > img {
max-width: 100%;
min-height: 290px;
}
+
+/* Modal dialog box */
+
+div.dialog-overlay {
+ display: none;
+ z-index: 99;
+
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ overflow: auto;
+
+ background-color: rgba(0, 0, 0, 0.5);
+ animation: fadeIn 0.5s;
+}
+(a)keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+div.dialog-window {
+ top: 15%;
+ width: 550px;
+ margin: auto;
+ padding: 0;
+ position: relative;
+
+ border: 1px solid black;
+ background: #fff url('../../images/n2.gif') 0px 0px repeat-x;
+ border-radius: 3px;
+ box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.7);
+}
+
+.dialog-window .section {
+ box-sizing: border-box;
+ padding: 1em 1.5em;
+ text-align: left;
+}
+.dialog-window .section:not(:last-child) {
+ border-bottom: 1px solid silver;
+}
+
+.dialog-window .header > h3 {
+ display: inline-block;
+ color: #66000F;
+ font-size: 1.6em;
+}
+.dialog-window .header > button[data-action="close"] {
+ border: none;
+ background: none;
+ font-size: 1.2em;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+.dialog-window .content {
+ line-height: 150%;
+}
+
+.dialog-window .header,
+.dialog-window .controls {
+ display:flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+}
+.dialog-window .controls > button {
+ padding: 0.3em;
+ min-width: 35%;
+}
+.dialog-window .controls > button[data-action="submit"] {
+ font-weight: bold;
+}
diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/themes/ipfire/include/functions.pl
index bc66d7fdb..784b2f398 100644
--- a/html/html/themes/ipfire/include/functions.pl
+++ b/html/html/themes/ipfire/include/functions.pl
@@ -217,6 +217,34 @@ print <<END;
<strong>$system_release</strong>
</div>
+
+ <!-- Modal confirm dialog -->
+ <div class="dialog-overlay" id="modal-dialog_confirm">
+ <div class="dialog-window">
+ <div class="section header">
+ <h3 data-textbox="title"></h3>
+ <button type="button" data-action="close">×</button>
+ </div>
+ <div class="section content">
+ <span data-textbox="subheading"></span><br>
+ <strong data-textbox="message"></strong>
+ </div>
+ <div class="section controls">
+ <button type="button" data-action="cancel">$Lang::tr{'dialog confirm cancel'}</button>
+ <button type="button" data-action="submit">$Lang::tr{'dialog confirm submit'}</button>
+ </div>
+ </div>
+ </div>
+ <script type="module">
+ import wui from "/include/wui.js";
+
+ wui.i18n.load({
+ "title": "$Lang::tr{'dialog confirm title'}",
+ "subheading": "$Lang::tr{'dialog confirm subheading'}"
+ }, "confirm");
+
+ wui.dialogs.confirm.modalId = "modal-dialog_confirm";
+ </script>
</body>
</html>
END
diff --git a/langs/en/cgi-bin/en.pl b/langs/en/cgi-bin/en.pl
index 729516538..df9deda53 100644
--- a/langs/en/cgi-bin/en.pl
+++ b/langs/en/cgi-bin/en.pl
@@ -84,6 +84,10 @@
'ConnSched up' => 'Up',
'ConnSched weekdays' => 'Days of the week:',
'Daily' => 'Daily',
+'dialog confirm title' => 'Permanently save changes?',
+'dialog confirm subheading' => 'The following action cannot be undone:',
+'dialog confirm submit' => 'Yes, continue',
+'dialog confirm cancel' => 'No, cancel',
'Disabled' => 'Disabled',
'Edit an existing route' => 'Edit an existing route',
'Enter TOS' => 'Activate or deactivate TOS-bits <br /> and then press <i>Save</i>.',
--
2.37.1.windows.1
^ permalink raw reply [flat|nested] 5+ messages in thread* [PATCH 4/4] ovpnmain.cgi: Add confirm dialog to delete form
2023-04-01 14:43 [PATCH 1/4] WUI: Start implementing a simple JavaScript framework Leo-Andres Hofmann
2023-04-01 14:43 ` [PATCH 2/4] WUI: Refactor rrdimage JavaScript Leo-Andres Hofmann
2023-04-01 14:43 ` [PATCH 3/4] WUI: Implement form confirmation dialog Leo-Andres Hofmann
@ 2023-04-01 14:43 ` Leo-Andres Hofmann
2023-04-11 12:58 ` [PATCH 1/4] WUI: Start implementing a simple JavaScript framework Michael Tremer
3 siblings, 0 replies; 5+ messages in thread
From: Leo-Andres Hofmann @ 2023-04-01 14:43 UTC (permalink / raw)
To: development
[-- Attachment #1: Type: text/plain, Size: 1329 bytes --]
This adds a confirmation dialog to the delete buttons, thus preventing
users from accidentally removing certificates that are still in use.
Fixes: #13058
Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
---
html/cgi-bin/ovpnmain.cgi | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/html/cgi-bin/ovpnmain.cgi b/html/cgi-bin/ovpnmain.cgi
index 87bda4f1e..b0f00fa57 100644
--- a/html/cgi-bin/ovpnmain.cgi
+++ b/html/cgi-bin/ovpnmain.cgi
@@ -5539,7 +5539,7 @@ END
<input type='image' name='$Lang::tr{'edit'}' src='/images/edit.gif' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' width='20' height='20' border='0'/>
<input type='hidden' name='KEY' value='$key' />
</td></form>
- <form method='post' name='frm${key}f'><td align='center' $col>
+ <form method='post' name='frm${key}f' data-confirm-message='$Lang::tr{'remove'} $Lang::tr{$confighash{$key}[3]} ($Lang::tr{$confighash{$key}[4]}): "$confighash{$key}[1]"'><td align='center' $col>
<input type='hidden' name='ACTION' value='$Lang::tr{'remove'}' />
<input type='image' name='$Lang::tr{'remove'}' src='/images/delete.gif' alt='$Lang::tr{'remove'}' title='$Lang::tr{'remove'}' width='20' height='20' border='0' />
<input type='hidden' name='KEY' value='$key' />
--
2.37.1.windows.1
^ permalink raw reply [flat|nested] 5+ messages in thread* Re: [PATCH 1/4] WUI: Start implementing a simple JavaScript framework
2023-04-01 14:43 [PATCH 1/4] WUI: Start implementing a simple JavaScript framework Leo-Andres Hofmann
` (2 preceding siblings ...)
2023-04-01 14:43 ` [PATCH 4/4] ovpnmain.cgi: Add confirm dialog to delete form Leo-Andres Hofmann
@ 2023-04-11 12:58 ` Michael Tremer
3 siblings, 0 replies; 5+ messages in thread
From: Michael Tremer @ 2023-04-11 12:58 UTC (permalink / raw)
To: development
[-- Attachment #1: Type: text/plain, Size: 13186 bytes --]
Hello,
Thanks for the patchset.
It is a lot of code to look through indeed.
> On 1 Apr 2023, at 15:43, Leo-Andres Hofmann <hofmann(a)leo-andres.de> wrote:
>
> This patch is an effort to modernize and unify the WUI JavaScript.
> It will be possible to share e.g. translation strings and common
> functions between the different modules.
>
> This uses native ES6 modules that are supported by all major browsers.
> Therefore, no change to the toolchain is necessary.
>
> Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
> ---
>
> Hi all,
>
> this patchset brings new modern Javascript modules to the webinterface.
I suppose there is no way around this.
Is this all written from scratch? Did you base this on anything or use some existing code as inspiration?
Are they any existing libraries that could be useful for example pulling in the translation?
-Michael
> Still on my to-do/wish list:
> - run make.sh lang
> - convert pakfire.js to a module
> - convert/rewrite refreshInetInfo.js, maybe add load displays to all interfaces in index.cgi
>
> I hope this is in a presentable state to see where it is headed.
> Let me know what you think and as always thanks for reading/testing/reviewing :)
>
> Best,
> Leo
>
>
> config/etc/mime.types | 1 +
> html/html/include/wui.js | 47 ++++++
> html/html/include/wui_core.mjs | 154 +++++++++++++++++++
> html/html/include/wui_rrdimage.mjs | 30 ++++
> html/html/themes/ipfire/include/functions.pl | 3 +-
> 5 files changed, 234 insertions(+), 1 deletion(-)
> create mode 100644 html/html/include/wui.js
> create mode 100644 html/html/include/wui_core.mjs
> create mode 100644 html/html/include/wui_rrdimage.mjs
>
> diff --git a/config/etc/mime.types b/config/etc/mime.types
> index af82d4886..bb3816db9 100644
> --- a/config/etc/mime.types
> +++ b/config/etc/mime.types
> @@ -252,6 +252,7 @@ multipart/voice-message
> text/css css
> text/directory
> text/enriched
> +text/javascript mjs
> text/plain asc txt
> text/prs.lines.tag
> text/rfc822-headers
> diff --git a/html/html/include/wui.js b/html/html/include/wui.js
> new file mode 100644
> index 000000000..e65924e29
> --- /dev/null
> +++ b/html/html/include/wui.js
> @@ -0,0 +1,47 @@
> +/*#############################################################################
> +# #
> +# IPFire.org - A linux based firewall #
> +# Copyright (C) 2007-2023 IPFire Team <info(a)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/>. #
> +# #
> +#############################################################################*/
> +
> +// IPFire Web User Interface
> +// Collection of JavaScript functions and modules (requires jQuery)
> +
> +import {WUIcore_i18n as WUI_i18n} from "./wui_core.mjs";
> +
> +import {WUImodule_rrdimage as WUI_rrdimage} from "./wui_rrdimage.mjs";
> +
> +//--- WUI main class ---
> +class WUImain {
> + constructor() {
> + //- Public properties -
> + // Translation strings
> + this.i18n = new WUI_i18n();
> +
> + //- Modules -
> + // RRDtool graph images
> + this.rrdimage = new WUI_rrdimage(this.i18n);
> +
> + //- Defaults -
> + // These modules are available on every page:
> + this.rrdimage.enabled = true;
> + }
> +}
> +
> +//### Initialize WUI ###
> +const wui = new WUImain();
> +export default wui;
> diff --git a/html/html/include/wui_core.mjs b/html/html/include/wui_core.mjs
> new file mode 100644
> index 000000000..b7b729396
> --- /dev/null
> +++ b/html/html/include/wui_core.mjs
> @@ -0,0 +1,154 @@
> +/*#############################################################################
> +# #
> +# IPFire.org - A linux based firewall #
> +# Copyright (C) 2007-2023 IPFire Team <info(a)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/>. #
> +# #
> +#############################################################################*/
> +
> +// IPFire Web User Interface - JavaScript module
> +// Core functions & module helpers
> +
> +//--- Module template ---
> +// Make sure that overridden functions are still executed with super()!
> +export class WUIcore_moduleBase {
> + //- Private properties -
> + #enabled; // Activation state, disabled by default
> + #readyState; // Loading state similar to Document.readyState
> + #namespace; // Namespace derived from the class name (without "WUImod_" prefix)
> +
> + //- Class constructor -
> + constructor(translations) {
> + this.i18n = translations;
> +
> + this.#enabled = false;
> +
> + this.#readyState = "loading";
> + this.#namespace = this.constructor.name.slice(10);
> + }
> +
> + // Module activation state
> + // Note: Because a module likely changes the DOM, it is not intended that it can
> + // be cleanly disabled again. Disabling it anyway will trigger "_handleModuleDestroy".
> + set enabled(state) {
> + if(this.#enabled !== state) {
> + this.#enabled = state;
> +
> + if(state) {
> + this._handleModuleEnable();
> + } else {
> + this._handleModuleDestroy();
> + }
> + }
> + }
> + get enabled() {
> + return this.#enabled;
> + }
> +
> + // Module loading state
> + // loading: Instance created
> + // interactive: Module enabled, document not ready
> + // complete: DOMContentLoaded/jQuery.ready event fired
> + // destroyed: Module disabled, event handlers removed
> + get readyState() {
> + return this.#readyState;
> + }
> +
> + // Module namespace
> + get namespace() {
> + return this.#namespace;
> + }
> +
> + //### Protected properties ###
> +
> + // Module activation state event handlers
> + _handleModuleEnable() {
> + if(this.#readyState === "loading") {
> + this.#readyState = "interactive";
> +
> + // Attach jQuery.ready event
> + $(this._handleDOMReady.bind(this));
> + }
> + }
> + _handleModuleDestroy() {
> + this.#readyState = "destroyed";
> +
> + // Attempt to remove all event handlers of this module
> + $("body").off(`.${this.namespace}`);
> + }
> +
> + // DOMContentLoaded/jQuery.ready event handler
> + // The module must be enabled for this event to be triggered once
> + _handleDOMReady() {
> + this.#readyState = "complete";
> + }
> +
> + // Translations quick access in module namespace
> + _i18n(key) {
> + return this.i18n.get(key, this.namespace);
> + }
> +}
> +
> +//--- Simple translation strings helper ---
> +export class WUIcore_i18n {
> + //- Private properties -
> + #strings;
> +
> + //- Class constructor -
> + constructor() {
> + this.#strings = Object.create(null); //Object without prototypes
> + }
> +
> + // Default module prefix for general translations
> + get #mainModule() {
> + return "wui";
> + }
> +
> + // Get translation
> + get(key, module = this.#mainModule) {
> + const index = `${module}%${key}`;
> +
> + if(Object.hasOwn(this.#strings, index)) {
> + return this.#strings[index];
> + }
> + return `(missing string '${key}' in '${module}')`;
> + }
> +
> + // Add translation
> + add(key, value, module = this.#mainModule) {
> + if(typeof value === "string" || typeof value === "number") {
> + this.#strings[`${module}%${key}`] = value;
> + }
> + }
> +
> + // Load key/translation JS object
> + // Format: {"key": "translation"}
> + load(translations, module = this.#mainModule) {
> + if(translations instanceof Object) {
> + Object.entries(translations).forEach(([key, value]) => {
> + this.add(key, value, module);
> + });
> + }
> + }
> +}
> +
> +//--- Static utility functions ---
> +export class WUIcore_utilities {
> + // Reload document (clears POST/GET data from history)
> + static reloadDocument() {
> + const url = window.location.origin + window.location.pathname;
> + window.location.replace(url);
> + }
> +}
> diff --git a/html/html/include/wui_rrdimage.mjs b/html/html/include/wui_rrdimage.mjs
> new file mode 100644
> index 000000000..5254b1e98
> --- /dev/null
> +++ b/html/html/include/wui_rrdimage.mjs
> @@ -0,0 +1,30 @@
> +/*#############################################################################
> +# #
> +# IPFire.org - A linux based firewall #
> +# Copyright (C) 2007-2023 IPFire Team <info(a)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/>. #
> +# #
> +#############################################################################*/
> +
> +// IPFire Web User Interface - JavaScript module
> +
> +import {WUIcore_moduleBase as WUI_module} from "./wui_core.mjs";
> +
> +//--- RRDtool graph images ---
> +export class WUImodule_rrdimage extends WUI_module {
> + constructor(translations) {
> + super(translations);
> + }
> +}
> diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/themes/ipfire/include/functions.pl
> index cbd05d109..445597e51 100644
> --- a/html/html/themes/ipfire/include/functions.pl
> +++ b/html/html/themes/ipfire/include/functions.pl
> @@ -113,7 +113,8 @@ print <<END;
> <title>$headline - $title</title>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
> <link rel="shortcut icon" href="/favicon.ico" />
> - <script type="text/javascript" src="/include/jquery.js"></script>
> + <script src="/include/jquery.js"></script>
> + <script src="/include/wui.js" type="module"></script>
> <script src="/include/rrdimage.js"></script>
>
> $extrahead
> --
> 2.37.1.windows.1
>
^ permalink raw reply [flat|nested] 5+ messages in thread