emailengine-app 2.67.3 → 2.68.0

package/translations/messages.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Content-Type: text/plain; charset=ascii\n"
-"POT-Creation-Date: 2026-04-17 08:51+0000\n"
+"POT-Creation-Date: 2026-04-29 10:14+0000\n"
 
 #: views/error.hbs:4
 #: workers/api.js:7103
@@ -27,10 +27,6 @@ msgid_plural "%d days"
 msgstr[0] ""
 msgstr[1] ""
 
-#: views/redirect.hbs:1
-msgid "Click <a href=\"%s\">here</a> to continue&mldr;"
-msgstr ""
-
 #: views/oauth-scope-error.hbs:2
 msgid "Insufficient Permissions"
 msgstr ""
@@ -55,6 +51,10 @@ msgstr ""
 msgid "Try Again"
 msgstr ""
 
+#: views/redirect.hbs:1
+msgid "Click <a href=\"%s\">here</a> to continue&mldr;"
+msgstr ""
+
 #: views/unsubscribe.hbs:3
 #: views/unsubscribe.hbs:62
 #: views/unsubscribe.hbs:85
@@ -104,14 +104,6 @@ msgstr ""
 msgid "Enter your email address"
 msgstr ""
 
-#: views/accounts/register/index.hbs:2
-msgid "Choose your email account provider"
-msgstr ""
-
-#: views/accounts/register/index.hbs:15
-msgid "Standard IMAP"
-msgstr ""
-
 #: views/accounts/register/imap.hbs:11
 msgid "Your name"
 msgstr ""
@@ -134,6 +126,14 @@ msgstr ""
 msgid "Continue"
 msgstr ""
 
+#: views/accounts/register/index.hbs:2
+msgid "Choose your email account provider"
+msgstr ""
+
+#: views/accounts/register/index.hbs:15
+msgid "Standard IMAP"
+msgstr ""
+
 #: views/accounts/register/imap-server.hbs:19
 msgid "IMAP"
 msgstr ""

package/views/config/oauth/app.hbs

@@ -33,6 +33,11 @@
                     <i class="fas fa-user-edit fa-fw"></i> Edit app
                 </a>
 
+                <button type="button" class="btn btn-light" data-toggle="modal" data-target="#verifySetupModal"
+                    title="Run live checks against the provider" id="verify-btn" data-placement="top">
+                    <i class="fas fa-clipboard-check fa-fw"></i> Verify setup
+                </button>
+
                 <button type="button" class="btn btn-light" data-toggle="modal" data-target="#deleteModal"
                     title="Delete this application" id="delete-btn" data-placement="top">
                     <i class="fas fa-trash-alt fa-fw"></i> Delete app
@@ -40,6 +45,16 @@
 
             </div>
 
