panel: notification: add gui for SMTP endpoints

This new endpoint configuration panel is embedded in the existing
EndpointEditBase dialog window. This commit also factors out some of
the non-trivial common form elements that are shared between the new
panel and the already existing SendmailEditPanel into a separate panel
EmailRecipientPanel.

Signed-off-by: Lukas Wagner <l.wagner@proxmox.com>

diff --git a/src/Makefile b/src/Makefile
index c6d31c3e7206fee9f40d6d170313a65f928303b3..01145b1b048b2a8787943423df9f336c65fd68f3 100644 (file)
--- a/src/Makefile
+++ b/src/Makefile
@@ -71,7 +71,9 @@ JSSRC=                                        \
        panel/ACMEAccount.js            \
        panel/ACMEPlugin.js             \
        panel/ACMEDomains.js            \
+       panel/EmailRecipientPanel.js    \
        panel/SendmailEditPanel.js      \
+       panel/SmtpEditPanel.js  \
        panel/StatusView.js             \
        panel/TfaView.js                \
        panel/NotesView.js              \

diff --git a/src/Schema.js b/src/Schema.js
index d1b4ee5db1c39383c6c0510b6490a740f2242f4d..8480c764277a7cd2a00e52275be46884c08d9135 100644 (file)
--- a/src/Schema.js
+++ b/src/Schema.js
@@ -43,6 +43,11 @@ Ext.define('Proxmox.Schema', { // a singleton
            ipanel: 'pmxSendmailEditPanel',
            iconCls: 'fa-envelope-o',
        },
+       smtp: {
+           name: gettext('SMTP'),
+           ipanel: 'pmxSmtpEditPanel',
+           iconCls: 'fa-envelope-o',
+       },
        gotify: {
            name: 'Gotify',
            ipanel: 'pmxGotifyEditPanel',

diff --git a/src/panel/EmailRecipientPanel.js b/src/panel/EmailRecipientPanel.js
new file mode 100644 (file)
index 0000000..b2bc03c
--- /dev/null
+++ b/src/panel/EmailRecipientPanel.js
@@ -0,0 +1,88 @@
+Ext.define('Proxmox.panel.EmailRecipientPanel', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'pmxEmailRecipientPanel',
+    mixins: ['Proxmox.Mixin.CBind'],
+    border: false,
+
+    mailValidator: function() {
+       let mailto_user = this.down(`[name=mailto-user]`);
+       let mailto = this.down(`[name=mailto]`);
+
+       if (!mailto_user.getValue()?.length && !mailto.getValue()) {
+           return gettext('Either mailto or mailto-user must be set');
+       }
+
+       return true;
+    },
+
+    items: [
+       {
+           layout: 'anchor',
+           border: false,
+           items: [
+               {
+                   xtype: 'pmxUserSelector',
+                   name: 'mailto-user',
+                   multiSelect: true,
+                   allowBlank: true,
+                   editable: false,
+                   skipEmptyText: true,
+                   fieldLabel: gettext('Recipient(s)'),
+                   cbind: {
+                       deleteEmpty: '{!isCreate}',
+                   },
+                   validator: function() {
+                       return this.up('pmxEmailRecipientPanel').mailValidator();
+                   },
+                   autoEl: {
+                       tag: 'div',
+                       'data-qtip': gettext('The notification will be sent to the user\'s configured mail address'),
+                   },
+                   listConfig: {
+                       width: 600,
+                       columns: [
+                           {
+                               header: gettext('User'),
+                               sortable: true,
+                               dataIndex: 'userid',
+                               renderer: Ext.String.htmlEncode,
+                               flex: 1,
+                           },
+                           {
+                               header: gettext('E-Mail'),
+                               sortable: true,
+                               dataIndex: 'email',
+                               renderer: Ext.String.htmlEncode,
+                               flex: 1,
+                           },
+                           {
+                               header: gettext('Comment'),
+                               sortable: false,
+                               dataIndex: 'comment',
+                               renderer: Ext.String.htmlEncode,
+                               flex: 1,
+                           },
+                       ],
+                   },
+               },
+               {
+                   xtype: 'proxmoxtextfield',
+                   fieldLabel: gettext('Additional Recipient(s)'),
+                   name: 'mailto',
+                   allowBlank: true,
+                   emptyText: 'user@example.com, ...',
+                   cbind: {
+                       deleteEmpty: '{!isCreate}',
+                   },
+                   autoEl: {
+                       tag: 'div',
+                       'data-qtip': gettext('Multiple recipients must be separated by spaces, commas or semicolons'),
+                   },
+                   validator: function() {
+                       return this.up('pmxEmailRecipientPanel').mailValidator();
+                   },
+               },
+           ],
+       },
+    ],
+});

diff --git a/src/panel/SendmailEditPanel.js b/src/panel/SendmailEditPanel.js
index c2470b797b7d402682a59f7b8305db8e51e4785e..ff4501ac78a6e585bbeb79fc21c63fd032a3dcdb 100644 (file)
--- a/src/panel/SendmailEditPanel.js
+++ b/src/panel/SendmailEditPanel.js
@@ -28,62 +28,10 @@ Ext.define('Proxmox.panel.SendmailEditPanel', {
            allowBlank: false,
        },
        {
-           xtype: 'pmxUserSelector',
-           name: 'mailto-user',
-           reference: 'mailto-user',
-           multiSelect: true,
-           allowBlank: true,
-           editable: false,
-           skipEmptyText: true,
-           fieldLabel: gettext('User(s)'),
+           // provides 'mailto' and 'mailto-user' fields
+           xtype: 'pmxEmailRecipientPanel',
            cbind: {
-               deleteEmpty: '{!isCreate}',
-           },
-           validator: function() {
-               return this.up('pmxSendmailEditPanel').mailValidator();
-           },
-           listConfig: {
-               width: 600,
-               columns: [
-                   {
-                       header: gettext('User'),
-                       sortable: true,
-                       dataIndex: 'userid',
-                       renderer: Ext.String.htmlEncode,
-                       flex: 1,
-                   },
-                   {
-                       header: gettext('E-Mail'),
-                       sortable: true,
-                       dataIndex: 'email',
-                       renderer: Ext.String.htmlEncode,
-                       flex: 1,
-                   },
-                   {
-                       header: gettext('Comment'),
-                       sortable: false,
-                       dataIndex: 'comment',
-                       renderer: Ext.String.htmlEncode,
-                       flex: 1,
-                   },
-               ],
-           },
-       },
-       {
-           xtype: 'proxmoxtextfield',
-           fieldLabel: gettext('Additional Recipient(s)'),
-           name: 'mailto',
-           reference: 'mailto',
-           allowBlank: true,
-           cbind: {
-               deleteEmpty: '{!isCreate}',
-           },
-           autoEl: {
-               tag: 'div',
-               'data-qtip': gettext('Multiple recipients must be separated by spaces, commas or semicolons'),
-           },
-           validator: function() {
-               return this.up('pmxSendmailEditPanel').mailValidator();
+               isCreate: '{isCreate}',
            },
        },
        {

diff --git a/src/panel/SmtpEditPanel.js b/src/panel/SmtpEditPanel.js
new file mode 100644 (file)
index 0000000..ab21217
--- /dev/null
+++ b/src/panel/SmtpEditPanel.js
@@ -0,0 +1,183 @@
+Ext.define('Proxmox.panel.SmtpEditPanel', {
+    extend: 'Proxmox.panel.InputPanel',
+    xtype: 'pmxSmtpEditPanel',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    type: 'smtp',
+
+    viewModel: {
+       xtype: 'viewmodel',
+       cbind: {
+           isCreate: "{isCreate}",
+       },
+       data: {
+           mode: 'tls',
+           authentication: true,
+       },
+       formulas: {
+           portEmptyText: function(get) {
+               let port;
+
+               switch (get('mode')) {
+                   case 'insecure':
+                       port = 25;
+                       break;
+                   case 'starttls':
+                       port = 587;
+                       break;
+                   case 'tls':
+                       port = 465;
+                       break;
+               }
+               return `${Proxmox.Utils.defaultText} (${port})`;
+           },
+           passwordEmptyText: function(get) {
+               let isCreate = this.isCreate;
+               return get('authentication') && !isCreate ? gettext('Unchanged') : '';
+           },
+       },
+    },
+
+    columnT: [
+       {
+           xtype: 'pmxDisplayEditField',
+           name: 'name',
+           cbind: {
+               value: '{name}',
+               editable: '{isCreate}',
+           },
+           fieldLabel: gettext('Endpoint Name'),
+           allowBlank: false,
+       },
+    ],
+
+    column1: [
+       {
+           xtype: 'proxmoxtextfield',
+           fieldLabel: gettext('Server'),
+           name: 'server',
+           allowBlank: false,
+           emptyText: gettext('mail.example.com'),
+       },
+       {
+           xtype: 'proxmoxKVComboBox',
+           name: 'mode',
+           fieldLabel: gettext('Encryption'),
+           editable: false,
+           comboItems: [
+               ['insecure', Proxmox.Utils.noneText + ' (' + gettext('insecure') + ')'],
+               ['starttls', 'STARTTLS'],
+               ['tls', 'TLS'],
+           ],
+           bind: "{mode}",
+           cbind: {
+               deleteEmpty: '{!isCreate}',
+           },
+       },
+       {
+           xtype: 'proxmoxintegerfield',
+           name: 'port',
+           fieldLabel: gettext('Port'),
+           minValue: 1,
+           maxValue: 65535,
+           bind: {
+               emptyText: "{portEmptyText}",
+           },
+           submitEmptyText: false,
+           cbind: {
+               deleteEmpty: '{!isCreate}',
+           },
+       },
+    ],
+    column2: [
+       {
+           xtype: 'proxmoxcheckbox',
+           fieldLabel: gettext('Authenticate'),
+           name: 'authentication',
+           bind: {
+               value: '{authentication}',
+           },
+       },
+       {
+           xtype: 'proxmoxtextfield',
+           fieldLabel: gettext('Username'),
+           name: 'username',
+           allowBlank: false,
+           cbind: {
+               deleteEmpty: '{!isCreate}',
+           },
+           bind: {
+               disabled: '{!authentication}',
+           },
+       },
+       {
+           xtype: 'proxmoxtextfield',
+           inputType: 'password',
+           fieldLabel: gettext('Password'),
+           name: 'password',
+           allowBlank: true,
+           bind: {
+               disabled: '{!authentication}',
+               emptyText: '{passwordEmptyText}',
+           },
+       },
+    ],
+    columnB: [
+       {
+           xtype: 'proxmoxtextfield',
+           fieldLabel: gettext('From Address'),
+           name: 'from-address',
+           allowBlank: false,
+           emptyText: gettext('user@example.com'),
+       },
+       {
+           // provides 'mailto' and 'mailto-user' fields
+           xtype: 'pmxEmailRecipientPanel',
+           cbind: {
+               isCreate: '{isCreate}',
+           },
+       },
+       {
+           xtype: 'proxmoxtextfield',
+           name: 'comment',
+           fieldLabel: gettext('Comment'),
+           cbind: {
+               deleteEmpty: '{!isCreate}',
+           },
+       },
+    ],
+
+    advancedColumnB: [
+       {
+           xtype: 'proxmoxtextfield',
+           fieldLabel: gettext('Author'),
+           name: 'author',
+           allowBlank: true,
+           emptyText: gettext('Proxmox VE'),
+           cbind: {
+               deleteEmpty: '{!isCreate}',
+           },
+       },
+    ],
+
+    onGetValues: function(values) {
+       if (values.mailto) {
+           values.mailto = values.mailto.split(/[\s,;]+/);
+       }
+
+       if (!values.authentication && !this.isCreate) {
+           Proxmox.Utils.assemble_field_data(values, { 'delete': 'username' });
+           Proxmox.Utils.assemble_field_data(values, { 'delete': 'password' });
+       }
+
+       delete values.authentication;
+
+       return values;
+    },
+
+    onSetValues: function(values) {
+       values.authentication = !!values.username;
+
+       return values;
+    },
+});