ui: dc/AuthEdit: refactor TFASelector in its own component

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

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index a70f4d7db1af59aed361ce33885ec2d1a2f03911..241a7bdb496495abf0348185272680633c5285f0 100644 (file)
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -69,8 +69,9 @@ JSSRC=                                                        \
        form/CephPoolSelector.js                        \
        form/PermPathSelector.js                        \
        form/SpiceEnhancementSelector.js                \
-       form/SDNZoneSelector.js                         \
-       form/SDNControllerSelector.js                   \
+       form/SDNZoneSelector.js                         \
+       form/SDNControllerSelector.js                   \
+       form/TFASelector.js                             \
        dc/Tasks.js                                     \
        dc/Log.js                                       \
        panel/StatusPanel.js                            \

diff --git a/www/manager6/dc/AuthEdit.js b/www/manager6/dc/AuthEdit.js
index fa926ad6903214034d82f4efd8772c9810243cac..1a62e550d305b53ea3e8b10b516d6e354bb1b458 100644 (file)
--- a/www/manager6/dc/AuthEdit.js
+++ b/www/manager6/dc/AuthEdit.js
@@ -123,72 +123,9 @@ Ext.define('PVE.dc.AuthEdit', {
             );
        }
 
-       // Two Factor Auth settings
-
-        column2.push({
-            xtype: 'proxmoxKVComboBox',
-            name: 'tfa',
-           deleteEmpty: !me.isCreate,
-           value: '',
-            fieldLabel: gettext('TFA'),
-           comboItems: [ ['__default__', Proxmox.Utils.noneText], ['oath', 'OATH'], ['yubico', 'Yubico']],
-           listeners: {
-               change: function(f, value) {
-                   if (!me.rendered) {
-                       return;
-                   }
-                   me.down('field[name=oath_step]').setVisible(value === 'oath');
-                   me.down('field[name=oath_digits]').setVisible(value === 'oath');
-                   me.down('field[name=yubico_api_id]').setVisible(value === 'yubico');
-                   me.down('field[name=yubico_api_key]').setVisible(value === 'yubico');
-                   me.down('field[name=yubico_url]').setVisible(value === 'yubico');
-               }
-           }
-        });
-
-       column2.push({
-            xtype: 'proxmoxintegerfield',
-            name: 'oath_step',
-           value: '',
-           minValue: 10,
-           emptyText: Proxmox.Utils.defaultText + ' (30)',
-           submitEmptyText: false,
-           hidden: true,
-            fieldLabel: 'OATH time step'
-        });
-
        column2.push({
-            xtype: 'proxmoxintegerfield',
-            name: 'oath_digits',
-           value: '',
-           minValue: 6,
-           maxValue: 8,
-           emptyText: Proxmox.Utils.defaultText + ' (6)',
-           submitEmptyText: false,
-           hidden: true,
-            fieldLabel: 'OATH password length'
-        });
-
-       column2.push({
-            xtype: 'textfield',
-            name: 'yubico_api_id',
-           hidden: true,
-            fieldLabel: 'Yubico API Id'
-        });
-
-       column2.push({
-            xtype: 'textfield',
-            name: 'yubico_api_key',
-           hidden: true,
-            fieldLabel: 'Yubico API Key'
-        });
-
-       column2.push({
-            xtype: 'textfield',
-            name: 'yubico_url',
-           hidden: true,
-            fieldLabel: 'Yubico URL'
-        });
+           xtype: 'pveTFASelector',
+       });
 
        var ipanel = Ext.create('Proxmox.panel.InputPanel', {
            column1: column1,
@@ -210,31 +147,6 @@ Ext.define('PVE.dc.AuthEdit', {
                    values.type = me.authType;
                }
 
-               if (values.tfa === 'oath') {
-                   values.tfa = "type=oath";
-                   if (values.oath_step) {
-                       values.tfa += ",step=" + values.oath_step;
-                   }
-                   if (values.oath_digits) {
-                       values.tfa += ",digits=" + values.oath_digits;
-                   }
-               } else if (values.tfa === 'yubico') {
-                   values.tfa = "type=yubico";
-                   values.tfa += ",id=" + values.yubico_api_id;
-                   values.tfa += ",key=" + values.yubico_api_key;
-                   if (values.yubico_url) {
-                       values.tfa += ",url=" + values.yubico_url;
-                   }
-               } else {
-                   delete values.tfa;
-               }
-
-               delete values.oath_step;
-               delete values.oath_digits;
-               delete values.yubico_api_id;
-               delete values.yubico_api_key;
-               delete values.yubico_url;
-               
                return values;
            }
        });
