[pbs-devel] [PATCH proxmox{, -backup}/widget-toolkit v4 0/7] fix #5463: add optional consent banner before login

[pbs-devel] [PATCH proxmox{, -backup}/widget-toolkit v4 0/7] fix #5463: add optional consent banner before login

[Gabriel Goller]

The consent text is stored in the node.cfg config file and is encoded
using base64. This allows us to support multi-line strings and special
characters. To easily edit the text a new edit-field called
ProxmoxTextAreaField has been introduced. It supports editing and saving
multi-line text and converting it to its base64 representation.

The same implementation will be ported to pve and eventually pmg in 
the foreseeable future.

v4:
 - rebase

v3, thanks @Dominik, @Thomas:
 - store text with base64 instead of URI-encoding
 - improve content popup sizing
 - support markdown

v2, thanks @Thomas, @Dominik:
 - remove consent.txt file, move to node.cfg config
 - add ui option to insert consent text
 - encode text with encodeURI/decodeURI

v1, thanks @Dominik:
 - embed consent text into index.html file instead of extra api request
 - removed decline button
 - added alwaysOnTop property to popup

widget-toolkit:

Gabriel Goller (3):
  utils: add base64 conversion helper
  window: add consent modal
  form: add support for multiline textarea

 src/Makefile               |  2 ++
 src/Utils.js               | 18 ++++++++++++
 src/form/TextAreaField.js  | 60 ++++++++++++++++++++++++++++++++++++++
 src/grid/ObjectGrid.js     | 29 ++++++++++++++++++
 src/window/ConsentModal.js | 36 +++++++++++++++++++++++
 5 files changed, 145 insertions(+)
 create mode 100644 src/form/TextAreaField.js
 create mode 100644 src/window/ConsentModal.js


proxmox:

Gabriel Goller (1):
  rest-server: add custom handlebars escape fn

 proxmox-rest-server/src/api_config.rs | 28 ++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)


proxmox-backup:

Gabriel Goller (3):
  api: add consent api handler and config option
  ui: show consent banner before login
  docs: add section about consent banner

 docs/gui.rst                    |  8 ++++++++
 src/api2/node/config.rs         |  8 ++++++++
 src/bin/proxmox-backup-proxy.rs | 11 ++++++++---
 src/config/node.rs              |  4 ++++
 www/LoginView.js                | 12 ++++++++++++
 www/config/NodeOptionView.js    |  6 ++++++
 www/index.hbs                   |  1 +
 7 files changed, 47 insertions(+), 3 deletions(-)


Summary over all repositories:
  13 files changed, 219 insertions(+), 4 deletions(-)

-- 
Generated by git-murpp 0.7.1


_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

[pbs-devel] [PATCH widget-toolkit v4 1/7] utils: add base64 conversion helper

[Gabriel Goller]

Add helper functions to convert from a utf8 string to a base64 string
and vice-versa. Using the TextEncoder/TextDecoder we can support unicode
such as emojis as well [0].

[0]: https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 src/Utils.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/Utils.js b/src/Utils.js
index 7dd034a5e56f..3badb6aaf606 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -1356,6 +1356,24 @@ utilities: {
 	);
     },
 
