[pve-devel] [PATCH manager 0/2] fix #5093 add custom directory and eab to ui

[pve-devel] [PATCH manager 0/2] fix #5093 add custom directory and eab to ui

[Folke Gleumes]

This patch series adds the option to set a custom directory for ACME and
enables the user to use external account binding, which is required by
some providers.

Folke Gleumes (2):
  fix #5093: webui: acme: custom directory option
  webui: acme: add eab fields

 www/manager6/node/ACME.js | 168 ++++++++++++++++++++++++++++++--------
 1 file changed, 135 insertions(+), 33 deletions(-)

-- 
2.39.2

[pve-devel] [PATCH manager 1/2] fix #5093: webui: acme: custom directory option

[Folke Gleumes]

This patch allows the user to set a custom ACME directory by providing
a 'Custom' option in the directory dropdown. This in turn reveals an
input for the url. When using a custom directory the directory has to
be manually queried via button press to prevent from spamming the
directory on every input.

Signed-off-by: Folke Gleumes <f.gleumes@proxmox.com>
---
 www/manager6/node/ACME.js | 140 +++++++++++++++++++++++++++++---------
 1 file changed, 107 insertions(+), 33 deletions(-)

diff --git a/www/manager6/node/ACME.js b/www/manager6/node/ACME.js
index 21137b1a..5b71778a 100644
--- a/www/manager6/node/ACME.js
+++ b/www/manager6/node/ACME.js
@@ -10,6 +10,14 @@ Ext.define('PVE.node.ACMEAccountCreate', {
     url: '/cluster/acme/account',
     showTaskViewer: true,
     defaultExists: false,
+    referenceHolder: true,
+    onlineHelp: "sysadmin_certs_acme_account",
+
+    viewModel: {
+	data: {
+	    customDirectory: false,
+	},
+    },
 
     items: [
 	{
@@ -30,12 +38,17 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 	},
 	{
 	    xtype: 'proxmoxComboGrid',
-	    name: 'directory',
-	    allowBlank: false,
+	    notFoundIsValid: true,
+	    isFormField: false,
 	    valueField: 'url',
 	    displayField: 'name',
 	    fieldLabel: gettext('ACME Directory'),
 	    store: {
+		listeners: {
+		    'load': function() {
+			this.add({ name: gettext("Custom"), url: '' });
+		    },
+		},
 		autoLoad: true,
 		fields: ['name', 'url'],
 		idProperty: ['name'],
@@ -43,10 +56,6 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 		    type: 'proxmox',
 		    url: '/api2/json/cluster/acme/directories',
 		},
-		sorters: {
-		    property: 'name',
-		    direction: 'ASC',
-		},
 	    },
 	    listConfig: {
 		columns: [
@@ -64,41 +73,93 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 	    },
 	    listeners: {
 		change: function(combogrid, value) {
-		    var me = this;
-		    if (!value) {
-			return;
-		    }
+		    let me = this;
 
-		    var disp = me.up('window').down('#tos_url_display');
-		    var field = me.up('window').down('#tos_url');
-		    var checkbox = me.up('window').down('#tos_checkbox');
+		    let vm = me.up('window').getViewModel();
+		    let dirField = me.up('window').lookupReference('directoryInput');
+		    let tosButton = me.up('window').lookupReference('queryTos');
 
-		    disp.setValue(gettext('Loading'));
-		    field.setValue(undefined);
-		    checkbox.setValue(undefined);
-		    checkbox.setHidden(true);
+		    let isCustom = combogrid.getSelection().get('name') === gettext("Custom");
+		    vm.set('customDirectory', isCustom);
 
-		    Proxmox.Utils.API2Request({
-			url: '/cluster/acme/meta',
-			method: 'GET',
-			params: {
-			    directory: value,
+		    dirField.setValue(value);
+
+		    if (!isCustom) {
+			tosButton.click();
+		    } else {
+			me.up('window').clearToSFields();
+		    }
+		},
+	    },
+	},
+	{
+	    xtype: 'fieldcontainer',
+	    layout: 'hbox',
+	    fieldLabel: gettext('URL'),
+	    bind: {
+		hidden: '{!customDirectory}',
+	    },
+	    items: [
+		{
+		    xtype: 'proxmoxtextfield',
+		    name: 'directory',
+		    reference: 'directoryInput',
+		    flex: 1,
+		    allowBlank: false,
+		    listeners: {
+			change: function(textbox, value) {
+			    let me = this;
+			    me.up('window').clearToSFields();
 			},
-			success: function(response, opt) {
-			    if (response.result.data.termsOfService) {
-				field.setValue(response.result.data.termsOfService);
-				disp.setValue(response.result.data.termsOfService);
-				checkbox.setHidden(false);
+		    },
+		},
+		{
+		    xtype: 'proxmoxButton',
+		    margin: '0 0 0 5',
+		    reference: 'queryTos',
+		    text: gettext('Query URL'),
+		    listeners: {
+			click: function(button) {
+			    let me = this;
+
+			    let w = me.up('window');
+			    let disp = w.down('#tos_url_display');
+			    let field = w.down('#tos_url');
+			    let checkbox = w.down('#tos_checkbox');
+			    let value = w.lookupReference('directoryInput').getValue();
+			    w.clearToSFields();
+
+			    if (!value) {
+				return;
 			    } else {
-				disp.setValue(undefined);
+				disp.setValue(gettext("Loading"));
 			    }
+
+			    Proxmox.Utils.API2Request({
+				url: '/cluster/acme/meta',
+				method: 'GET',
+				params: {
+				    directory: value,
+				},
+				success: function(response, opt) {
+				    if (response.result.data.termsOfService) {
+					field.setValue(response.result.data.termsOfService);
+					disp.setValue(response.result.data.termsOfService);
+					checkbox.setHidden(false);
+				    } else {
+					checkbox.setValue(false);
+					disp.setValue("No terms of service agreement required");
+				    }
+				},
+				failure: function(response, opt) {
+				    disp.setValue(undefined);
+				    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+				},
+			    });
 			},
-			failure: function(response, opt) {
-			    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
-			},
-		    });
+		    },
 		},
-	    },
+	    ],
 	},
 	{
 	    xtype: 'displayfield',
@@ -125,6 +186,19 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 	},
     ],
 
+    clearToSFields: function() {
+	let me = this;
+
+	let disp = me.down('#tos_url_display');
+	let field = me.down('#tos_url');
+	let checkbox = me.down('#tos_checkbox');
+
+	disp.setValue("Terms of service not fetched yet");
+	field.setValue(undefined);
+	checkbox.setValue(undefined);
+	checkbox.setHidden(true);
+    },
+
 });
 
 Ext.define('PVE.node.ACMEAccountView', {
-- 
2.39.2

Re: [pve-devel] [PATCH manager 1/2] fix #5093: webui: acme: custom directory option

[Mira Limbeck]

On 1/16/24 15:33, Folke Gleumes wrote:
> This patch allows the user to set a custom ACME directory by providing
> a 'Custom' option in the directory dropdown. This in turn reveals an
> input for the url. When using a custom directory the directory has to
> be manually queried via button press to prevent from spamming the
> directory on every input.
> 
> Signed-off-by: Folke Gleumes <f.gleumes@proxmox.com>
> ---
>  www/manager6/node/ACME.js | 140 +++++++++++++++++++++++++++++---------
>  1 file changed, 107 insertions(+), 33 deletions(-)
> 
> diff --git a/www/manager6/node/ACME.js b/www/manager6/node/ACME.js
> index 21137b1a..5b71778a 100644
> --- a/www/manager6/node/ACME.js
> +++ b/www/manager6/node/ACME.js
> @@ -10,6 +10,14 @@ Ext.define('PVE.node.ACMEAccountCreate', {
>      url: '/cluster/acme/account',
>      showTaskViewer: true,
>      defaultExists: false,
> +    referenceHolder: true,
> +    onlineHelp: "sysadmin_certs_acme_account",
> +
> +    viewModel: {
> +	data: {
> +	    customDirectory: false,
> +	},
> +    },
>  
>      items: [
>  	{
> @@ -30,12 +38,17 @@ Ext.define('PVE.node.ACMEAccountCreate', {
>  	},
>  	{
>  	    xtype: 'proxmoxComboGrid',
> -	    name: 'directory',
> -	    allowBlank: false,
> +	    notFoundIsValid: true,
> +	    isFormField: false,
>  	    valueField: 'url',
>  	    displayField: 'name',
>  	    fieldLabel: gettext('ACME Directory'),
>  	    store: {
> +		listeners: {
> +		    'load': function() {
> +			this.add({ name: gettext("Custom"), url: '' });
> +		    },
> +		},
>  		autoLoad: true,
>  		fields: ['name', 'url'],
>  		idProperty: ['name'],
> @@ -43,10 +56,6 @@ Ext.define('PVE.node.ACMEAccountCreate', {
>  		    type: 'proxmox',
>  		    url: '/api2/json/cluster/acme/directories',
>  		},
> -		sorters: {
> -		    property: 'name',
> -		    direction: 'ASC',
> -		},
>  	    },
>  	    listConfig: {
>  		columns: [
> @@ -64,41 +73,93 @@ Ext.define('PVE.node.ACMEAccountCreate', {
>  	    },
>  	    listeners: {
>  		change: function(combogrid, value) {
> -		    var me = this;
> -		    if (!value) {
> -			return;
> -		    }
> +		    let me = this;
>  
> -		    var disp = me.up('window').down('#tos_url_display');
> -		    var field = me.up('window').down('#tos_url');
> -		    var checkbox = me.up('window').down('#tos_checkbox');
> +		    let vm = me.up('window').getViewModel();
> +		    let dirField = me.up('window').lookupReference('directoryInput');
> +		    let tosButton = me.up('window').lookupReference('queryTos');
>  
> -		    disp.setValue(gettext('Loading'));
> -		    field.setValue(undefined);
> -		    checkbox.setValue(undefined);
> -		    checkbox.setHidden(true);
> +		    let isCustom = combogrid.getSelection().get('name') === gettext("Custom");
> +		    vm.set('customDirectory', isCustom);
>  
> -		    Proxmox.Utils.API2Request({
> -			url: '/cluster/acme/meta',
> -			method: 'GET',
> -			params: {
> -			    directory: value,
> +		    dirField.setValue(value);
> +
> +		    if (!isCustom) {
> +			tosButton.click();
> +		    } else {
> +			me.up('window').clearToSFields();
> +		    }
> +		},
> +	    },
> +	},
> +	{
> +	    xtype: 'fieldcontainer',
> +	    layout: 'hbox',
> +	    fieldLabel: gettext('URL'),
> +	    bind: {
> +		hidden: '{!customDirectory}',
> +	    },
> +	    items: [
> +		{
> +		    xtype: 'proxmoxtextfield',
> +		    name: 'directory',
> +		    reference: 'directoryInput',
> +		    flex: 1,
> +		    allowBlank: false,
> +		    listeners: {
> +			change: function(textbox, value) {
> +			    let me = this;
> +			    me.up('window').clearToSFields();
>  			},
> -			success: function(response, opt) {
> -			    if (response.result.data.termsOfService) {
> -				field.setValue(response.result.data.termsOfService);
> -				disp.setValue(response.result.data.termsOfService);
> -				checkbox.setHidden(false);
> +		    },
> +		},
> +		{
> +		    xtype: 'proxmoxButton',
> +		    margin: '0 0 0 5',
> +		    reference: 'queryTos',
> +		    text: gettext('Query URL'),
> +		    listeners: {
> +			click: function(button) {
> +			    let me = this;
> +
> +			    let w = me.up('window');
> +			    let disp = w.down('#tos_url_display');
> +			    let field = w.down('#tos_url');
> +			    let checkbox = w.down('#tos_checkbox');
> +			    let value = w.lookupReference('directoryInput').getValue();
> +			    w.clearToSFields();
> +
> +			    if (!value) {
> +				return;
>  			    } else {
> -				disp.setValue(undefined);
> +				disp.setValue(gettext("Loading"));
>  			    }
> +
> +			    Proxmox.Utils.API2Request({
> +				url: '/cluster/acme/meta',
> +				method: 'GET',
> +				params: {
> +				    directory: value,
> +				},
> +				success: function(response, opt) {
> +				    if (response.result.data.termsOfService) {
> +					field.setValue(response.result.data.termsOfService);
> +					disp.setValue(response.result.data.termsOfService);
> +					checkbox.setHidden(false);
> +				    } else {
> +					checkbox.setValue(false);
> +					disp.setValue("No terms of service agreement required");
> +				    }
> +				},
> +				failure: function(response, opt) {
> +				    disp.setValue(undefined);
> +				    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
> +				},
> +			    });
>  			},
> -			failure: function(response, opt) {
> -			    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
> -			},
> -		    });
> +		    },
>  		},
> -	    },
> +	    ],
>  	},
>  	{
>  	    xtype: 'displayfield',
> @@ -125,6 +186,19 @@ Ext.define('PVE.node.ACMEAccountCreate', {
>  	},
>      ],
>  
> +    clearToSFields: function() {
> +	let me = this;
> +
> +	let disp = me.down('#tos_url_display');
> +	let field = me.down('#tos_url');
> +	let checkbox = me.down('#tos_checkbox');
> +
> +	disp.setValue("Terms of service not fetched yet");
> +	field.setValue(undefined);
> +	checkbox.setValue(undefined);
> +	checkbox.setHidden(true);
> +    },
> +
>  });
>  
>  Ext.define('PVE.node.ACMEAccountView', {

Tested this patch series in a Debian 12 container with Pebble 2.4
installed via the Debian Bookworm repositories.


The behavior of the combobox changed with this patch. The combobox now
shows an `x` to clear it, but doesn't actually clear the selection.
Instead it always sets it to `Custom`.


Account creation worked like a charm using a custom directory and EAB
(with the 2nd patch).
Other than the combobox issue above, consider this and the 2nd patch:

Tested-by: Mira Limbeck <m.limbeck@proxmox.com>


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

[pve-devel] [PATCH manager 2/2] webui: acme: add eab fields

[Folke Gleumes]

Adds fields for eab credentials. By default eab is optional, but if the
directory should report that eab is required, the eab credential fields
are marked as mandatory and prevent the form from being submittable
until credentials are provided.

Signed-off-by: Folke Gleumes <f.gleumes@proxmox.com>
---
 www/manager6/node/ACME.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/www/manager6/node/ACME.js b/www/manager6/node/ACME.js
index 5b71778a..ab2f0211 100644
--- a/www/manager6/node/ACME.js
+++ b/www/manager6/node/ACME.js
@@ -16,6 +16,12 @@ Ext.define('PVE.node.ACMEAccountCreate', {
     viewModel: {
 	data: {
 	    customDirectory: false,
+	    eabRequired: false,
+	},
+	formulas: {
+	    eabEmptyText: function(get) {
+		return get('eabRequired') ? gettext("required") : gettext("optional");
+	    },
 	},
     },
 
@@ -123,6 +129,7 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 			    let me = this;
 
 			    let w = me.up('window');
+			    let vm = w.getViewModel();
 			    let disp = w.down('#tos_url_display');
 			    let field = w.down('#tos_url');
 			    let checkbox = w.down('#tos_checkbox');
@@ -150,6 +157,7 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 					checkbox.setValue(false);
 					disp.setValue("No terms of service agreement required");
 				    }
+				    vm.set('eabRequired', !!response.result.data.externalAccountRequired);
 				},
 				failure: function(response, opt) {
 				    disp.setValue(undefined);
@@ -184,6 +192,26 @@ Ext.define('PVE.node.ACMEAccountCreate', {
 		return false;
 	    },
 	},
+	{
+	    xtype: 'proxmoxtextfield',
+	    name: 'eab-kid',
+	    fieldLabel: gettext('EAB Key ID'),
+	    bind: {
+		hidden: '{!customDirectory}',
+		allowBlank: '{!eabRequired}',
+		emptyText: '{eabEmptyText}',
+	    },
+	},
+	{
+	    xtype: 'proxmoxtextfield',
+	    name: 'eab-hmac-key',
+	    fieldLabel: gettext('EAB Key'),
+	    bind: {
+		hidden: '{!customDirectory}',
+		allowBlank: '{!eabRequired}',
+		emptyText: '{eabEmptyText}',
+	    },
+	},
     ],
 
     clearToSFields: function() {
-- 
2.39.2

Re: [pve-devel] [PATCH manager 0/2] fix #5093 add custom directory and eab to ui

[Folke Gleumes]

For testing, I have used pebble [0] in a separate lxc container.

1. Download and compile the project
2. Start pebble with the included eab config:
pebble -c test/config/pebble-config-external-account-bindings.json
3. Import the certificates from the test/certs folder into the pve
instance
4. Add the pebble to the /etc/hosts of your pve instance
5. Use https://pebble:14000/dir as the acme directory for testing, eab
credentials can be found in the config used in step 2

[0] https://github.com/letsencrypt/pebble

On Tue, 2024-01-16 at 15:33 +0100, Folke Gleumes wrote:
> This patch series adds the option to set a custom directory for ACME
> and
> enables the user to use external account binding, which is required
> by
> some providers.
> 
> Folke Gleumes (2):
>   fix #5093: webui: acme: custom directory option
>   webui: acme: add eab fields
> 
>  www/manager6/node/ACME.js | 168 ++++++++++++++++++++++++++++++------
> --
>  1 file changed, 135 insertions(+), 33 deletions(-)
> 

Re: [pve-devel] [PATCH manager 0/2] fix #5093 add custom directory and eab to ui

[Folke Gleumes]

ping

still applies cleanly and works

On Tue, 2024-01-16 at 15:33 +0100, Folke Gleumes wrote:
> This patch series adds the option to set a custom directory for ACME
> and
> enables the user to use external account binding, which is required
> by
> some providers.
> 
> Folke Gleumes (2):
>   fix #5093: webui: acme: custom directory option
>   webui: acme: add eab fields
> 
>  www/manager6/node/ACME.js | 168 ++++++++++++++++++++++++++++++------
> --
>  1 file changed, 135 insertions(+), 33 deletions(-)
>