From 3189d05134433b5d3f9e9c2cf7d0877fa7e53397 Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Mon, 18 Jan 2021 10:12:21 +0100
Subject: [PATCH] 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 | 15 +++++++++++++--
 www/window/AddTotp.js        | 22 ++++++++++++++++++----
 www/window/AddWebauthn.js    | 21 ++++++++++++++++++---
 3 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/www/window/AddTfaRecovery.js b/www/window/AddTfaRecovery.js
index 1b63031f..1a10082b 100644
--- a/www/window/AddTfaRecovery.js
+++ b/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}',
+	    },
 	},
     ],
 });
diff --git a/www/window/AddTotp.js b/www/window/AddTotp.js
index 56b78a5a..15b42740 100644
--- a/www/window/AddTotp.js
+++ b/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}',
+		    },
 		},
 	    ],
 	},
diff --git a/www/window/AddWebauthn.js b/www/window/AddWebauthn.js
index 195a756d..28d7265b 100644
--- a/www/window/AddWebauthn.js
+++ b/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}',
+		    },
 		},
 	    ],
 	},