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>
This commit is contained in:
Dominik Csapak 2023-07-17 14:34:24 +02:00 committed by Thomas Lamprecht
parent d1c49f5b64
commit ba7002f5e6
3 changed files with 72 additions and 7 deletions

View File

@ -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 \

View File

@ -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);
},
});

View File

@ -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();
},
},