[pbs-devel] [PATCH proxmox-backup 1/2] ui: add browser settings window

[pbs-devel] [PATCH proxmox-backup 1/2] ui: add browser settings window

[Dominik Csapak]

mostly copied from pve (for now; will refactor when i add it to
pmg too (soon)) without the pve specific features like dashboard
storages

contains some eslint fixes comparing to pves window

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/MainView.js        |   5 +
 www/Makefile           |   1 +
 www/window/Settings.js | 267 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 273 insertions(+)
 create mode 100644 www/window/Settings.js

diff --git a/www/MainView.js b/www/MainView.js
index a99d34e5..6ed86b77 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -230,6 +230,11 @@ Ext.define('PBS.MainView', {
 		    margin: '0 5 0 0',
 		    iconCls: 'fa fa-user',
 		    menu: [
+			{
+			    iconCls: 'fa fa-gear',
+			    text: gettext('My Settings'),
+			    handler: () => Ext.create('PBS.window.Settings').show(),
+			},
 			{
 			    iconCls: 'fa fa-language',
 			    text: gettext('Language'),
diff --git a/www/Makefile b/www/Makefile
index bfe6fe25..9f9b46aa 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -70,6 +70,7 @@ JSSRC=							\
 	window/SyncJobEdit.js				\
 	window/UserEdit.js				\
 	window/UserPassword.js				\
+	window/Settings.js				\
 	window/TokenEdit.js				\
 	window/TfaEdit.js				\
 	window/VerifyJobEdit.js				\
diff --git a/www/window/Settings.js b/www/window/Settings.js
new file mode 100644
index 00000000..ee8464be
--- /dev/null
+++ b/www/window/Settings.js
@@ -0,0 +1,267 @@
+Ext.define('PBS.window.Settings', {
+    extend: 'Ext.window.Window',
+
+    width: '800px',
+    title: gettext('My Settings'),
+    iconCls: 'fa fa-gear',
+    modal: true,
+    bodyPadding: 10,
+    resizable: false,
+
+    buttons: [
+	'->',
+	{
+	    text: gettext('Close'),
+	    handler: function() {
+		this.up('window').close();
+	    },
+	},
+    ],
+
+    layout: 'hbox',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	init: function(view) {
+	    let me = this;
+	    let sp = Ext.state.Manager.getProvider();
+
+	    let username = sp.get('login-username') || Proxmox.Utils.noneText;
+	    me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
+
+	    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+	    settings.forEach(function(setting) {
+		let val = localStorage.getItem('pve-xterm-' + setting);
+		if (val !== undefined && val !== null) {
+		    let field = me.lookup(setting);
+		    field.setValue(val);
+		    field.resetOriginalValue();
+		}
+	    });
+	},
+
+	set_button_status: function() {
+	    let me = this;
+
+	    let form = me.lookup('xtermform');
+	    let valid = form.isValid();
+	    let dirty = form.isDirty();
+
+	    let hasvalues = false;
+	    let values = form.getValues();
+	    Ext.Object.eachValue(values, function(value) {
+		if (value) {
+		    hasvalues = true;
+		    return false;
+		}
+		return true;
+	    });
+
+	    me.lookup('xtermsave').setDisabled(!dirty || !valid);
+	    me.lookup('xtermreset').setDisabled(!hasvalues);
+	},
+
+	control: {
+	    '#xtermjs form': {
+		dirtychange: 'set_button_status',
+		validitychange: 'set_button_status',
+	    },
+	    '#xtermjs button': {
+		click: function(button) {
+		    let me = this;
+		    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
+		    settings.forEach(function(setting) {
+			let field = me.lookup(setting);
+			if (button.reference === 'xtermsave') {
+			    let value = field.getValue();
+			    if (value) {
+				localStorage.setItem('pve-xterm-' + setting, value);
+			    } else {
+				localStorage.removeItem('pve-xterm-' + setting);
+			    }
+			} else if (button.reference === 'xtermreset') {
+			    field.setValue(undefined);
+			    localStorage.removeItem('pve-xterm-' + setting);
+			}
+			field.resetOriginalValue();
+		    });
+		    me.set_button_status();
+		},
+	    },
+	    'button[name=reset]': {
+		click: function() {
+		    let blacklist = ['login-username'];
+		    let sp = Ext.state.Manager.getProvider();
+		    for (const state of Object.values(sp.state)) {
+			if (blacklist.indexOf(state) !== -1) {
+			    continue;
+			}
+
+			sp.clear(state);
+		    }
+
+		    window.location.reload();
+		},
+	    },
+	    'button[name=clear-username]': {
+		click: function() {
+		    let me = this;
+		    let usernamefield = me.lookupReference('savedUserName');
+		    let sp = Ext.state.Manager.getProvider();
+
+		    usernamefield.setValue(Proxmox.Utils.noneText);
+		    sp.clear('login-username');
+		},
+	    },
+	},
+    },
+
+    items: [{
+	xtype: 'fieldset',
+	flex: 1,
+	title: gettext('Webinterface Settings'),
+	margin: '5',
+	layout: {
+	    type: 'vbox',
+	    align: 'left',
+	},
+	defaults: {
+	    width: '100%',
+	    margin: '0 0 10 0',
+	},
+	items: [
+	    {
+		xtype: 'container',
+		layout: 'hbox',
+		items: [
+		    {
+			xtype: 'displayfield',
+			fieldLabel: gettext('Saved User Name') + ':',
+			labelWidth: 150,
+			stateId: 'login-username',
+			reference: 'savedUserName',
+			flex: 1,
+			value: '',
+		    },
+		    {
+			xtype: 'button',
+			cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+			text: gettext('Reset'),
+			name: 'clear-username',
+		    },
+		],
+	    },
+	    {
+		xtype: 'box',
+		autoEl: { tag: 'hr' },
+	    },
+	    {
+		xtype: 'container',
+		layout: 'hbox',
+		items: [
+		    {
+			xtype: 'displayfield',
+			fieldLabel: gettext('Layout') + ':',
+			flex: 1,
+		    },
+		    {
+			xtype: 'button',
+			cls: 'x-btn-default-toolbar-small proxmox-inline-button',
+			text: gettext('Reset'),
+			tooltip: gettext('Reset all layout changes (for example, column widths)'),
+			name: 'reset',
+		    },
+		],
+	    },
+	],
+    },
+    {
+	xtype: 'container',
+	layout: 'vbox',
+	flex: 1,
+	margin: '5',
+	defaults: {
+	    width: '100%',
+	    // right margin ensures that the right border of the fieldsets
+	    // is shown
+	    margin: '0 2 10 0',
+	},
+	items: [
+	    {
+		xtype: 'fieldset',
+		itemId: 'xtermjs',
+		title: gettext('xterm.js Settings'),
+		items: [{
+		    xtype: 'form',
+		    reference: 'xtermform',
+		    border: false,
+		    layout: {
+			type: 'vbox',
+			algin: 'left',
+		    },
+		    defaults: {
+			width: '100%',
+			margin: '0 0 10 0',
+		    },
+		    items: [
+			{
+			    xtype: 'textfield',
+			    name: 'fontFamily',
+			    reference: 'fontFamily',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Font-Family'),
+			},
+			{
+			    xtype: 'proxmoxintegerfield',
+			    emptyText: Proxmox.Utils.defaultText,
+			    name: 'fontSize',
+			    reference: 'fontSize',
+			    minValue: 1,
+			    fieldLabel: gettext('Font-Size'),
+			},
+			{
+			    xtype: 'numberfield',
+			    name: 'letterSpacing',
+			    reference: 'letterSpacing',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Letter Spacing'),
+			},
+			{
+			    xtype: 'numberfield',
+			    name: 'lineHeight',
+			    minValue: 0.1,
+			    reference: 'lineHeight',
+			    emptyText: Proxmox.Utils.defaultText,
+			    fieldLabel: gettext('Line Height'),
+			},
+			{
+			    xtype: 'container',
+			    layout: {
+				type: 'hbox',
+				pack: 'end',
+			    },
+			    defaults: {
+				margin: '0 0 0 5',
+			    },
+			    items: [
+				{
+				    xtype: 'button',
+				    reference: 'xtermreset',
+				    disabled: true,
+				    text: gettext('Reset'),
+				},
+				{
+				    xtype: 'button',
+				    reference: 'xtermsave',
+				    disabled: true,
+				    text: gettext('Save'),
+				},
+			    ],
+			},
+		    ],
+		}],
+	    },
+	],
+    }],
+});
-- 
2.20.1

[pbs-devel] [PATCH proxmox-backup 2/2] ui: window/Settings / WebAuthn: add browser setting for userVerificationo

[Dominik Csapak]

some fido2/webauthn keys can have a pin, and the client can request
a mode for the user verification.

'default' (no value set), lets the browser/device decide if the user has to
enter the pin of the device
'discouraged' requests that the user should not need to enter the pin
'preferred' requests that the user should need to enter the pin (if possible)

since we use webauthn only as a 2nd factor, having the user enter
the device pin on login may seem too much hassle for some users, so
give them the option

since this is a client option anyway, do not save it in the backend, but
in the browser local storage

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/LoginView.js          |  5 +++++
 www/window/AddWebauthn.js |  7 +++++++
 www/window/Settings.js    | 30 +++++++++++++++++++++++++++++-
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/www/LoginView.js b/www/LoginView.js
index 1c7a977c..a3ffec77 100644
--- a/www/LoginView.js
+++ b/www/LoginView.js
@@ -390,6 +390,11 @@ Ext.define('PBS.login.TfaWindow', {
 		// Byte array fixup, keep challenge string:
 		challenge.string = challenge.publicKey.challenge;
 		challenge.publicKey.challenge = PBS.Utils.base64url_to_bytes(challenge.string);
+		let userVerification = Ext.state.Manager.getProvider().get('webauthn-user-verification');
+		if (userVerification !== undefined) {
+		    challenge.publicKey.userVerification = userVerification;
+		}
+
 		for (const cred of challenge.publicKey.allowCredentials) {
 		    cred.id = PBS.Utils.base64url_to_bytes(cred.id);
 		}
diff --git a/www/window/AddWebauthn.js b/www/window/AddWebauthn.js
index 16731a63..d2434f2c 100644
--- a/www/window/AddWebauthn.js
+++ b/www/window/AddWebauthn.js
@@ -79,6 +79,13 @@ Ext.define('PBS.window.AddWebauthn', {
 		// string to pass in the response:
 		let challenge_str = challenge_obj.publicKey.challenge;
 		challenge_obj.publicKey.challenge = PBS.Utils.base64url_to_bytes(challenge_str);
+		let userVerification = Ext.state.Manager.getProvider().get('webauthn-user-verification');
+		if (userVerification !== undefined) {
+		    challenge_obj.publicKey.authenticatorSelection = {
+			userVerification,
+		    };
+		}
+
 		challenge_obj.publicKey.user.id =
 		    PBS.Utils.base64url_to_bytes(challenge_obj.publicKey.user.id);
 
diff --git a/www/window/Settings.js b/www/window/Settings.js
index ee8464be..7059605c 100644
--- a/www/window/Settings.js
+++ b/www/window/Settings.js
@@ -30,6 +30,9 @@ Ext.define('PBS.window.Settings', {
 	    let username = sp.get('login-username') || Proxmox.Utils.noneText;
 	    me.lookupReference('savedUserName').setValue(Ext.String.htmlEncode(username));
 
+	    let userverification= sp.get('webauthn-user-verification') || '__default__';
+	    me.lookupReference('webauthnUserVerification').setValue(userverification);
+
 	    let settings = ['fontSize', 'fontFamily', 'letterSpacing', 'lineHeight'];
 	    settings.forEach(function(setting) {
 		let val = localStorage.getItem('pve-xterm-' + setting);
@@ -91,7 +94,7 @@ Ext.define('PBS.window.Settings', {
 	    },
 	    'button[name=reset]': {
 		click: function() {
-		    let blacklist = ['login-username'];
+		    let blacklist = ['login-username', 'webauthn-user-verification'];
 		    let sp = Ext.state.Manager.getProvider();
 		    for (const state of Object.values(sp.state)) {
 			if (blacklist.indexOf(state) !== -1) {
@@ -114,6 +117,14 @@ Ext.define('PBS.window.Settings', {
 		    sp.clear('login-username');
 		},
 	    },
+	    'field[reference=webauthnUserVerification]': {
+		change: function(e, v) {
+		    if (v === '__default__') {
+			v = undefined;
+		    }
+		    Ext.state.Manager.getProvider().set('webauthn-user-verification', v);
+		},
+	    },
 	},
     },
 
@@ -174,6 +185,23 @@ Ext.define('PBS.window.Settings', {
 		    },
 		],
 	    },
+	    {
+		xtype: 'box',
+		autoEl: { tag: 'hr' },
+	    },
+	    {
+		xtype: 'proxmoxKVComboBox',
+		fieldLabel: gettext('WebAuthn User Verification') + ':',
+		labelWidth: 150,
+		stateId: 'webauthn-user-verification',
+		reference: 'webauthnUserVerification',
+		value: '__default__',
+		comboItems: [
+		    ['__default__', Proxmox.Utils.defaultText],
+		    ['discouraged', gettext('Discouraged')],
+		    ['preferred', gettext('Preferred')],
+		],
+	    },
 	],
     },
     {
-- 
2.20.1

[pbs-devel] applied: [PATCH proxmox-backup 1/2] ui: add browser settings window

[Dietmar Maurer]

applied both patches