fix #4758: ui: lxc wizard: allow multiple ssh keys

by converting the textfield into a textarea and validate the value
line wise (if there is more than one line)

also create a 'MultiFileButton' (mostly copied from extjs) that allows
to select multiple files at once

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 5b455c80922d61466fa2b26dd6c3011e02182adb..7ec9d7a5627e293e42b3634e8e905a5199629c21 100644 (file)
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -84,6 +84,7 @@ JSSRC=                                                        \
        form/ListField.js                               \
        form/Tag.js                                     \
        form/TagEdit.js                                 \
+       form/MultiFileButton.js                         \
        grid/BackupView.js                              \
        grid/FirewallAliases.js                         \
        grid/FirewallOptions.js                         \

diff --git a/www/manager6/form/MultiFileButton.js b/www/manager6/form/MultiFileButton.js
new file mode 100644 (file)
index 0000000..2796087
--- /dev/null
+++ b/www/manager6/form/MultiFileButton.js
@@ -0,0 +1,59 @@
+// mostly copied from ExtJS FileButton, but added 'multiple' at the relevant
+// places so we have a file picker where one can select multiple files
+// changes are marked with an 'pmx:' comment
+Ext.define('PVE.form.MultiFileButton', {
+    extend: 'Ext.form.field.FileButton',
+    alias: 'widget.pveMultiFileButton',
+
+    afterTpl: [
+       '<input id="{id}-fileInputEl" data-ref="fileInputEl" class="{childElCls} {inputCls}" ',
+           'type="file" size="1" name="{inputName}" unselectable="on" multiple ', // pmx: added multiple
+           '<tpl if="accept != null">accept="{accept}"</tpl>',
+           '<tpl if="tabIndex != null">tabindex="{tabIndex}"</tpl>',
+       '>',
+    ],
+
+    createFileInput: function(isTemporary) {
+       var me = this,
+           fileInputEl, listeners;
+
+       fileInputEl = me.fileInputEl = me.el.createChild({
+           name: me.inputName || me.id,
+           multiple: true, // pmx: added multiple option
+           id: !isTemporary ? me.id + '-fileInputEl' : undefined,
+           cls: me.inputCls + (me.getInherited().rtl ? ' ' + Ext.baseCSSPrefix + 'rtl' : ''),
+           tag: 'input',
+           type: 'file',
+           size: 1,
+           unselectable: 'on',
+       }, me.afterInputGuard); // Nothing special happens outside of IE/Edge
+
+       // This is our focusEl
+       fileInputEl.dom.setAttribute('data-componentid', me.id);
+
+       if (me.tabIndex !== null) {
+           me.setTabIndex(me.tabIndex);
+       }
+
+       if (me.accept) {
+           fileInputEl.dom.setAttribute('accept', me.accept);
+       }
+
+       // We place focus and blur listeners on fileInputEl to activate Button's
+       // focus and blur style treatment
+       listeners = {
+           scope: me,
+           change: me.fireChange,
+           mousedown: me.handlePrompt,
+           keydown: me.handlePrompt,
+           focus: me.onFileFocus,
+           blur: me.onFileBlur,
+       };
+
+       if (me.useTabGuards) {
+           listeners.keydown = me.onFileInputKeydown;
+       }
+
+       fileInputEl.on(listeners);
+    },
+});

diff --git a/www/manager6/lxc/CreateWizard.js b/www/manager6/lxc/CreateWizard.js
index 0b82cc1cbcb0775520739a92ed1ca3788cf0a5d0..e363529747b1c0c5040b51ac5b439ccaaa89a1ed 100644 (file)
--- a/www/manager6/lxc/CreateWizard.js
+++ b/www/manager6/lxc/CreateWizard.js
@@ -120,16 +120,16 @@ Ext.define('PVE.lxc.CreateWizard', {
                    },
                },
                {
-                   xtype: 'proxmoxtextfield',
+                   xtype: 'textarea',
                    name: 'ssh-public-keys',
                    value: '',
-                   fieldLabel: gettext('SSH public key'),
+                   fieldLabel: gettext('SSH public key(s)'),
                    allowBlank: true,
                    validator: function(value) {
                        let pwfield = this.up().down('field[name=password]');
                        if (value.length) {
-                           let key = PVE.Parser.parseSSHKey(value);
-                           if (!key) {
+                           let keys = value.indexOf('\n') !== -1 ? value.split('\n') : [value];
+                           if (keys.some(key => key !== '' && !PVE.Parser.parseSSHKey(key))) {
                                return "Failed to recognize ssh key";
                            }
                            pwfield.allowBlank = true;
@@ -159,15 +159,20 @@ Ext.define('PVE.lxc.CreateWizard', {
                    },
                },
                {
-                   xtype: 'filebutton',
+                   xtype: 'pveMultiFileButton',
                    name: 'file',
                    hidden: !window.FileReader,
                    text: gettext('Load SSH Key File'),
                    listeners: {
                        change: function(btn, e, value) {
                            e = e.event;
-                           let field = this.up().down('proxmoxtextfield[name=ssh-public-keys]');
-                           PVE.Utils.loadSSHKeyFromFile(e.target.files[0], v => field.setValue(v));
+                           let field = this.up().down('textarea[name=ssh-public-keys]');
+                           for (const file of e?.target?.files ?? []) {
+                               PVE.Utils.loadSSHKeyFromFile(file, v => {
+                                   let oldValue = field.getValue();
+                                   field.setValue(oldValue ? `${oldValue}\n${v.trim()}` : v.trim());
+                               });
+                           }
                            btn.reset();
                        },
                    },