+            {{#if canAddServiceAccount}}
+            <div class="btn-group ml-auto mb-1" role="group" aria-label="Account actions">
+                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addServiceAccountModal"
+                    title="Register an email account that authenticates through this service application"
+                    id="add-service-account-btn" data-placement="top">
+                    <i class="fas fa-user-plus fa-fw"></i> Add account
+                </button>
+            </div>
+            {{/if}}
+
         </div>
 
         {{#if app.description}}
@@ -164,6 +179,22 @@
             <dd class="col-sm-9 text-monospace"><small>*****</small></dd>
             {{/if}}
 
+            {{#if appShowAuthMethod}}
+            <dt class="col-sm-3">Authentication method</dt>
+            <dd class="col-sm-9">
+                {{#if authMethodIsExternalAccount}}
+                Workload Identity Federation
+                {{else}}
+                Service account key
+                {{/if}}
+            </dd>
+            {{/if}}
+
+            {{#if app.externalAccount}}
+            <dt class="col-sm-3">External account config</dt>
+            <dd class="col-sm-9 text-monospace"><small>***** (set)</small></dd>
+            {{/if}}
+
             {{#if app.redirectUrl}}
             <dt class="col-sm-3">Redirect URL</dt>
             <dd class="col-sm-9 text-monospace"><small>{{app.redirectUrl}}</small></dd>
@@ -337,6 +368,199 @@
     </div>
 </div>
 
+<div class="modal fade" id="verifySetupModal" tabindex="-1" aria-labelledby="verifySetupModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="verifySetupModalLabel">Verify OAuth2 setup</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <input type="hidden" id="verify-crumb" value="{{crumb}}" />
+                <p><small class="text-muted">Runs the provider authentication chain step by step and reports what passes
+                    or fails.{{#if appShowAuthMethod}} Enter a mailbox address in your Workspace domain to also verify
+                    domain-wide delegation and live mailbox access.{{/if}}</small></p>
+
+                <div class="form-group">
+                    <div class="input-group">
+                        <input type="email" class="form-control" id="verify-account"
+                            placeholder="mailbox@example.com (optional)" autocomplete="off" />
+                        <div class="input-group-append">
+                            <button type="button" class="btn btn-primary" id="verify-run-btn">
+                                <i class="fas fa-play fa-fw"></i> Run test
+                            </button>
+                        </div>
+                    </div>
+                    <small class="form-text text-muted">Leave empty to check configuration and signing only.</small>
+                </div>
+
+                <div id="verify-pending" class="d-none">
+                    <p><i class="fas fa-spinner fa-spin fa-sm"></i> Running checks, please wait&mldr;</p>
+                </div>
+                <div id="verify-error" class="d-none">
+                    <small class="alert alert-danger text-monospace error-message" style="display: block;"></small>
+                </div>
+                <div id="verify-verdict" class="d-none mb-3"></div>
+                <ul id="verify-steps" class="list-group"></ul>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+{{#if canAddServiceAccount}}
+<div class="modal fade" id="addServiceAccountModal" tabindex="-1" aria-labelledby="addServiceAccountLabel"
+    aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="addServiceAccountLabel">Add an account</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form method="post" action="/admin/config/oauth/app/{{app.id}}/add-account">
+                <input type="hidden" name="crumb" value="{{crumb}}">
+                <div class="modal-body">
+                    <p><small class="text-muted">This service application authenticates without an interactive consent
+                        screen, so the account is registered directly. The mailbox must be reachable with the
+                        application's service credentials.</small></p>
+                    <div class="form-group">
+                        <label for="service-account-name" class="col-form-label">Full name:</label>
+                        <input type="text" class="form-control" id="service-account-name" name="name"
+                            placeholder="e.g., John Smith">
+                    </div>
+                    <div class="form-group">
+                        <label for="service-account-email" class="col-form-label">Email address:</label>
+                        <input type="email" class="form-control" id="service-account-email" name="email"
+                            placeholder="e.g., user@example.com" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="service-account-id" class="col-form-label">Account identifier (optional):</label>
+                        <input type="text" class="form-control" id="service-account-id" name="account"
+                            placeholder="e.g., account_123">
+                        <small class="form-text text-muted">Leave blank to auto-generate. Existing accounts with this ID
+                            will be updated.</small>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary btn-icon-split">
+                        <span class="icon text-white-50">
+                            <i class="fas fa-user-plus"></i>
+                        </span>
+                        <span class="text">Add account</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        $('#addServiceAccountModal').on('shown.bs.modal', () => {
+            document.getElementById('service-account-name').focus();
+        });
+    });
+</script>
+{{/if}}
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const appId = "{{app.id}}";
+        const stepsElm = document.getElementById('verify-steps');
+        const pendingElm = document.getElementById('verify-pending');
+        const errorElm = document.getElementById('verify-error');
+        const verdictElm = document.getElementById('verify-verdict');
+        const runBtn = document.getElementById('verify-run-btn');
+        const accountInput = document.getElementById('verify-account');
+
+        const ICONS = {
+            ok: '<i class="fas fa-check-circle text-success fa-fw"></i>',
+            fail: '<i class="fas fa-times-circle text-danger fa-fw"></i>',
+            skip: '<i class="fas fa-minus-circle text-muted fa-fw"></i>'
+        };
+
+        const esc = str => {
+            let div = document.createElement('div');
+            div.textContent = str == null ? '' : String(str);
+            return div.innerHTML;
+        };
+
+        const renderResult = data => {
+            stepsElm.innerHTML = '';
+            (data.steps || []).forEach(step => {
+                let li = document.createElement('li');
+                li.className = 'list-group-item';
+                let html = `${ICONS[step.status] || ''} <strong>${esc(step.label)}</strong>`;
+                if (step.message) {
+                    html += `<div class="small text-muted ml-4">${esc(step.message)}</div>`;
+                }
+                if (step.hint) {
+                    html += `<div class="small text-info ml-4"><i class="fas fa-lightbulb fa-fw"></i> ${esc(step.hint)}</div>`;
+                }
+                li.innerHTML = html;
+                stepsElm.appendChild(li);
+            });
+
+            let failed = (data.steps || []).some(s => s.status === 'fail');
+            verdictElm.className = 'mb-3 alert ' + (failed ? 'alert-danger' : 'alert-success');
+            verdictElm.textContent = failed
+                ? 'Setup has problems - review the failing step(s) below.'
+                : 'Setup verified - all checks passed.';
+            verdictElm.classList.remove('d-none');
+        };
+
+        const runVerify = async account => {
+            errorElm.classList.add('d-none');
+            verdictElm.classList.add('d-none');
+            stepsElm.innerHTML = '';
+            pendingElm.classList.remove('d-none');
+            runBtn.disabled = true;
+            try {
+                let res = await fetch(`/admin/config/oauth/verify/${encodeURIComponent(appId)}`, {
+                    method: 'post',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({
+                        crumb: document.getElementById('verify-crumb').value,
+                        account: account || '',
+                        testConnection: true
+                    })
+                });
+                let data = await res.json();
+                if (!res.ok) {
+                    throw new Error(data.error || `HTTP ${res.status}`);
+                }
+                renderResult(data);
+            } catch (err) {
+                errorElm.querySelector('.error-message').textContent = err.message;
+                errorElm.classList.remove('d-none');
+            } finally {
+                pendingElm.classList.add('d-none');
+                runBtn.disabled = false;
+            }
+        };
+
+        $('#verifySetupModal').on('shown.bs.modal', () => {
+            // Auto-run the no-mailbox checks (config + signing chain) on open.
+            runVerify(accountInput.value.trim());
+        });
+
+        runBtn.addEventListener('click', () => runVerify(accountInput.value.trim()));
+        accountInput.addEventListener('keydown', e => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                runVerify(accountInput.value.trim());
+            }
+        });
+    });
+</script>
+
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         // not set up by default as this element has a different data-toggle

package/views/config/oauth/edit.hbs

@@ -89,6 +89,75 @@
             });
         }
 
+        let externalAccountFileElm = document.getElementById('externalAccountFile');
+        if (externalAccountFileElm) {
+            externalAccountFileElm.addEventListener('click', e => {
+                e.preventDefault();
+                browseFileContents('text').then(jsonStr => {
+                    if (!jsonStr) {
+                        return;
+                    }
+
+                    let data;
+                    try {
+                        data = JSON.parse(jsonStr);
+                    } catch (err) {
+                        return showToast('Selected file is not JSON formatted', 'alert-triangle');
+                    }
+
+                    if (data.type !== 'external_account') {
+                        if (data.type === 'service_account') {
+                            return showToast('This is a service account key file, not a Workload Identity Federation config. Switch to the "Service account key" tab to load it.', 'alert-triangle');
+                        }
+                        return showToast(`Selected file is not an external_account credential config (type: ${data.type || 'missing'})`, 'alert-triangle');
+                    }
+
+                    let impersonationUrl = data.service_account_impersonation_url || '';
+                    let emailMatch = impersonationUrl.match(/\/serviceAccounts\/([^/]+):generateAccessToken$/);
+                    if (emailMatch) {
+                        let derivedEmail = decodeURIComponent(emailMatch[1]);
+                        let emailField = document.getElementById('serviceClientEmail');
+                        if (emailField && !emailField.value) {
+                            emailField.value = derivedEmail;
+                        }
+                    }
+
+                    document.getElementById('externalAccount').value = JSON.stringify(data, null, 2);
+                    return showToast('Loaded external account configuration from file', 'check-circle');
+                }).catch(err => {
+                    console.error(err);
+                    return showToast('Failed to load external account file', 'alert-triangle');
+                });
+            });
+        }
+
+        let authMethodTabs = document.querySelectorAll('.auth-method-tab');
+        let authMethodInput = document.getElementById('authMethod');
+        if (authMethodTabs.length && authMethodInput) {
+            let updateSections = selected => {
+                document.querySelectorAll('.auth-method-section').forEach(section => {
+                    let active = section.classList.contains('auth-method-section-' + selected);
+                    section.classList.toggle('d-none', !active);
+                });
+            };
+            authMethodTabs.forEach(tab => {
+                tab.addEventListener('click', e => {
+                    e.preventDefault();
+                    if (tab.classList.contains('disabled') || tab.classList.contains('active')) {
+                        return;
+                    }
+                    let selected = tab.getAttribute('data-auth-method');
+                    authMethodTabs.forEach(other => {
+                        let isActive = other === tab;
+                        other.classList.toggle('active', isActive);
+                        other.setAttribute('aria-selected', isActive ? 'true' : 'false');
+                    });
+                    authMethodInput.value = selected;
+                    updateSections(selected);
+                });
+            });
+        }
+
     });
 
 </script>

package/views/config/oauth/new.hbs

@@ -87,6 +87,75 @@
             });
         }
 
+        let externalAccountFileElm = document.getElementById('externalAccountFile');
+        if (externalAccountFileElm) {
+            externalAccountFileElm.addEventListener('click', e => {
+                e.preventDefault();
+                browseFileContents('text').then(jsonStr => {
+                    if (!jsonStr) {
+                        return;
+                    }
+
+                    let data;
+                    try {
+                        data = JSON.parse(jsonStr);
+                    } catch (err) {
+                        return showToast('Selected file is not JSON formatted', 'alert-triangle');
+                    }
+
+                    if (data.type !== 'external_account') {
+                        if (data.type === 'service_account') {
+                            return showToast('This is a service account key file, not a Workload Identity Federation config. Switch to the "Service account key" tab to load it.', 'alert-triangle');
+                        }
+                        return showToast(`Selected file is not an external_account credential config (type: ${data.type || 'missing'})`, 'alert-triangle');
+                    }
+
+                    let impersonationUrl = data.service_account_impersonation_url || '';
+                    let emailMatch = impersonationUrl.match(/\/serviceAccounts\/([^/]+):generateAccessToken$/);
+                    if (emailMatch) {
+                        let derivedEmail = decodeURIComponent(emailMatch[1]);
+                        let emailField = document.getElementById('serviceClientEmail');
+                        if (emailField && !emailField.value) {
+                            emailField.value = derivedEmail;
+                        }
+                    }
+
+                    document.getElementById('externalAccount').value = JSON.stringify(data, null, 2);
+                    return showToast('Loaded external account configuration from file', 'check-circle');
+                }).catch(err => {
+                    console.error(err);
+                    return showToast('Failed to load external account file', 'alert-triangle');
+                });
+            });
+        }
+
+        let authMethodTabs = document.querySelectorAll('.auth-method-tab');
+        let authMethodInput = document.getElementById('authMethod');
+        if (authMethodTabs.length && authMethodInput) {
+            let updateSections = selected => {
+                document.querySelectorAll('.auth-method-section').forEach(section => {
+                    let active = section.classList.contains('auth-method-section-' + selected);
+                    section.classList.toggle('d-none', !active);
+                });
+            };
+            authMethodTabs.forEach(tab => {
+                tab.addEventListener('click', e => {
+                    e.preventDefault();
+                    if (tab.classList.contains('disabled') || tab.classList.contains('active')) {
+                        return;
+                    }
+                    let selected = tab.getAttribute('data-auth-method');
+                    authMethodTabs.forEach(other => {
+                        let isActive = other === tab;
+                        other.classList.toggle('active', isActive);
+                        other.setAttribute('aria-selected', isActive ? 'true' : 'false');
+                    });
+                    authMethodInput.value = selected;
+                    updateSections(selected);
+                });
+            });
+        }
+
     });
 
 </script>