+    // Convert utf-8 string to base64.
+    // This also escapes unicode characters such as emojis.
+    utf8ToBase64: function(string) {
+	let bytes = new TextEncoder().encode(string);
+	const escapedString = Array.from(bytes, (byte) =>
+	    String.fromCodePoint(byte),
+	).join("");
+	return btoa(escapedString);
+    },
+
+    // Converts a base64 string into a utf8 string.
+    // Decodes escaped unicode characters correctly.
+    base64ToUtf8: function(b64_string) {
+	let string = atob(b64_string);
+	let bytes = Uint8Array.from(string, (m) => m.codePointAt(0));
+	return new TextDecoder().decode(bytes);
+    },
+
     stringToRGB: function(string) {
 	let hash = 0;
 	if (!string) {
-- 
2.39.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

Re: [pbs-devel] [PATCH widget-toolkit v4 1/7] utils: add base64 conversion helper

[Thomas Lamprecht]

On 13/09/2024 15:10, Gabriel Goller wrote:
> Add helper functions to convert from a utf8 string to a base64 string
> and vice-versa. Using the TextEncoder/TextDecoder we can support unicode
> such as emojis as well [0].
> 
> [0]: https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
> 
> Signed-off-by: Gabriel Goller <g.goller@proxmox.com>

Reviewed-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

One small nit inline though.

> ---
>  src/Utils.js | 18 ++++++++++++++++++
>  1 file changed, 18 insertions(+)
> 
> diff --git a/src/Utils.js b/src/Utils.js
> index 7dd034a5e56f..3badb6aaf606 100644
> --- a/src/Utils.js
> +++ b/src/Utils.js
> @@ -1356,6 +1356,24 @@ utilities: {
>  	);
>      },
>  
> +    // Convert utf-8 string to base64.
> +    // This also escapes unicode characters such as emojis.
> +    utf8ToBase64: function(string) {
> +	let bytes = new TextEncoder().encode(string);
> +	const escapedString = Array.from(bytes, (byte) =>
> +	    String.fromCodePoint(byte),
> +	).join("");

FWIW this could be a bit shorter by using map (which typed arrays
also support [0]):

        const escapedString = bytes.map(b => String.fromCodePoint(b)).join('');

But for that we really need no new revision.

[0]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/map


_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

[pbs-devel] [PATCH widget-toolkit v4 2/7] window: add consent modal

[Gabriel Goller]

Add consentModal that gets displayed before the login. Simply shows the
text in a scrollable box and contains a single button "OK".

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 src/Makefile               |  1 +
 src/window/ConsentModal.js | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/window/ConsentModal.js

diff --git a/src/Makefile b/src/Makefile
index 047825129bd5..3c2fd4b0eb81 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -87,6 +87,7 @@ JSSRC=					\
 	window/DiskSmart.js		\
 	window/ZFSDetail.js		\
 	window/Certificates.js		\
+	window/ConsentModal.js		\
 	window/ACMEAccount.js		\
 	window/ACMEPluginEdit.js	\
 	window/ACMEDomains.js		\
diff --git a/src/window/ConsentModal.js b/src/window/ConsentModal.js
new file mode 100644
index 000000000000..2826899b80b0
--- /dev/null
+++ b/src/window/ConsentModal.js
@@ -0,0 +1,36 @@
+Ext.define('Proxmox.window.ConsentModal', {
+    extend: 'Ext.window.Window',
+    alias: ['widget.pmxConsentModal'],
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    maxWidth: 1000,
+    maxHeight: 1000,
+    minWidth: 600,
+    minHeight: 400,
+    scrollable: true,
+    modal: true,
+    closable: false,
+    resizable: false,
+    alwaysOnTop: true,
+    title: gettext('Consent'),
+
+    items: [
+	{
+	    xtype: 'displayfield',
+	    padding: 10,
+	    scrollable: true,
+	    cbind: {
+		value: '{consent}',
+	    },
+	},
+    ],
+    buttons: [
+	{
+	    handler: function() {
+		this.up('window').close();
+	    },
+	    text: gettext('OK'),
+	},
+    ],
+});
+
-- 
2.39.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

[pbs-devel] [PATCH widget-toolkit v4 3/7] form: add support for multiline textarea

[Gabriel Goller]

This adds support for a editable multiline textarea in the ObjectGrid.
Now we can add a textarea row, which will open a textarea popup, and
encode the multi-line text into an base64 string (with utf8 support).

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 src/Makefile              |  1 +
 src/form/TextAreaField.js | 60 +++++++++++++++++++++++++++++++++++++++
 src/grid/ObjectGrid.js    | 29 +++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 src/form/TextAreaField.js

diff --git a/src/Makefile b/src/Makefile
index 3c2fd4b0eb81..aa81bef17c84 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -31,6 +31,7 @@ JSSRC=					\
 	form/ExpireDate.js		\
 	form/IntegerField.js		\
 	form/TextField.js		\
+	form/TextAreaField.js		\
 	form/VlanField.js		\
 	form/DateTimeField.js		\
 	form/Checkbox.js		\
diff --git a/src/form/TextAreaField.js b/src/form/TextAreaField.js
new file mode 100644
index 000000000000..3182e4c863be
--- /dev/null
+++ b/src/form/TextAreaField.js
@@ -0,0 +1,60 @@
+Ext.define('Proxmox.form.field.Textareafield', {
+    extend: 'Ext.form.field.TextArea',
+    alias: ['widget.proxmoxtextareafield'],
+
+    config: {
+        skipEmptyText: false,
+        deleteEmpty: false,
+        trimValue: false,
+        editable: true,
+        width: 600,
+        height: 400,
+        scrollable: 'y',
+    },
+
+    setValue: function(value) {
+        // We want to edit the decoded version of the text
+        this.callParent([Proxmox.Utils.base64ToUtf8(value)]);
+    },
+
+    processRawValue: function(value) {
+        // The field could contain multi-line values
+        return Proxmox.Utils.utf8ToBase64(value);
+    },
+
+    getSubmitData: function() {
+        let me = this,
+            data = null,
+            val;
+        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
+            val = me.getSubmitValue();
+            if (val !== null) {
+                data = {};
+                data[me.getName()] = val;
+            } else if (me.getDeleteEmpty()) {
+                data = {};
+                data.delete = me.getName();
+            }
+        }
+        return data;
+    },
+
+    getSubmitValue: function() {
+        let me = this;
+
+        let value = this.processRawValue(this.getRawValue());
+        if (me.getTrimValue() && typeof value === 'string') {
+            value = value.trim();
+        }
+        if (value !== '') {
+            return value;
+        }
+
+        return me.getSkipEmptyText() ? null: value;
+    },
+
+    setAllowBlank: function(allowBlank) {
+        this.allowBlank = allowBlank;
+        this.validate();
+    },
+});
diff --git a/src/grid/ObjectGrid.js b/src/grid/ObjectGrid.js
index b355d6dee2be..30e4ce4b01b6 100644
--- a/src/grid/ObjectGrid.js
+++ b/src/grid/ObjectGrid.js
@@ -182,6 +182,35 @@ Ext.define('Proxmox.grid.ObjectGrid', {
 	};
     },
 
+    add_textareafield_row: function(name, text, opts) {
+	let me = this;
+
+	opts = opts || {};
+	me.rows = me.rows || {};
+
+	me.rows[name] = {
+	    required: true,
+	    defaultValue: "",
+	    header: text,
+	    renderer: function(value) {
+		return Ext.htmlEncode(Proxmox.Utils.base64ToUtf8(value));
+	    },
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		subject: text,
+		onlineHelp: opts.onlineHelp,
+		fieldDefaults: {
+		    labelWidth: opts.labelWidth || 600,
+		},
+		items: {
+		    xtype: 'proxmoxtextareafield',
+		    name: name,
+		},
+	    },
+	};
+    },
+
+
     editorConfig: {}, // default config passed to editor
 
     run_editor: function() {
-- 
2.39.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

[pbs-devel] [PATCH proxmox v4 4/7] rest-server: add custom handlebars escape fn

[Gabriel Goller]

Add a custom handlebars escape function. It's nearly identical to the
default `html_escape` fn [0], but it does not escape the '='. This is
needed to support base64 encoded values.

[0]: https://docs.rs/handlebars/latest/handlebars/fn.html_escape.html

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 proxmox-rest-server/src/api_config.rs | 28 ++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/proxmox-rest-server/src/api_config.rs b/proxmox-rest-server/src/api_config.rs
index ddc37f2253a6..c37e49d1f04f 100644
--- a/proxmox-rest-server/src/api_config.rs
+++ b/proxmox-rest-server/src/api_config.rs
@@ -62,7 +62,7 @@ impl ApiConfig {
             privileged_addr: None,
 
             #[cfg(feature = "templates")]
-            templates: Default::default(),
+            templates: templates::Templates::with_escape_fn(),
         }
     }
 
