Re: [pbs-devel] [PATCH proxmox-backup] ui: autofocus after rendering text fields for 2fa

[Thomas Lamprecht <t.lamprecht@proxmox.com>]

On 04.02.21 15:39, Oguz Bektas wrote:
> also fix a small typo
> 
> Signed-off-by: Oguz Bektas <o.bektas@proxmox.com>
> ---
>  www/LoginView.js | 12 +++++++++++-
>  1 file changed, 11 insertions(+), 1 deletion(-)
> 
> diff --git a/www/LoginView.js b/www/LoginView.js
> index 15373533..5e8b2f93 100644
> --- a/www/LoginView.js
> +++ b/www/LoginView.js
> @@ -525,6 +525,11 @@ Ext.define('PBS.login.TfaWindow', {
>  			allowBlank: false,
>  			regex: /^[0-9]{6}$/,
>  			regexText: 'TOTP codes consist of six decimal digits',
> +			listeners: {
> +			    afterrender: function(field) {
> +				field.focus();
> +			    },
> +			},

arrow functions are much nicer for such things:

listeners: {
    afterrender: field => field.focus(),
},

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Besides that, this could be added to the existing controllers 'field' control
instance, it's not really nice to have the control logic split.

I did not test it, but if the following works you get +1 not +10 lines of change:

diff --git a/www/LoginView.js b/www/LoginView.js
index f7380339..54bc8de0 100644
--- a/www/LoginView.js
+++ b/www/LoginView.js
@@ -338,6 +338,7 @@ Ext.define('PBS.login.TfaWindow', {
                    // non-visible tab, so we can just directly use the valid param
                    this.getViewModel().set('canConfirm', valid);
                },
+               afterrender: field => field.focus(), // ensure focus on initial render
            },
        },
 

>  		    },
>  		],
>  	    },
> @@ -551,7 +556,12 @@ Ext.define('PBS.login.TfaWindow', {
>  			reference: 'recoveryKey',
>  			allowBlank: false,
>  			regex: /^[0-9a-f]{4}(-[0-9a-f]{4}){3}$/,
> -			regexText: 'Does not looks like a valid recovery key',
> +			regexText: 'Does not look like a valid recovery key',

we may also want to wrap that in gettext() for translation availability
(separate patch please)

> +			listeners: {
> +			    afterrender: function(field) {
> +				field.focus();

same here.

> +			    },
> +			},
>  		    },
>  		    {
>  			xtype: 'box',
>