E-Mail Cache und Konto-Synchronisation vorbereiten
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.
This commit is contained in:
@@ -1,137 +1,224 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
const route = useRoute()
|
||||
const toast = useToast()
|
||||
const mode = route.params.mode
|
||||
const isCreate = computed(() => mode === "create")
|
||||
const loading = ref(false)
|
||||
|
||||
const itemInfo = ref({})
|
||||
const itemInfo = ref({
|
||||
email: "",
|
||||
password: "",
|
||||
imapHost: "",
|
||||
imapPort: 993,
|
||||
imapSsl: true,
|
||||
smtpHost: "",
|
||||
smtpPort: 587,
|
||||
smtpSsl: false,
|
||||
})
|
||||
|
||||
const setup = async () => {
|
||||
if(mode === "create") {
|
||||
|
||||
} else {
|
||||
itemInfo.value = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`)
|
||||
if(!isCreate.value) {
|
||||
const account = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`)
|
||||
itemInfo.value = {
|
||||
...itemInfo.value,
|
||||
...account,
|
||||
password: "",
|
||||
}
|
||||
}
|
||||
}
|
||||
setup()
|
||||
|
||||
const payload = () => ({
|
||||
...itemInfo.value,
|
||||
imapPort: Number(itemInfo.value.imapPort),
|
||||
smtpPort: Number(itemInfo.value.smtpPort),
|
||||
password: itemInfo.value.password || undefined,
|
||||
})
|
||||
|
||||
const createAccount = async () => {
|
||||
loading.value = true
|
||||
const res = await useNuxtApp().$api(`/api/email/accounts`, {
|
||||
method: "POST",
|
||||
body: itemInfo.value,
|
||||
body: payload(),
|
||||
})
|
||||
|
||||
if(res.success) {
|
||||
toast.add({ title: "E-Mail Konto erstellt", color: "success" })
|
||||
navigateTo("/settings/emailaccounts")
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const saveAccount = async () => {
|
||||
loading.value = true
|
||||
const res = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`, {
|
||||
method: "POST",
|
||||
body: itemInfo.value,
|
||||
body: payload(),
|
||||
})
|
||||
|
||||
if(res.success) {
|
||||
toast.add({ title: "E-Mail Konto gespeichert", color: "success" })
|
||||
navigateTo("/settings/emailaccounts")
|
||||
}
|
||||
loading.value = false
|
||||
|
||||
}
|
||||
|
||||
const syncAccount = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await useNuxtApp().$api(`/api/email/accounts/${route.params.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 {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="`E-Mail Konto ${mode === 'create' ? 'erstellen' : 'bearbeiten'}`">
|
||||
<UDashboardNavbar :title="`E-Mail Konto ${isCreate ? 'erstellen' : 'bearbeiten'}`">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'create'"
|
||||
icon="i-heroicons-arrow-left"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
@click="navigateTo('/settings/emailaccounts')"
|
||||
/>
|
||||
<UButton
|
||||
v-if="!isCreate"
|
||||
icon="i-heroicons-arrow-path"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
:loading="loading"
|
||||
@click="syncAccount"
|
||||
>
|
||||
Synchronisieren
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="isCreate"
|
||||
icon="i-heroicons-plus"
|
||||
:loading="loading"
|
||||
:disabled="!itemInfo.email || !itemInfo.password || !itemInfo.imapHost || !itemInfo.smtpHost"
|
||||
@click="createAccount"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
v-if="!isCreate"
|
||||
icon="i-heroicons-check"
|
||||
:loading="loading"
|
||||
:disabled="!itemInfo.email || !itemInfo.imapHost || !itemInfo.smtpHost"
|
||||
@click="saveAccount"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UForm class="w-2/3 mx-auto mt-5">
|
||||
<UFormField
|
||||
label="E-Mail Adresse"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.email"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="Passwort"
|
||||
>
|
||||
<UInput
|
||||
type="password"
|
||||
v-model="itemInfo.password"
|
||||
placeholder="********"
|
||||
/>
|
||||
</UFormField>
|
||||
<div class="mx-auto max-w-4xl p-4">
|
||||
<UAlert
|
||||
v-if="!isCreate"
|
||||
class="mb-4"
|
||||
color="neutral"
|
||||
variant="soft"
|
||||
icon="i-heroicons-lock-closed"
|
||||
title="Passwort bleibt geschützt"
|
||||
description="Das gespeicherte Passwort wird nicht angezeigt. Trage nur dann ein neues Passwort ein, wenn du es ändern möchtest."
|
||||
/>
|
||||
|
||||
<USeparator label="IMAP"/>
|
||||
<UForm class="grid gap-6">
|
||||
<section class="grid gap-4">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold">Konto</h2>
|
||||
<p class="text-sm text-dimmed">Diese Adresse wird als Absender und für den IMAP-Zugriff genutzt.</p>
|
||||
</div>
|
||||
|
||||
<UFormField
|
||||
label="IMAP Host"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.imap_host"
|
||||
/>
|
||||
</UFormField>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<UFormField label="E-Mail Adresse">
|
||||
<UInput
|
||||
v-model="itemInfo.email"
|
||||
type="email"
|
||||
placeholder="name@example.com"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="IMAP Port"
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
v-model="itemInfo.imap_port"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField :label="isCreate ? 'Passwort' : 'Neues Passwort'">
|
||||
<UInput
|
||||
v-model="itemInfo.password"
|
||||
type="password"
|
||||
:placeholder="isCreate ? '' : 'Unverändert lassen'"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<UFormField
|
||||
label="IMAP SSL"
|
||||
>
|
||||
<USwitch
|
||||
v-model="itemInfo.imap_ssl"
|
||||
/>
|
||||
</UFormField>
|
||||
<USeparator label="Posteingang" />
|
||||
|
||||
<USeparator label="SMTP"/>
|
||||
<section class="grid gap-4 md:grid-cols-[1fr_140px_120px] md:items-end">
|
||||
<UFormField label="IMAP Host">
|
||||
<UInput
|
||||
v-model="itemInfo.imapHost"
|
||||
placeholder="imap.example.com"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="SMTP Host"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.smtp_host"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Port">
|
||||
<UInput
|
||||
v-model="itemInfo.imapPort"
|
||||
type="number"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField
|
||||
label="SMTP Port"
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
v-model="itemInfo.smtp_port"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="SSL">
|
||||
<USwitch
|
||||
v-model="itemInfo.imapSsl"
|
||||
/>
|
||||
</UFormField>
|
||||
</section>
|
||||
|
||||
<UFormField
|
||||
label="SMTP SSL"
|
||||
>
|
||||
<USwitch
|
||||
v-model="itemInfo.smtp_ssl"
|
||||
/>
|
||||
</UFormField>
|
||||
<USeparator label="Versand" />
|
||||
|
||||
</UForm>
|
||||
<section class="grid gap-4 md:grid-cols-[1fr_140px_120px] md:items-end">
|
||||
<UFormField label="SMTP Host">
|
||||
<UInput
|
||||
v-model="itemInfo.smtpHost"
|
||||
placeholder="smtp.example.com"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Port">
|
||||
<UInput
|
||||
v-model="itemInfo.smtpPort"
|
||||
type="number"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="SSL">
|
||||
<USwitch
|
||||
v-model="itemInfo.smtpSsl"
|
||||
/>
|
||||
</UFormField>
|
||||
</section>
|
||||
</UForm>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user