@@ -335,6 +335,32 @@ mod templates {
     }
 
     impl Templates {
+        pub fn with_escape_fn() -> Templates {
+            let mut registry = Handlebars::new();
+            // This is the same as the default `html_escape` fn in
+            // handlebars, **but** it does not escape the '='. This
+            // is to preserve base64 values.
+            registry.register_escape_fn(|value| {
+                let mut output = String::new();
+                for c in value.chars() {
+                    match c {
+                        '<' => output.push_str("&lt;"),
+                        '>' => output.push_str("&gt;"),
+                        '"' => output.push_str("&quot;"),
+                        '&' => output.push_str("&amp;"),
+                        '\'' => output.push_str("&#x27;"),
+                        '`' => output.push_str("&#x60;"),
+                        _ => output.push(c),
+                    }
+                }
+                output
+            });
+            Self {
+                templates: RwLock::new(registry),
+                template_files: RwLock::new(HashMap::new()),
+            }
+        }
+
         pub fn register<P>(&self, name: &str, path: P) -> Result<(), Error>
         where
             P: Into<PathBuf>,
-- 
2.39.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

[pbs-devel] [PATCH proxmox-backup v4 5/7] api: add consent api handler and config option

[Gabriel Goller]

Add consent_text option to the node.cfg config. Embed the value into
index.html file using handlebars.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 src/api2/node/config.rs         |  8 ++++++++
 src/bin/proxmox-backup-proxy.rs | 11 ++++++++---
 src/config/node.rs              |  4 ++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/api2/node/config.rs b/src/api2/node/config.rs
index 86a73cf8687f..19ede24b741c 100644
--- a/src/api2/node/config.rs
+++ b/src/api2/node/config.rs
@@ -67,6 +67,8 @@ pub enum DeletableProperty {
     Description,
     /// Delete the task-log-max-days property
     TaskLogMaxDays,
+    /// Delete the consent-text property
+    ConsentText,
 }
 
 #[api(
@@ -155,6 +157,9 @@ pub fn update_node_config(
                 DeletableProperty::TaskLogMaxDays => {
                     config.task_log_max_days = None;
                 }
+                DeletableProperty::ConsentText => {
+                    config.consent_text = None;
+                }
             }
         }
     }
