ui: tfa: specify which confirmation password is required

Clarify that the password of the user one wants to add TFA too is
required, which is not necessarily the one of the current logged in
user. Use an empty text for that.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

www/window/AddTfaRecovery.js

@@ -34,6 +34,13 @@ Ext.define('PBS.window.AddTfaRecovery', {
     viewModel: {
 	data: {
 	    has_entry: false,
+	    userid: Proxmox.UserName,
+	},
+	formulas: {
+	    passwordConfirmText: (get) => {
+		let id = get('userid');
+		return Ext.String.format(gettext("Confirm password of '{0}'"), id);
+	    },
 	},
     },
 
@@ -60,11 +67,13 @@ Ext.define('PBS.window.AddTfaRecovery', {
 
 	onUseridChange: async function(field, userid) {
 	    let me = this;
+	    let vm = me.getViewModel();
 
 	    me.userid = userid;
+	    vm.set('userid', userid);
 
 	    let has_entry = await me.hasEntry(userid);
-	    me.getViewModel().set('has_entry', has_entry);
+	    vm.set('has_entry', has_entry);
 	},
     },
 
@@ -114,7 +123,9 @@ Ext.define('PBS.window.AddTfaRecovery', {
 	    validateBlank: true,
 	    hidden: Proxmox.UserName === 'root@pam',
 	    disabled: Proxmox.UserName === 'root@pam',
-	    emptyText: gettext('verify current password'),
+	    bind: {
+		emptyText: '{passwordConfirmText}',
+	    },
 	},
     ],
 });

www/window/AddTotp.js

@@ -47,12 +47,17 @@ Ext.define('PBS.window.AddTotp', {
 	    valid: false,
 	    secret: '',
 	    otpuri: '',
+	    userid: Proxmox.UserName,
 	},
 
 	formulas: {
 	    secretEmpty: function(get) {
 		return get('secret').length === 0;
 	    },
+	    passwordConfirmText: (get) => {
+		let id = get('userid');
+		return Ext.String.format(gettext("Confirm password of '{0}'"), id);
+	    },
 	},
     },
 
@@ -140,11 +145,18 @@ Ext.define('PBS.window.AddTotp', {
 		    },
 		    renderer: Ext.String.htmlEncode,
 		    value: Proxmox.UserName,
+		    listeners: {
+			change: function(field, newValue, oldValue) {
+			    let vm = this.up('window').getViewModel();
+			    vm.set('userid', newValue);
+			},
+		    },
 		    qrupdate: true,
 		},
 		{
 		    xtype: 'textfield',
 		    fieldLabel: gettext('Description'),
+		    emptyText: gettext('For example: TFA device ID, required to identify multiple factors.'),
 		    allowBlank: false,
 		    name: 'description',
 		    maxLength: 256,
@@ -225,7 +237,7 @@ Ext.define('PBS.window.AddTotp', {
 		},
 		{
 		    xtype: 'textfield',
-		    fieldLabel: gettext('Verification Code'),
+		    fieldLabel: gettext('Verify Code'),
 		    allowBlank: false,
 		    reference: 'challenge',
 		    name: 'challenge',
@@ -233,18 +245,20 @@ Ext.define('PBS.window.AddTotp', {
 			disabled: '{!showTOTPVerifiction}',
 			visible: '{showTOTPVerifiction}',
 		    },
-		    emptyText: gettext('Scan QR code and enter TOTP auth. code to verify'),
+		    emptyText: gettext('Scan QR code in a TOTP app and enter an auth. code here'),
 		},
 		{
 		    xtype: 'textfield',
 		    inputType: 'password',
-		    fieldLabel: gettext('Password'),
+		    fieldLabel: gettext('Verify Password'),
 		    minLength: 5,
 		    reference: 'password',
 		    name: 'password',
 		    allowBlank: false,
 		    validateBlank: true,
-		    emptyText: gettext('verify current password'),
+		    bind: {
+			emptyText: '{passwordConfirmText}',
+		    },
 		},
 	    ],
 	},

www/window/AddWebauthn.js

@@ -22,6 +22,13 @@ Ext.define('PBS.window.AddWebauthn', {
     viewModel: {
 	data: {
 	    valid: false,
+	    userid: Proxmox.UserName,
+	},
+	formulas: {
+	    passwordConfirmText: (get) => {
+		let id = get('userid');
+		return Ext.String.format(gettext("Confirm password of '{0}'"), id);
+	    },
 	},
     },
 
@@ -154,6 +161,12 @@ Ext.define('PBS.window.AddWebauthn', {
 		    },
 		    renderer: Ext.String.htmlEncode,
 		    value: Proxmox.UserName,
+		    listeners: {
+			change: function(field, newValue, oldValue) {
+			    let vm = this.up('window').getViewModel();
+			    vm.set('userid', newValue);
+			},
+		    },
 		},
 		{
 		    xtype: 'textfield',
@@ -161,18 +174,20 @@ Ext.define('PBS.window.AddWebauthn', {
 		    allowBlank: false,
 		    name: 'description',
 		    maxLength: 256,
-		    emptyText: gettext('a short distinguishing description'),
+		    emptyText: gettext('For example: TFA device ID, required to identify multiple factors.'),
 		},
 		{
 		    xtype: 'textfield',
 		    inputType: 'password',
-		    fieldLabel: gettext('Password'),
+		    fieldLabel: gettext('Verify Password'),
 		    minLength: 5,
 		    reference: 'password',
 		    name: 'password',
 		    allowBlank: false,
 		    validateBlank: true,
-		    emptyText: gettext('verify current password'),
+		    bind: {
+			emptyText: '{passwordConfirmText}',
+		    },
 		},
 	    ],
 	},