[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