feat: implement Gmail API mail source with OAuth2, ingestion tracking, and UI
Agent-Logs-Url: https://github.com/christianlouis/dmarq/sessions/0c63851e-a69a-4a76-8dd8-25618e825b8c Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -61,8 +61,8 @@
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Method</th>
|
||||
<th>Server</th>
|
||||
<th>Username</th>
|
||||
<th>Server / Account</th>
|
||||
<th>User / Status</th>
|
||||
<th>Last Checked</th>
|
||||
<th>Enabled</th>
|
||||
<th>Actions</th>
|
||||
@@ -75,8 +75,8 @@
|
||||
<td>
|
||||
<span class="badge badge-outline" x-text="source.method"></span>
|
||||
</td>
|
||||
<td x-text="source.server ? source.server + ':' + source.port : '—'"></td>
|
||||
<td x-text="source.username || '—'"></td>
|
||||
<td x-text="source.method === 'GMAIL_API' ? (source.gmail_email || '—') : (source.server ? source.server + ':' + source.port : '—')"></td>
|
||||
<td x-text="source.method === 'GMAIL_API' ? (source.gmail_connected ? '✅ Connected' : '⚠️ Not authorised') : (source.username || '—')"></td>
|
||||
<td x-text="source.last_checked ? new Date(source.last_checked).toLocaleString() : 'Never'"></td>
|
||||
<td>
|
||||
<input
|
||||
@@ -153,7 +153,7 @@
|
||||
<select x-model="form.method" class="select select-bordered w-full">
|
||||
<option value="IMAP">IMAP</option>
|
||||
<option value="POP3">POP3 (coming soon)</option>
|
||||
<option value="GMAIL_API">Gmail API (coming soon)</option>
|
||||
<option value="GMAIL_API">Gmail API (OAuth2)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -229,6 +229,72 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Gmail API fields -->
|
||||
<template x-if="form.method === 'GMAIL_API'">
|
||||
<div class="space-y-4">
|
||||
<div class="alert alert-info text-sm p-3">
|
||||
<div>
|
||||
<p class="font-semibold">Gmail API Setup</p>
|
||||
<p class="mt-1">Enter your Google OAuth2 Client ID and Secret from
|
||||
<a href="https://console.cloud.google.com/apis/credentials" target="_blank"
|
||||
class="underline">Google Cloud Console</a>.
|
||||
Enable the <strong>Gmail API</strong>, create an OAuth2 client (Web application),
|
||||
and add your callback URL as an authorised redirect URI.
|
||||
Then save this source and click <strong>Connect Gmail</strong> to authorise access.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label"><span class="label-text font-medium">Google Client ID <span class="text-error">*</span></span></label>
|
||||
<input type="text" x-model="form.gmail_client_id"
|
||||
placeholder="123456789-abc.apps.googleusercontent.com"
|
||||
class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="label">
|
||||
<span class="label-text font-medium">Google Client Secret <span class="text-error">*</span></span>
|
||||
<span class="label-text-alt text-muted-foreground" x-show="editingId">Leave blank to keep existing</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input :type="showPassword ? 'text' : 'password'"
|
||||
x-model="form.gmail_client_secret"
|
||||
class="input input-bordered w-full pr-10"
|
||||
placeholder="GOCSPX-…" />
|
||||
<button type="button"
|
||||
class="absolute right-2 top-3 text-muted-foreground hover:text-foreground"
|
||||
x-on:click="showPassword = !showPassword">
|
||||
<svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
</svg>
|
||||
<svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"></path>
|
||||
<path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"></path>
|
||||
<line x1="1" y1="1" x2="23" y2="23"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OAuth connection status (when editing) -->
|
||||
<template x-if="editingId && gmailConnected">
|
||||
<div class="alert alert-success text-sm p-3">
|
||||
<span>✅ Connected as <strong x-text="gmailEmail || 'Gmail account'"></strong></span>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="editingId && !gmailConnected">
|
||||
<div class="alert alert-warning text-sm p-3">
|
||||
<span>⚠️ Not yet authorised. Save this source first, then click <strong>Connect Gmail</strong>.</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Polling interval -->
|
||||
<div>
|
||||
<label class="label"><span class="label-text font-medium">Polling Interval (minutes)</span></label>
|
||||
@@ -252,18 +318,34 @@
|
||||
|
||||
<!-- Form actions -->
|
||||
<div class="flex justify-between pt-2">
|
||||
<button type="button" class="btn btn-outline btn-sm"
|
||||
x-on:click="testAdHoc()"
|
||||
:disabled="isTesting || isSaving">
|
||||
<span x-show="!isTesting">Test Connection</span>
|
||||
<span x-show="isTesting" class="flex items-center" x-cloak>
|
||||
<svg class="animate-spin h-4 w-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Testing...
|
||||
</span>
|
||||
</button>
|
||||
<!-- Test Connection (IMAP/POP3) or Connect Gmail button -->
|
||||
<div class="flex gap-2">
|
||||
<template x-if="form.method !== 'GMAIL_API'">
|
||||
<button type="button" class="btn btn-outline btn-sm"
|
||||
x-on:click="testAdHoc()"
|
||||
:disabled="isTesting || isSaving">
|
||||
<span x-show="!isTesting">Test Connection</span>
|
||||
<span x-show="isTesting" class="flex items-center" x-cloak>
|
||||
<svg class="animate-spin h-4 w-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Testing...
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
<template x-if="form.method === 'GMAIL_API' && editingId">
|
||||
<button type="button" class="btn btn-outline btn-sm"
|
||||
x-on:click="connectGmail()"
|
||||
:disabled="isTesting || isSaving">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
|
||||
</svg>
|
||||
Connect Gmail
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" class="btn btn-ghost btn-sm" x-on:click="closeForm()">Cancel</button>
|
||||
<button type="submit" class="btn btn-default btn-sm" :disabled="isSaving">
|
||||
@@ -310,6 +392,8 @@ function mailSourcesApp() {
|
||||
testing: {},
|
||||
feedback: { message: '', type: '' },
|
||||
testResult: { message: '', success: false },
|
||||
gmailConnected: false,
|
||||
gmailEmail: '',
|
||||
|
||||
form: {
|
||||
name: '',
|
||||
@@ -322,6 +406,8 @@ function mailSourcesApp() {
|
||||
folder: 'INBOX',
|
||||
polling_interval: 60,
|
||||
enabled: true,
|
||||
gmail_client_id: '',
|
||||
gmail_client_secret: '',
|
||||
},
|
||||
|
||||
async init() {
|
||||
@@ -341,6 +427,8 @@ function mailSourcesApp() {
|
||||
|
||||
openAddForm() {
|
||||
this.editingId = null;
|
||||
this.gmailConnected = false;
|
||||
this.gmailEmail = '';
|
||||
this.form = {
|
||||
name: '',
|
||||
method: 'IMAP',
|
||||
@@ -352,6 +440,8 @@ function mailSourcesApp() {
|
||||
folder: 'INBOX',
|
||||
polling_interval: 60,
|
||||
enabled: true,
|
||||
gmail_client_id: '',
|
||||
gmail_client_secret: '',
|
||||
};
|
||||
this.testResult = { message: '', success: false };
|
||||
this.showForm = true;
|
||||
@@ -359,6 +449,8 @@ function mailSourcesApp() {
|
||||
|
||||
openEditForm(source) {
|
||||
this.editingId = source.id;
|
||||
this.gmailConnected = source.gmail_connected || false;
|
||||
this.gmailEmail = source.gmail_email || '';
|
||||
this.form = {
|
||||
name: source.name,
|
||||
method: source.method,
|
||||
@@ -370,6 +462,8 @@ function mailSourcesApp() {
|
||||
folder: source.folder || 'INBOX',
|
||||
polling_interval: source.polling_interval || 60,
|
||||
enabled: source.enabled !== false,
|
||||
gmail_client_id: source.gmail_client_id || '',
|
||||
gmail_client_secret: source.gmail_client_secret ? '' : '', // never pre-fill
|
||||
};
|
||||
this.testResult = { message: '', success: false };
|
||||
this.showForm = true;
|
||||
@@ -381,6 +475,48 @@ function mailSourcesApp() {
|
||||
this.testResult = { message: '', success: false };
|
||||
},
|
||||
|
||||
async connectGmail() {
|
||||
if (!this.editingId) return;
|
||||
try {
|
||||
const resp = await fetch(
|
||||
`/api/v1/mail-sources/${this.editingId}/gmail/authorize-url`
|
||||
);
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json();
|
||||
this.feedback = { message: `Error: ${err.detail || 'Failed to get authorization URL'}`, type: 'error' };
|
||||
return;
|
||||
}
|
||||
const data = await resp.json();
|
||||
// Open the OAuth2 URL in a new popup window
|
||||
const popup = window.open(
|
||||
data.authorization_url,
|
||||
'gmail_oauth',
|
||||
'width=600,height=700,scrollbars=yes'
|
||||
);
|
||||
// Poll for popup close and refresh source list
|
||||
const pollInterval = setInterval(async () => {
|
||||
if (popup && popup.closed) {
|
||||
clearInterval(pollInterval);
|
||||
await this.loadSources();
|
||||
// Refresh the editing form state
|
||||
const updated = this.sources.find(s => s.id === this.editingId);
|
||||
if (updated) {
|
||||
this.gmailConnected = updated.gmail_connected || false;
|
||||
this.gmailEmail = updated.gmail_email || '';
|
||||
if (this.gmailConnected) {
|
||||
this.feedback = {
|
||||
message: `Gmail connected successfully (${this.gmailEmail}).`,
|
||||
type: 'success',
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
} catch (e) {
|
||||
this.feedback = { message: `Error: ${e.message}`, type: 'error' };
|
||||
}
|
||||
},
|
||||
|
||||
async saveSource() {
|
||||
this.isSaving = true;
|
||||
this.feedback = { message: '', type: '' };
|
||||
@@ -390,6 +526,10 @@ function mailSourcesApp() {
|
||||
if (this.editingId && !payload.password) {
|
||||
delete payload.password;
|
||||
}
|
||||
// Don't send empty gmail_client_secret on edit
|
||||
if (this.editingId && !payload.gmail_client_secret) {
|
||||
delete payload.gmail_client_secret;
|
||||
}
|
||||
|
||||
const url = this.editingId
|
||||
? `/api/v1/mail-sources/${this.editingId}`
|
||||
|
||||
Reference in New Issue
Block a user