From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id A8A959B6BF for ; Thu, 25 May 2023 09:28:43 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 89F3626FAC for ; Thu, 25 May 2023 09:28:13 +0200 (CEST) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [94.136.29.106]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS for ; Thu, 25 May 2023 09:28:12 +0200 (CEST) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 9FCB147064; Thu, 25 May 2023 09:28:12 +0200 (CEST) Message-ID: Date: Thu, 25 May 2023 09:28:11 +0200 MIME-Version: 1.0 User-Agent: Mozilla Thunderbird Content-Language: en-US To: Proxmox VE development discussion , Wolfgang Bumiller References: <20230517115928.235012-1-w.bumiller@proxmox.com> From: Dominik Csapak In-Reply-To: <20230517115928.235012-1-w.bumiller@proxmox.com> Content-Type: text/plain; charset=UTF-8; format=flowed Content-Transfer-Encoding: 7bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.015 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record T_SCC_BODY_TEXT_LINE -0.01 - Subject: Re: [pve-devel] [PATCH v2 widget-toolkit] tfa: improve UX for recovery keys and when none are left X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Thu, 25 May 2023 07:28:43 -0000 Aside from what wolfgang already answered, one minor thing inline On 5/17/23 13:59, Wolfgang Bumiller wrote: > 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 > --- > Changes to v1 address Dominik's remarks: > - Fix typos > - Make generated ID list format string right-to-left compatible > - Replace the pair of `hasAny2nd` and `hasNonRecovery2nd` with a > counter and a `hasRecovery` boolean which allows expressing the > condition that "either no 2nd factors, or only an already used up set of > recovery keys exists" with less cognitive overhead. > > src/window/TfaWindow.js | 74 ++++++++++++++++++++++++++++++++--------- > 1 file changed, 58 insertions(+), 16 deletions(-) > > diff --git a/src/window/TfaWindow.js b/src/window/TfaWindow.js > index 22ac50d..a622ce1 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,31 @@ 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); i'd hide the recovery input field here too, otherwise you get the warning that no recovery keys are left, but get an input field that the user cannot fill out... > + } 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 +387,23 @@ Ext.define('Proxmox.window.TfaLoginWindow', { > items: [ > { > xtype: 'box', > - reference: 'availableRecovery', > + reference: 'cannotLogin', > hidden: true, > + html: '' > + + 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: '' > + + Ext.String.format( > + gettext('No more recovery keys left! Please generate a new set!'), > + 4, > + ), > }, > { > xtype: 'box', > @@ -389,6 +415,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'), > + }, > ], > }, > {