[pve-devel] [PATCH v3 widget-toolkit 1/2] tfa: improve UX for recovery keys and when none are left

[pve-devel] [PATCH v3 widget-toolkit 1/2] tfa: improve UX for recovery keys and when none are left

[Wolfgang Bumiller]

If we get an empty challenge, tell the user to contact an
administrator as it means no 2nd factors and no recovery
keys are available.

Currently if only 1 key was available and it had a high ID,
we'd show something like: "Recovery keys available: 9,
Warning, less than 4 keys available."
Let's start off with the warning, and then be explicit about
the IDs.

Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>
---
changes since v2:
  - fix wrong tfa type comparison
  - hide recovery input field when no recovery keys are left

 src/window/TfaWindow.js | 75 ++++++++++++++++++++++++++++++++---------
 1 file changed, 59 insertions(+), 16 deletions(-)

diff --git a/src/window/TfaWindow.js b/src/window/TfaWindow.js
index 22ac50d..3646e0e 100644
--- a/src/window/TfaWindow.js
+++ b/src/window/TfaWindow.js
@@ -45,11 +45,17 @@ Ext.define('Proxmox.window.TfaLoginWindow', {
 
 	    let lastTabId = me.getLastTabUsed();
 	    let initialTab = -1, i = 0;
+	    let count2nd = 0;
+	    let hasRecovery = false;
 	    for (const k of ['webauthn', 'totp', 'recovery', 'u2f', 'yubico']) {
 		const available = !!challenge[k];
 		vm.set(`availableChallenge.${k}`, available);
 
 		if (available) {
+		    count2nd++;
+		    if (k === 'recovery') {
+			hasRecovery = true;
+		    }
 		    if (i === lastTabId) {
 			initialTab = i;
 		    } else if (initialTab < 0) {
@@ -58,15 +64,32 @@ Ext.define('Proxmox.window.TfaLoginWindow', {
 		}
 		i++;
 	    }
+	    if (!count2nd || (count2nd === 1 && hasRecovery && !challenge.recovery.length)) {
+		// no 2nd factors available (and if recovery keys are configured they're empty)
+		me.lookup('cannotLogin').setVisible(true);
+		me.lookup('recoveryKey').setVisible(false);
+		view.down('tabpanel').setActiveTab(2); // recovery
+		return;
+	    }
 	    view.down('tabpanel').setActiveTab(initialTab);
 
 	    if (challenge.recovery) {
-		me.lookup('availableRecovery').update(Ext.String.htmlEncode(
-		    gettext('Available recovery keys: ') + view.challenge.recovery.join(', '),
-		));
-		me.lookup('availableRecovery').setVisible(true);
-		if (view.challenge.recovery.length <= 3) {
-		    me.lookup('recoveryLow').setVisible(true);
+		if (!view.challenge.recovery.length) {
+		    me.lookup('recoveryEmpty').setVisible(true);
+		    me.lookup('recoveryKey').setVisible(false);
+		} else {
+		    let idList = view
+			    .challenge
+			    .recovery
+			    .map((id) => Ext.String.format(gettext('ID {0}'), id))
+			    .join(', ');
+		    me.lookup('availableRecovery').update(Ext.String.htmlEncode(
+			Ext.String.format(gettext('Available recovery keys: {0}'), idList),
+		    ));
+		    me.lookup('availableRecovery').setVisible(true);
+		    if (view.challenge.recovery.length <= 3) {
+			me.lookup('recoveryLow').setVisible(true);
+		    }
 		}
 	    }
 
@@ -365,19 +388,23 @@ Ext.define('Proxmox.window.TfaLoginWindow', {
 		items: [
 		    {
 			xtype: 'box',
-			reference: 'availableRecovery',
+			reference: 'cannotLogin',
 			hidden: true,
+			html: '<i class="fa fa-exclamation-triangle warning"></i>'
+			    + Ext.String.format(
+				gettext('No second factor left! Please contact an administrator!'),
+				4,
+			    ),
 		    },
 		    {
-			xtype: 'textfield',
-			fieldLabel: gettext('Please enter one of your single-use recovery keys'),
-			labelWidth: 300,
-			name: 'recoveryKey',
-			disabled: true,
-			reference: 'recoveryKey',
-			allowBlank: false,
-			regex: /^[0-9a-f]{4}(-[0-9a-f]{4}){3}$/,
-			regexText: gettext('Does not look like a valid recovery key'),
+			xtype: 'box',
+			reference: 'recoveryEmpty',
+			hidden: true,
+			html: '<i class="fa fa-exclamation-triangle warning"></i>'
+			    + Ext.String.format(
+				gettext('No more recovery keys left! Please generate a new set!'),
+				4,
+			    ),
 		    },
 		    {
 			xtype: 'box',
@@ -389,6 +416,22 @@ Ext.define('Proxmox.window.TfaLoginWindow', {
 				4,
 			    ),
 		    },
+		    {
+			xtype: 'box',
+			reference: 'availableRecovery',
+			hidden: true,
+		    },
+		    {
+			xtype: 'textfield',
+			fieldLabel: gettext('Please enter one of your single-use recovery keys'),
+			labelWidth: 300,
+			name: 'recoveryKey',
+			disabled: true,
+			reference: 'recoveryKey',
+			allowBlank: false,
+			regex: /^[0-9a-f]{4}(-[0-9a-f]{4}){3}$/,
+			regexText: gettext('Does not look like a valid recovery key'),
+		    },
 		],
 	    },
 	    {
-- 
2.39.2

[pve-devel] [PATCH widget-toolkit 2/2] tfa: show 'Locked' in 'Enabled' column if tfa is locked

[Wolfgang Bumiller]

Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>
---
This one's new.

 src/panel/TfaView.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/panel/TfaView.js b/src/panel/TfaView.js
index e7a09a9..58b8a3a 100644
--- a/src/panel/TfaView.js
+++ b/src/panel/TfaView.js
@@ -67,8 +67,11 @@ Ext.define('Proxmox.panel.TfaView', {
 	onLoad: function(store, data, success) {
 	    if (!success) return;
 
+	    let now = new Date().getTime() / 1000;
 	    let records = [];
 	    Ext.Array.each(data, user => {
+		let tfa_locked = (user.data['tfa-locked-until'] || 0) > now;
+		let totp_locked = user.data['totp-locked'];
 		Ext.Array.each(user.data.entries, entry => {
 		    records.push({
 			fullid: `${user.id}/${entry.id}`,
@@ -77,6 +80,7 @@ Ext.define('Proxmox.panel.TfaView', {
 			description: entry.description,
 			created: entry.created,
 			enable: entry.enable,
+			locked: tfa_locked || (entry.type === 'totp' && totp_locked),
 		    });
 		});
 	    });
@@ -154,8 +158,10 @@ Ext.define('Proxmox.panel.TfaView', {
 
 	renderUser: fullid => fullid.split('/')[0],
 
-	renderEnabled: enabled => {
-	    if (enabled === undefined) {
+	renderEnabled: function(enabled, metaData, record) {
+	    if (record.data.locked) {
+		return gettext("Locked");
+	    } else if (enabled === undefined) {
 		return Proxmox.Utils.yesText;
 	    } else {
 		return Proxmox.Utils.format_boolean(enabled);
-- 
2.39.2

[pve-devel] applied: [PATCH widget-toolkit 2/2] tfa: show 'Locked' in 'Enabled' column if tfa is locked

[Thomas Lamprecht]

Am 06/06/2023 um 12:03 schrieb Wolfgang Bumiller:
> Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>
> ---
> This one's new.
> 
>  src/panel/TfaView.js | 10 ++++++++--
>  1 file changed, 8 insertions(+), 2 deletions(-)
> 
>

applied, thanks!

fwiw, as we got the info already we could show the timestamp until the user is locked
in a tooltip.

[pve-devel] applied: [PATCH v3 widget-toolkit 1/2] tfa: improve UX for recovery keys and when none are left

[Thomas Lamprecht]

Am 06/06/2023 um 12:03 schrieb Wolfgang Bumiller:
> If we get an empty challenge, tell the user to contact an
> administrator as it means no 2nd factors and no recovery
> keys are available.
> 
> Currently if only 1 key was available and it had a high ID,
> we'd show something like: "Recovery keys available: 9,
> Warning, less than 4 keys available."
> Let's start off with the warning, and then be explicit about
> the IDs.
> 
> Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>
> ---
> changes since v2:
>   - fix wrong tfa type comparison
>   - hide recovery input field when no recovery keys are left
> 
>  src/window/TfaWindow.js | 75 ++++++++++++++++++++++++++++++++---------
>  1 file changed, 59 insertions(+), 16 deletions(-)
> 
>

applied, thanks!