ui: tfa: rework removal confirmation dialog

present all relevant information about the TFA token to be removed,
so that a user can make a better decision.

Rework layout to match our commonly used style.

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

diff --git a/www/config/TfaView.js b/www/config/TfaView.js
index 40fe31c679d51acc4725c35a1dd30cf5fefc60cc..24d90b6f5dc59b2b7027ccb8aab946db67f2ed01 100644 (file)
--- a/www/config/TfaView.js
+++ b/www/config/TfaView.js
@@ -145,10 +145,7 @@ Ext.define('PBS.config.TfaView', {
            let me = this;
 
            Ext.create('PBS.tfa.confirmRemove', {
-               message: Ext.String.format(
-                   gettext('Are you sure you want to remove entry {0}'),
-                   record.data.description,
-               ),
+               ...record.data,
                callback: password => me.removeItem(password, record),
            })
            .show();
@@ -271,12 +268,13 @@ Ext.define('PBS.config.TfaView', {
 
 Ext.define('PBS.tfa.confirmRemove', {
     extend: 'Proxmox.window.Edit',
+    mixins: ['Proxmox.Mixin.CBind'],
 
     title: gettext("Confirm TFA Removal"),
 
     modal: true,
     resizable: false,
-    width: 512,
+    width: 600,
     isCreate: true, // logic
     isRemove: true,
 
@@ -285,8 +283,8 @@ Ext.define('PBS.tfa.confirmRemove', {
     initComponent: function() {
        let me = this;
 
-       if (!me.message) {
-           throw "missing message";
+       if (typeof me.type !== "string") {
+           throw "missing type";
        }
 
        if (!me.callback) {
@@ -299,8 +297,6 @@ Ext.define('PBS.tfa.confirmRemove', {
            me.lookup('password').setVisible(false);
            me.lookup('password').setDisabled(true);
        }
-
-       me.lookup('message').setHtml(Ext.String.htmlEncode(me.message));
     },
 
     submit: function() {
@@ -316,12 +312,76 @@ Ext.define('PBS.tfa.confirmRemove', {
     items: [
        {
            xtype: 'box',
-           padding: '5 5',
-           reference: 'message',
-           html: '',
-           style: {
-               textAlign: "center",
+           padding: '0 0 10 0',
+           html: Ext.String.format(
+               gettext('Are you sure you want to remove this {0} entry?'),
+               'TFA',
+           ),
+       },
+       {
+           xtype: 'container',
+           layout: {
+               type: 'hbox',
+               align: 'begin',
            },
+           defaults: {
+               border: false,
+               layout: 'anchor',
+               flex: 1,
+               padding: 5,
+           },
+           items: [
+               {
+                   xtype: 'container',
+                   layout: {
+                       type: 'vbox',
+                   },
+                   padding: '0 10 0 0',
+                   items: [
+                       {
+                           xtype: 'displayfield',
+                           fieldLabel: gettext('User'),
+                           cbind: {
+                               value: '{userid}',
+                           },
+                       },
+                       {
+                           xtype: 'displayfield',
+                           fieldLabel: gettext('Type'),
+                           cbind: {
+                               value: '{type}',
+                           },
+                       },
+                   ],
+               },
+               {
+                   xtype: 'container',
+                   layout: {
+                       type: 'vbox',
+                   },
+                   padding: '0 0 0 10',
+                   items: [
+                       {
+                           xtype: 'displayfield',
+                           fieldLabel: gettext('Created'),
+                           renderer: v => Proxmox.Utils.render_timestamp(v),
+                           cbind: {
+                               value: '{created}',
+                           },
+                       },
+                       {
+                           xtype: 'textfield',
+                           fieldLabel: gettext('Description'),
+                           cbind: {
+                               value: '{description}',
+                           },
+                           emptyText: Proxmox.Utils.NoneText,
+                           submitValue: false,
+                           editable: false,
+                       },
+                   ],
+               },
+           ],
        },
        {
            xtype: 'textfield',
@@ -332,8 +392,11 @@ Ext.define('PBS.tfa.confirmRemove', {
            name: 'password',
            allowBlank: false,
            validateBlank: true,
-           padding: '0 0 5 5',
-           emptyText: gettext('verify current password'),
+           padding: '10 0 0 0',
+           cbind: {
+               emptyText: get =>
+                   Ext.String.format(gettext("Confirm password of '{0}'"), get('userid')),
+           },
        },
     ],
 });