feat: refactor IMAP config to DB, add multi-account mail sources admin UI
Agent-Logs-Url: https://github.com/christianlouis/dmarq/sessions/f141cd3b-8d0a-4c7e-b479-ee973c209c11 Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -10,144 +10,26 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="grid gap-4 md:gap-8 py-4">
|
||||
<!-- IMAP Configuration -->
|
||||
|
||||
<!-- Mail Sources info card (replaces the old IMAP configuration form) -->
|
||||
{% call card() %}
|
||||
{% call card_header() %}
|
||||
{% call card_title() %}IMAP Configuration{% endcall %}
|
||||
{% call card_title() %}Mail Sources{% endcall %}
|
||||
{% call card_description() %}
|
||||
Configure the IMAP connection to automatically retrieve DMARC reports from your email
|
||||
IMAP and other inbox credentials are now managed on the dedicated
|
||||
<strong>Mail Sources</strong> page. Multiple accounts and methods
|
||||
(IMAP, POP3, Gmail API) can be configured there.
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
{% call card_content() %}
|
||||
<form id="imap-form" class="space-y-6" x-data="imapForm()">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
{% call form_group() %}
|
||||
{% call label(for="imap_server", required=True) %}IMAP Server{% endcall %}
|
||||
{{ input(type="text", name="imap_server", id="imap_server", placeholder="mail.example.com", required=True) }}
|
||||
{% endcall %}
|
||||
|
||||
{% call form_group() %}
|
||||
{% call label(for="imap_port", required=True) %}IMAP Port{% endcall %}
|
||||
{{ input(type="number", name="imap_port", id="imap_port", value="993", required=True) }}
|
||||
{% endcall %}
|
||||
|
||||
{% call form_group() %}
|
||||
{% call label(for="imap_ssl") %}Use SSL{% endcall %}
|
||||
<div class="flex items-center space-x-2">
|
||||
<input type="checkbox" id="imap_ssl" name="imap_ssl" class="h-4 w-4 rounded border-border text-primary focus:ring-primary" checked />
|
||||
<label for="imap_ssl" class="text-sm text-muted-foreground">Enable SSL/TLS connection (recommended)</label>
|
||||
</div>
|
||||
{% endcall %}
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
{% call form_group() %}
|
||||
{% call label(for="imap_username", required=True) %}IMAP Username{% endcall %}
|
||||
{{ input(type="text", name="imap_username", id="imap_username", placeholder="dmarc-reports@example.com", required=True) }}
|
||||
{% endcall %}
|
||||
|
||||
{% call form_group() %}
|
||||
{% call label(for="imap_password", required=True) %}IMAP Password{% endcall %}
|
||||
<div class="relative">
|
||||
{{ input(type="password", name="imap_password", id="imap_password", required=True) }}
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-2 top-2.5 text-muted-foreground hover:text-foreground"
|
||||
x-on:click="togglePassword"
|
||||
>
|
||||
<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>
|
||||
{% endcall %}
|
||||
|
||||
{% call form_group() %}
|
||||
{% call label(for="polling_interval") %}Polling Interval (minutes){% endcall %}
|
||||
{{ input(type="number", name="polling_interval", id="polling_interval", value="60", min="15", max="1440") }}
|
||||
<p class="text-xs text-muted-foreground mt-1">How often to check for new reports (minimum 15 minutes)</p>
|
||||
{% endcall %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="test-connection-result" x-show="testResult" x-cloak>
|
||||
<template x-if="testStatus === 'success'">
|
||||
{% call alert(variant="success") %}
|
||||
{% call alert_title() %}Connection Successful{% endcall %}
|
||||
{% call alert_description() %}
|
||||
<p x-text="testResult"></p>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
</template>
|
||||
|
||||
<template x-if="testStatus === 'error'">
|
||||
{% call alert(variant="error") %}
|
||||
{% call alert_title() %}Connection Failed{% endcall %}
|
||||
{% call alert_description() %}
|
||||
<p x-text="testResult"></p>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div id="save-result" x-show="saveResult" x-cloak>
|
||||
<template x-if="saveStatus === 'success'">
|
||||
{% call alert(variant="success") %}
|
||||
{% call alert_title() %}Settings Saved{% endcall %}
|
||||
{% call alert_description() %}
|
||||
<p x-text="saveResult"></p>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
</template>
|
||||
|
||||
<template x-if="saveStatus === 'error'">
|
||||
{% call alert(variant="error") %}
|
||||
{% call alert_title() %}Save Failed{% endcall %}
|
||||
{% call alert_description() %}
|
||||
<p x-text="saveResult"></p>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline btn-md"
|
||||
x-on:click="testConnection"
|
||||
x-bind:disabled="isTesting || isSaving"
|
||||
>
|
||||
<span x-show="!isTesting">
|
||||
<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"><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>
|
||||
Test Connection
|
||||
</span>
|
||||
<span x-show="isTesting" class="flex items-center" x-cloak>
|
||||
<svg class="animate-spin -ml-1 mr-2 h-4 w-4" 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>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-default btn-md"
|
||||
x-bind:disabled="isTesting || isSaving"
|
||||
>
|
||||
<span x-show="!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-2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
|
||||
Save Configuration
|
||||
</span>
|
||||
<span x-show="isSaving" class="flex items-center" x-cloak>
|
||||
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" 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>
|
||||
Saving...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<a href="/mail-sources" class="btn btn-default btn-md">
|
||||
<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">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||||
<polyline points="22,6 12,13 2,6"></polyline>
|
||||
</svg>
|
||||
Manage Mail Sources
|
||||
</a>
|
||||
{% endcall %}
|
||||
{% endcall %}
|
||||
|
||||
@@ -196,132 +78,17 @@
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function imapForm() {
|
||||
return {
|
||||
showPassword: false,
|
||||
isTesting: false,
|
||||
isSaving: false,
|
||||
testResult: '',
|
||||
testStatus: '',
|
||||
saveResult: '',
|
||||
saveStatus: '',
|
||||
|
||||
togglePassword() {
|
||||
this.showPassword = !this.showPassword;
|
||||
const passwordInput = document.getElementById('imap_password');
|
||||
passwordInput.type = this.showPassword ? 'text' : 'password';
|
||||
},
|
||||
|
||||
async testConnection() {
|
||||
this.isTesting = true;
|
||||
this.testResult = '';
|
||||
|
||||
const formData = new FormData(document.getElementById('imap-form'));
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
data.imap_ssl = formData.get('imap_ssl') === 'on';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v1/admin/test-imap', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
this.testStatus = 'success';
|
||||
this.testResult = 'Successfully connected to the IMAP server. Found ' + (result.message_count || 0) + ' messages in the inbox.';
|
||||
} else {
|
||||
throw new Error(result.detail || 'Failed to connect to the IMAP server');
|
||||
}
|
||||
} catch (error) {
|
||||
this.testStatus = 'error';
|
||||
this.testResult = `Connection failed: ${error.message}`;
|
||||
} finally {
|
||||
this.isTesting = false;
|
||||
}
|
||||
},
|
||||
|
||||
init() {
|
||||
// Load existing IMAP settings
|
||||
this.loadImapSettings();
|
||||
|
||||
// Update percent display
|
||||
const percentInput = document.getElementById('percent');
|
||||
const percentDisplay = document.getElementById('percent-display');
|
||||
if (percentInput && percentDisplay) {
|
||||
percentInput.addEventListener('input', function() {
|
||||
percentDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
const form = document.getElementById('imap-form');
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
await this.saveImapSettings();
|
||||
});
|
||||
},
|
||||
|
||||
async loadImapSettings() {
|
||||
try {
|
||||
const response = await fetch('/api/v1/admin/imap-settings');
|
||||
|
||||
if (response.ok) {
|
||||
const settings = await response.json();
|
||||
|
||||
document.getElementById('imap_server').value = settings.imap_server || '';
|
||||
document.getElementById('imap_port').value = settings.imap_port || 993;
|
||||
document.getElementById('imap_username').value = settings.imap_username || '';
|
||||
document.getElementById('imap_password').value = settings.imap_password || '';
|
||||
document.getElementById('imap_ssl').checked = settings.imap_ssl !== false;
|
||||
document.getElementById('polling_interval').value = settings.polling_interval || 60;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load IMAP settings:', error);
|
||||
}
|
||||
},
|
||||
|
||||
async saveImapSettings() {
|
||||
this.isSaving = true;
|
||||
this.saveResult = '';
|
||||
|
||||
const formData = new FormData(document.getElementById('imap-form'));
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
data.imap_ssl = formData.get('imap_ssl') === 'on';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v1/admin/imap-settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
this.saveStatus = 'success';
|
||||
this.saveResult = 'IMAP settings saved successfully. The system will now check for new DMARC reports based on your settings.';
|
||||
} else {
|
||||
throw new Error(result.detail || 'Failed to save IMAP settings');
|
||||
}
|
||||
} catch (error) {
|
||||
this.saveStatus = 'error';
|
||||
this.saveResult = `Save failed: ${error.message}`;
|
||||
} finally {
|
||||
this.isSaving = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize any scripts after DOM load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Percent display for DMARC policy form
|
||||
const percentInput = document.getElementById('percent');
|
||||
const percentDisplay = document.getElementById('percent-display');
|
||||
if (percentInput && percentDisplay) {
|
||||
percentInput.addEventListener('input', function() {
|
||||
percentDisplay.textContent = this.value + '%';
|
||||
});
|
||||
}
|
||||
|
||||
// DMARC policy form handling
|
||||
const policyForm = document.getElementById('dmarc-policy-form');
|
||||
if (policyForm) {
|
||||
|
||||
Reference in New Issue
Block a user