add mail on wizard

This commit is contained in:
raishvaria
2019-11-18 18:44:15 +05:30
parent 6d350db854
commit f0a995bfa0
15 changed files with 1532 additions and 249 deletions

View File

@ -743,9 +743,19 @@ export default {
host: 'Mail Host',
port: 'Mail Port',
driver: 'Mail Driver',
domain: 'Domain',
secret: 'Secret',
sparkpost_secret: 'Sparkpost Secret',
mailgin_secret: 'Mailgun Secret',
ses_secret: 'SES Secret',
mandrill_secret: 'Mandrill Secret',
ses_key: 'SES Key',
password: 'Mail Password',
username: 'Mail Username',
endpoint: 'Mail Endpoint',
mail_config: 'Mail Configuration',
from_name: 'From Mail Name',
from_mail: 'From Mail Address',
encryption: 'Mail Encryption',
mail_config_desc: 'Below details will be used to update the mail environment. Also you can change the details anytime after logging in.'
},

View File

@ -2,7 +2,7 @@
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.driver') }}</label>
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
@ -19,7 +19,7 @@
</div>
</div>
<!-- <div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.host') }}</label>
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
@ -37,7 +37,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
@ -53,7 +53,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_name') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"

View File

@ -2,7 +2,7 @@
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.driver') }}</label>
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
@ -19,7 +19,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.host') }}</label>
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
@ -37,7 +37,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.port') }}</label>
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
@ -56,13 +56,14 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.encryption') }}</label>
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_encryption.$error"
<base-select
v-model.trim="mailConfigData.mail_encryption"
type="text"
name="name"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
@ -74,7 +75,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
@ -93,7 +94,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_name') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
@ -111,7 +112,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.domain') }}</label>
<label class="form-label">{{ $t('wizard.mail.domain') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mailgun_domain.$error"
@ -127,7 +128,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.mailgin_secret') }}</label>
<label class="form-label">{{ $t('wizard.mail.mailgin_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mailgun_secret.$error"
@ -146,7 +147,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.endpoint') }}</label>
<label class="form-label">{{ $t('wizard.mail.endpoint') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mailgun_endpoint.$error"
@ -212,10 +213,11 @@ export default {
mail_mailgun_domain: '',
mail_mailgun_secret: '',
mail_mailgun_endpoint: '',
mail_encryption: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
}
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {

View File

@ -2,7 +2,7 @@
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.driver') }}</label>
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
@ -19,7 +19,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.host') }}</label>
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
@ -37,7 +37,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.port') }}</label>
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
@ -53,13 +53,14 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.encryption') }}</label>
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_encryption.$error"
<base-select
v-model.trim="mailConfigData.mail_encryption"
type="text"
name="name"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
@ -71,7 +72,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
@ -90,7 +91,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_name') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
@ -108,7 +109,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.mandrill_secret') }}</label>
<label class="form-label">{{ $t('wizard.mail.mandrill_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mandrill_secret.$error"
@ -170,10 +171,11 @@ export default {
mail_host: '',
mail_port: null,
mail_mandrill_secret: '',
mail_encryption: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
}
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {

View File

@ -2,7 +2,7 @@
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.driver') }}</label>
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
@ -19,7 +19,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.host') }}</label>
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
@ -37,7 +37,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.port') }}</label>
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
@ -56,13 +56,14 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.encryption') }}</label>
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_encryption.$error"
<base-select
v-model.trim="mailConfigData.mail_encryption"
type="text"
name="name"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
@ -74,7 +75,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
@ -93,7 +94,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_name') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
@ -111,7 +112,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.ses_key') }}</label>
<label class="form-label">{{ $t('wizard.mail.ses_key') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_ses_key.$error"
@ -127,7 +128,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.ses_secret') }}</label>
<label class="form-label">{{ $t('wizard.mail.ses_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_ses_secret.$error"
@ -190,10 +191,11 @@ export default {
mail_port: null,
mail_ses_key: '',
mail_ses_secret: '',
mail_encryption: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
}
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {

View File

@ -2,7 +2,7 @@
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.driver') }}</label>
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
@ -19,7 +19,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.host') }}</label>
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
@ -37,7 +37,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.username') }}</label>
<label class="form-label">{{ $t('wizard.mail.username') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_username.$error"
@ -53,7 +53,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.password') }}</label>
<label class="form-label">{{ $t('wizard.mail.password') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_password.$error"
@ -72,7 +72,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.port') }}</label>
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
@ -91,13 +91,14 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.encryption') }}</label>
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_encryption.$error"
<base-select
v-model.trim="mailConfigData.mail_encryption"
type="text"
name="name"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
@ -109,7 +110,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
@ -128,7 +129,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_name') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
@ -190,10 +191,11 @@ export default {
mail_port: null,
mail_username: '',
mail_password: '',
mail_encryption: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
}
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {

View File

@ -2,7 +2,7 @@
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.driver') }}</label>
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
@ -19,7 +19,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.host') }}</label>
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
@ -37,7 +37,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.port') }}</label>
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
@ -56,13 +56,14 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.encryption') }}</label>
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_encryption.$error"
<base-select
v-model.trim="mailConfigData.mail_encryption"
type="text"
name="name"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
@ -74,7 +75,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_mail') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
@ -93,7 +94,7 @@
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.from_name') }}</label>
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
@ -111,7 +112,7 @@
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('settings.mail.sparkpost_secret') }}</label>
<label class="form-label">{{ $t('wizard.mail.sparkpost_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_sparkpost_secret.$error"
@ -173,10 +174,11 @@ export default {
mail_host: '',
mail_port: null,
mail_sparkpost_secret: '',
mail_encryption: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
}
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {

View File

@ -3,184 +3,49 @@
<form action="" @submit.prevent="next()">
<p class="form-title">{{ $t('wizard.mail.mail_config') }}</p>
<p class="form-desc">{{ $t('wizard.mail.mail_config_desc') }}</p>
<div class="row my-2 mt-5">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
:invalid="$v.mailConfigData.mail_driver.$error"
:options="mail_drivers"
:searchable="true"
:show-labels="false"
@change="$v.mailConfigData.mail_driver.$touch()"
/>
<div v-if="$v.mailConfigData.mail_driver.$error">
<span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
v-model.trim="mailConfigData.mail_host"
type="text"
name="mail_host"
@input="$v.mailConfigData.mail_host.$touch()"
/>
<div v-if="$v.mailConfigData.mail_host.$error">
<span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.username') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_username.$error"
v-model.trim="mailConfigData.mail_username"
type="text"
name="db_name"
@input="$v.mailConfigData.mail_username.$touch()"
/>
<div v-if="$v.mailConfigData.mail_username.$error">
<span v-if="!$v.mailConfigData.mail_username.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.password') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_password.$error"
v-model.trim="mailConfigData.mail_password"
type="password"
show-password
name="name"
@input="$v.mailConfigData.mail_password.$touch()"
/>
<div v-if="$v.mailConfigData.mail_password.$error">
<span v-if="!$v.mailConfigData.mail_password.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
v-model.trim="mailConfigData.mail_port"
type="text"
name="mail_port"
@input="$v.mailConfigData.mail_port.$touch()"
/>
<div v-if="$v.mailConfigData.mail_port.$error">
<span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_encryption.$error"
v-model.trim="mailConfigData.mail_encryption"
type="text"
name="name"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
<span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row mt-5">
<base-button
:loading="loading"
class="pull-right"
icon="save"
color="theme"
type="submit"
>
{{ $t('wizard.save_cont') }}
</base-button>
<base-button
:loading="loading"
class="pull-right ml-4"
outline
color="theme"
@click="$emit('next')"
>
{{ $t('wizard.skip') }}
</base-button>
</div>
<component
:is="mail_driver"
:config-data="mailConfigData"
:loading="loading"
:mail-drivers="mail_drivers"
@on-change-driver="(val) => mail_driver = mailConfigData.mail_driver = val"
@submit-data="next"
/>
</form>
</div>
</template>
<script>
import MultiSelect from 'vue-multiselect'
import { validationMixin } from 'vuelidate'
import Ls from '../../services/ls'
const { required, email, numeric } = require('vuelidate/lib/validators')
import Smtp from './mailDriver/Smtp'
import Mailgun from './mailDriver/Mailgun'
import Sparkpost from './mailDriver/Sparkpost'
import Ses from './mailDriver/Ses'
import Basic from './mailDriver/Basic'
import Mandrill from './mailDriver/Mandrill'
export default {
components: {
MultiSelect
MultiSelect,
Smtp,
Mailgun,
Sparkpost,
Ses,
sendmail: Basic,
mail: Basic,
Mandrill
},
mixins: [validationMixin],
data () {
return {
mailConfigData: {
mail_driver: 'smtp',
mail_host: 'mailtrap.io',
mail_port: null,
mail_username: null,
mail_password: null,
mail_encryption: null
mail_driver: 'smtp'
},
mail_driver: 'smtp',
loading: false,
mail_drivers: []
}
},
validations: {
mailConfigData: {
mail_driver: {
required
},
mail_host: {
required
},
mail_port: {
required,
numeric
},
mail_username: {
required
},
mail_password: {
required
},
mail_encryption: {
required
}
}
},
created () {
this.getMailDrivers()
},
@ -195,14 +60,10 @@ export default {
this.loading = false
}
},
async next () {
this.$v.mailConfigData.$touch()
if (this.$v.mailConfigData.$invalid) {
return true
}
async next (mailConfigData) {
this.loading = true
try {
let response = await window.axios.post('/api/admin/onboarding/environment/mail', this.mailConfigData)
let response = await window.axios.post('/api/settings/environment/mail', mailConfigData)
if (response.data.success) {
this.$emit('next')
window.toastr['success'](this.$t('wizard.success.' + response.data.success))

View File

@ -0,0 +1,156 @@
<template>
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
:invalid="$v.mailConfigData.mail_driver.$error"
:options="mailDrivers"
:searchable="true"
:show-labels="false"
@input="onChangeDriver"
/>
<div v-if="$v.mailConfigData.mail_driver.$error">
<span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<!-- <div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
v-model.trim="mailConfigData.mail_host"
type="text"
name="mail_host"
@input="$v.mailConfigData.mail_host.$touch()"
/>
<div v-if="$v.mailConfigData.mail_host.$error">
<span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div> -->
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
v-model.trim="mailConfigData.from_mail"
type="text"
name="from_mail"
@input="$v.mailConfigData.from_mail.$touch()"
/>
<div v-if="$v.mailConfigData.from_mail.$error">
<span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
v-model.trim="mailConfigData.from_name"
type="text"
name="name"
@input="$v.mailConfigData.from_name.$touch()"
/>
<div v-if="$v.mailConfigData.from_name.$error">
<span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<base-button
:loading="loading"
class="pull-right mt-4"
icon="save"
color="theme"
type="submit"
>
{{ $t('general.save') }}
</base-button>
</form>
</template>
<script>
import MultiSelect from 'vue-multiselect'
import { validationMixin } from 'vuelidate'
const { required, email } = require('vuelidate/lib/validators')
export default {
components: {
MultiSelect
},
mixins: [validationMixin],
props: {
configData: {
type: Object,
require: true,
default: Object
},
loading: {
type: Boolean,
require: true,
default: false
},
mailDrivers: {
type: Array,
require: true,
default: Array
}
},
data () {
return {
mailConfigData: {
mail_driver: '',
mail_host: '',
from_mail: '',
from_name: ''
}
}
},
validations: {
mailConfigData: {
mail_driver: {
required
},
from_mail: {
required,
email
},
from_name: {
required
}
}
},
mounted () {
for (const key in this.mailConfigData) {
if (this.configData.hasOwnProperty(key)) {
this.mailConfigData[key] = this.configData[key]
}
}
},
methods: {
async saveEmailConfig () {
this.$v.mailConfigData.$touch()
if (!this.$v.mailConfigData.$invalid) {
this.$emit('submit-data', this.mailConfigData)
}
return false
},
onChangeDriver () {
this.$v.mailConfigData.mail_driver.$touch()
this.$emit('on-change-driver', this.mailConfigData.mail_driver)
}
}
}
</script>

View File

@ -0,0 +1,278 @@
<template>
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
:invalid="$v.mailConfigData.mail_driver.$error"
:options="mailDrivers"
:searchable="true"
:show-labels="false"
@input="onChangeDriver"
/>
<div v-if="$v.mailConfigData.mail_driver.$error">
<span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
v-model.trim="mailConfigData.mail_host"
type="text"
name="mail_host"
@input="$v.mailConfigData.mail_host.$touch()"
/>
<div v-if="$v.mailConfigData.mail_host.$error">
<span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
v-model.trim="mailConfigData.mail_port"
type="text"
name="mail_port"
@input="$v.mailConfigData.mail_port.$touch()"
/>
<div v-if="$v.mailConfigData.mail_port.$error">
<span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model.trim="mailConfigData.mail_encryption"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
<span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
v-model.trim="mailConfigData.from_mail"
type="text"
name="from_mail"
@input="$v.mailConfigData.from_mail.$touch()"
/>
<div v-if="$v.mailConfigData.from_mail.$error">
<span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
v-model.trim="mailConfigData.from_name"
type="text"
name="name"
@input="$v.mailConfigData.from_name.$touch()"
/>
<div v-if="$v.mailConfigData.from_name.$error">
<span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.domain') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mailgun_domain.$error"
v-model.trim="mailConfigData.mail_mailgun_domain"
type="text"
name="db_name"
@input="$v.mailConfigData.mail_mailgun_domain.$touch()"
/>
<div v-if="$v.mailConfigData.mail_mailgun_domain.$error">
<span v-if="!$v.mailConfigData.mail_mailgun_domain.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.mailgin_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mailgun_secret.$error"
v-model.trim="mailConfigData.mail_mailgun_secret"
type="password"
name="name"
show-password
@input="$v.mailConfigData.mail_mailgun_secret.$touch()"
/>
<div v-if="$v.mailConfigData.mail_mailgun_secret.$error">
<span v-if="!$v.mailConfigData.mail_mailgun_secret.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.endpoint') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mailgun_endpoint.$error"
v-model.trim="mailConfigData.mail_mailgun_endpoint"
type="text"
name="mail_mailgun_endpoint"
@input="$v.mailConfigData.mail_mailgun_endpoint.$touch()"
/>
<div v-if="$v.mailConfigData.mail_mailgun_endpoint.$error">
<span v-if="!$v.mailConfigData.mail_mailgun_endpoint.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.mail_mailgun_endpoint.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
</div>
<base-button
:loading="loading"
class="pull-right mt-4"
icon="save"
color="theme"
type="submit"
>
{{ $t('general.save') }}
</base-button>
</form>
</template>
<script>
import MultiSelect from 'vue-multiselect'
import { validationMixin } from 'vuelidate'
const { required, email, numeric } = require('vuelidate/lib/validators')
export default {
components: {
MultiSelect
},
mixins: [validationMixin],
props: {
configData: {
type: Object,
require: true,
default: Object
},
loading: {
type: Boolean,
require: true,
default: false
},
mailDrivers: {
type: Array,
require: true,
default: Array
}
},
data () {
return {
mailConfigData: {
mail_driver: '',
mail_host: '',
mail_port: null,
mail_mailgun_domain: '',
mail_mailgun_secret: '',
mail_mailgun_endpoint: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {
mailConfigData: {
mail_driver: {
required
},
mail_host: {
required
},
mail_port: {
required,
numeric
},
mail_mailgun_domain: {
required
},
mail_mailgun_endpoint: {
required
},
mail_mailgun_secret: {
required
},
mail_encryption: {
required
},
from_mail: {
required,
email
},
from_name: {
required
}
}
},
mounted () {
for (const key in this.mailConfigData) {
if (this.configData.hasOwnProperty(key)) {
this.mailConfigData[key] = this.configData[key]
}
}
},
methods: {
async saveEmailConfig () {
this.$v.mailConfigData.$touch()
if (!this.$v.mailConfigData.$invalid) {
this.$emit('submit-data', this.mailConfigData)
}
return false
},
onChangeDriver () {
this.$v.mailConfigData.mail_driver.$touch()
this.$emit('on-change-driver', this.mailConfigData.mail_driver)
}
}
}
</script>

View File

@ -0,0 +1,230 @@
<template>
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
:invalid="$v.mailConfigData.mail_driver.$error"
:options="mailDrivers"
:searchable="true"
:show-labels="false"
@input="onChangeDriver"
/>
<div v-if="$v.mailConfigData.mail_driver.$error">
<span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
v-model.trim="mailConfigData.mail_host"
type="text"
name="mail_host"
@input="$v.mailConfigData.mail_host.$touch()"
/>
<div v-if="$v.mailConfigData.mail_host.$error">
<span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
v-model.trim="mailConfigData.mail_port"
type="text"
name="mail_port"
@input="$v.mailConfigData.mail_port.$touch()"
/>
<div v-if="$v.mailConfigData.mail_port.$error">
<span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model.trim="mailConfigData.mail_encryption"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
<span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
v-model.trim="mailConfigData.from_mail"
type="text"
name="from_mail"
@input="$v.mailConfigData.from_mail.$touch()"
/>
<div v-if="$v.mailConfigData.from_mail.$error">
<span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
v-model.trim="mailConfigData.from_name"
type="text"
name="name"
@input="$v.mailConfigData.from_name.$touch()"
/>
<div v-if="$v.mailConfigData.from_name.$error">
<span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.mandrill_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_mandrill_secret.$error"
v-model.trim="mailConfigData.mail_mandrill_secret"
type="password"
name="name"
show-password
@input="$v.mailConfigData.mail_mandrill_secret.$touch()"
/>
<div v-if="$v.mailConfigData.mail_mandrill_secret.$error">
<span v-if="!$v.mailConfigData.mail_mandrill_secret.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<base-button
:loading="loading"
class="pull-right mt-4"
icon="save"
color="theme"
type="submit"
>
{{ $t('general.save') }}
</base-button>
</form>
</template>
<script>
import MultiSelect from 'vue-multiselect'
import { validationMixin } from 'vuelidate'
const { required, email, numeric } = require('vuelidate/lib/validators')
export default {
components: {
MultiSelect
},
mixins: [validationMixin],
props: {
configData: {
type: Object,
require: true,
default: Object
},
loading: {
type: Boolean,
require: true,
default: false
},
mailDrivers: {
type: Array,
require: true,
default: Array
}
},
data () {
return {
mailConfigData: {
mail_driver: '',
mail_host: '',
mail_port: null,
mail_mandrill_secret: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {
mailConfigData: {
mail_driver: {
required
},
mail_host: {
required
},
mail_port: {
required,
numeric
},
mail_mandrill_secret: {
required
},
mail_encryption: {
required
},
from_mail: {
required,
email
},
from_name: {
required
}
}
},
mounted () {
for (const key in this.mailConfigData) {
if (this.configData.hasOwnProperty(key)) {
this.mailConfigData[key] = this.configData[key]
}
}
},
methods: {
async saveEmailConfig () {
this.$v.mailConfigData.$touch()
if (!this.$v.mailConfigData.$invalid) {
this.$emit('submit-data', this.mailConfigData)
}
return false
},
onChangeDriver () {
this.$v.mailConfigData.mail_driver.$touch()
this.$emit('on-change-driver', this.mailConfigData.mail_driver)
}
}
}
</script>

View File

@ -0,0 +1,253 @@
<template>
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
:invalid="$v.mailConfigData.mail_driver.$error"
:options="mailDrivers"
:searchable="true"
:show-labels="false"
@input="onChangeDriver"
/>
<div v-if="$v.mailConfigData.mail_driver.$error">
<span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
v-model.trim="mailConfigData.mail_host"
type="text"
name="mail_host"
@input="$v.mailConfigData.mail_host.$touch()"
/>
<div v-if="$v.mailConfigData.mail_host.$error">
<span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
v-model.trim="mailConfigData.mail_port"
type="text"
name="mail_port"
@input="$v.mailConfigData.mail_port.$touch()"
/>
<div v-if="$v.mailConfigData.mail_port.$error">
<span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model.trim="mailConfigData.mail_encryption"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
<span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
v-model.trim="mailConfigData.from_mail"
type="text"
name="from_mail"
@input="$v.mailConfigData.from_mail.$touch()"
/>
<div v-if="$v.mailConfigData.from_mail.$error">
<span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
v-model.trim="mailConfigData.from_name"
type="text"
name="name"
@input="$v.mailConfigData.from_name.$touch()"
/>
<div v-if="$v.mailConfigData.from_name.$error">
<span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.ses_key') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_ses_key.$error"
v-model.trim="mailConfigData.mail_ses_key"
type="text"
name="name"
@input="$v.mailConfigData.mail_ses_key.$touch()"
/>
<div v-if="$v.mailConfigData.mail_ses_key.$error">
<span v-if="!$v.mailConfigData.mail_ses_key.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.ses_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_ses_secret.$error"
v-model.trim="mailConfigData.mail_ses_secret"
type="password"
name="name"
show-password
@input="$v.mailConfigData.mail_ses_secret.$touch()"
/>
<div v-if="$v.mailConfigData.mail_ses_secret.$error">
<span v-if="!$v.mailConfigData.mail_ses_secret.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<base-button
:loading="loading"
class="pull-right mt-4"
icon="save"
color="theme"
type="submit"
>
{{ $t('general.save') }}
</base-button>
</form>
</template>
<script>
import MultiSelect from 'vue-multiselect'
import { validationMixin } from 'vuelidate'
const { required, email, numeric } = require('vuelidate/lib/validators')
export default {
components: {
MultiSelect
},
mixins: [validationMixin],
props: {
configData: {
type: Object,
require: true,
default: Object
},
loading: {
type: Boolean,
require: true,
default: false
},
mailDrivers: {
type: Array,
require: true,
default: Array
}
},
data () {
return {
mailConfigData: {
mail_driver: '',
mail_host: '',
mail_port: null,
mail_ses_key: '',
mail_ses_secret: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {
mailConfigData: {
mail_driver: {
required
},
mail_host: {
required
},
mail_port: {
required,
numeric
},
mail_ses_key: {
required
},
mail_ses_secret: {
required
},
mail_encryption: {
required
},
from_mail: {
required,
email
},
from_name: {
required
}
}
},
mounted () {
for (const key in this.mailConfigData) {
if (this.configData.hasOwnProperty(key)) {
this.mailConfigData[key] = this.configData[key]
}
}
},
methods: {
async saveEmailConfig () {
this.$v.mailConfigData.$touch()
if (!this.$v.mailConfigData.$invalid) {
this.$emit('submit-data', this.mailConfigData)
}
return false
},
onChangeDriver () {
this.$v.mailConfigData.mail_driver.$touch()
this.$emit('on-change-driver', this.mailConfigData.mail_driver)
}
}
}
</script>

View File

@ -0,0 +1,253 @@
<template>
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
:invalid="$v.mailConfigData.mail_driver.$error"
:options="mailDrivers"
:searchable="true"
:show-labels="false"
@input="onChangeDriver"
/>
<div v-if="$v.mailConfigData.mail_driver.$error">
<span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
v-model.trim="mailConfigData.mail_host"
type="text"
name="mail_host"
@input="$v.mailConfigData.mail_host.$touch()"
/>
<div v-if="$v.mailConfigData.mail_host.$error">
<span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.username') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_username.$error"
v-model.trim="mailConfigData.mail_username"
type="text"
name="db_name"
@input="$v.mailConfigData.mail_username.$touch()"
/>
<div v-if="$v.mailConfigData.mail_username.$error">
<span v-if="!$v.mailConfigData.mail_username.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.password') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_password.$error"
v-model.trim="mailConfigData.mail_password"
type="password"
name="name"
show-password
@input="$v.mailConfigData.mail_password.$touch()"
/>
<div v-if="$v.mailConfigData.mail_password.$error">
<span v-if="!$v.mailConfigData.mail_password.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
v-model.trim="mailConfigData.mail_port"
type="text"
name="mail_port"
@input="$v.mailConfigData.mail_port.$touch()"
/>
<div v-if="$v.mailConfigData.mail_port.$error">
<span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model.trim="mailConfigData.mail_encryption"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
<span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
v-model.trim="mailConfigData.from_mail"
type="text"
name="from_mail"
@input="$v.mailConfigData.from_mail.$touch()"
/>
<div v-if="$v.mailConfigData.from_mail.$error">
<span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
v-model.trim="mailConfigData.from_name"
type="text"
name="name"
@input="$v.mailConfigData.from_name.$touch()"
/>
<div v-if="$v.mailConfigData.from_name.$error">
<span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<base-button
:loading="loading"
class="pull-right mt-4"
icon="save"
color="theme"
type="submit"
>
{{ $t('general.save') }}
</base-button>
</form>
</template>
<script>
import MultiSelect from 'vue-multiselect'
import { validationMixin } from 'vuelidate'
const { required, email, numeric } = require('vuelidate/lib/validators')
export default {
components: {
MultiSelect
},
mixins: [validationMixin],
props: {
configData: {
type: Object,
require: true,
default: Object
},
loading: {
type: Boolean,
require: true,
default: false
},
mailDrivers: {
type: Array,
require: true,
default: Array
}
},
data () {
return {
mailConfigData: {
mail_driver: '',
mail_host: '',
mail_port: null,
mail_username: '',
mail_password: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {
mailConfigData: {
mail_driver: {
required
},
mail_host: {
required
},
mail_port: {
required,
numeric
},
mail_username: {
required
},
mail_password: {
required
},
mail_encryption: {
required
},
from_mail: {
required,
email
},
from_name: {
required
}
}
},
mounted () {
for (const key in this.mailConfigData) {
if (this.configData.hasOwnProperty(key)) {
this.mailConfigData[key] = this.configData[key]
}
}
},
methods: {
async saveEmailConfig () {
this.$v.mailConfigData.$touch()
if (!this.$v.mailConfigData.$invalid) {
this.$emit('submit-data', this.mailConfigData)
}
return false
},
onChangeDriver () {
this.$v.mailConfigData.mail_driver.$touch()
this.$emit('on-change-driver', this.mailConfigData.mail_driver)
}
}
}
</script>

View File

@ -0,0 +1,233 @@
<template>
<form @submit.prevent="saveEmailConfig()">
<div class="row">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.driver') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model="mailConfigData.mail_driver"
:invalid="$v.mailConfigData.mail_driver.$error"
:options="mailDrivers"
:searchable="true"
:show-labels="false"
@input="onChangeDriver"
/>
<div v-if="$v.mailConfigData.mail_driver.$error">
<span v-if="!$v.mailConfigData.mail_driver.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.host') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_host.$error"
v-model.trim="mailConfigData.mail_host"
type="text"
name="mail_host"
@input="$v.mailConfigData.mail_host.$touch()"
/>
<div v-if="$v.mailConfigData.mail_host.$error">
<span v-if="!$v.mailConfigData.mail_host.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.port') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_port.$error"
v-model.trim="mailConfigData.mail_port"
type="text"
name="mail_port"
@input="$v.mailConfigData.mail_port.$touch()"
/>
<div v-if="$v.mailConfigData.mail_port.$error">
<span v-if="!$v.mailConfigData.mail_port.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.mail_port.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.encryption') }}</label>
<span class="text-danger"> *</span>
<base-select
v-model.trim="mailConfigData.mail_encryption"
:invalid="$v.mailConfigData.mail_encryption.$error"
:options="encryptions"
:searchable="true"
:show-labels="false"
@input="$v.mailConfigData.mail_encryption.$touch()"
/>
<div v-if="$v.mailConfigData.mail_encryption.$error">
<span v-if="!$v.mailConfigData.mail_encryption.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_mail') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_mail.$error"
v-model.trim="mailConfigData.from_mail"
type="text"
name="from_mail"
@input="$v.mailConfigData.from_mail.$touch()"
/>
<div v-if="$v.mailConfigData.from_mail.$error">
<span v-if="!$v.mailConfigData.from_mail.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
<span v-if="!$v.mailConfigData.from_mail.numeric" class="text-danger">
{{ $tc('validation.numbers_only') }}
</span>
</div>
</div>
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.from_name') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.from_name.$error"
v-model.trim="mailConfigData.from_name"
type="text"
name="name"
@input="$v.mailConfigData.from_name.$touch()"
/>
<div v-if="$v.mailConfigData.from_name.$error">
<span v-if="!$v.mailConfigData.from_name.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-md-6 my-2">
<label class="form-label">{{ $t('wizard.mail.sparkpost_secret') }}</label>
<span class="text-danger"> *</span>
<base-input
:invalid="$v.mailConfigData.mail_sparkpost_secret.$error"
v-model.trim="mailConfigData.mail_sparkpost_secret"
type="password"
name="name"
show-password
@input="$v.mailConfigData.mail_sparkpost_secret.$touch()"
/>
<div v-if="$v.mailConfigData.mail_sparkpost_secret.$error">
<span v-if="!$v.mailConfigData.mail_sparkpost_secret.required" class="text-danger">
{{ $tc('validation.required') }}
</span>
</div>
</div>
</div>
<base-button
:loading="loading"
class="pull-right mt-4"
icon="save"
color="theme"
type="submit"
>
{{ $t('general.save') }}
</base-button>
</form>
</template>
<script>
import MultiSelect from 'vue-multiselect'
import { validationMixin } from 'vuelidate'
const { required, email, numeric } = require('vuelidate/lib/validators')
export default {
components: {
MultiSelect
},
mixins: [validationMixin],
props: {
configData: {
type: Object,
require: true,
default: Object
},
loading: {
type: Boolean,
require: true,
default: false
},
mailDrivers: {
type: Array,
require: true,
default: Array
}
},
data () {
return {
mailConfigData: {
mail_driver: '',
mail_host: '',
mail_port: null,
mail_sparkpost_secret: '',
mail_encryption: 'tls',
from_mail: '',
from_name: ''
},
encryptions: ['tls', 'ssl', 'starttls']
}
},
validations: {
mailConfigData: {
mail_driver: {
required
},
mail_host: {
required
},
mail_port: {
required,
numeric
},
mail_sparkpost_secret: {
required
},
mail_encryption: {
required
},
from_mail: {
required,
email
},
from_name: {
required
}
}
},
mounted () {
for (const key in this.mailConfigData) {
if (this.configData.hasOwnProperty(key)) {
this.mailConfigData[key] = this.configData[key]
}
}
},
methods: {
async saveEmailConfig () {
this.$v.mailConfigData.$touch()
if (!this.$v.mailConfigData.$invalid) {
this.$emit('submit-data', this.mailConfigData)
}
return false
},
onChangeDriver () {
this.$v.mailConfigData.mail_driver.$touch()
this.$emit('on-change-driver', this.mailConfigData.mail_driver)
}
}
}
</script>