@@ -198,6 +203,9 @@ pub fn update_node_config(
     if update.task_log_max_days.is_some() {
         config.task_log_max_days = update.task_log_max_days;
     }
+    if update.consent_text.is_some() {
+        config.consent_text = update.consent_text;
+    }
 
     crate::config::node::save_config(&config)?;
 
diff --git a/src/bin/proxmox-backup-proxy.rs b/src/bin/proxmox-backup-proxy.rs
index 041f3aff999c..6839598c1345 100644
--- a/src/bin/proxmox-backup-proxy.rs
+++ b/src/bin/proxmox-backup-proxy.rs
@@ -50,12 +50,12 @@ use pbs_api_types::{
     VerificationJobConfig,
 };
 
-use proxmox_backup::auth_helpers::*;
 use proxmox_backup::server;
 use proxmox_backup::tools::{
     disks::{zfs_dataset_stats, DiskManage},
     PROXMOX_BACKUP_TCP_KEEPALIVE_TIME,
 };
+use proxmox_backup::{auth_helpers::*, config};
 
 use proxmox_backup::api2::pull::do_sync_job;
 use proxmox_backup::api2::tape::backup::do_tape_backup_job;
@@ -88,7 +88,7 @@ fn get_language(headers: &http::HeaderMap) -> String {
 
     match cookie_from_header(headers, "PBSLangCookie") {
         Some(cookie_lang) if exists(&cookie_lang) => cookie_lang,
-        _ => match proxmox_backup::config::node::config().map(|(cfg, _)| cfg.default_lang) {
+        _ => match config::node::config().map(|(cfg, _)| cfg.default_lang) {
             Ok(Some(default_lang)) if exists(&default_lang) => default_lang,
             _ => String::from(""),
         },
@@ -153,6 +153,10 @@ async fn get_index_future(env: RestEnvironment, parts: Parts) -> Response<Body>
 
     let theme = get_theme(&parts.headers);
 
+    let consent = config::node::config()
+        .ok()
+        .and_then(|config| config.0.consent_text)
+        .unwrap_or("".to_string());
     let data = json!({
         "NodeName": nodename,
         "UserName": user,
@@ -161,6 +165,7 @@ async fn get_index_future(env: RestEnvironment, parts: Parts) -> Response<Body>
         "theme": theme,
         "auto": theme == "auto",
         "debug": debug,
+        "consentText": consent,
     });
 
     let (ct, index) = match api.render_template(template_file, &data) {
@@ -371,7 +376,7 @@ fn make_tls_acceptor() -> Result<SslAcceptor, Error> {
     let key_path = configdir!("/proxy.key");
     let cert_path = configdir!("/proxy.pem");
 
-    let (config, _) = proxmox_backup::config::node::config()?;
+    let (config, _) = config::node::config()?;
     let ciphers_tls_1_3 = config.ciphers_tls_1_3;
     let ciphers_tls_1_2 = config.ciphers_tls_1_2;
 
diff --git a/src/config/node.rs b/src/config/node.rs
index 937beb3a125c..77f72073ada5 100644
--- a/src/config/node.rs
+++ b/src/config/node.rs
@@ -225,6 +225,10 @@ pub struct NodeConfig {
     /// Maximum days to keep Task logs
     #[serde(skip_serializing_if = "Option::is_none")]
     pub task_log_max_days: Option<usize>,
+
+    /// Consent banner text
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub consent_text: Option<String>,
 }
 
 impl NodeConfig {
-- 
2.39.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

[pbs-devel] [PATCH proxmox-backup v4 6/7] ui: show consent banner before login

[Gabriel Goller]

Before showing the LoginView, check if we got a non-empty consent text
from the template. If there is a non-empty text, display it in a modal.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 www/LoginView.js             | 12 ++++++++++++
 www/config/NodeOptionView.js |  6 ++++++
 www/index.hbs                |  1 +
 3 files changed, 19 insertions(+)

diff --git a/www/LoginView.js b/www/LoginView.js
index d4d8e73e65bb..b3475015c4d8 100644
--- a/www/LoginView.js
+++ b/www/LoginView.js
@@ -20,6 +20,18 @@ Ext.define('PBS.LoginView', {
     controller: {
 	xclass: 'Ext.app.ViewController',
 
+	init: async function() {
+	    if (Proxmox.consentText !== "") {
+		Ext.create('Proxmox.window.ConsentModal', {
+		    autoShow: true,
+		    consent: Proxmox.Markdown.parse(
+				Ext.htmlEncode(
+				    Proxmox.Utils.base64ToUtf8(
+					Proxmox.consentText))),
+		});
+	    }
+	},
+
 	submitForm: async function() {
 	    var me = this;
 	    var loginForm = me.lookupReference('loginForm');
diff --git a/www/config/NodeOptionView.js b/www/config/NodeOptionView.js
index ae6453febef4..35938f9a3781 100644
--- a/www/config/NodeOptionView.js
+++ b/www/config/NodeOptionView.js
@@ -54,5 +54,11 @@ Ext.define('PBS.NodeOptionView', {
 	    deleteEmpty: true,
 	    renderer: Proxmox.Utils.render_language,
 	},
+	{
+	    xtype: 'textareafield',
+	    name: 'consent-text',
+	    text: gettext('Consent Text'),
+	    deleteEmpty: true,
+	},
     ],
 });
diff --git a/www/index.hbs b/www/index.hbs
index 824268e389c3..b8c6e55a98d7 100644
--- a/www/index.hbs
+++ b/www/index.hbs
@@ -38,6 +38,7 @@
 	UserName: "{{ UserName }}",
 	defaultLang: "{{ language }}",
 	CSRFPreventionToken: "{{ CSRFPreventionToken }}",
+	consentText: "{{ consentText }}",
     };
     </script>
     <script type="text/javascript" src="/widgettoolkit/proxmoxlib.js"></script>
-- 
2.39.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel

[pbs-devel] [PATCH proxmox-backup v4 7/7] docs: add section about consent banner

[Gabriel Goller]

Add short section on how to enable consent banner.

Signed-off-by: Gabriel Goller <g.goller@proxmox.com>
---
 docs/gui.rst | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/gui.rst b/docs/gui.rst
index 9547c73f47ad..acecb8bc7193 100644
--- a/docs/gui.rst
+++ b/docs/gui.rst
@@ -40,6 +40,14 @@ Proxmox Backup Server supports various languages and authentication back ends
 .. note:: For convenience, you can save the username on the client side, by
   selecting the "Save User name" checkbox at the bottom of the window.
 
+Consent Banner
+^^^^^^^^^^^^^^
+
+A custom consent banner that has to be accepted before login can be configured
+in **Configuration -> Other -> General -> Consent Text**. If there is no
+content, the consent banner will not be displayed. The text will be stored as a
+base64 string in the ``/etc/proxmox-backup/node.cfg`` config file.
+
 
 GUI Overview
 ------------
-- 
2.39.2



_______________________________________________
pbs-devel mailing list
pbs-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel