src/panel/TfaView.js

   1 Ext.define('pmx-tfa-users', {
   2     extend: 'Ext.data.Model',
   3     fields: ['userid'],
   4     idProperty: 'userid',
   5     proxy: {
   6         type: 'proxmox',
   7         url: '/api2/json/access/tfa',
   8     },
   9 });
  10
  11 Ext.define('pmx-tfa-entry', {
  12     extend: 'Ext.data.Model',
  13     fields: ['fullid', 'userid', 'type', 'description', 'created', 'enable'],
  14     idProperty: 'fullid',
  15 });
  16
  17
  18 Ext.define('Proxmox.panel.TfaView', {
  19     extend: 'Ext.grid.GridPanel',
  20     alias: 'widget.pmxTfaView',
  21
  22     title: gettext('Second Factors'),
  23     reference: 'tfaview',
  24
  25     issuerName: 'Proxmox',
  26
  27     store: {
  28         type: 'diff',
  29         autoDestroy: true,
  30         autoDestroyRstore: true,
  31         model: 'pmx-tfa-entry',
  32         rstore: {
  33             type: 'store',
  34             proxy: 'memory',
  35             storeid: 'pmx-tfa-entry',
  36             model: 'pmx-tfa-entry',
  37         },
  38     },
  39
  40     controller: {
  41         xclass: 'Ext.app.ViewController',
  42
  43         init: function(view) {
  44             let me = this;
  45             view.tfaStore = Ext.create('Proxmox.data.UpdateStore', {
  46                 autoStart: true,
  47                 interval: 5 * 1000,
  48                 storeid: 'pmx-tfa-users',
  49                 model: 'pmx-tfa-users',
  50             });
  51             view.tfaStore.on('load', this.onLoad, this);
  52             view.on('destroy', view.tfaStore.stopUpdate);
  53             Proxmox.Utils.monStoreErrors(view, view.tfaStore);
  54         },
  55
  56         reload: function() { this.getView().tfaStore.load(); },
  57
  58         onLoad: function(store, data, success) {
  59             if (!success) return;
  60
  61             let records = [];
  62             Ext.Array.each(data, user => {
  63                 Ext.Array.each(user.data.entries, entry => {
  64                     records.push({
  65                         fullid: `${user.id}/${entry.id}`,
  66                         userid: user.id,
  67                         type: entry.type,
  68                         description: entry.description,
  69                         created: entry.created,
  70                         enable: entry.enable,
  71                     });
  72                 });
  73             });
  74
  75             let rstore = this.getView().store.rstore;
  76             rstore.loadData(records);
  77             rstore.fireEvent('load', rstore, records, true);
  78         },
  79
  80         addTotp: function() {
  81             let me = this;
  82
  83             Ext.create('Proxmox.window.AddTotp', {
  84                 isCreate: true,
  85                 issuerName: me.getView().issuerName,
  86                 listeners: {
  87                     destroy: function() {
  88                         me.reload();
  89                     },
  90                 },
  91             }).show();
  92         },
  93
  94         addWebauthn: function() {
  95             let me = this;
  96
  97             Ext.create('Proxmox.window.AddWebauthn', {
  98                 isCreate: true,
  99                 listeners: {
 100                     destroy: function() {
 101                         me.reload();
 102                     },
 103                 },
 104             }).show();
 105         },
 106
 107         addRecovery: async function() {
 108             let me = this;
 109
 110             Ext.create('Proxmox.window.AddTfaRecovery', {
 111                 listeners: {
 112                     destroy: function() {
 113                         me.reload();
 114                     },
 115                 },
 116             }).show();
 117         },
 118
 119         editItem: function() {
 120             let me = this;
 121             let view = me.getView();
 122             let selection = view.getSelection();
 123             if (selection.length !== 1 || selection[0].id.endsWith("/recovery")) {
 124                 return;
 125             }
 126
 127             Ext.create('Proxmox.window.TfaEdit', {
 128                 'tfa-id': selection[0].data.fullid,
 129                 listeners: {
 130                     destroy: function() {
 131                         me.reload();
 132                     },
 133                 },
 134             }).show();
 135         },
 136
 137         renderUser: fullid => fullid.split('/')[0],
 138
 139         renderEnabled: enabled => {
 140             if (enabled === undefined) {
 141                 return Proxmox.Utils.yesText;
 142             } else {
 143                 return Proxmox.Utils.format_boolean(enabled);
 144             }
 145         },
 146
 147         onRemoveButton: function(btn, event, record) {
 148             let me = this;
 149
 150             Ext.create('Proxmox.tfa.confirmRemove', {
 151                 ...record.data,
 152                 callback: password => me.removeItem(password, record),
 153             })
 154             .show();
 155         },
 156
 157         removeItem: async function(password, record) {
 158             let me = this;
 159
 160             if (password !== null) {
 161                 password = '?password=' + encodeURIComponent(password);
 162             } else {
 163                 password = '';
 164             }
 165
 166             try {
 167                 me.getView().mask(gettext('Please wait...'), 'x-mask-loading');
 168                 await Proxmox.Async.api2({
 169                     url: `/api2/extjs/access/tfa/${record.id}${password}`,
 170                     method: 'DELETE',
 171                 });
 172                 me.reload();
 173             } catch (response) {
 174                 Ext.Msg.alert(gettext('Error'), response.result.message);
 175             } finally {
 176                 me.getView().unmask();
 177             }
 178         },
 179     },
 180
 181     viewConfig: {
 182         trackOver: false,
 183     },
 184
 185     listeners: {
 186         itemdblclick: 'editItem',
 187     },
 188
 189     columns: [
 190         {
 191             header: gettext('User'),
 192             width: 200,
 193             sortable: true,
 194             dataIndex: 'fullid',
 195             renderer: 'renderUser',
 196         },
 197         {
 198             header: gettext('Enabled'),
 199             width: 80,
 200             sortable: true,
 201             dataIndex: 'enable',
 202             renderer: 'renderEnabled',
 203         },
 204         {
 205             header: gettext('TFA Type'),
 206             width: 80,
 207             sortable: true,
 208             dataIndex: 'type',
 209         },
 210         {
 211             header: gettext('Created'),
 212             width: 150,
 213             sortable: true,
 214             dataIndex: 'created',
 215             renderer: Proxmox.Utils.render_timestamp,
 216         },
 217         {
 218             header: gettext('Description'),
 219             width: 300,
 220             sortable: true,
 221             dataIndex: 'description',
 222             renderer: Ext.String.htmlEncode,
 223             flex: 1,
 224         },
 225     ],
 226
 227     tbar: [
 228         {
 229             text: gettext('Add'),
 230             menu: {
 231                 xtype: 'menu',
 232                 items: [
 233                     {
 234                         text: gettext('TOTP'),
 235                         itemId: 'totp',
 236                         iconCls: 'fa fa-fw fa-clock-o',
 237                         handler: 'addTotp',
 238                     },
 239                     {
 240                         text: gettext('Webauthn'),
 241                         itemId: 'webauthn',
 242                         iconCls: 'fa fa-fw fa-shield',
 243                         handler: 'addWebauthn',
 244                     },
 245                     {
 246                         text: gettext('Recovery Keys'),
 247                         itemId: 'recovery',
 248                         iconCls: 'fa fa-fw fa-file-text-o',
 249                         handler: 'addRecovery',
 250                     },
 251                 ],
 252             },
 253         },
 254         '-',
 255         {
 256             xtype: 'proxmoxButton',
 257             text: gettext('Edit'),
 258             handler: 'editItem',
 259             enableFn: rec => !rec.id.endsWith("/recovery"),
 260             disabled: true,
 261         },
 262         {
 263             xtype: 'proxmoxButton',
 264             disabled: true,
 265             text: gettext('Remove'),
 266             getRecordName: rec => rec.data.description,
 267             handler: 'onRemoveButton',
 268         },
 269     ],
 270 });