[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.csa...@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


_______________________________________________
pve-devel mailing list
pve-devel@pve.proxmox.com
https://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel