Render Mailer settings from API data
This commit is contained in:
Angelina Filippova
parent
ba0499a1d3
commit
4a5c7b366c
2 changed files with 56 additions and 230 deletions
|
|
@ -1,199 +1,14 @@
|
|||
<template>
|
||||
<div v-if="!loading">
|
||||
<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" clearable @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>
|
||||
<el-form ref="emailNotifications" :model="emailNotifications" :label-width="labelWidth">
|
||||
<el-form-item label="Email notifications"/>
|
||||
<el-form-item label="Digest:"/>
|
||||
<el-form-item label="Active">
|
||||
<el-switch :value="emailNotifications.digest.active" @change="processNestedData($event, 'email_notifications', 'digest', 'active')"/>
|
||||
<p class="expl">Globally enable or disable digest emails.</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Schedule">
|
||||
<el-input :value="emailNotifications.digest.schedule" @input="processNestedData($event, 'email_notifications', 'digest', 'schedule')"/>
|
||||
<p class="expl">When to send digest email, in <a
|
||||
href="https://en.wikipedia.org/wiki/Cron"
|
||||
rel="nofollow noreferrer noopener"
|
||||
target="_blank">
|
||||
crontab format
|
||||
</a>.
|
||||
"0 0 * * 0" is the default, meaning "once a week at midnight on Sunday morning"</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Interval">
|
||||
<el-input-number :value="emailNotifications.digest.interval" :step="1" :min="0" size="large" @change="processNestedData($event, 'email_notifications', 'digest', 'interval')"/>
|
||||
<p class="expl">Minimum interval between digest emails to one user.</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Inactivity threshold">
|
||||
<el-input-number :value="emailNotifications.digest.inactivity_threshold" :step="1" :min="0" size="large" @change="processNestedData($event, 'email_notifications', 'digest', 'inactivity_threshold')"/>
|
||||
<p class="expl">Minimum user inactivity threshold.</p>
|
||||
</el-form-item>
|
||||
<el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
|
||||
<setting :setting-group="mailer" :data="mailerData"/>
|
||||
</el-form>
|
||||
<div class="line"/>
|
||||
<el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
|
||||
<setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
|
||||
</el-form>
|
||||
<el-form ref="userEmail" :model="userEmail" :label-width="labelWidth">
|
||||
<el-form-item label="Digest template styles:"/>
|
||||
<el-form-item label="Logo">
|
||||
<el-input :value="userEmail.logo" @input="updateSetting($event, 'Pleroma.Emails.UserEmail', 'logo')"/>
|
||||
<div class="upload-container">
|
||||
<p class="text">or</p>
|
||||
<el-upload
|
||||
:http-request="sendEmailLogo"
|
||||
:multiple="false"
|
||||
:show-file-list="false"
|
||||
action="/api/v1/media">
|
||||
<el-button size="small" type="primary">Click to upload</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<p class="expl">A path to a custom logo.</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="Styling:"/>
|
||||
<el-form-item label="Link color">
|
||||
<el-input :value="userEmail.styling.link_color" @input="processNestedData($event, 'Pleroma.Emails.UserEmail', 'styling', 'link_color')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Background color">
|
||||
<el-input :value="userEmail.styling.background_color" @input="processNestedData($event, 'Pleroma.Emails.UserEmail', 'styling', 'background_color')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Content background color">
|
||||
<el-input :value="userEmail.styling.content_background_color" @input="processNestedData($event, 'Pleroma.Emails.UserEmail', 'styling', 'content_background_color')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Header color">
|
||||
<el-input :value="userEmail.styling.header_color" @input="processNestedData($event, 'Pleroma.Emails.UserEmail', 'styling', 'header_color')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Text color">
|
||||
<el-input :value="userEmail.styling.text_color" @input="processNestedData($event, 'Pleroma.Emails.UserEmail', 'styling', 'text_color')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Text muted color">
|
||||
<el-input :value="userEmail.styling.text_muted_color" @input="processNestedData($event, 'Pleroma.Emails.UserEmail', 'styling', 'text_muted_color')"/>
|
||||
</el-form-item>
|
||||
<setting :setting-group="userEmail" :data="userEmailData"/>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">Submit</el-button>
|
||||
</el-form-item>
|
||||
|
|
@ -204,32 +19,22 @@
|
|||
<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'
|
||||
import Setting from './Setting'
|
||||
|
||||
export default {
|
||||
name: 'Mailer',
|
||||
components: {
|
||||
editor: AceEditor
|
||||
Setting
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'emailNotifications',
|
||||
'mailer',
|
||||
'userEmail'
|
||||
'settings'
|
||||
]),
|
||||
editorContent: {
|
||||
get: function() {
|
||||
return this.mailer.dkim ? this.mailer.dkim[0] : ''
|
||||
},
|
||||
set: function(value) {
|
||||
this.updateSetting([value], 'Pleroma.Emails.Mailer', 'dkim')
|
||||
}
|
||||
emailNotifications() {
|
||||
return this.settings.description.find(setting => setting.key === ':email_notifications')
|
||||
},
|
||||
adapterOptions() {
|
||||
return options.adapterOptions
|
||||
emailNotificationsData() {
|
||||
return this.settings.settings[':email_notifications']
|
||||
},
|
||||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
|
|
@ -239,19 +44,21 @@ export default {
|
|||
},
|
||||
loading() {
|
||||
return this.$store.state.settings.loading
|
||||
},
|
||||
mailer() {
|
||||
return this.settings.description.find(setting => setting.key === 'Pleroma.Emails.Mailer')
|
||||
},
|
||||
mailerData() {
|
||||
return this.settings.settings['Pleroma.Emails.Mailer']
|
||||
},
|
||||
userEmail() {
|
||||
return this.settings.description.find(setting => setting.key === 'Pleroma.Emails.UserEmail')
|
||||
},
|
||||
userEmailData() {
|
||||
return this.settings.settings['Pleroma.Emails.UserEmail']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
processNestedData(value, tab, inputName, childName) {
|
||||
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
|
||||
this.updateSetting(updatedValue, tab, inputName)
|
||||
},
|
||||
sendEmailLogo({ file }) {
|
||||
this.$store.dispatch('UploadMedia', { file, tab: 'Pleroma.Emails.UserEmail', inputName: 'logo' })
|
||||
},
|
||||
updateSetting(value, tab, input) {
|
||||
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
|
||||
},
|
||||
async onSubmit() {
|
||||
try {
|
||||
await this.$store.dispatch('SubmitChanges')
|
||||
|
|
|
|||
|
|
@ -3,27 +3,46 @@
|
|||
<el-form-item v-if="settingGroup.description" class="options-paragraph-container">
|
||||
<p class="options-paragraph">{{ settingGroup.description }}</p>
|
||||
</el-form-item>
|
||||
<div v-for="setting in settingGroup.children" :key="setting.key">
|
||||
<div v-if="!compound(setting.type)">
|
||||
<div v-if="settingGroup.key === 'Pleroma.Emails.Mailer'">
|
||||
<div v-for="setting in settingGroup.children.filter(setting => !setting.group)" :key="setting.key">
|
||||
<inputs
|
||||
:setting-group="settingGroup"
|
||||
:setting="setting"
|
||||
:data="data"/>
|
||||
</div>
|
||||
<div v-if="compound(setting.type)">
|
||||
<el-form-item :label="`${setting.label}:`"/>
|
||||
<div v-for="subSetting in setting.children" :key="subSetting.key">
|
||||
<div
|
||||
v-for="setting in settingGroup.children.filter(setting => setting.group && setting.group.includes(setting.key))"
|
||||
:key="setting.key">
|
||||
<div class="line"/>
|
||||
<inputs
|
||||
:setting-group="settingGroup"
|
||||
:setting="setting"
|
||||
:data="data"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-for="setting in settingGroup.children" :key="setting.key">
|
||||
<div v-if="!compound(setting.type)">
|
||||
<inputs
|
||||
:setting-group="settingGroup"
|
||||
:setting-parent="setting"
|
||||
:setting="subSetting"
|
||||
:data="data[setting.key]"
|
||||
/>
|
||||
:setting="setting"
|
||||
:data="data"/>
|
||||
</div>
|
||||
<div v-if="!setting.children">
|
||||
<inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]"/>
|
||||
<div v-if="compound(setting.type)">
|
||||
<el-form-item :label="`${setting.label}:`"/>
|
||||
<div v-for="subSetting in setting.children" :key="subSetting.key">
|
||||
<inputs
|
||||
:setting-group="settingGroup"
|
||||
:setting-parent="setting"
|
||||
:setting="subSetting"
|
||||
:data="data[setting.key]"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!setting.children">
|
||||
<inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]"/>
|
||||
</div>
|
||||
<div class="line"/>
|
||||
</div>
|
||||
<div class="line"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue