FEDEO/frontend/pages/settings/emailaccounts/index.vue

<script setup lang="ts">
const toast = useToast()
const items = ref([])
const loading = ref(true)
const syncingAccount = ref<string | null>(null)
const updatingAccount = ref<string | null>(null)

const formatLastUpdated = (value?: string | null) => {
  if (!value) return "Noch nicht synchronisiert"
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return "Unbekannt"

  return new Intl.DateTimeFormat("de-DE", {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(date)
}

const setupPage = async () => {
  loading.value = true
  try {
    items.value = await useNuxtApp().$api("/api/email/accounts", {
      query: { includeDisabled: true },
    })
  } finally {
    loading.value = false
  }
}

const toggleAccount = async (account: any) => {
  updatingAccount.value = account.id
  const nextEnabled = account.emailEnabled === false

  try {
    await useNuxtApp().$api(`/api/email/accounts/${account.id}`, {
      method: "POST",
      body: { emailEnabled: nextEnabled },
    })
    toast.add({
      title: nextEnabled ? "E-Mail-Konto aktiviert" : "E-Mail-Konto deaktiviert",
      description: nextEnabled
        ? "Das Konto erscheint wieder in der Mailoberfläche."
        : "Das Konto wird in der Mailoberfläche nicht mehr angezeigt.",
      color: "success",
    })
    await setupPage()
  } catch (err: any) {
    toast.add({
      title: "Status konnte nicht geändert werden",
      description: err?.data?.error || err?.message,
      color: "error",
    })
  } finally {
    updatingAccount.value = null
  }
}

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.displayName || account.email }}
          </p>
          <UBadge
              size="xs"
              color="neutral"
              variant="soft"
          >
            IMAP/SMTP
          </UBadge>
          <UBadge
              size="xs"
              :color="account.emailEnabled === false ? 'neutral' : 'success'"
              variant="soft"
          >
            {{ account.emailEnabled === false ? "Deaktiviert" : "Aktiv" }}
          </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>
          <span>Zuletzt aktualisiert: {{ formatLastUpdated(account.lastSyncedAt) }}</span>
        </div>
        <p v-if="account.credentialsReadable === false" class="mt-2 text-sm text-error">
          Die verschlüsselten Zugangsdaten sind nicht lesbar. Öffne das Konto und trage alle Zugangsdaten neu ein.
        </p>
      </div>

      <div class="flex shrink-0 items-center gap-2">
        <UButton
            icon="i-heroicons-arrow-path"
            color="neutral"
            variant="soft"
            :loading="syncingAccount === account.id"
            :disabled="account.credentialsReadable === false || account.emailEnabled === false"
            @click.stop="syncAccount(account)"
        >
          Synchronisieren
        </UButton>
        <UButton
            :icon="account.emailEnabled === false ? 'i-heroicons-play' : 'i-heroicons-pause'"
            :color="account.emailEnabled === false ? 'primary' : 'neutral'"
            variant="soft"
            :loading="updatingAccount === account.id"
            @click.stop="toggleAccount(account)"
        >
          {{ account.emailEnabled === false ? "Aktivieren" : "Deaktivieren" }}
        </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>