[pbs-devel] [PATCH proxmox-backup 5/6] ui: window/AddTotp: fix spacing styling of form fields

[Dominik Csapak <d.csapak@proxmox.com>]

by moving the lower fields into the form itself and dropping the padding

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/window/AddTotp.js | 81 +++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 42 deletions(-)

diff --git a/www/window/AddTotp.js b/www/window/AddTotp.js
index 40417340..414147e7 100644
--- a/www/window/AddTotp.js
+++ b/www/window/AddTotp.js
@@ -125,7 +125,6 @@ Ext.define('PBS.window.AddTotp', {
 	    reference: 'totp_form',
 	    fieldDefaults: {
 		anchor: '100%',
-		padding: '0 5',
 	    },
 	    items: [
 		{
@@ -205,49 +204,47 @@ Ext.define('PBS.window.AddTotp', {
 		    value: `Proxmox Backup Server - ${Proxmox.NodeName}`,
 		    qrupdate: true,
 		},
+		{
+		    xtype: 'box',
+		    itemId: 'qrbox',
+		    visible: false, // will be enabled when generating a qr code
+		    bind: {
+			visible: '{!secretEmpty}',
+		    },
+		    style: {
+			'background-color': 'white',
+			'margin-left': 'auto',
+			'margin-right': 'auto',
+			padding: '5px',
+			width: '266px',
+			height: '266px',
+		    },
+		},
+		{
+		    xtype: 'textfield',
+		    fieldLabel: gettext('Verification Code'),
+		    allowBlank: false,
+		    reference: 'challenge',
+		    name: 'challenge',
+		    bind: {
+			disabled: '{!showTOTPVerifiction}',
+			visible: '{showTOTPVerifiction}',
+		    },
+		    emptyText: gettext('Scan QR code and enter TOTP auth. code to verify'),
+		},
+		{
+		    xtype: 'textfield',
+		    inputType: 'password',
+		    fieldLabel: gettext('Password'),
+		    minLength: 5,
+		    reference: 'password',
+		    name: 'password',
+		    allowBlank: false,
+		    validateBlank: true,
+		    emptyText: gettext('verify current password'),
+		},
 	    ],
 	},
-	{
-	    xtype: 'box',
-	    itemId: 'qrbox',
-	    visible: false, // will be enabled when generating a qr code
-	    bind: {
-		visible: '{!secretEmpty}',
-	    },
-	    style: {
-		'background-color': 'white',
-		'margin-left': 'auto',
-		'margin-right': 'auto',
-		padding: '5px',
-		width: '266px',
-		height: '266px',
-	    },
-	},
-	{
-	    xtype: 'textfield',
-	    fieldLabel: gettext('Verification Code'),
-	    allowBlank: false,
-	    reference: 'challenge',
-	    name: 'challenge',
-	    bind: {
-		disabled: '{!showTOTPVerifiction}',
-		visible: '{showTOTPVerifiction}',
-	    },
-	    padding: '0 5',
-	    emptyText: gettext('Scan QR code and enter TOTP auth. code to verify'),
-	},
-	{
-	    xtype: 'textfield',
-	    inputType: 'password',
-	    fieldLabel: gettext('Password'),
-	    minLength: 5,
-	    reference: 'password',
-	    name: 'password',
-	    allowBlank: false,
-	    validateBlank: true,
-	    padding: '0 0 5 5',
-	    emptyText: gettext('verify current password'),
-	},
     ],
 
     initComponent: function() {
-- 
2.20.1