florianfederspiel
21e2bc2755
KI-AGENT: Ergänzt Tabellen für lokalen E-Mail-Cache, IMAP-Sync-Service und Inbox-API. Überarbeitet außerdem die E-Mail-Konto-Seiten mit sicherer Passwortbehandlung und manuellem Sync.
117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
const toast = useToast()
|
|
const items = ref([])
|
|
const loading = ref(true)
|
|
const syncingAccount = ref<string | null>(null)
|
|
|
|
const setupPage = async () => {
|
|
loading.value = true
|
|
try {
|
|
items.value = await useNuxtApp().$api("/api/email/accounts")
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const syncAccount = async (account: any) => {
|
|
syncingAccount.value = account.id
|
|
try {
|
|
const res = await useNuxtApp().$api(`/api/email/accounts/${account.id}/sync`, {
|
|
method: "POST",
|
|
body: { limit: 50 },
|
|
})
|
|
|
|
toast.add({
|
|
title: "E-Mail Konto synchronisiert",
|
|
description: `${res.synced?.[0]?.fetched || 0} neue Nachrichten geladen`,
|
|
color: "success",
|
|
})
|
|
} catch (err: any) {
|
|
toast.add({
|
|
title: "Synchronisation fehlgeschlagen",
|
|
description: err?.data?.error || err?.message || "Das Konto konnte nicht synchronisiert werden.",
|
|
color: "error",
|
|
})
|
|
} finally {
|
|
syncingAccount.value = null
|
|
await setupPage()
|
|
}
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar title="E-Mail Konten">
|
|
<template #right>
|
|
<UButton
|
|
icon="i-heroicons-plus"
|
|
@click="navigateTo('/settings/emailaccounts/create')"
|
|
>
|
|
E-Mail Konto
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<div class="p-4 space-y-3">
|
|
<div v-if="loading" class="space-y-2">
|
|
<USkeleton v-for="i in 4" :key="i" class="h-20" />
|
|
</div>
|
|
|
|
<TableEmptyState
|
|
v-else-if="items.length === 0"
|
|
label="Keine E-Mail Konten anzuzeigen"
|
|
/>
|
|
|
|
<div
|
|
v-for="account in items"
|
|
v-else
|
|
:key="account.id"
|
|
class="flex flex-col gap-3 border-b border-(--ui-border) py-4 md:flex-row md:items-center md:justify-between"
|
|
>
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-envelope" class="size-5 text-primary" />
|
|
<p class="truncate font-medium">
|
|
{{ account.email }}
|
|
</p>
|
|
<UBadge
|
|
size="xs"
|
|
color="neutral"
|
|
variant="soft"
|
|
>
|
|
IMAP/SMTP
|
|
</UBadge>
|
|
</div>
|
|
<div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-dimmed">
|
|
<span>IMAP: {{ account.imapHost || "nicht gesetzt" }}:{{ account.imapPort || "-" }}</span>
|
|
<span>SMTP: {{ account.smtpHost || "nicht gesetzt" }}:{{ account.smtpPort || "-" }}</span>
|
|
<span>{{ account.hasPassword ? "Passwort hinterlegt" : "Passwort fehlt" }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<UButton
|
|
icon="i-heroicons-arrow-path"
|
|
color="neutral"
|
|
variant="soft"
|
|
:loading="syncingAccount === account.id"
|
|
@click.stop="syncAccount(account)"
|
|
>
|
|
Synchronisieren
|
|
</UButton>
|
|
<UButton
|
|
icon="i-heroicons-pencil-square"
|
|
color="neutral"
|
|
variant="ghost"
|
|
@click="navigateTo(`/settings/emailaccounts/edit/${account.id}`)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|