package/views/partials/oauth_form.hbs

@@ -25,18 +25,22 @@
     <div class="card-body">
         <div class="row no-gutters align-items-center">
             <div class="col mr-2">
-                <strong>Service accounts</strong> allow EmailEngine to access Gmail mailboxes using a Google Cloud
-                service key, with no interactive user login required. The service account must have domain-wide
-                delegation enabled in Google Workspace. Use this for automated integrations where you cannot
-                perform interactive logins.
-                Accounts using service access can only be added via the
-                <a href="/admin/swagger#/Account/postV1Account">REST API</a>,
-                not through the hosted authentication form.
-                {{#if providerData.tutorialUrl}}
-                Read about setting up {{providerData.comment}} from <a
-                    href="{{providerData.tutorialUrl}}" target="_blank" rel="noopener noreferrer"
-                    referrerpolicy="no-referrer">here</a>.
-                {{/if}}
+                <strong>Service accounts</strong> let EmailEngine access any mailbox in your Google Workspace
+                organization without an interactive user login. The service account must have domain-wide
+                delegation enabled in Workspace. Use this for automated integrations where you cannot perform
+                interactive logins.
+                <p class="mt-2 mb-0">
+                    Two authentication methods are supported: a downloaded <strong>service account key</strong>
+                    (classic) or <strong>Workload Identity Federation</strong> (keyless, for GKE, EKS, AKS, or
+                    any OIDC-emitting workload). Pick one below.
+                </p>
+                <p class="mt-2 mb-0">
+                    Accounts using service access can only be added via the
+                    <a href="/admin/swagger#/Account/postV1Account">REST API</a>, not through the hosted
+                    authentication form.{{#if providerData.tutorialUrl}} Read the
+                    <a href="{{providerData.tutorialUrl}}" target="_blank" rel="noopener noreferrer"
+                        referrerpolicy="no-referrer">setup guide</a> for both methods.{{/if}}
+                </p>
             </div>
             <div class="col-auto">
                 <i class="fas fa-info-circle fa-2x text-gray-300"></i>
@@ -184,14 +188,58 @@
         {{#if activeGmailService}}
 
         <div class="form-group">
-            <button type="button" class="btn btn-info btn-icon-split" id="serviceFile">
-                <span class="icon text-white-50">
-                    <i class="fas fa-cloud-upload-alt"></i>
-                </span>
-                <span class="text">Load configuration from the service key file&#x2026;</span>
-            </button>
-            <small class="form-text text-muted">Select the JSON file you received after generating a new service key to
-                retrieve the service values.</small>
+            <label class="d-block">Authentication method</label>
+            <input type="hidden" name="authMethod" id="authMethod"
+                value="{{#if authMethodIsExternalAccount}}externalAccount{{else}}serviceKey{{/if}}" />
+            {{#if authMethodLocked}}
+            <p class="mb-1">
+                <strong>{{#if authMethodIsExternalAccount}}Workload Identity Federation (keyless){{else}}Service account key{{/if}}</strong>
+            </p>
+            <small class="form-text text-muted">The authentication method is fixed once the application has been created and
+                cannot be changed.</small>
+            {{else}}
+            <ul class="nav nav-tabs" id="auth-method-tabs" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <a class="nav-link auth-method-tab {{#if authMethodIsServiceKey}}active{{/if}}"
+                        id="auth-method-tab-serviceKey" data-auth-method="serviceKey" href="#" role="tab"
+                        aria-selected="{{#if authMethodIsServiceKey}}true{{else}}false{{/if}}">Service account key</a>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <a class="nav-link auth-method-tab {{#if authMethodIsExternalAccount}}active{{/if}}"
+                        id="auth-method-tab-externalAccount" data-auth-method="externalAccount" href="#" role="tab"
+                        aria-selected="{{#if authMethodIsExternalAccount}}true{{else}}false{{/if}}">Workload Identity Federation (keyless)</a>
+                </li>
+            </ul>
+            <small class="form-text text-muted">"Service account key" expects a downloaded JSON key file.
+                "Workload Identity Federation" authenticates without a long-lived key, using a credential issued
+                by your runtime environment.</small>
+            {{/if}}
+        </div>
+
+        <div class="auth-method-section auth-method-section-serviceKey {{#unless authMethodIsServiceKey}}d-none{{/unless}}">
+            <div class="form-group">
+                <button type="button" class="btn btn-info btn-icon-split" id="serviceFile">
+                    <span class="icon text-white-50">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="text">Load configuration from the service key file&#x2026;</span>
+                </button>
+                <small class="form-text text-muted">Select the JSON file you received after generating a new service key to
+                    retrieve the service values.</small>
+            </div>
+        </div>
+
+        <div class="auth-method-section auth-method-section-externalAccount {{#unless authMethodIsExternalAccount}}d-none{{/unless}}">
+            <div class="form-group">
+                <button type="button" class="btn btn-info btn-icon-split" id="externalAccountFile">
+                    <span class="icon text-white-50">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="text">Load configuration from the external-account JSON file&#x2026;</span>
+                </button>
+                <small class="form-text text-muted">Select the credential configuration file produced by
+                    <code>gcloud iam workload-identity-pools create-cred-config</code>.</small>
+            </div>
         </div>
 
         <div class="form-group">
@@ -235,18 +283,37 @@
             <small class="form-text text-muted">OAuth2 Service Client ID</small>
         </div>
 
-        <div class="form-group">
+        <div class="auth-method-section auth-method-section-serviceKey {{#unless authMethodIsServiceKey}}d-none{{/unless}}">
+            <div class="form-group">
 
-            <label for="serviceKey">Secret service key</label>
+                <label for="serviceKey">Secret service key</label>
 
-            <textarea class="form-control droptxt autoselect {{#if errors.serviceKey}}is-invalid{{/if}}" id="serviceKey"
-                name="serviceKey" rows="4" data-enable-grammarly="false" spellcheck="false" {{#if
-                hasServiceKey}}placeholder="Service key is set but not shown&mldr;" {{else}}
-                placeholder="Starts with &quot;-----BEGIN PRIVATE KEY-----&quot;&mldr;" {{/if}} {{#unless
-                hasServiceKey}}required{{/unless}}>{{values.serviceKey}}</textarea>
-            {{#if errors.serviceKey}}
-            <span class="invalid-feedback">{{errors.serviceKey}}</span>
-            {{/if}}
+                <textarea class="form-control droptxt autoselect {{#if errors.serviceKey}}is-invalid{{/if}}" id="serviceKey"
+                    name="serviceKey" rows="8" data-enable-grammarly="false" spellcheck="false" {{#if
+                    hasServiceKey}}placeholder="Service key is set but not shown&mldr;" {{else}}
+                    placeholder="Starts with &quot;-----BEGIN PRIVATE KEY-----&quot;&mldr;" {{/if}}>{{values.serviceKey}}</textarea>
+                {{#if errors.serviceKey}}
+                <span class="invalid-feedback">{{errors.serviceKey}}</span>
+                {{/if}}
+            </div>
+        </div>
+
+        <div class="auth-method-section auth-method-section-externalAccount {{#unless authMethodIsExternalAccount}}d-none{{/unless}}">
+            <div class="form-group">
+
+                <label for="externalAccount">External account configuration</label>
+
+                <textarea class="form-control droptxt autoselect text-monospace {{#if errors.externalAccount}}is-invalid{{/if}}"
+                    id="externalAccount" name="externalAccount" rows="8" data-enable-grammarly="false" spellcheck="false" {{#if
+                    hasExternalAccount}}placeholder="External account configuration is set but not shown&mldr;" {{else}}
+                    placeholder="{&quot;type&quot;:&quot;external_account&quot;,&quot;audience&quot;:&quot;...&quot;,&quot;credential_source&quot;:{&quot;file&quot;:&quot;/var/run/secrets/...&quot;}}" {{/if}}>{{values.externalAccount}}</textarea>
+                {{#if errors.externalAccount}}
+                <span class="invalid-feedback">{{errors.externalAccount}}</span>
+                {{/if}}
+                <small class="form-text text-muted">Paste the JSON produced by
+                    <code>gcloud iam workload-identity-pools create-cred-config</code>. Only the
+                    <code>file</code> and <code>url</code> credential sources are supported.</small>
+            </div>
         </div>
 
         {{else if activeOutlookService}}
@@ -811,7 +878,7 @@
 
     <div id="select-pubsub-app" class="card-footer {{#unless baseScopesApi}}d-none{{/unless}}">
 
-        <p>Microsoft Graph delivers change notifications to EmailEngine at these two endpoints:</p>
+        <p>Microsoft Graph delivers change notifications to EmailEngine at these two endpoints:</p>
 
         <pre><code>{{mainServiceUrl}}/oauth/msg/lifecycle
 {{mainServiceUrl}}/oauth/msg/notification</code></pre>
@@ -825,7 +892,7 @@
         <p>
             If your EmailEngine instance cannot be exposed directly, configure a public
             proxy domain in <span class="text-muted code-link"><a href="/admin/swagger#/Settings/postV1Settings"
-                    target="_blank" rel="noopener noreferrer">notificationBaseUrl</a></span>. Microsoft Graph will then
+                    target="_blank" rel="noopener noreferrer">notificationBaseUrl</a></span>. Microsoft Graph will then
             post to <code>https://&lt;proxy-domain&gt;/oauth/msg/...</code> instead of
             <code>{{mainServiceUrl}}</code>.
         </p>