all lists on lists.proxmox.com
 help / color / mirror / Atom feed
From: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [PATCH proxmox-widget-toolkit v2 10/16] notifications: Add opt-in OAuth2 support for SMTP targets
Date: Wed, 25 Mar 2026 14:14:38 +0100	[thread overview]
Message-ID: <20260325131444.366808-11-a.bied-charreton@proxmox.com> (raw)
In-Reply-To: <20260325131444.366808-1-a.bied-charreton@proxmox.com>

Add Google & Microsoft OAuth2 authorization support to SMTP endpoint
config.

The enableOAuth2 config flag in pmxSmtpEditPanel allows consumers to opt
into the new feature, so it can be gradually introduced into services.

When disabled, no changes are visible from the UI, and only 'None' and
'Username/Password' are shown as authentication methods.

The flag is passed from the schema config, as it is done for
defaultMailAuthor.

Signed-off-by: Arthur Bied-Charreton <a.bied-charreton@proxmox.com>
---
 src/panel/SmtpEditPanel.js     | 268 +++++++++++++++++++++++++++++++--
 src/window/EndpointEditBase.js |   1 +
 2 files changed, 258 insertions(+), 11 deletions(-)

diff --git a/src/panel/SmtpEditPanel.js b/src/panel/SmtpEditPanel.js
index 37e4d51..fd1cd15 100644
--- a/src/panel/SmtpEditPanel.js
+++ b/src/panel/SmtpEditPanel.js
@@ -6,10 +6,24 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
 
     type: 'smtp',
 
+    enableOAuth2: false,
+
+    initConfig: function (config) {
+        this.callParent(arguments);
+        this.getViewModel().set('enableOAuth2', config.enableOAuth2 || false);
+        return config;
+    },
+
     viewModel: {
         xtype: 'viewmodel',
         data: {
+            enableOAuth2: false,
             mode: 'tls',
+            authMethod: 'plain',
+            oAuth2ClientId: '',
+            oAuth2ClientSecret: '',
+            oAuth2TenantId: '',
+            oAuth2RefreshToken: '',
             authentication: true,
             originalAuthentication: true,
         },
@@ -39,6 +53,62 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
 
                 return shouldShowUnchanged ? gettext('Unchanged') : '';
             },
+            isPlainAuthentication: function (get) {
+                return get('authMethod') === 'plain';
+            },
+            isOAuth2Authentication: function (get) {
+                if (!get('enableOAuth2')) {
+                    return false;
+                }
+                let authMethod = get('authMethod');
+                return authMethod === 'google-oauth2' || authMethod === 'microsoft-oauth2';
+            },
+            isMicrosoftOAuth2Authentication: function (get) {
+                if (!get('enableOAuth2')) {
+                    return false;
+                }
+                return get('authMethod') === 'microsoft-oauth2';
+            },
+            enableAuthenticate: function (get) {
+                if (!get('enableOAuth2')) {
+                    return false;
+                }
+                let clientId = get('oAuth2ClientId');
+                let clientSecret = get('oAuth2ClientSecret');
+
+                if (get('authMethod') === 'microsoft-oauth2') {
+                    let tenantId = get('oAuth2TenantId');
+                    return (
+                        clientId &&
+                        clientId.trim() !== '' &&
+                        clientSecret &&
+                        clientSecret.trim() !== '' &&
+                        tenantId &&
+                        tenantId.trim() !== ''
+                    );
+                } else {
+                    return (
+                        clientId &&
+                        clientId.trim() !== '' &&
+                        clientSecret &&
+                        clientSecret.trim() !== ''
+                    );
+                }
+            },
+            oAuth2ClientSecretEmptyText: function (get) {
+                let isCreate = this.getView().isCreate;
+                let isOAuth2 = get('isOAuth2Authentication');
+                return !isCreate && isOAuth2 ? gettext('Unchanged') : '';
+            },
+            isAuthorized: function (get) {
+                if (!get('enableOAuth2')) {
+                    return false;
+                }
+                return !!get('oAuth2RefreshToken');
+            },
+            authorizeButtonDisabled: function (get) {
+                return !get('enableAuthenticate') || get('isAuthorized');
+            },
         },
     },
 
@@ -102,11 +172,25 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
     ],
     column2: [
         {
-            xtype: 'proxmoxcheckbox',
-            fieldLabel: gettext('Authenticate'),
-            name: 'authentication',
-            bind: {
-                value: '{authentication}',
+            xtype: 'proxmoxKVComboBox',
+            fieldLabel: gettext('Authentication'),
+            name: 'auth-method',
+            comboItems: [
+                ['none', gettext('None')],
+                ['plain', gettext('Username/Password')],
+                ['google-oauth2', gettext('OAuth2 (Google)')],
+                ['microsoft-oauth2', gettext('OAuth2 (Microsoft)')],
+            ],
+            bind: '{authMethod}',
+            cbind: {
+                deleteEmpty: '{!isCreate}',
+            },
+            listeners: {
+                render: function () {
+                    if (!this.up('pmxSmtpEditPanel').enableOAuth2) {
+                        this.getStore().filter('key', /^(none|plain)$/);
+                    }
+                },
             },
         },
         {
@@ -118,7 +202,8 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
                 deleteEmpty: '{!isCreate}',
             },
             bind: {
-                disabled: '{!authentication}',
+                hidden: '{!isPlainAuthentication}',
+                disabled: '{!isPlainAuthentication}',
             },
         },
         {
@@ -130,10 +215,113 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
                 allowBlank: '{!isCreate}',
             },
             bind: {
-                disabled: '{!authentication}',
+                hidden: '{!isPlainAuthentication}',
+                disabled: '{!isPlainAuthentication}',
                 emptyText: '{passwordEmptyText}',
             },
         },
