* [pve-devel] [PATCH widget-toolkit] tfa: improve UX for recovery keys and when none are left
@ 2023-05-16 11:22 Wolfgang Bumiller
2023-05-16 12:04 ` Dominik Csapak
0 siblings, 1 reply; 2+ messages in thread
From: Wolfgang Bumiller @ 2023-05-16 11:22 UTC (permalink / raw)
To: pve-devel
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>
---
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)) {
+ // 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(', '),
+ ));
+ 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: '<i class="fa fa-exclamation-triangle warning"></i>'
+ + Ext.String.format(
+ gettext('No secon 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 +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'),
+ },
],
},
{
--
2.30.2
^ permalink raw reply [flat|nested] 2+ messages in thread* Re: [pve-devel] [PATCH widget-toolkit] tfa: improve UX for recovery keys and when none are left
2023-05-16 11:22 [pve-devel] [PATCH widget-toolkit] tfa: improve UX for recovery keys and when none are left Wolfgang Bumiller
@ 2023-05-16 12:04 ` Dominik Csapak
0 siblings, 0 replies; 2+ messages in thread
From: Dominik Csapak @ 2023-05-16 12:04 UTC (permalink / raw)
To: Proxmox VE development discussion, Wolfgang Bumiller
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 <w.bumiller@proxmox.com>
> ---
> 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: '<i class="fa fa-exclamation-triangle warning"></i>'
> + + 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: '<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 +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'),
> + },
> ],
> },
> {
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2023-05-16 12:04 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2023-05-16 11:22 [pve-devel] [PATCH widget-toolkit] tfa: improve UX for recovery keys and when none are left Wolfgang Bumiller
2023-05-16 12:04 ` Dominik Csapak
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox