[pve-devel] [PATCH manager] gui: TFAEdit: use viemodel binding for hiding/showing qr code

[Dominik Csapak]

and verification textfield.

this fixes the issue that on the 'user menu' we accidentally showed
the qr code and verification field, even if the user already had a
totp code

now it shows 'Unchanged' like when opened via dc/UserView

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/dc/TFAEdit.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/www/manager6/dc/TFAEdit.js b/www/manager6/dc/TFAEdit.js
index 8f3017f6..11e52aad 100644
--- a/www/manager6/dc/TFAEdit.js
+++ b/www/manager6/dc/TFAEdit.js
@@ -102,9 +102,13 @@ Ext.define('PVE.window.TFAEdit', {
 	    tfa_required: false,
 	    tfa_type: null, // dependencies of formulas should not be undefined
 	    valid: false,
-	    u2f_available: true
+	    u2f_available: true,
+	    secret: "",
 	},
 	formulas: {
+	    showTOTPVerifiction: function(get) {
+		return get('secret').length > 0 && get('canSetupTOTP');
+	    },
 	    canDeleteTFA: function(get) {
 		return (get('tfa_type') !== null && !get('tfa_required'));
 	    },
@@ -115,7 +119,10 @@ Ext.define('PVE.window.TFAEdit', {
 	    canSetupU2F: function(get) {
 		var tfa = get('tfa_type');
 		return (get('u2f_available') && (tfa === null || tfa === 'u2f' || tfa === 1));
-	    }
+	    },
+	    secretEmpty: function(get) {
+		return get('secret').length === 0;
+	    },
 	}
     },
 
@@ -124,6 +131,7 @@ Ext.define('PVE.window.TFAEdit', {
 	var viewmodel = me.getViewModel();
 	if (user_tfa_type === 'oath') {
 	    user_tfa_type = 'totp';
+	    viewmodel.set('secret', '');
 	}
 	viewmodel.set('tfa_type', user_tfa_type || null);
 	if (!realm_tfa_type) {
@@ -205,8 +213,6 @@ Ext.define('PVE.window.TFAEdit', {
 		    if (!me.tfa_type) {
 			this.randomizeSecret();
 		    } else {
-			me.down('#qrbox').setVisible(false);
-			me.lookup('challenge').setVisible(false);
 			if (me.tfa_type === 'u2f') {
 			    var u2f_panel = me.lookup('u2f_panel');
 			    me.lookup('tfatabs').setActiveTab(u2f_panel);
@@ -303,7 +309,7 @@ Ext.define('PVE.window.TFAEdit', {
 		    data += String.fromCharCode(b-26 + 0x32);
 		}
 	    });
-	    me.lookup('tfa_secret').setValue(data);
+	    me.getViewModel().set('secret', data);
 	},
 
 	startU2FRegistration: function() {
@@ -386,6 +392,9 @@ Ext.define('PVE.window.TFAEdit', {
 					regexText: 'Must be base32 [A-Z2-7=]',
 					maskRe: /[A-Z2-7=]/,
 					qrupdate: true,
+					bind: {
+					    value: "{secret}",
+					},
 					flex: 4
 				    },
 				    {
@@ -430,6 +439,9 @@ Ext.define('PVE.window.TFAEdit', {
 			    xtype: 'box',
 			    itemId: 'qrbox',
 			    visible: false, // will be enabled when generating a qr code
+			    bind: {
+				visible: '{!secretEmpty}',
+			    },
 			    style: {
 				'background-color': 'white',
 				padding: '5px',
@@ -442,6 +454,10 @@ Ext.define('PVE.window.TFAEdit', {
 			    fieldLabel: gettext('Verification Code'),
 			    allowBlank: false,
 			    reference: 'challenge',
+			    bind: {
+				disabled: '{!showTOTPVerifiction}',
+				visible: '{showTOTPVerifiction}',
+			    },
 			    padding: '0 5',
 			    emptyText: gettext('Scan QR code and enter TOTP auth. code to verify')
 			}
-- 
2.20.1