@@ -260,22 +172,6 @@ Ext.define('PVE.dc.AuthEdit', {
                        throw "got wrong auth type";
                    }
 
-                   if (data.tfa) {
-                       var tfacfg = PVE.Parser.parseTfaConfig(data.tfa);
-                       data.tfa = tfacfg.type;
-                       if (tfacfg.type === 'yubico') {
-                           data.yubico_api_key = tfacfg.key;
-                           data.yubico_api_id = tfacfg.id;
-                           data.yubico_url = tfacfg.url;
-                       } else if (tfacfg.type === 'oath') {
-                           // step is a number before
-                           /*jslint confusion: true*/
-                           data.oath_step = tfacfg.step;
-                           data.oath_digits = tfacfg.digits;
-                           /*jslint confusion: false*/
-                       }
-                   }
-
                     me.setValues(data);
                 }
             });

diff --git a/www/manager6/form/TFASelector.js b/www/manager6/form/TFASelector.js
new file mode 100644 (file)
index 0000000..d5334f8
--- /dev/null
+++ b/www/manager6/form/TFASelector.js
@@ -0,0 +1,148 @@
+Ext.define('PVE.form.TFASelector', {
+    extend: 'Ext.container.Container',
+    xtype: 'pveTFASelector',
+
+    viewModel: {
+       data: {
+           type: '__default__',
+           step: null,
+           digits: null,
+           id: null,
+           key: null,
+           url: null,
+       },
+
+       formulas: {
+           isOath: (get) => get('type') === 'oath',
+           isYubico: (get) => get('type') === 'yubico',
+           tfavalue: {
+               get: function(get) {
+                   let val = {
+                       type: get('type'),
+                   };
+                   if (get('isOath')) {
+                       let step = get('step');
+                       let digits = get('digits');
+                       if (step) {
+                           val.step = step;
+                       }
+                       if (digits) {
+                           val.digits = digits;
+                       }
+                   } else if (get('isYubico')) {
+                       let id = get('id');
+                       let key = get('key');
+                       let url = get('url');
+                       val.id = id;
+                       val.key = key;
+                       if (url) {
+                           val.url = url;
+                       }
+                   } else if (val.type === '__default__') {
+                       return "";
+                   }
+
+                   return PVE.Parser.printPropertyString(val);
+               },
+               set: function(value) {
+                   let val = PVE.Parser.parseTfaConfig(value);
+                   this.set(val);
+                   this.notify();
+                   // we need to reset the original values, so that
+                   // we can reliably track the state of the form
+                   let form = this.getView().up('form');
+                   if (form.trackResetOnLoad) {
+                       let fields = this.getView().query('field[name!="tfa"]');
+                       fields.forEach((field) => field.resetOriginalValue());
+                   }
+               },
+           },
+       },
+    },
+
+    items: [
+       {
+           xtype: 'proxmoxtextfield',
+           name: 'tfa',
+           hidden: true,
+           submitValue: true,
+           deleteEmpty: true,
+           bind: {
+               value: "{tfavalue}",
+           },
+       },
+       {
+           xtype: 'proxmoxKVComboBox',
+           value: '__default__',
+           deleteEmpty: false,
+           submitValue: false,
+           fieldLabel: gettext('TFA'),
+           comboItems: [['__default__', Proxmox.Utils.noneText], ['oath', 'OATH'], ['yubico', 'Yubico']],
+           bind: {
+               value: "{type}",
+           },
+       },
+       {
+           xtype: 'proxmoxintegerfield',
+           hidden: true,
+           minValue: 10,
+           submitValue: false,
+           emptyText: Proxmox.Utils.defaultText + ' (30)',
+           fieldLabel: 'OATH time step',
+           bind: {
+               value: "{step}",
+               hidden: "{!isOath}",
+               disabled: "{!isOath}",
+           },
+       },
+       {
+           xtype: 'proxmoxintegerfield',
+           hidden: true,
+           submitValue: false,
+           fieldLabel: 'OATH password length',
+           minValue: 6,
+           maxValue: 8,
+           emptyText: Proxmox.Utils.defaultText + ' (6)',
+           bind: {
+               value: "{digits}",
+               hidden: "{!isOath}",
+               disabled: "{!isOath}",
+           },
+       },
+       {
+           xtype: 'textfield',
+           hidden: true,
+           submitValue: false,
+           allowBlank: false,
+           fieldLabel: 'Yubico API Id',
+           bind: {
+               value: "{id}",
+               hidden: "{!isYubico}",
+               disabled: "{!isYubico}",
+           },
+       },
+       {
+           xtype: 'textfield',
+           hidden: true,
+           submitValue: false,
+           allowBlank: false,
+           fieldLabel: 'Yubico API Key',
+           bind: {
+               value: "{key}",
+               hidden: "{!isYubico}",
+               disabled: "{!isYubico}",
+           },
+       },
+       {
+           xtype: 'textfield',
+           hidden: true,
+           submitValue: false,
+           fieldLabel: 'Yubico URL',
+           bind: {
+               value: "{url}",
+               hidden: "{!isYubico}",
+               disabled: "{!isYubico}",
+           },
+       },
+    ],
+});