Christian Krakau-Louis
929 lines
49 KiB
HTML
929 lines
49 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% from "components/ui/card.html" import card, card_header, card_title, card_description, card_content, card_footer %}
|
|
{% from "components/ui/button.html" import button %}
|
|
{% from "components/ui/alert.html" import alert, alert_title, alert_description %}
|
|
{% from "components/ui/input.html" import input, label, form_group %}
|
|
|
|
{% block title %}Mail Sources - DMARQ{% endblock %}
|
|
|
|
{% block page_title %}Mail Sources{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="grid gap-4 md:gap-8 py-4" x-data="mailSourcesApp()">
|
|
|
|
<!-- Page header -->
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">Mail Sources</h1>
|
|
<p class="text-muted-foreground mt-1">
|
|
Manage inbox accounts used to automatically retrieve DMARC reports.
|
|
Multiple accounts and connection methods (IMAP, POP3, Gmail API) are supported.
|
|
</p>
|
|
</div>
|
|
<button class="btn btn-default btn-md" x-on:click="openAddForm()">
|
|
<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-2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Add Mail Source
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Feedback alerts -->
|
|
<template x-if="feedback.message && feedback.type === 'success'">
|
|
{% call alert(variant="success") %}
|
|
{% call alert_description() %}<span x-text="feedback.message"></span>{% endcall %}
|
|
{% endcall %}
|
|
</template>
|
|
<template x-if="feedback.message && feedback.type === 'error'">
|
|
{% call alert(variant="error") %}
|
|
{% call alert_description() %}<span x-text="feedback.message"></span>{% endcall %}
|
|
{% endcall %}
|
|
</template>
|
|
|
|
<!-- Sources list -->
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
{% call card_title() %}Configured Accounts{% endcall %}
|
|
{% call card_description() %}Click a row to edit. Use the toggle to enable or disable polling for an account.{% endcall %}
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<template x-if="sources.length === 0">
|
|
<p class="text-muted-foreground text-sm py-4 text-center">
|
|
No mail sources configured yet. Click <strong>Add Mail Source</strong> to get started.
|
|
</p>
|
|
</template>
|
|
<template x-if="sources.length > 0">
|
|
<div class="overflow-x-auto">
|
|
<table class="table w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Method</th>
|
|
<th>Server / Account</th>
|
|
<th>User / Status</th>
|
|
<th>Last Checked</th>
|
|
<th>Enabled</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="source in sources" :key="source.id">
|
|
<tr class="hover">
|
|
<td x-text="source.name" class="font-medium"></td>
|
|
<td>
|
|
<span class="badge badge-outline" x-text="source.method"></span>
|
|
</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
|
|
type="checkbox"
|
|
class="toggle toggle-success toggle-sm"
|
|
:checked="source.enabled"
|
|
x-on:change="toggleSource(source.id)"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<div class="flex items-center gap-2">
|
|
<button class="btn btn-ghost btn-xs" x-on:click="openEditForm(source)" title="Edit">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-ghost btn-xs" x-on:click="testSource(source.id)" title="Test connection"
|
|
:disabled="testing[source.id]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-ghost btn-xs" x-on:click="fetchSource(source)" title="Run import now"
|
|
:disabled="Boolean(fetching[source.id])">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.8 1.04 6.43 2.72"></path>
|
|
<path d="M21 3v6h-6"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-ghost btn-xs" x-on:click="openBackfill(source)" title="Backfill date range"
|
|
:disabled="Boolean(fetching[source.id])">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-ghost btn-xs" x-on:click="loadImportHistory(source)" title="Import history">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-ghost btn-xs text-error" x-on:click="confirmDelete(source)" title="Delete">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
<path d="M10 11v6"></path>
|
|
<path d="M14 11v6"></path>
|
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
|
|
<!-- Import history -->
|
|
<template x-if="historySource">
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
{% call card_title() %}Import History{% endcall %}
|
|
{% call card_description() %}
|
|
<span x-text="historySource ? historySource.name : ''"></span>
|
|
{% endcall %}
|
|
</div>
|
|
<button class="btn btn-ghost btn-sm" x-on:click="closeHistory()">Close</button>
|
|
</div>
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<template x-if="historyLoading">
|
|
<p class="text-muted-foreground text-sm py-4 text-center">Loading import history…</p>
|
|
</template>
|
|
<template x-if="!historyLoading && importHistory.length === 0">
|
|
<p class="text-muted-foreground text-sm py-4 text-center">No import attempts recorded yet.</p>
|
|
</template>
|
|
<template x-if="!historyLoading && importHistory.length > 0">
|
|
<div class="overflow-x-auto">
|
|
<table class="table w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Started</th>
|
|
<th>Status</th>
|
|
<th>Trigger</th>
|
|
<th>Emails</th>
|
|
<th>Reports</th>
|
|
<th>Duplicates</th>
|
|
<th>New Domains</th>
|
|
<th>Errors</th>
|
|
<th>Details</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="entry in importHistory" :key="entry.id">
|
|
<tr>
|
|
<td x-text="formatDate(entry.started_at)"></td>
|
|
<td>
|
|
<span class="badge" :class="statusBadgeClass(entry.status)" x-text="entry.status"></span>
|
|
</td>
|
|
<td x-text="entry.trigger"></td>
|
|
<td x-text="entry.processed"></td>
|
|
<td x-text="entry.reports_found"></td>
|
|
<td x-text="entry.duplicate_reports"></td>
|
|
<td x-text="formatList(entry.new_domains)"></td>
|
|
<td>
|
|
<template x-if="entry.errors && entry.errors.length">
|
|
<details class="max-w-xs">
|
|
<summary class="cursor-pointer" x-text="`${entry.error_count} error${entry.error_count === 1 ? '' : 's'}`"></summary>
|
|
<ul class="list-disc pl-4 mt-2 text-xs space-y-1">
|
|
<template x-for="error in entry.errors" :key="error">
|
|
<li x-text="error"></li>
|
|
</template>
|
|
</ul>
|
|
</details>
|
|
</template>
|
|
<template x-if="!entry.errors || entry.errors.length === 0">
|
|
<span class="text-muted-foreground">None</span>
|
|
</template>
|
|
</td>
|
|
<td>
|
|
<template x-if="entry.details && entry.details.length">
|
|
<details class="max-w-sm">
|
|
<summary class="cursor-pointer" x-text="formatDetailsSummary(entry.details)"></summary>
|
|
<div class="mt-2 space-y-2 text-xs">
|
|
<template x-for="detail in entry.details" :key="`${detail.status}-${detail.message_id || ''}-${detail.filename || ''}-${detail.report_id || ''}`">
|
|
<div class="rounded border border-base-300 p-2">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="badge badge-sm" :class="detailBadgeClass(detail.status)" x-text="detail.status"></span>
|
|
<span class="font-mono" x-show="detail.report_id" x-text="detail.report_id"></span>
|
|
</div>
|
|
<div class="mt-1 text-muted-foreground">
|
|
<span x-show="detail.filename" x-text="detail.filename"></span>
|
|
<span x-show="detail.domain" x-text="` • ${detail.domain}`"></span>
|
|
<span x-show="detail.reason" x-text="` • ${(detail.reason || '').replaceAll('_', ' ')}`"></span>
|
|
<span x-show="detail.error" x-text="` • ${detail.error}`"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</details>
|
|
</template>
|
|
<template x-if="!entry.details || entry.details.length === 0">
|
|
<span class="text-muted-foreground">None</span>
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</template>
|
|
|
|
<!-- Add / Edit modal -->
|
|
<div x-show="showForm" x-cloak
|
|
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
|
|
x-on:keydown.escape.window="closeForm()">
|
|
<div class="bg-base-100 rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold" x-text="editingId ? 'Edit Mail Source' : 'Add Mail Source'"></h2>
|
|
<button class="btn btn-ghost btn-sm btn-circle" x-on:click="closeForm()">✕</button>
|
|
</div>
|
|
|
|
<form id="source-form" x-on:submit.prevent="saveSource()" class="space-y-4">
|
|
|
|
<!-- Name -->
|
|
<div>
|
|
<label class="label"><span class="label-text font-medium">Name <span class="text-error">*</span></span></label>
|
|
<input type="text" x-model="form.name" placeholder="e.g. DMARC Reports Inbox"
|
|
class="input input-bordered w-full" required />
|
|
</div>
|
|
|
|
<!-- Method -->
|
|
<div>
|
|
<label class="label"><span class="label-text font-medium">Method</span></label>
|
|
<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 (OAuth2)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Server + Port (IMAP / POP3) -->
|
|
<template x-if="form.method === 'IMAP' || form.method === 'POP3'">
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="col-span-2">
|
|
<label class="label"><span class="label-text font-medium">Server <span class="text-error">*</span></span></label>
|
|
<input type="text" x-model="form.server" placeholder="imap.example.com"
|
|
class="input input-bordered w-full" />
|
|
</div>
|
|
<div>
|
|
<label class="label"><span class="label-text font-medium">Port</span></label>
|
|
<input type="number" x-model.number="form.port" class="input input-bordered w-full" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Username -->
|
|
<template x-if="form.method === 'IMAP' || form.method === 'POP3'">
|
|
<div>
|
|
<label class="label"><span class="label-text font-medium">Username <span class="text-error">*</span></span></label>
|
|
<input type="text" x-model="form.username" placeholder="dmarc@example.com"
|
|
class="input input-bordered w-full" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Password -->
|
|
<template x-if="form.method === 'IMAP' || form.method === 'POP3'">
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-medium">Password <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.password"
|
|
class="input input-bordered w-full pr-10" />
|
|
<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="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
|
|
<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
|
|
<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
|
|
<line x1="2" x2="22" y1="2" y2="22"></line>
|
|
</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" x-cloak>
|
|
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- SSL toggle -->
|
|
<template x-if="form.method === 'IMAP' || form.method === 'POP3'">
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" x-model="form.use_ssl" class="toggle toggle-sm" id="form-ssl" />
|
|
<label for="form-ssl" class="label-text">Use SSL/TLS (recommended)</label>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Folder -->
|
|
<template x-if="form.method === 'IMAP'">
|
|
<div>
|
|
<label class="label"><span class="label-text font-medium">Folder</span></label>
|
|
<input type="text" x-model="form.folder" placeholder="INBOX"
|
|
class="input input-bordered w-full" />
|
|
</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>
|
|
<input type="number" x-model.number="form.polling_interval" min="15" max="1440"
|
|
class="input input-bordered w-full" />
|
|
<p class="text-xs text-muted-foreground mt-1">How often to check for new reports (min 15 min)</p>
|
|
</div>
|
|
|
|
<!-- Enabled -->
|
|
<div class="flex items-center gap-3">
|
|
<input type="checkbox" x-model="form.enabled" class="toggle toggle-sm" id="form-enabled" />
|
|
<label for="form-enabled" class="label-text">Enable this mail source</label>
|
|
</div>
|
|
|
|
<!-- Test connection result -->
|
|
<template x-if="testResult.message">
|
|
<div :class="testResult.success ? 'alert alert-success' : 'alert alert-error'" class="text-sm p-3 rounded">
|
|
<span x-text="testResult.message"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Form actions -->
|
|
<div class="flex justify-between pt-2">
|
|
<!-- 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">
|
|
<span x-show="!isSaving" x-text="editingId ? 'Update' : 'Save'"></span>
|
|
<span x-show="isSaving" x-cloak>Saving…</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backfill modal -->
|
|
<div x-show="backfillSource" x-cloak
|
|
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
|
|
x-on:keydown.escape.window="closeBackfill()">
|
|
<div class="bg-base-100 rounded-lg shadow-xl w-full max-w-sm p-6 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold">Backfill Mail Source</h2>
|
|
<button class="btn btn-ghost btn-sm btn-circle" x-on:click="closeBackfill()">✕</button>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<p class="text-sm text-muted-foreground" x-text="backfillSource ? backfillSource.name : ''"></p>
|
|
<div class="join w-full">
|
|
<button type="button" class="btn btn-sm join-item flex-1" x-on:click="backfillDays = 7">7 days</button>
|
|
<button type="button" class="btn btn-sm join-item flex-1" x-on:click="backfillDays = 30">30 days</button>
|
|
<button type="button" class="btn btn-sm join-item flex-1" x-on:click="backfillDays = 90">90 days</button>
|
|
</div>
|
|
<label class="form-control">
|
|
<span class="label-text">Days to search</span>
|
|
<input type="number" class="input input-bordered" min="1" max="365" x-model.number="backfillDays">
|
|
</label>
|
|
</div>
|
|
<div class="flex justify-end gap-2">
|
|
<button class="btn btn-ghost btn-sm" x-on:click="closeBackfill()">Cancel</button>
|
|
<button class="btn btn-primary btn-sm" x-on:click="runBackfill()" :disabled="!validBackfillDays() || Boolean(fetching[backfillSource && backfillSource.id])">
|
|
Run Backfill
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete confirmation modal -->
|
|
<div x-show="deleteTarget" x-cloak
|
|
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
|
<div class="bg-base-100 rounded-lg shadow-xl w-full max-w-sm p-6 space-y-4">
|
|
<h2 class="text-lg font-semibold">Delete Mail Source</h2>
|
|
<p class="text-sm text-muted-foreground">
|
|
Are you sure you want to delete <strong x-text="deleteTarget && deleteTarget.name"></strong>?
|
|
This action cannot be undone.
|
|
</p>
|
|
<div class="flex justify-end gap-2">
|
|
<button class="btn btn-ghost btn-sm" x-on:click="deleteTarget = null">Cancel</button>
|
|
<button class="btn btn-error btn-sm" x-on:click="deleteSource()">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function mailSourcesApp() {
|
|
return {
|
|
sources: [],
|
|
showForm: false,
|
|
editingId: null,
|
|
deleteTarget: null,
|
|
showPassword: false,
|
|
isTesting: false,
|
|
isSaving: false,
|
|
testing: {},
|
|
fetching: {},
|
|
backfillSource: null,
|
|
backfillDays: 30,
|
|
historySource: null,
|
|
importHistory: [],
|
|
historyLoading: false,
|
|
feedback: { message: '', type: '' },
|
|
testResult: { message: '', success: false },
|
|
gmailConnected: false,
|
|
gmailEmail: '',
|
|
|
|
form: {
|
|
name: '',
|
|
method: 'IMAP',
|
|
server: '',
|
|
port: 993,
|
|
username: '',
|
|
password: '',
|
|
use_ssl: true,
|
|
folder: 'INBOX',
|
|
polling_interval: 60,
|
|
enabled: true,
|
|
gmail_client_id: '',
|
|
gmail_client_secret: '',
|
|
},
|
|
|
|
async init() {
|
|
await this.loadSources();
|
|
},
|
|
|
|
async loadSources() {
|
|
try {
|
|
const resp = await fetch('/api/v1/mail-sources');
|
|
if (resp.ok) {
|
|
this.sources = await resp.json();
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load mail sources', e);
|
|
}
|
|
},
|
|
|
|
async fetchSource(source, days = 7) {
|
|
this.fetching[source.id] = true;
|
|
this.feedback = { message: '', type: '' };
|
|
try {
|
|
const safeDays = Math.min(365, Math.max(1, Number(days) || 7));
|
|
const resp = await fetch(`/api/v1/mail-sources/${source.id}/fetch?days=${safeDays}`, {
|
|
method: 'POST',
|
|
});
|
|
const result = await resp.json();
|
|
if (!resp.ok) {
|
|
throw new Error(result.detail || 'Import failed');
|
|
}
|
|
this.feedback = {
|
|
message: `Import finished for ${source.name} (${safeDays} day${safeDays === 1 ? '' : 's'}): ${result.reports_found} report${result.reports_found === 1 ? '' : 's'}, ${result.duplicate_reports || 0} duplicate${result.duplicate_reports === 1 ? '' : 's'}.`,
|
|
type: result.success ? 'success' : 'error',
|
|
};
|
|
await this.loadSources();
|
|
if (this.historySource && this.historySource.id === source.id) {
|
|
const updated = this.sources.find(s => s.id === source.id) || source;
|
|
await this.loadImportHistory(updated);
|
|
}
|
|
} catch (e) {
|
|
this.feedback = { message: `Import error: ${e.message}`, type: 'error' };
|
|
} finally {
|
|
this.fetching[source.id] = false;
|
|
}
|
|
},
|
|
|
|
openBackfill(source) {
|
|
this.backfillSource = source;
|
|
this.backfillDays = 30;
|
|
this.feedback = { message: '', type: '' };
|
|
},
|
|
|
|
closeBackfill() {
|
|
this.backfillSource = null;
|
|
this.backfillDays = 30;
|
|
},
|
|
|
|
validBackfillDays() {
|
|
const days = Number(this.backfillDays);
|
|
return Number.isInteger(days) && days >= 1 && days <= 365;
|
|
},
|
|
|
|
async runBackfill() {
|
|
if (!this.backfillSource || !this.validBackfillDays()) return;
|
|
const source = this.backfillSource;
|
|
const days = Number(this.backfillDays);
|
|
this.closeBackfill();
|
|
await this.fetchSource(source, days);
|
|
},
|
|
|
|
async loadImportHistory(source) {
|
|
this.historySource = source;
|
|
this.importHistory = [];
|
|
this.historyLoading = true;
|
|
this.feedback = { message: '', type: '' };
|
|
try {
|
|
const resp = await fetch(`/api/v1/mail-sources/${source.id}/imports?limit=20`);
|
|
if (!resp.ok) {
|
|
const err = await resp.json();
|
|
throw new Error(err.detail || 'Failed to load import history');
|
|
}
|
|
this.importHistory = await resp.json();
|
|
} catch (e) {
|
|
this.feedback = { message: `Error: ${e.message}`, type: 'error' };
|
|
} finally {
|
|
this.historyLoading = false;
|
|
}
|
|
},
|
|
|
|
closeHistory() {
|
|
this.historySource = null;
|
|
this.importHistory = [];
|
|
this.historyLoading = false;
|
|
},
|
|
|
|
formatDate(value) {
|
|
return value ? new Date(value).toLocaleString() : '—';
|
|
},
|
|
|
|
formatList(value) {
|
|
return value && value.length ? value.join(', ') : '—';
|
|
},
|
|
|
|
formatDetailsSummary(details) {
|
|
const counts = details.reduce((acc, detail) => {
|
|
const key = detail.status || 'unknown';
|
|
acc[key] = (acc[key] || 0) + 1;
|
|
return acc;
|
|
}, {});
|
|
return Object.entries(counts)
|
|
.map(([key, count]) => `${count} ${key}`)
|
|
.join(', ');
|
|
},
|
|
|
|
statusBadgeClass(status) {
|
|
if (status === 'success') return 'badge-success';
|
|
if (status === 'warning') return 'badge-warning';
|
|
if (status === 'failed') return 'badge-error';
|
|
return 'badge-outline';
|
|
},
|
|
|
|
detailBadgeClass(status) {
|
|
if (status === 'imported') return 'badge-success';
|
|
if (status === 'duplicate' || status === 'skipped') return 'badge-warning';
|
|
if (status === 'error') return 'badge-error';
|
|
return 'badge-outline';
|
|
},
|
|
|
|
openAddForm() {
|
|
this.editingId = null;
|
|
this.gmailConnected = false;
|
|
this.gmailEmail = '';
|
|
this.form = {
|
|
name: '',
|
|
method: 'IMAP',
|
|
server: '',
|
|
port: 993,
|
|
username: '',
|
|
password: '',
|
|
use_ssl: true,
|
|
folder: 'INBOX',
|
|
polling_interval: 60,
|
|
enabled: true,
|
|
gmail_client_id: '',
|
|
gmail_client_secret: '',
|
|
};
|
|
this.testResult = { message: '', success: false };
|
|
this.showForm = true;
|
|
},
|
|
|
|
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,
|
|
server: source.server || '',
|
|
port: source.port || 993,
|
|
username: source.username || '',
|
|
password: '', // never pre-fill password
|
|
use_ssl: source.use_ssl !== false,
|
|
folder: source.folder || 'INBOX',
|
|
polling_interval: source.polling_interval || 60,
|
|
enabled: source.enabled !== false,
|
|
gmail_client_id: source.gmail_client_id || '',
|
|
gmail_client_secret: '', // never pre-fill client secret
|
|
};
|
|
this.testResult = { message: '', success: false };
|
|
this.showForm = true;
|
|
},
|
|
|
|
closeForm() {
|
|
this.showForm = false;
|
|
this.editingId = null;
|
|
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: '' };
|
|
try {
|
|
const payload = { ...this.form };
|
|
// Don't send empty password on edit
|
|
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}`
|
|
: '/api/v1/mail-sources';
|
|
const method = this.editingId ? 'PUT' : 'POST';
|
|
|
|
const resp = await fetch(url, {
|
|
method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
if (!resp.ok) {
|
|
const err = await resp.json();
|
|
throw new Error(err.detail || 'Save failed');
|
|
}
|
|
this.feedback = {
|
|
message: this.editingId
|
|
? 'Mail source updated successfully.'
|
|
: 'Mail source created successfully.',
|
|
type: 'success',
|
|
};
|
|
await this.loadSources();
|
|
this.closeForm();
|
|
} catch (e) {
|
|
this.feedback = { message: `Error: ${e.message}`, type: 'error' };
|
|
} finally {
|
|
this.isSaving = false;
|
|
}
|
|
},
|
|
|
|
async toggleSource(id) {
|
|
try {
|
|
const resp = await fetch(`/api/v1/mail-sources/${id}/toggle`, { method: 'POST' });
|
|
if (!resp.ok) throw new Error('Toggle failed');
|
|
await this.loadSources();
|
|
} catch (e) {
|
|
this.feedback = { message: `Error toggling source: ${e.message}`, type: 'error' };
|
|
}
|
|
},
|
|
|
|
confirmDelete(source) {
|
|
this.deleteTarget = source;
|
|
},
|
|
|
|
async deleteSource() {
|
|
if (!this.deleteTarget) return;
|
|
try {
|
|
const resp = await fetch(`/api/v1/mail-sources/${this.deleteTarget.id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
if (!resp.ok && resp.status !== 204) throw new Error('Delete failed');
|
|
this.feedback = {
|
|
message: `Mail source "${this.deleteTarget.name}" deleted.`,
|
|
type: 'success',
|
|
};
|
|
this.deleteTarget = null;
|
|
await this.loadSources();
|
|
} catch (e) {
|
|
this.feedback = { message: `Error: ${e.message}`, type: 'error' };
|
|
this.deleteTarget = null;
|
|
}
|
|
},
|
|
|
|
async testSource(id) {
|
|
this.testing[id] = true;
|
|
this.feedback = { message: '', type: '' };
|
|
try {
|
|
const resp = await fetch(`/api/v1/mail-sources/${id}/test`, { method: 'POST' });
|
|
const result = await resp.json();
|
|
if (result.success) {
|
|
this.feedback = {
|
|
message: `Connection test successful for source #${id}: ${result.message}`,
|
|
type: 'success',
|
|
};
|
|
await this.loadSources();
|
|
} else {
|
|
this.feedback = {
|
|
message: `Connection test failed for source #${id}: ${result.message}`,
|
|
type: 'error',
|
|
};
|
|
}
|
|
} catch (e) {
|
|
this.feedback = { message: `Test error: ${e.message}`, type: 'error' };
|
|
} finally {
|
|
this.testing[id] = false;
|
|
}
|
|
},
|
|
|
|
async testAdHoc() {
|
|
this.isTesting = true;
|
|
this.testResult = { message: '', success: false };
|
|
try {
|
|
const payload = {
|
|
server: this.form.server,
|
|
port: this.form.port,
|
|
username: this.form.username,
|
|
password: this.form.password,
|
|
ssl: this.form.use_ssl,
|
|
method: this.form.method,
|
|
};
|
|
const resp = await fetch('/api/v1/mail-sources/test-connection', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
const result = await resp.json();
|
|
this.testResult = {
|
|
success: result.success,
|
|
message: result.success
|
|
? `✓ Connected. ${result.message_count || 0} messages, ${result.dmarc_count || 0} potential DMARC reports.`
|
|
: `✗ ${result.message}`,
|
|
};
|
|
} catch (e) {
|
|
this.testResult = { success: false, message: `Error: ${e.message}` };
|
|
} finally {
|
|
this.isTesting = false;
|
|
}
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock %}
|