From 572fc035a21ccec1b4ffbd65b700116ca8fc7c6c Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Mon, 1 Feb 2021 15:37:43 +0100
Subject: [PATCH] ui: webauthn: add notes/warnings for better UX

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/config/WebauthnView.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/www/config/WebauthnView.js b/www/config/WebauthnView.js
index b23e813a..a5671db8 100644
--- a/www/config/WebauthnView.js
+++ b/www/config/WebauthnView.js
@@ -59,16 +59,33 @@ Ext.define('PBS.WebauthnConfigEdit', {
     url: "/api2/extjs/config/access/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',
@@ -103,5 +120,18 @@ Ext.define('PBS.WebauthnConfigEdit', {
 		},
 	    ],
 	},
+	{
+	    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.'),
+	},
     ],
 });