public inbox for pve-devel@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 v3 13/23] notifications: Add opt-in OAuth2 support for SMTP targets
Date: Wed, 15 Apr 2026 09:02:10 +0200	[thread overview]
Message-ID: <20260415070220.100306-14-a.bied-charreton@proxmox.com> (raw)
In-Reply-To: <20260415070220.100306-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 this new feature, so it can be gradually introduced into products.
When disabled, no changes are visible from the UI.

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

diff --git a/src/panel/SmtpEditPanel.js b/src/panel/SmtpEditPanel.js
index 37e4d51..e6c717b 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,33 @@ Ext.define('Proxmox.panel.SmtpEditPanel', {
             values.mailto = values.mailto.split(/[\s,;]+/);
         }
 
-        if (!values.authentication && !me.isCreate) {
-            Proxmox.Utils.assemble_field_data(values, { delete: 'username' });
-            Proxmox.Utils.assemble_field_data(values, { delete: 'password' });
+        let authMethod = values['auth-method'];
+        if (!this.enableOAuth2 || authMethod === 'none') {
+            delete values['auth-method'];
+        }
+
+        if (!me.isCreate) {
+            if (authMethod === 'none') {
+                if (this.enableOAuth2) {
+                    Proxmox.Utils.assemble_field_data(values, { delete: 'auth-method' });
+                    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' });
+                }
+                Proxmox.Utils.assemble_field_data(values, { delete: 'username' });
+                Proxmox.Utils.assemble_field_data(values, { delete: 'password' });
+            } else if (authMethod === 'plain' && this.enableOAuth2) {
+                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 (authMethod === 'microsoft-oauth2') {
+                Proxmox.Utils.assemble_field_data(values, { delete: 'username' });
+                Proxmox.Utils.assemble_field_data(values, { delete: 'password' });
+            } else if (authMethod === 'google-oauth2') {
+                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.enable) {
@@ -199,12 +425,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-04-15  7:03 UTC|newest]

Thread overview: 24+ messages / expand[flat|nested]  mbox.gz  Atom feed  top
2026-04-15  7:01 [PATCH docs/manager/proxmox{,-perl-rs,-widget-toolkit,-backup} v3 00/23] fix #7238: Add XOAUTH2 authentication support for SMTP notification targets Arthur Bied-Charreton
2026-04-15  7:01 ` [PATCH proxmox v3 01/23] Add oauth2 and ureq to workspace dependencies Arthur Bied-Charreton
2026-04-15  7:01 ` [PATCH proxmox v3 02/23] notify: smtp: Introduce xoauth2 module Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox v3 03/23] notify: smtp: Introduce state management Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox v3 04/23] notify: smtp: Factor out transport building logic Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox v3 05/23] notify: smtp: Update API with OAuth2 parameters Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox v3 06/23] notify: smtp: Infer auth method for backwards compatibility Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox v3 07/23] notify: smtp: Add state handling logic Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox v3 08/23] notify: smtp: Add XOAUTH2 authentication support Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-perl-rs v3 09/23] pve-rs: notify: smtp: add OAuth2 parameters to bindings Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-perl-rs v3 10/23] pve-rs: notify: Add binding for triggering state refresh Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-widget-toolkit v3 11/23] utils: Add OAuth2 flow handlers Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-widget-toolkit v3 12/23] utils: oauth2: Add callback handler Arthur Bied-Charreton
2026-04-15  7:02 ` Arthur Bied-Charreton [this message]
2026-04-15  7:02 ` [PATCH pve-manager v3 14/23] notifications: smtp: api: Add XOAUTH2 parameters Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH pve-manager v3 15/23] notifications: Add trigger-state-refresh endpoint Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH pve-manager v3 16/23] notifications: Trigger notification target refresh in pveupdate Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH pve-manager v3 17/23] login: Handle OAuth2 callback Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH pve-manager v3 18/23] fix #7238: notifications: smtp: Add XOAUTH2 support Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-backup v3 19/23] notifications: Add XOAUTH2 parameters to endpoints Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-backup v3 20/23] login: Handle OAuth2 callback Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-backup v3 21/23] fix #7238: notifications: smtp: Add XOAUTH2 support Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH proxmox-backup v3 22/23] daily-update: Refresh OAuth2 state for SMTP notification endpoints Arthur Bied-Charreton
2026-04-15  7:02 ` [PATCH pve-docs v3 23/23] notifications: Add OAuth2 section 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=20260415070220.100306-14-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 a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal