admin-fe/src/views/settings/components/Mailer.vue

196 lines
8.1 KiB
Vue

<template>
<el-form ref="mailer" :model="mailer" :label-width="labelWidth">
<el-form-item label="Enabled">
<el-switch :value="mailer.enabled" @change="updateSetting($event, 'Pleroma.Emails.Mailer', 'enabled')"/>
<p class="expl">Allows to enable or disable sending emails. Defaults to false.</p>
</el-form-item>
<el-form-item label="Adapter">
<el-select :value="mailer.adapter" @change="updateSetting($event, 'Pleroma.Emails.Mailer', 'adapter')">
<el-option
v-for="item in adapterOptions"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
<div class="line"/>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Sendmail'">
<el-form-item label="CMD Path">
<el-input :value="mailer.cmd_path" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'cmd_path')"/>
<p class="expl">E. g. <span class="code">/usr/bin/sendmail"</span></p>
</el-form-item>
<el-form-item label="CMD Args">
<el-input :value="mailer.cmd_args" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'cmd_args')"/>
<p class="expl">E. g. <span class="code">-N delay,failure,success</span></p>
</el-form-item>
<el-form-item label="Qmail">
<el-switch :value="mailer.qmail" @change="updateSetting($event, 'Pleroma.Emails.Mailer', 'qmail')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.SMTP'">
<el-form-item label="Relay">
<el-input :value="mailer.relay" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'relay')"/>
<p class="expl">E. g. <span class="code">smtp.avengers.com</span></p>
</el-form-item>
<el-form-item label="Username">
<el-input :value="mailer.username" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'username')"/>
</el-form-item>
<el-form-item label="Password">
<el-input :value="mailer.password" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'password')"/>
</el-form-item>
<el-form-item label="SSL">
<el-switch :value="mailer.ssl" @change="updateSetting($event, 'Pleroma.Emails.Mailer', 'ssl')"/>
</el-form-item>
<el-form-item label="TLS">
<el-input :value="mailer.tls" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'tls')"/>
<p class="expl">E.g. <span class="code">:always</span></p>
</el-form-item>
<el-form-item label="Auth">
<el-input :value="mailer.auth" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'auth')"/>
<p class="expl">E.g. <span class="code">:always</span></p>
</el-form-item>
<el-form-item label="Port">
<el-input :value="mailer.port" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'port')"/>
</el-form-item>
<el-form-item label="DKIM">
<editor v-model="editorContent" height="150" width="100%" lang="elixir" theme="chrome"/>
</el-form-item>
<el-form-item label="Retries">
<el-input-number :value="mailer.retries" :step="1" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Emails.Mailer', 'retries')"/>
</el-form-item>
<el-form-item label="No mx lookups">
<el-switch :value="mailer.no_mx_lookups" @change="updateSetting($event, 'Pleroma.Emails.Mailer', 'no_mx_lookups')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Sendgrid'">
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Mandrill'">
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Mailgun'">
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
<el-form-item label="Domain">
<el-input :value="mailer.domain" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'domain')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Mailjet'">
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
<el-form-item label="Secret">
<el-input :value="mailer.secret" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'secret')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Postmark'">
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.SparkPost'">
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
<el-form-item label="Endpoint">
<el-input :value="mailer.endpoint" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'endpoint')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.AmazonSES'">
<el-form-item label="Region">
<el-input :value="mailer.region" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'region')"/>
</el-form-item>
<el-form-item label="Access key">
<el-input :value="mailer.access_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'access_key')"/>
</el-form-item>
<el-form-item label="Secret">
<el-input :value="mailer.secret" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'secret')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Dyn'">
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.SocketLabs'">
<el-form-item label="Server ID">
<el-input :value="mailer.server_id" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'server_id')"/>
</el-form-item>
<el-form-item label="API key">
<el-input :value="mailer.api_key" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'api_key')"/>
</el-form-item>
</div>
<div v-if="mailer.adapter === 'Swoosh.Adapters.Gmail'">
<el-form-item label="Access token">
<el-input :value="mailer.access_token" @input="updateSetting($event, 'Pleroma.Emails.Mailer', 'access_token')"/>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
</el-form>
</template>
<script>
import i18n from '@/lang'
import { mapGetters } from 'vuex'
import { options } from './options'
import AceEditor from 'vue2-ace-editor'
import 'brace/mode/elixir'
import 'default-passive-events'
export default {
name: 'Mailer',
components: {
editor: AceEditor
},
computed: {
...mapGetters([
'mailerConfig'
]),
editorContent: {
get: function() {
return this.mailerConfig.dkim ? this.mailerConfig.dkim[0] : ''
},
set: function(value) {
this.updateSetting([value], 'Pleroma.Emails.Mailer', 'dkim')
}
},
mailer() {
return this.mailerConfig
},
adapterOptions() {
return options.adapterOptions
},
isMobile() {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '210px'
}
},
methods: {
updateSetting(value, tab, input) {
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
},
onSubmit() {
this.$store.dispatch('SubmitChanges')
this.$message({
type: 'success',
message: i18n.t('settings.success')
})
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../styles/main';
@include settings
</style>