fix #5093: ui: acme: expose custom directory option

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>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/manager6/node/ACME.js b/www/manager6/node/ACME.js
index 21137b1a92c11a422a91fde34ec6bc03bb3996bc..d2863a7c814253dfaecdd7350f0a5899433503e2 100644 (file)
--- 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,18 @@ Ext.define('PVE.node.ACMEAccountCreate', {
        },
        {
            xtype: 'proxmoxComboGrid',
-           name: 'directory',
+           notFoundIsValid: true,
+           isFormField: false,
            allowBlank: 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 +57,6 @@ Ext.define('PVE.node.ACMEAccountCreate', {
                    type: 'proxmox',
                    url: '/api2/json/cluster/acme/directories',
                },
-               sorters: {
-                   property: 'name',
-                   direction: 'ASC',
-               },
            },
            listConfig: {
                columns: [
@@ -64,41 +74,93 @@ Ext.define('PVE.node.ACMEAccountCreate', {
            },
            listeners: {
                change: function(combogrid, value) {
-                   var me = this;
-                   if (!value) {
-                       return;
-                   }
+                   let me = this;
+
+                   let vm = me.up('window').getViewModel();
+                   let dirField = me.up('window').lookupReference('directoryInput');
+                   let tosButton = me.up('window').lookupReference('queryTos');
 
-                   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 isCustom = combogrid.getSelection().get('name') === gettext("Custom");
+                   vm.set('customDirectory', isCustom);
 
-                   disp.setValue(gettext('Loading'));
-                   field.setValue(undefined);
-                   checkbox.setValue(undefined);
-                   checkbox.setHidden(true);
+                   dirField.setValue(value);
 
-                   Proxmox.Utils.API2Request({
-                       url: '/cluster/acme/meta',
-                       method: 'GET',
-                       params: {
-                           directory: 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 +187,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', {