[pve-devel] [PATCH widget-toolkit 6/7] add Proxmox.panel.TfaView
Wolfgang Bumiller
w.bumiller at proxmox.com
Tue Nov 9 12:27:20 CET 2021
copied from pbs with s/pbs/pmx/ and s/PBS/Proxmox/
DELETE call changed from using a body to url parameters,
since pve doesn't support a body there currently, and pbs
doesn't care
Signed-off-by: Wolfgang Bumiller <w.bumiller at proxmox.com>
---
src/Makefile | 1 +
src/panel/TfaView.js | 270 ++++++++++++++++++++++++++++++++++++++++++
src/window/TfaEdit.js | 135 +++++++++++++++++++++
3 files changed, 406 insertions(+)
create mode 100644 src/panel/TfaView.js
diff --git a/src/Makefile b/src/Makefile
index ad7a3c2..bf2eab0 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -63,6 +63,7 @@ JSSRC= \
panel/ACMEPlugin.js \
panel/ACMEDomains.js \
panel/StatusView.js \
+ panel/TfaView.js \
window/Edit.js \
window/PasswordEdit.js \
window/SafeDestroy.js \
diff --git a/src/panel/TfaView.js b/src/panel/TfaView.js
new file mode 100644
index 0000000..a0cb04a
--- /dev/null
+++ b/src/panel/TfaView.js
@@ -0,0 +1,270 @@
+Ext.define('pmx-tfa-users', {
+ extend: 'Ext.data.Model',
+ fields: ['userid'],
+ idProperty: 'userid',
+ proxy: {
+ type: 'proxmox',
+ url: '/api2/json/access/tfa',
+ },
+});
+
+Ext.define('pmx-tfa-entry', {
+ extend: 'Ext.data.Model',
+ fields: ['fullid', 'userid', 'type', 'description', 'created', 'enable'],
+ idProperty: 'fullid',
+});
+
+
+Ext.define('Proxmox.panel.TfaView', {
+ extend: 'Ext.grid.GridPanel',
+ alias: 'widget.pmxTfaView',
+
+ title: gettext('Second Factors'),
+ reference: 'tfaview',
+
+ issuerName: 'Proxmox',
+
+ store: {
+ type: 'diff',
+ autoDestroy: true,
+ autoDestroyRstore: true,
+ model: 'pmx-tfa-entry',
+ rstore: {
+ type: 'store',
+ proxy: 'memory',
+ storeid: 'pmx-tfa-entry',
+ model: 'pmx-tfa-entry',
+ },
+ },
+
+ controller: {
+ xclass: 'Ext.app.ViewController',
+
+ init: function(view) {
+ let me = this;
+ view.tfaStore = Ext.create('Proxmox.data.UpdateStore', {
+ autoStart: true,
+ interval: 5 * 1000,
+ storeid: 'pmx-tfa-users',
+ model: 'pmx-tfa-users',
+ });
+ view.tfaStore.on('load', this.onLoad, this);
+ view.on('destroy', view.tfaStore.stopUpdate);
+ Proxmox.Utils.monStoreErrors(view, view.tfaStore);
+ },
+
+ reload: function() { this.getView().tfaStore.load(); },
+
+ onLoad: function(store, data, success) {
+ if (!success) return;
+
+ let records = [];
+ Ext.Array.each(data, user => {
+ Ext.Array.each(user.data.entries, entry => {
+ records.push({
+ fullid: `${user.id}/${entry.id}`,
+ userid: user.id,
+ type: entry.type,
+ description: entry.description,
+ created: entry.created,
+ enable: entry.enable,
+ });
+ });
+ });
+
+ let rstore = this.getView().store.rstore;
+ rstore.loadData(records);
+ rstore.fireEvent('load', rstore, records, true);
+ },
+
+ addTotp: function() {
+ let me = this;
+
+ Ext.create('Proxmox.window.AddTotp', {
+ isCreate: true,
+ issuerName: me.getView().issuerName,
+ listeners: {
+ destroy: function() {
+ me.reload();
+ },
+ },
+ }).show();
+ },
+
+ addWebauthn: function() {
+ let me = this;
+
+ Ext.create('Proxmox.window.AddWebauthn', {
+ isCreate: true,
+ listeners: {
+ destroy: function() {
+ me.reload();
+ },
+ },
+ }).show();
+ },
+
+ addRecovery: async function() {
+ let me = this;
+
+ Ext.create('Proxmox.window.AddTfaRecovery', {
+ listeners: {
+ destroy: function() {
+ me.reload();
+ },
+ },
+ }).show();
+ },
+
+ editItem: function() {
+ let me = this;
+ let view = me.getView();
+ let selection = view.getSelection();
+ if (selection.length !== 1 || selection[0].id.endsWith("/recovery")) {
+ return;
+ }
+
+ Ext.create('Proxmox.window.TfaEdit', {
+ 'tfa-id': selection[0].data.fullid,
+ listeners: {
+ destroy: function() {
+ me.reload();
+ },
+ },
+ }).show();
+ },
+
+ renderUser: fullid => fullid.split('/')[0],
+
+ renderEnabled: enabled => {
+ if (enabled === undefined) {
+ return Proxmox.Utils.yesText;
+ } else {
+ return Proxmox.Utils.format_boolean(enabled);
+ }
+ },
+
+ onRemoveButton: function(btn, event, record) {
+ let me = this;
+
+ Ext.create('Proxmox.tfa.confirmRemove', {
+ ...record.data,
+ callback: password => me.removeItem(password, record),
+ })
+ .show();
+ },
+
+ removeItem: async function(password, record) {
+ let me = this;
+
+ if (password !== null) {
+ password = '?password=' + encodeURIComponent(password);
+ } else {
+ password = '';
+ }
+
+ try {
+ me.getView().mask(gettext('Please wait...'), 'x-mask-loading');
+ await Proxmox.Async.api2({
+ url: `/api2/extjs/access/tfa/${record.id}${password}`,
+ method: 'DELETE',
+ });
+ me.reload();
+ } catch (response) {
+ Ext.Msg.alert(gettext('Error'), response.result.message);
+ } finally {
+ me.getView().unmask();
+ }
+ },
+ },
+
+ viewConfig: {
+ trackOver: false,
+ },
+
+ listeners: {
+ itemdblclick: 'editItem',
+ },
+
+ columns: [
+ {
+ header: gettext('User'),
+ width: 200,
+ sortable: true,
+ dataIndex: 'fullid',
+ renderer: 'renderUser',
+ },
+ {
+ header: gettext('Enabled'),
+ width: 80,
+ sortable: true,
+ dataIndex: 'enable',
+ renderer: 'renderEnabled',
+ },
+ {
+ header: gettext('TFA Type'),
+ width: 80,
+ sortable: true,
+ dataIndex: 'type',
+ },
+ {
+ header: gettext('Created'),
+ width: 150,
+ sortable: true,
+ dataIndex: 'created',
+ renderer: Proxmox.Utils.render_timestamp,
+ },
+ {
+ header: gettext('Description'),
+ width: 300,
+ sortable: true,
+ dataIndex: 'description',
+ renderer: Ext.String.htmlEncode,
+ flex: 1,
+ },
+ ],
+
+ tbar: [
+ {
+ text: gettext('Add'),
+ menu: {
+ xtype: 'menu',
+ items: [
+ {
+ text: gettext('TOTP'),
+ itemId: 'totp',
+ iconCls: 'fa fa-fw fa-clock-o',
+ handler: 'addTotp',
+ },
+ {
+ text: gettext('Webauthn'),
+ itemId: 'webauthn',
+ iconCls: 'fa fa-fw fa-shield',
+ handler: 'addWebauthn',
+ },
+ {
+ text: gettext('Recovery Keys'),
+ itemId: 'recovery',
+ iconCls: 'fa fa-fw fa-file-text-o',
+ handler: 'addRecovery',
+ },
+ ],
+ },
+ },
+ '-',
+ {
+ xtype: 'proxmoxButton',
+ text: gettext('Edit'),
+ handler: 'editItem',
+ enableFn: rec => !rec.id.endsWith("/recovery"),
+ disabled: true,
+ },
+ {
+ xtype: 'proxmoxButton',
+ disabled: true,
+ text: gettext('Remove'),
+ getRecordName: rec => rec.data.description,
+ handler: 'onRemoveButton',
+ },
+ ],
+});
diff --git a/src/window/TfaEdit.js b/src/window/TfaEdit.js
index 710f2b9..4a8b937 100644
--- a/src/window/TfaEdit.js
+++ b/src/window/TfaEdit.js
@@ -91,3 +91,138 @@ Ext.define('Proxmox.window.TfaEdit', {
return values;
},
});
+
+Ext.define('Proxmox.tfa.confirmRemove', {
+ extend: 'Proxmox.window.Edit',
+ mixins: ['Proxmox.Mixin.CBind'],
+
+ title: gettext("Confirm TFA Removal"),
+
+ modal: true,
+ resizable: false,
+ width: 600,
+ isCreate: true, // logic
+ isRemove: true,
+
+ url: '/access/tfa',
+
+ initComponent: function() {
+ let me = this;
+
+ if (typeof me.type !== "string") {
+ throw "missing type";
+ }
+
+ if (!me.callback) {
+ throw "missing callback";
+ }
+
+ me.callParent();
+
+ if (Proxmox.UserName === 'root at pam') {
+ me.lookup('password').setVisible(false);
+ me.lookup('password').setDisabled(true);
+ }
+ },
+
+ submit: function() {
+ let me = this;
+ if (Proxmox.UserName === 'root at pam') {
+ me.callback(null);
+ } else {
+ me.callback(me.lookup('password').getValue());
+ }
+ me.close();
+ },
+
+ items: [
+ {
+ xtype: 'box',
+ padding: '0 0 10 0',
+ html: Ext.String.format(
+ gettext('Are you sure you want to remove this {0} entry?'),
+ 'TFA',
+ ),
+ },
+ {
+ xtype: 'container',
+ layout: {
+ type: 'hbox',
+ align: 'begin',
+ },
+ defaults: {
+ border: false,
+ layout: 'anchor',
+ flex: 1,
+ padding: 5,
+ },
+ items: [
+ {
+ xtype: 'container',
+ layout: {
+ type: 'vbox',
+ },
+ padding: '0 10 0 0',
+ items: [
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext('User'),
+ cbind: {
+ value: '{userid}',
+ },
+ },
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext('Type'),
+ cbind: {
+ value: '{type}',
+ },
+ },
+ ],
+ },
+ {
+ xtype: 'container',
+ layout: {
+ type: 'vbox',
+ },
+ padding: '0 0 0 10',
+ items: [
+ {
+ xtype: 'displayfield',
+ fieldLabel: gettext('Created'),
+ renderer: v => Proxmox.Utils.render_timestamp(v),
+ cbind: {
+ value: '{created}',
+ },
+ },
+ {
+ xtype: 'textfield',
+ fieldLabel: gettext('Description'),
+ cbind: {
+ value: '{description}',
+ },
+ emptyText: Proxmox.Utils.NoneText,
+ submitValue: false,
+ editable: false,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ xtype: 'textfield',
+ inputType: 'password',
+ fieldLabel: gettext('Password'),
+ minLength: 5,
+ reference: 'password',
+ name: 'password',
+ allowBlank: false,
+ validateBlank: true,
+ padding: '10 0 0 0',
+ cbind: {
+ emptyText: () =>
+ Ext.String.format(gettext("Confirm your ({0}) password"), Proxmox.UserName),
+ },
+ },
+ ],
+});
--
2.30.2
More information about the pve-devel
mailing list