ff-admin/src/components/admin/management/setting/MailSetting.vue

<template>
  <BaseSetting title="E-Mail Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
    <div class="w-full">
      <label for="email">Mailadresse</label>
      <input id="email" type="email" autocomplete="email" :readonly="!enableEdit" :value="mailSettings['mail.email']" />
    </div>
    <div class="w-full">
      <label for="username">Benutzername</label>
      <input
        id="username"
        type="text"
        :readonly="!enableEdit"
        autocomplete="username"
        :value="mailSettings['mail.username']"
      />
    </div>
    <div class="w-full">
      <label for="host">Server-Host</label>
      <input id="host" type="text" :readonly="!enableEdit" :value="mailSettings['mail.host']" />
    </div>
    <div class="w-full">
      <label for="port">Server-Port (25, 465, 587)</label>
      <input id="port" type="number" :readonly="!enableEdit" :value="mailSettings['mail.port']" />
    </div>
    <div class="w-full flex flex-row items-center gap-2">
      <div
        v-if="!enableEdit"
        class="border-2 border-gray-500 rounded-sm"
        :class="mailSettings['mail.secure'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
      >
        <CheckIcon v-if="mailSettings['mail.secure']" class="h-2.5 w-2.5 stroke-4 text-white" />
      </div>
      <input v-else id="secure" type="checkbox" :checked="mailSettings['mail.secure']" />
      <label for="secure">Secure-Verbindung (setzen bei Port 465)</label>
    </div>
    <div class="w-full">
      <label for="password">Passwort (optional)</label>
      <input id="password" type="password" :readonly="!enableEdit" autocomplete="new-password" />
    </div>
  </BaseSetting>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { CheckIcon } from "@heroicons/vue/24/outline";
import { mapActions, mapState } from "pinia";
import { useSettingStore } from "@/stores/admin/management/setting";
import { useAbilityStore } from "@/stores/ability";
import BaseSetting from "./BaseSetting.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      enableEdit: false as boolean,
      status: undefined as undefined | "loading" | "success" | "failed",
    };
  },
  computed: {
    ...mapState(useSettingStore, ["readByTopic"]),
    ...mapState(useAbilityStore, ["can"]),
    mailSettings() {
      return this.readByTopic("mail");
    },
  },
  methods: {
    ...mapActions(useSettingStore, ["updateSettings"]),
    submit(e: any) {
      const formData = e.target.elements;
      return this.updateSettings([
        {
          key: "mail.email",
          value: formData.email.value,
        },
        {
          key: "mail.username",
          value: formData.username.value,
        },
        {
          key: "mail.host",
          value: formData.host.value,
        },
        {
          key: "mail.port",
          value: formData.port.value,
        },
        {
          key: "mail.secure",
          value: formData.secure.checked,
        },
        {
          key: "mail.password",
          value: formData.password.value || null,
        },
      ]);
    },
  },
});
</script>