[pve-devel] [PATCH manager 1/6] ui: dc/AuthEdit: refactor TFASelector in its own component

Dominik Csapak d.csapak at proxmox.com
Thu Apr 9 16:10:44 CEST 2020


Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/Makefile            |   5 +-
 www/manager6/dc/AuthEdit.js      | 108 +---------------------
 www/manager6/form/TFASelector.js | 148 +++++++++++++++++++++++++++++++
 3 files changed, 153 insertions(+), 108 deletions(-)
 create mode 100644 www/manager6/form/TFASelector.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 3aa2b87b..095c4c08 100644
--- 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 fa926ad6..1a62e550 100644
--- 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
index 00000000..d5334f8a
--- /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}",
+	    },
+	},
+    ],
+});
-- 
2.20.1





More information about the pve-devel mailing list