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

<template>
  <div class="flex flex-col w-full">
    <div class="border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
      <p class="text-lg font-semibold">E-Mail Einstellungen</p>
    </div>
    <div class="border-l-3 border-l-primary p-2 rounded-b-lg">
      <div class="w-full">
        <label for="name">Mailadresse</label>
        <input id="name" type="text" readonly :value="mailSettings['mail.email']" />
      </div>
      <div class="w-full">
        <label for="name">Benutzername</label>
        <input id="name" type="text" readonly :value="mailSettings['mail.username']" />
      </div>
      <div class="w-full">
        <label for="name">Server-Host</label>
        <input id="name" type="text" readonly :value="mailSettings['mail.host']" />
      </div>
      <div class="w-full">
        <label for="name">Server-Port</label>
        <input id="name" type="text" readonly :value="mailSettings['mail.port']" />
      </div>
      <div class="w-full flex flex-row items-center gap-2">
        <div
          v-if="true"
          class="border-2 border-gray-500 rounded-sm"
          :class="mailSettings['mail.secure'] ? 'bg-gray-500' : 'h-3 w-3'"
        >
          <CheckIcon v-if="mailSettings['mail.secure']" class="h-2.5 w-2.5 stroke-4 text-white" />
        </div>
        <input v-else id="name" type="checkbox" :checked="mailSettings['mail.secure']" />
        <label for="name">Secure-Verbindung</label>
      </div>
      <div class="w-full">
        <label for="name">Passwort</label>
        <input id="name" type="password" readonly />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSettingStore } from "@/stores/admin/management/setting";
import { mapState } from "pinia";
import { defineComponent } from "vue";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useSettingStore, ["readByTopic"]),
    mailSettings() {
      return this.readByTopic("mail");
    },
  },
});
</script>