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 EB6649A180 for ; Tue, 16 May 2023 14:04:08 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id CC2771D69F for ; Tue, 16 May 2023 14:04:08 +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 ; Tue, 16 May 2023 14:04:08 +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 E0CAB45258; Tue, 16 May 2023 14:04:07 +0200 (CEST) Message-ID: <7b9526b2-0769-acc1-7f5a-82f2c05237d1@proxmox.com> Date: Tue, 16 May 2023 14:04:07 +0200 MIME-Version: 1.0 User-Agent: Mozilla Thunderbird To: Proxmox VE development discussion , Wolfgang Bumiller References: <20230516112220.216480-1-w.bumiller@proxmox.com> Content-Language: en-US From: Dominik Csapak In-Reply-To: <20230516112220.216480-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 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: Tue, 16 May 2023 12:04:09 -0000 comments inline for a few things i noticed right away (this was no in-depth review...) On 5/16/23 13:22, 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 > --- > src/window/TfaWindow.js | 73 ++++++++++++++++++++++++++++++++--------- > 1 file changed, 57 insertions(+), 16 deletions(-) > > diff --git a/src/window/TfaWindow.js b/src/window/TfaWindow.js > index 22ac50d..0e63e36 100644 > --- a/src/window/TfaWindow.js > +++ b/src/window/TfaWindow.js > @@ -45,11 +45,16 @@ Ext.define('Proxmox.window.TfaLoginWindow', { > > let lastTabId = me.getLastTabUsed(); > let initialTab = -1, i = 0; > + let hasAny2nd = false, hasNonRecovery2nd = false; > for (const k of ['webauthn', 'totp', 'recovery', 'u2f', 'yubico']) { > const available = !!challenge[k]; > vm.set(`availableChallenge.${k}`, available); > > if (available) { > + hasAny2nd = true; > + if (k !== 'recovery') { > + hasNonRecovery2nd = true; > + } > if (i === lastTabId) { > initialTab = i; > } else if (initialTab < 0) { > @@ -58,15 +63,31 @@ Ext.define('Proxmox.window.TfaLoginWindow', { > } > i++; > } > + if (!hasAny2nd || (!hasNonRecovery2nd && !challenge.recovery.length)) { i really dislike double negations, any better way to express 'has non recovery methods'? > + // 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); > + } else { > + me.lookup('availableRecovery').update(Ext.String.htmlEncode( > + gettext('Available recovery keys: ') > + + view > + .challenge > + .recovery > + .map((id) => Ext.String.format(gettext('ID {0}'), id)) > + .join(', '), that's a bad way to do gettexts, rather use the Ext.String.format syntax ('{0}') and do: Ext.String.format(gettext('...{0}...', thing to insert') that way non left-to-right languages get it right > + )); > + me.lookup('availableRecovery').setVisible(true); > + if (view.challenge.recovery.length <= 3) { > + me.lookup('recoveryLow').setVisible(true); > + } > } > } > > @@ -365,19 +386,23 @@ Ext.define('Proxmox.window.TfaLoginWindow', { > items: [ > { > xtype: 'box', > - reference: 'availableRecovery', > + reference: 'cannotLogin', > hidden: true, > + html: '' > + + Ext.String.format( > + gettext('No secon factor left! Please contact an administrator!'), typo: secon/second > + 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 +414,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'), > + }, > ], > }, > {