ui: tape: add EncryptionPanel to add/remove encryption keys

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

www/Makefile

@@ -17,6 +17,7 @@ TAPE_UI_FILES=						\
 	tape/form/TapeDevicePathSelector.js		\
 	tape/window/ChangerEdit.js			\
 	tape/window/DriveEdit.js			\
+	tape/window/EncryptionEdit.js			\
 	tape/window/LabelMedia.js			\
 	tape/window/PoolEdit.js				\
 	tape/window/TapeBackup.js			\
@@ -25,6 +26,7 @@ TAPE_UI_FILES=						\
 	tape/ChangerConfig.js				\
 	tape/ChangerStatus.js				\
 	tape/DriveConfig.js				\
+	tape/EncryptionKeys.js				\
 	tape/PoolConfig.js				\
 	tape/TapeInventory.js				\
 	tape/TapeManagement.js				\

www/tape/EncryptionKeys.js

@@ -0,0 +1,96 @@
+Ext.define('pbs-tape-encryption-keys', {
+    extend: 'Ext.data.Model',
+    fields: [
+	'fingerprint', 'hint', 'kdf', 'modified',
+	{
+	    name: 'created',
+	    type: 'date',
+	    dateFormat: 'timestamp',
+	},
+    ],
+    idProperty: 'fingerprint',
+});
+
+Ext.define('PBS.TapeManagement.EncryptionPanel', {
+    extend: 'Ext.grid.Panel',
+    alias: 'widget.pbsEncryptionKeys',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	onAdd: function() {
+	    let me = this;
+	    Ext.create('PBS.TapeManagement.EncryptionEditWindow', {
+		listeners: {
+		    destroy: function() {
+			me.reload();
+		    },
+		},
+	    }).show();
+	},
+
+	reload: function() {
+	    this.getView().getStore().rstore.load();
+	},
+
+	stopStore: function() {
+	    this.getView().getStore().rstore.stopUpdate();
+	},
+
+	startStore: function() {
+	    this.getView().getStore().rstore.startUpdate();
+	},
+    },
+
+    listeners: {
+	beforedestroy: 'stopStore',
+	deactivate: 'stopStore',
+	activate: 'startStore',
+    },
+
+    store: {
+	type: 'diff',
+	rstore: {
+	    type: 'update',
+	    storeid: 'proxmox-tape-encryption-keys',
+	    model: 'pbs-tape-encryption-keys',
+	    proxy: {
+		type: 'proxmox',
+		url: "/api2/json/config/tape-encryption-keys",
+	    },
+	},
+	sorters: 'hint',
+    },
+
+    tbar: [
+	{
+	    text: gettext('Add'),
+	    xtype: 'proxmoxButton',
+	    handler: 'onAdd',
+	    selModel: false,
+	},
+	'-',
+	{
+	    xtype: 'proxmoxStdRemoveButton',
+	    baseurl: '/api2/extjs/config/tape-encryption-keys',
+	    callback: 'reload',
+	},
+    ],
+    columns: [
+	{
+	    text: gettext('Hint'),
+	    dataIndex: 'hint',
+	    flex: 1,
+	},
+	{
+	    text: gettext('Fingerprint'),
+	    dataIndex: 'fingerprint',
+	    flex: 4,
+	},
+	{
+	    text: gettext('Created'),
+	    dataIndex: 'created',
+	    flex: 2,
+	},
+    ],
+});

www/tape/TapeManagement.js

@@ -41,5 +41,10 @@ Ext.define('PBS.TapeManagement', {
 	    itemId: 'pools',
 	    xtype: 'pbsMediaPoolPanel',
 	},
+	{
+	    title: gettext('Encryption Keys'),
+	    itemId: 'encryption-keys',
+	    xtype: 'pbsEncryptionKeys',
+	},
     ],
 });

www/tape/window/EncryptionEdit.js

@@ -0,0 +1,52 @@
+Ext.define('PBS.TapeManagement.EncryptionEditWindow', {
+    extend: 'Proxmox.window.Edit',
+    alias: 'widget.pbsEncryptionEditWindow',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    isCreate: true,
+    isAdd: true,
+    subject: gettext('Encryption Key'),
+    cbindData: function(initialConfig) {
+	let me = this;
+
+	let fingerprint = initialConfig.fingerprint;
+	let baseurl = '/api2/extjs/config/tape-encryption-keys';
+
+	me.isCreate = !fingerprint;
+	me.url = fingerprint ? `${baseurl}/${encodeURIComponent(fingerprint)}` : baseurl;
+	me.method = fingerprint ? 'PUT' : 'POST';
+
+	return { };
+    },
+
+    items: [
+	{
+	    fieldLabel: gettext('Hint'),
+	    name: 'hint',
+	    xtype: 'pmxDisplayEditField',
+	    renderer: Ext.htmlEncode,
+	    allowBlank: false,
+	    cbind: {
+		editable: '{isCreate}',
+	    },
+	},
+	{
+	    xtype: 'textfield',
+	    inputType: 'password',
+	    fieldLabel: gettext('Password'),
+	    name: 'password',
+	    minLength: 5,
+	    allowBlank: false,
+	},
+	{
+	    xtype: 'textfield',
+	    inputType: 'password',
+	    submitValue: false,
+	    fieldLabel: gettext('Confirm Password'),
+	    minLength: 5,
+	    vtype: 'password',
+	    initialPassField: 'password',
+	    allowBlank: false,
+	},
+    ],
+});