[PATCH proxmox-backup 13/20] ui: expose assigning encryption key to sync jobs

[Christian Ebner <c.ebner@proxmox.com>]

This allows to select pre-defined encryption keys and assign them to
the sync job configuration.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---
 www/Makefile                      |  1 +
 www/form/EncryptionKeySelector.js | 59 +++++++++++++++++++++++++++++++
 www/window/SyncJobEdit.js         | 11 ++++++
 3 files changed, 71 insertions(+)
 create mode 100644 www/form/EncryptionKeySelector.js

diff --git a/www/Makefile b/www/Makefile
index dbede8a5a..76f8e2dd7 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -55,6 +55,7 @@ JSSRC=							\
 	form/GroupSelector.js				\
 	form/GroupFilter.js				\
 	form/VerifyOutdatedAfter.js			\
+	form/EncryptionKeySelector.js			\
 	data/RunningTasksStore.js			\
 	button/TaskButton.js				\
 	panel/PrunePanel.js				\
diff --git a/www/form/EncryptionKeySelector.js b/www/form/EncryptionKeySelector.js
new file mode 100644
index 000000000..831055a82
--- /dev/null
+++ b/www/form/EncryptionKeySelector.js
@@ -0,0 +1,59 @@
+Ext.define('PBS.form.EncryptionKeySelector', {
+    extend: 'Ext.form.field.ComboBox',
+    alias: 'widget.pbsEncryptionKeySelector',
+
+    allowBlank: true,
+    autoSelect: true,
+    submitEmpty: false,
+    valueField: 'id',
+
+    displayField: 'id',
+    emptyText: gettext('None (disabled)'),
+
+    editable: true,
+    anyMatch: true,
+    forceSelection: true,
+    queryMode: 'local',
+
+    matchFieldWidth: false,
+    listConfig: {
+        minWidth: 170,
+        maxWidth: 500,
+        emptyText: `<div class="x-grid-empty">${gettext('No key accessible.')}</div>`,
+    },
+
+    triggers: {
+        clear: {
+            cls: 'pmx-clear-trigger',
+            weight: -1,
+            hidden: true,
+            handler: function () {
+                this.triggers.clear.setVisible(false);
+                this.setValue('');
+            },
+        },
+    },
+
+    listeners: {
+        change: function (field, value) {
+            let canClear = value !== '';
+            field.triggers.clear.setVisible(canClear);
+        },
+    },
+
+    initComponent: function () {
+        let me = this;
+
+        me.store = Ext.create('Ext.data.Store', {
+            model: 'pbs-encryption-keys',
+            autoLoad: true,
+            proxy: {
+                type: 'proxmox',
+                timeout: 30 * 1000,
+                url: `/api2/json/config/encryption-keys`,
+            },
+        });
+
+        me.callParent();
+    },
+});
diff --git a/www/window/SyncJobEdit.js b/www/window/SyncJobEdit.js
index 074c7855a..f6838c631 100644
--- a/www/window/SyncJobEdit.js
+++ b/www/window/SyncJobEdit.js
@@ -560,6 +560,17 @@ Ext.define('PBS.window.SyncJobEdit', {
                     },
                 ],
             },
+            {
+                xtype: 'inputpanel',
+                title: gettext('Encryption'),
+                column1: [
+                    {
+                        xtype: 'pbsEncryptionKeySelector',
+                        name: 'encryption-key',
+                        fieldLabel: gettext('Encryption Key'),
+                    },
+                ],
+            },
         ],
     },
 });
-- 
2.47.3