+        {
+            xtype: 'proxmoxtextfield',
+            fieldLabel: gettext('Client ID'),
+            name: 'oauth2-client-id',
+            allowBlank: false,
+            bind: {
+                hidden: '{!isOAuth2Authentication}',
+                disabled: '{!isOAuth2Authentication}',
+                value: '{oAuth2ClientId}',
+            },
+            cbind: {
+                deleteEmpty: '{!isCreate}',
+            },
+        },
+        {
+            xtype: 'proxmoxtextfield',
+            inputType: 'password',
+            fieldLabel: gettext('Client Secret'),
+            name: 'oauth2-client-secret',
+            bind: {
+                hidden: '{!isOAuth2Authentication}',
+                disabled: '{!isOAuth2Authentication}',
+                value: '{oAuth2ClientSecret}',
+                emptyText: '{oAuth2ClientSecretEmptyText}',
+            },
+            cbind: {
+                allowBlank: '{!isCreate}',
+            },
+        },
+        {
+            xtype: 'proxmoxtextfield',
+            fieldLabel: gettext('Tenant ID'),
+            name: 'oauth2-tenant-id',
+            allowBlank: false,
+            bind: {
+                hidden: '{!isMicrosoftOAuth2Authentication}',
+                disabled: '{!isMicrosoftOAuth2Authentication}',
+                value: '{oAuth2TenantId}',
+            },
+            cbind: {
+                deleteEmpty: '{!isCreate}',
+            },
+        },
+        {
+            xtype: 'fieldcontainer',
+            fieldLabel: gettext('Authorize'),
+            layout: 'hbox',
+            bind: {
+                hidden: '{!isOAuth2Authentication}',
+            },
+            items: [
+                {
+                    xtype: 'button',
+                    text: gettext('Authorize'),
+                    handler: async function () {
+                        let panel = this.up('pmxSmtpEditPanel');
+                        let form = panel.up('form');
+                        let values = form.getValues();
+
+                        try {
+                            let refreshToken = await panel.handleOAuth2Flow(values);
+                            panel.getViewModel().set('oAuth2RefreshToken', refreshToken);
+                        } catch (e) {
+                            Ext.Msg.alert('Error', e);
+                        }
+                    },
+                    bind: {
+                        disabled: '{authorizeButtonDisabled}',
+                    },
+                },
+                {
+                    xtype: 'displayfield',
+                    renderer: Ext.identityFn,
+                    value: `<i class="fa fa-check-circle good"></i> <span class="good">${gettext('Authorized')}</span>`,
+                    margin: '0 0 0 8',
+                    bind: {
+                        hidden: '{!isAuthorized}',
+                    },
+                },
+            ],
+        },
+        {
+            xtype: 'hiddenfield',
+            name: 'oauth2-refresh-token',
+            allowBlank: false,
+            bind: {
+                value: '{oAuth2RefreshToken}',
+                disabled: '{!isOAuth2Authentication}',
+            },
+            getErrors: function () {
+                if (this.disabled) {
+                    return [];
+                }
+                if (!this.up('pmxSmtpEditPanel').isCreate) {
+                    return [];
+                }
+                if (!this.getValue()) {
+                    return [''];
+                }
+                return [];
+            },
+        },
     ],
     columnB: [
         {
@@ -159,7 +347,6 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
             },
         },
     ],
-
     advancedColumnB: [
         {
             xtype: 'proxmoxtextfield',
@@ -172,7 +359,22 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
             },
         },
     ],
+    handleOAuth2Flow: function (values) {
+        let authMethod = values['auth-method'];
 
+        if (authMethod === 'microsoft-oauth2') {
+            return Proxmox.OAuth2.handleMicrosoftFlow(
+                values['oauth2-client-id'],
+                values['oauth2-client-secret'],
+                values['oauth2-tenant-id'],
+            );
+        } else if (authMethod === 'google-oauth2') {
+            return Proxmox.OAuth2.handleGoogleFlow(
+                values['oauth2-client-id'],
+                values['oauth2-client-secret'],
+            );
+        }
+    },
     onGetValues: function (values) {
         let me = this;
 
@@ -180,9 +382,42 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
             values.mailto = values.mailto.split(/[\s,;]+/);
         }
 
