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.

frontend/pages/email/new.vue

@@ -181,7 +181,7 @@ const sendEmail = async () => {
   <div v-if="noAccountsPresent" class="mx-auto mt-5 flex flex-col justify-center">
     <span class="font-bold text-2xl">Keine E-Mail Konten vorhanden</span>
     <UButton
-      @click="router.push(`/settings/emailAccounts`)"
+      @click="router.push(`/settings/emailaccounts`)"
       class="mx-auto mt-5"
     >
       + E-Mail Konto

frontend/pages/settings/emailaccounts/[mode]/[[id]].vue

@@ -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>

frontend/pages/settings/emailaccounts/index.vue

@@ -1,97 +1,114 @@
-<script setup>
-
-const createEMailAddress = ref("")
-const createEMailType = ref("imap")
-const showEmailAddressModal = ref(false)
-
+<script setup lang="ts">
+const toast = useToast()
 const items = ref([])
+const loading = ref(true)
+const syncingAccount = ref<string | null>(null)
 
 const setupPage = async () => {
-  items.value = await useNuxtApp().$api("/api/email/accounts")
+  loading.value = true
+  try {
+    items.value = await useNuxtApp().$api("/api/email/accounts")
+  } finally {
+    loading.value = false
+  }
 }
 
-const createAccount = async () => {
-  showEmailAddressModal.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()
-
-
-const templateColumns = [
-  {
-    key: "email",
-    label: "E-Mail Adresse:"
-  },
-]
-const selectedColumns = ref(templateColumns)
-const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
-
-
-
 </script>
 
 <template>
-  <UModal
-    v-model:open="showEmailAddressModal"
-  >
-    <template #content>
-      <UCard>
-        <template #header>
-          E-Mail Adresse
-        </template>
-<!--      <UFormField
-        label="E-Mail Adresse:"
-      >
-
-      </UFormField>-->
-
-      <UInput
-          v-model="createEMailAddress"
-      />
-<!--      <UFormField
-        label="Account Typ:"
-      >
-        <USelectMenu
-          :options="[{key: 'imap',label:'IMAP'}]"
-          option-attribute="label"
-          value-attribute="key"
-          v-model="createEMailType"
-        />
-      </UFormField>-->
-        <template #footer>
-          <UButton
-              @click="createAccount"
-          >
-            Erstellen
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-
-  </UModal>
   <UDashboardNavbar title="E-Mail Konten">
       <template #right>
-        <UTooltip title="In der Beta nicht verfügbar">
-          <UButton
-              @click="navigateTo('/settings/emailaccounts/create')"
-          >
-            + E-Mail Konto
-          </UButton>
-        </UTooltip>
-
+        <UButton
+            icon="i-heroicons-plus"
+            @click="navigateTo('/settings/emailaccounts/create')"
+        >
+          E-Mail Konto
+        </UButton>
       </template>
   </UDashboardNavbar>
-  <UTable
-    :data="items"
-    :columns="normalizeTableColumns(columns)"
-    class="w-full"
-    :on-select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
-    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-  >
-    <template #empty>
-      <TableEmptyState label="Keine E-Mail Konten anzuzeigen" />
-    </template>
-  </UTable>
+
+  <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>