www/config/WebauthnView.js

   1 Ext.define('PBS.WebauthnConfigView', {
   2     extend: 'Proxmox.grid.ObjectGrid',
   3     alias: ['widget.pbsWebauthnConfigView'],
   4
   5     url: "/api2/json/config/access/tfa/webauthn",
   6     cwidth1: 150,
   7     interval: 1000,
   8
   9     rows: {
  10         rp: {
  11             header: gettext('Relying Party'),
  12             required: true,
  13             defaultValue: gettext('Not configured'),
  14         },
  15         origin: {
  16             header: gettext('Origin'),
  17             required: true,
  18             defaultValue: gettext('Not configured'),
  19         },
  20         id: {
  21             header: 'ID',
  22             required: true,
  23             defaultValue: gettext('Not configured'),
  24         },
  25     },
  26
  27     tbar: [
  28         {
  29             text: gettext("Edit"),
  30             handler: 'runEditor',
  31         },
  32     ],
  33     controller: {
  34         xclass: 'Ext.app.ViewController',
  35
  36         runEditor: () => Ext.create('PBS.WebauthnConfigEdit', { autoShow: true }),
  37
  38         startStore: function() { this.getView().getStore().rstore.startUpdate(); },
  39         stopStore: function() { this.getView().getStore().rstore.stopUpdate(); },
  40     },
  41
  42
  43     listeners: {
  44         itemdblclick: 'runEditor',
  45         activate: 'startStore',
  46         deactivate: 'stopStore',
  47     },
  48 });
  49
  50 Ext.define('PBS.WebauthnConfigEdit', {
  51     extend: 'Proxmox.window.Edit',
  52     alias: ['widget.pbsWebauthnConfigEdit'],
  53
  54     subject: gettext('Webauthn'),
  55     url: "/api2/extjs/config/access/tfa/webauthn",
  56     autoLoad: true,
  57
  58     width: 512,
  59
  60     fieldDefaults: {
  61         labelWidth: 120,
  62     },
  63
  64     setValues: function(values) {
  65         let me = this;
  66
  67         me.relayingPartySet = values && typeof values.rp === 'string';
  68
  69         me.callParent(arguments);
  70     },
  71
  72     items: [
  73         {
  74             xtype: 'textfield',
  75             fieldLabel: gettext('Relying Party'),
  76             name: 'rp',
  77             allowBlank: false,
  78             listeners: {
  79                 dirtychange: function(field, isDirty) {
  80                     let win = field.up('window');
  81                     let warningBox = win.down('box[id=rpChangeWarning]');
  82                     warningBox.setHidden(!win.relayingPartySet || !isDirty);
  83                 },
  84             },
  85         },
  86         {
  87             xtype: 'textfield',
  88             fieldLabel: gettext('Origin'),
  89             name: 'origin',
  90             allowBlank: false,
  91         },
  92         {
  93             xtype: 'textfield',
  94             fieldLabel: 'ID',
  95             name: 'id',
  96             allowBlank: false,
  97         },
  98         {
  99             xtype: 'container',
 100             layout: 'hbox',
 101             items: [
 102                 {
 103                     xtype: 'box',
 104                     flex: 1,
 105                 },
 106                 {
 107                     xtype: 'button',
 108                     text: gettext('Auto-fill'),
 109                     iconCls: 'fa fa-fw fa-pencil-square-o',
 110                     handler: function(button, ev) {
 111                         let panel = this.up('panel');
 112                         panel.down('field[name=rp]').setValue(document.location.hostname);
 113                         panel.down('field[name=origin]').setValue(document.location.origin);
 114                         panel.down('field[name=id]').setValue(document.location.hostname);
 115                     },
 116                 },
 117             ],
 118         },
 119         {
 120             xtype: 'box',
 121             html: `<span class='pmx-hint'>${gettext('Note:')}</span> `
 122                 + gettext('WebAuthn requires using a trusted certificate.'),
 123         },
 124         {
 125             xtype: 'box',
 126             id: 'rpChangeWarning',
 127             hidden: true,
 128             padding: '5 0 0 0',
 129             html: '<i class="fa fa-exclamation-triangle warning"></i> '
 130                 + gettext('Changing the Relying Party may break existing webAuthn TFA entries.'),
 131         },
 132     ],
 133 });