Added Frontend

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

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+
+const route = useRoute()
+const mode = route.params.mode
+
+const itemInfo = ref({})
+
+const setup = async () => {
+  if(mode === "create") {
+
+  } else {
+    itemInfo.value = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`)
+  }
+}
+setup()
+
+const createAccount = async () => {
+  const res = await useNuxtApp().$api(`/api/email/accounts`, {
+    method: "POST",
+    body: itemInfo.value,
+  })
+
+  if(res.success) {
+    navigateTo("/settings/emailaccounts")
+  }
+}
+
+const saveAccount = async () => {
+  const res = await useNuxtApp().$api(`/api/email/accounts/${route.params.id}`, {
+    method: "POST",
+    body: itemInfo.value,
+  })
+
+  if(res.success) {
+    navigateTo("/settings/emailaccounts")
+  }
+
+}
+
+</script>
+
+<template>
+  <UDashboardNavbar :title="`E-Mail Konto ${mode === 'create' ? 'erstellen' : 'bearbeiten'}`">
+    <template #right>
+      <UButton
+        v-if="mode === 'create'"
+        @click="createAccount"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+        v-if="mode === 'edit'"
+        @click="saveAccount"
+      >
+        Speichern
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UForm class="w-2/3 mx-auto mt-5">
+    <UFormGroup
+      label="E-Mail Adresse"
+    >
+      <UInput
+        v-model="itemInfo.email"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Passwort"
+    >
+      <UInput
+          type="password"
+          v-model="itemInfo.password"
+          placeholder="********"
+      />
+    </UFormGroup>
+
+    <UDivider> IMAP </UDivider>
+
+    <UFormGroup
+        label="IMAP Host"
+    >
+      <UInput
+          v-model="itemInfo.imap_host"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="IMAP Port"
+    >
+      <UInput
+          type="number"
+          v-model="itemInfo.imap_port"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="IMAP SSL"
+    >
+      <UToggle
+          v-model="itemInfo.imap_ssl"
+      />
+    </UFormGroup>
+
+    <UDivider> SMTP </UDivider>
+
+    <UFormGroup
+        label="SMTP Host"
+    >
+      <UInput
+          v-model="itemInfo.smtp_host"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="SMTP Port"
+    >
+      <UInput
+          type="number"
+          v-model="itemInfo.smtp_port"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="SMTP SSL"
+    >
+      <UToggle
+          v-model="itemInfo.smtp_ssl"
+      />
+    </UFormGroup>
+
+  </UForm>
+</template>
+
+<style scoped>
+
+</style>

frontend/pages/settings/emailaccounts/index.vue

@@ -0,0 +1,99 @@
+<script setup>
+import axios from "axios"
+const supabase = useSupabaseClient()
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+
+const createEMailAddress = ref("")
+const createEMailType = ref("imap")
+const showEmailAddressModal = ref(false)
+
+const items = ref([])
+
+const setupPage = async () => {
+  items.value = await useNuxtApp().$api("/api/email/accounts")
+}
+
+const createAccount = async () => {
+  showEmailAddressModal.value = false
+}
+
+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="showEmailAddressModal"
+  >
+    <UCard>
+      <template #header>
+        E-Mail Adresse
+      </template>
+<!--      <UFormGroup
+        label="E-Mail Adresse:"
+      >
+
+      </UFormGroup>-->
+
+      <UInput
+          v-model="createEMailAddress"
+      />
+<!--      <UFormGroup
+        label="Account Typ:"
+      >
+        <USelectMenu
+          :options="[{key: 'imap',label:'IMAP'}]"
+          option-attribute="label"
+          value-attribute="key"
+          v-model="createEMailType"
+        />
+      </UFormGroup>-->
+      <template #footer>
+        <UButton
+            @click="createAccount"
+        >
+          Erstellen
+        </UButton>
+      </template>
+    </UCard>
+
+  </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>
+
+      </template>
+  </UDashboardNavbar>
+  <UTable
+    :rows="items"
+    :columns="columns"
+    class="w-full"
+    @select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
+    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine E-Mail Konten anzuzeigen' }"
+  >
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>