[pve-devel] [PATCH proxmox-widget-toolkit 7/8] panel: notification: add gui for SMTP endpoints
Lukas Wagner
l.wagner at proxmox.com
Mon Aug 7 15:06:18 CEST 2023
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 at proxmox.com>
---
src/Makefile | 2 +
src/Schema.js | 5 +
src/panel/EmailRecipientPanel.js | 93 +++++++++++++++
src/panel/SendmailEditPanel.js | 69 ++---------
src/panel/SmtpEditPanel.js | 192 +++++++++++++++++++++++++++++++
5 files changed, 300 insertions(+), 61 deletions(-)
create mode 100644 src/panel/EmailRecipientPanel.js
create mode 100644 src/panel/SmtpEditPanel.js
diff --git a/src/Makefile b/src/Makefile
index 21fbe76..113064d 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -73,7 +73,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 a7ffdf8..2653b99 100644
--- 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: gettext('Gotify'),
ipanel: 'pmxGotifyEditPanel',
diff --git a/src/panel/EmailRecipientPanel.js b/src/panel/EmailRecipientPanel.js
new file mode 100644
index 0000000..0918bdc
--- /dev/null
+++ b/src/panel/EmailRecipientPanel.js
@@ -0,0 +1,93 @@
+Ext.define('Proxmox.panel.EmailRecipientPanel', {
+ extend: 'Proxmox.panel.InputPanel',
+ xtype: 'pmxEmailRecipientPanel',
+ mixins: ['Proxmox.Mixin.CBind'],
+
+ 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: [
+ {
+ 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 at 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();
+ },
+ },
+ ],
+
+ onGetValues: function(values) {
+ if (values.mailto) {
+ values.mailto = values.mailto.split(/[\s,;]+/);
+ }
+
+ return values;
+ },
+});
diff --git a/src/panel/SendmailEditPanel.js b/src/panel/SendmailEditPanel.js
index b814f39..5773529 100644
--- a/src/panel/SendmailEditPanel.js
+++ b/src/panel/SendmailEditPanel.js
@@ -28,64 +28,9 @@ 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)'),
+ 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}',
},
},
{
@@ -130,10 +75,12 @@ Ext.define('Proxmox.panel.SendmailEditPanel', {
},
],
- onGetValues: (values) => {
- if (values.mailto) {
- values.mailto = values.mailto.split(/[\s,;]+/);
- }
+ onGetValues: function(values) {
+ // Since mailto and mailto-user are in a separate InputPanel, we have
+ // to delete them here. Otherwise, their values will be collected twice.
+ delete values.mailto;
+ delete values['mailto-user'];
+
return values;
},
});
diff --git a/src/panel/SmtpEditPanel.js b/src/panel/SmtpEditPanel.js
new file mode 100644
index 0000000..ffc53ba
--- /dev/null
+++ b/src/panel/SmtpEditPanel.js
@@ -0,0 +1,192 @@
+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 at example.com'),
+ },
+ {
+ xtype: 'pmxEmailRecipientPanel',
+ cbind: {
+ isCreate: '{isCreate}',
+ },
+ },
+ {
+ xtype: 'pmxNotificationFilterSelector',
+ name: 'filter',
+ fieldLabel: gettext('Filter'),
+ cbind: {
+ deleteEmpty: '{!isCreate}',
+ baseUrl: '{baseUrl}',
+ },
+ },
+ {
+ 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) {
+ // Since mailto and mailto-user are in a separate InputPanel, we have
+ // to delete them here. Otherwise, their values will be collected twice.
+ delete values.mailto;
+ delete values['mailto-user'];
+
+ 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;
+ },
+});
--
2.39.2
More information about the pve-devel
mailing list