-        if (!values.authentication && !me.isCreate) {
+        if (!this.enableOAuth2) {
+            delete values['auth-method'];
+            if (!values.authentication && !me.isCreate) {
+                Proxmox.Utils.assemble_field_data(values, { delete: 'username' });
+                Proxmox.Utils.assemble_field_data(values, { delete: 'password' });
+            }
+        } else if (values['auth-method'] === 'none' && !me.isCreate) {
+            delete values['auth-method'];
             Proxmox.Utils.assemble_field_data(values, { delete: 'username' });
             Proxmox.Utils.assemble_field_data(values, { delete: 'password' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'oauth2-client-id' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'oauth2-client-secret' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'oauth2-tenant-id' });
+        } else if (values['auth-method'] === 'plain' && !me.isCreate) {
+            Proxmox.Utils.assemble_field_data(values, { delete: 'oauth2-client-id' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'oauth2-client-secret' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'oauth2-tenant-id' });
+        } else if (values['auth-method'] === 'microsoft-oauth2' && !me.isCreate) {
+            Proxmox.Utils.assemble_field_data(values, { delete: 'username' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'password' });
+            if (!values['oauth2-client-secret']) {
+                delete values['oauth2-client-secret'];
+            }
+            if (!values['oauth2-refresh-token']) {
+                delete values['oauth2-refresh-token'];
+            }
+        } else if (values['auth-method'] === 'google-oauth2' && !me.isCreate) {
+            Proxmox.Utils.assemble_field_data(values, { delete: 'username' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'password' });
+            Proxmox.Utils.assemble_field_data(values, { delete: 'oauth2-tenant-id' });
+            if (!values['oauth2-client-secret']) {
+                delete values['oauth2-client-secret'];
+            }
+            if (!values['oauth2-refresh-token']) {
+                delete values['oauth2-refresh-token'];
+            }
         }
 
         if (values.enable) {
@@ -199,12 +434,23 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
 
         return values;
     },
-
     onSetValues: function (values) {
         let me = this;
 
-        values.authentication = !!values.username;
         values.enable = !values.disable;
+
+        if (values['auth-method'] === undefined && this.enableOAuth2) {
+            if (values['oauth2-tenant-id']) {
+                values['auth-method'] = 'microsoft-oauth2';
+            } else if (values['oauth2-client-id']) {
+                values['auth-method'] = 'google-oauth2';
+            } else if (values.username) {
+                values['auth-method'] = 'plain';
+            } else {
+                values['auth-method'] = 'none';
+            }
+        }
+
         delete values.disable;
 
         // Fix race condition in chromium-based browsers. Without this, the
diff --git a/src/window/EndpointEditBase.js b/src/window/EndpointEditBase.js
index 8c1bfc1..8df2016 100644
--- a/src/window/EndpointEditBase.js
+++ b/src/window/EndpointEditBase.js
@@ -47,6 +47,7 @@ Ext.define('Proxmox.window.EndpointEditBase', {
                     baseUrl: me.baseUrl,
                     type: me.type,
                     defaultMailAuthor: endpointConfig.defaultMailAuthor,
+                    enableOAuth2: endpointConfig.enableOAuth2,
                 },
             ],
         });
-- 
2.47.3




  parent reply	other threads:[~2026-03-25 13:15 UTC|newest]

Thread overview: 17+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2026-03-25 13:14 [PATCH docs/manager/proxmox{,-perl-rs,-widget-toolkit} v2 00/16] fix #7238: Add XOAUTH2 authentication support for SMTP notification targets Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox v2 01/16] notify: smtp: Introduce xoauth2 module Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox v2 02/16] notify: smtp: Introduce state management Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox v2 03/16] notify: smtp: Factor out transport building logic Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox v2 04/16] notify: smtp: Update API with OAuth2 parameters Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox v2 05/16] notify: smtp: Add state handling logic Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox v2 06/16] notify: smtp: Add XOAUTH2 authentication support Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox-perl-rs v2 07/16] pve-rs: notify: smtp: add OAuth2 parameters to bindings Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox-perl-rs v2 08/16] pve-rs: notify: Add binding for triggering state refresh Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH proxmox-widget-toolkit v2 09/16] utils: Add OAuth2 flow handlers Arthur Bied-Charreton
2026-03-25 13:14 ` Arthur Bied-Charreton [this message]
2026-03-25 13:14 ` [PATCH pve-manager v2 11/16] notifications: Add OAuth2 parameters to schema and add/update endpoints Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH pve-manager v2 12/16] notifications: Add trigger-state-refresh endpoint Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH pve-manager v2 13/16] notifications: Trigger notification target refresh in pveupdate Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH pve-manager v2 14/16] notifications: Handle OAuth2 callback in login handler Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH pve-manager v2 15/16] fix #7238: notifications: Opt into OAuth2 authentication Arthur Bied-Charreton
2026-03-25 13:14 ` [PATCH pve-docs v2 16/16] notifications: Add section about OAuth2 to SMTP targets docs Arthur Bied-Charreton

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20260325131444.366808-11-a.bied-charreton@proxmox.com \
    --to=a.bied-charreton@proxmox.com \
    --cc=pve-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal