js/TFAView.js

   1 // TODO merge with the one from pbs in widget toolkit
   2 Ext.define('PMG.WebauthnConfigEdit', {
   3     extend: 'Proxmox.window.Edit',
   4     alias: ['widget.pmgWebauthnConfigEdit'],
   5
   6     subject: gettext('Webauthn'),
   7     url: "/api2/extjs/config/tfa/webauthn",
   8     autoLoad: true,
   9
  10     width: 512,
  11
  12     fieldDefaults: {
  13         labelWidth: 120,
  14     },
  15
  16     setValues: function(values) {
  17         let me = this;
  18
  19         me.relayingPartySet = values && typeof values.rp === 'string';
  20
  21         me.callParent(arguments);
  22     },
  23
  24     items: [
  25         {
  26             xtype: 'textfield',
  27             fieldLabel: gettext('Relying Party'),
  28             name: 'rp',
  29             allowBlank: false,
  30             listeners: {
  31                 dirtychange: function(field, isDirty) {
  32                     let win = field.up('window');
  33                     let warningBox = win.down('box[id=rpChangeWarning]');
  34                     warningBox.setHidden(!win.relayingPartySet || !isDirty);
  35                 },
  36             },
  37         },
  38         {
  39             xtype: 'textfield',
  40             fieldLabel: gettext('Origin'),
  41             name: 'origin',
  42             allowBlank: false,
  43         },
  44         {
  45             xtype: 'textfield',
  46             fieldLabel: 'ID',
  47             name: 'id',
  48             allowBlank: false,
  49         },
  50         {
  51             xtype: 'container',
  52             layout: 'hbox',
  53             items: [
  54                 {
  55                     xtype: 'box',
  56                     flex: 1,
  57                 },
  58                 {
  59                     xtype: 'button',
  60                     text: gettext('Auto-fill'),
  61                     iconCls: 'fa fa-fw fa-pencil-square-o',
  62                     handler: function(button, ev) {
  63                         let panel = this.up('panel');
  64                         panel.down('field[name=rp]').setValue(document.location.hostname);
  65                         panel.down('field[name=origin]').setValue(document.location.origin);
  66                         panel.down('field[name=id]').setValue(document.location.hostname);
  67                     },
  68                 },
  69             ],
  70         },
  71         {
  72             xtype: 'box',
  73             html: `<span class='pmx-hint'>${gettext('Note:')}</span> `
  74                 + gettext('WebAuthn requires using a trusted certificate.'),
  75         },
  76         {
  77             xtype: 'box',
  78             id: 'rpChangeWarning',
  79             hidden: true,
  80             padding: '5 0 0 0',
  81             html: '<i class="fa fa-exclamation-triangle warning"></i> '
  82                 + gettext('Changing the Relying Party may break existing webAuthn TFA entries.'),
  83         },
  84     ],
  85 });
  86
  87 Ext.define('PMG.TFAView', {
  88     extend: 'Proxmox.panel.TfaView',
  89     alias: 'widget.pmgTFAView',
  90
  91     initComponent: function() {
  92         let me = this;
  93
  94         me.tbar.push(
  95             '->',
  96             {
  97                 text: gettext('WebAuthn'),
  98                 itemId: 'webauthn',
  99                 iconCls: 'fa fa-fw fa-cog',
 100                 handler: () => Ext.create('PMG.WebauthnConfigEdit', { autoShow: true }),
 101             },
 102         );
 103
 104         me.callParent(arguments);
 105     },
 106 });