100 lines
3.1 KiB
Vue
100 lines
3.1 KiB
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>
|