tfa: add webauthn config panel

keep it simple and avoid an extra options panel

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/js/Makefile b/js/Makefile
index f4b7630af32b8a73011eb2c55a4665169d48ce4d..0b9f93b8d57544b16eff10b70994d5cb24991335 100644 (file)
--- a/js/Makefile
+++ b/js/Makefile
@@ -70,6 +70,7 @@ JSSRC=                                                        \
        LDAPConfig.js                                   \
        UserEdit.js                                     \
        UserView.js                                     \
+       TFAView.js                                      \
        FetchmailEdit.js                                \
        FetchmailView.js                                \
        UserManagement.js                               \

diff --git a/js/TFAView.js b/js/TFAView.js
new file mode 100644 (file)
index 0000000..da4bf35
--- /dev/null
+++ b/js/TFAView.js
@@ -0,0 +1,106 @@
+// TODO merge with the one from pbs in widget toolkit
+Ext.define('PMG.WebauthnConfigEdit', {
+    extend: 'Proxmox.window.Edit',
+    alias: ['widget.pmgWebauthnConfigEdit'],
+
+    subject: gettext('Webauthn'),
+    url: "/api2/extjs/config/tfa/webauthn",
+    autoLoad: true,
+
+    width: 512,
+
+    fieldDefaults: {
+       labelWidth: 120,
+    },
+
+    setValues: function(values) {
+       let me = this;
+
+       me.relayingPartySet = values && typeof values.rp === 'string';
+
+       me.callParent(arguments);
+    },
+
+    items: [
+       {
+           xtype: 'textfield',
+           fieldLabel: gettext('Relying Party'),
+           name: 'rp',
+           allowBlank: false,
+           listeners: {
+               dirtychange: function(field, isDirty) {
+                   let win = field.up('window');
+                   let warningBox = win.down('box[id=rpChangeWarning]');
+                   warningBox.setHidden(!win.relayingPartySet || !isDirty);
+               },
+           },
+       },
+       {
+           xtype: 'textfield',
+           fieldLabel: gettext('Origin'),
+           name: 'origin',
+           allowBlank: false,
+       },
+       {
+           xtype: 'textfield',
+           fieldLabel: 'ID',
+           name: 'id',
+           allowBlank: false,
+       },
+       {
+           xtype: 'container',
+           layout: 'hbox',
+           items: [
+               {
+                   xtype: 'box',
+                   flex: 1,
+               },
+               {
+                   xtype: 'button',
+                   text: gettext('Auto-fill'),
+                   iconCls: 'fa fa-fw fa-pencil-square-o',
+                   handler: function(button, ev) {
+                       let panel = this.up('panel');
+                       panel.down('field[name=rp]').setValue(document.location.hostname);
+                       panel.down('field[name=origin]').setValue(document.location.origin);
+                       panel.down('field[name=id]').setValue(document.location.hostname);
+                   },
+               },
+           ],
+       },
+       {
+           xtype: 'box',
+           html: `<span class='pmx-hint'>${gettext('Note:')}</span> `
+               + gettext('WebAuthn requires using a trusted certificate.'),
+       },
+       {
+           xtype: 'box',
+           id: 'rpChangeWarning',
+           hidden: true,
+           padding: '5 0 0 0',
+           html: '<i class="fa fa-exclamation-triangle warning"></i> '
+               + gettext('Changing the Relying Party may break existing webAuthn TFA entries.'),
+       },
+    ],
+});
+
+Ext.define('PMG.TFAView', {
+    extend: 'Proxmox.panel.TfaView',
+    alias: 'widget.pmgTFAView',
+
+    initComponent: function() {
+       let me = this;
+
+       me.tbar.push(
+           '->',
+           {
+               text: gettext('WebAuthn '),
+               itemId: 'webauthn',
+               iconCls: 'fa fa-fw fa-cog',
+               handler: () => Ext.create('PMG.WebauthnConfigEdit', { autoShow: true }),
+           },
+       );
+
+       me.callParent(arguments);
+    },
+});

diff --git a/js/UserManagement.js b/js/UserManagement.js
index 1e9aa0ce087262e4377d29b56f445bb9e9fcbc28..65fabbf9c0d2279de871887d66d6035b5044b649 100644 (file)
--- a/js/UserManagement.js
+++ b/js/UserManagement.js
@@ -16,7 +16,7 @@ Ext.define('PMG.UserManagement', {
            iconCls: 'fa fa-user',
        },
        {
-           xtype: 'pmxTfaView',
+           xtype: 'pmgTFAView',
            title: 'Two Factor',
            itemId: 'tfa',
            iconCls: 'fa fa-key',