From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
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 <pve-devel@lists.proxmox.com>; 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 <pve-devel@lists.proxmox.com>; 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 <pve-devel@lists.proxmox.com>; 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: <e6bcf2bc-f188-49df-f5f7-72acf39ee7d4@proxmox.com>
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 <pve-devel@lists.proxmox.com>,
 Wolfgang Bumiller <w.bumiller@proxmox.com>
References: <20230517115928.235012-1-w.bumiller@proxmox.com>
From: Dominik Csapak <d.csapak@proxmox.com>
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 <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>, 
 <mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>, 
 <mailto:pve-devel-request@lists.proxmox.com?subject=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 <w.bumiller@proxmox.com>
> ---
> 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: '<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 +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'),
> +		    },
>   		],
>   	    },
>   	    {