mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
mail setup refactoring
This commit is contained in:
Čarodej
358
resources/js/components/Setup/MailSetup.vue
Normal file
358
resources/js/components/Setup/MailSetup.vue
Normal file
@@ -0,0 +1,358 @@
|
||||
<template>
|
||||
<div>
|
||||
<FormLabel icon="hard-drive">
|
||||
{{ $te('mail_driver') ? $t('mail_driver') : 'Mail Setup' }}
|
||||
</FormLabel>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Driver" :error="errors[0]" :is-last="mail.driver === undefined || mail.driver === 'log'">
|
||||
<SelectInput
|
||||
v-model="mail.driver"
|
||||
:default="mail.driver"
|
||||
:options="driversList"
|
||||
:placeholder="$te('select_mail_driver') ? $t('select_mail_driver') : 'Select your mail driver'"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<div v-if="mail.driver === 'smtp'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Host" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.smtp.host"
|
||||
placeholder="Type your mail host"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Port" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.smtp.port"
|
||||
placeholder="Type your mail port"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Username" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model.lazy="mail.smtp.username"
|
||||
placeholder="Type your mail username"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Mail Password" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.smtp.password"
|
||||
placeholder="Type your mail password"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Mail Encryption"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Mail Encryption" :error="errors[0]" :is-last="! shouldSetSMTPEmail">
|
||||
<SelectInput
|
||||
v-model="mail.smtp.encryption"
|
||||
:default="mail.smtp.encryption"
|
||||
:options="mailEncryptionList"
|
||||
placeholder="Select your mail encryption"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider v-if="shouldSetSMTPEmail" tag="div" mode="passive" name="Mail From Address" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Mail" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model.trim="mail.smtp.email"
|
||||
placeholder="Type your mail from address"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="mail.driver === 'mailgun'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Domain" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.mailgun.domain"
|
||||
placeholder="Type your domain"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Secret" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.mailgun.secret"
|
||||
placeholder="Type your secret"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Endpoint" :error="errors[0]">
|
||||
<SelectInput
|
||||
v-model="mail.mailgun.endpoint"
|
||||
:options="mailgunRegions"
|
||||
placeholder="Select your endpoint"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Sender (Email)" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.mailgun.sender"
|
||||
placeholder="Type your sender email..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="mail.driver === 'postmark'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Token" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.postmark.token"
|
||||
placeholder="Type your token"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Sender Signature (Email)" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.postmark.sender"
|
||||
placeholder="Type your sender signature..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div v-if="mail.driver === 'ses'">
|
||||
<ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Access Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.access_key"
|
||||
placeholder="Type your access key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider
|
||||
tag="div"
|
||||
mode="passive"
|
||||
name="Secret Access Key"
|
||||
rules="required"
|
||||
v-slot="{ errors }"
|
||||
>
|
||||
<AppInputText title="Secret Access Key" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.secret_access_key"
|
||||
placeholder="Type your secret access key"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
|
||||
<AppInputText title="Region" :error="errors[0]">
|
||||
<SelectInput
|
||||
v-model="mail.ses.default_region"
|
||||
:options="s3Regions"
|
||||
placeholder="Select your region"
|
||||
:isError="errors[0]"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Sender" rules="required|email" v-slot="{ errors }">
|
||||
<AppInputText title="Identity (Email)" :error="errors[0]">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.sender"
|
||||
placeholder="Type your identity email..."
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
|
||||
<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
|
||||
<AppInputText title="Session Token (optional)" :error="errors[0]" :is-last="true">
|
||||
<input
|
||||
class="focus-border-theme input-dark"
|
||||
v-model="mail.ses.session_token"
|
||||
placeholder="Type your session token"
|
||||
type="text"
|
||||
:class="{ '!border-rose-600': errors[0] }"
|
||||
/>
|
||||
</AppInputText>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
|
||||
import SelectInput from '../Others/Forms/SelectInput'
|
||||
import AppInputText from '../Admin/AppInputText'
|
||||
import FormLabel from '../Others/Forms/FormLabel'
|
||||
|
||||
export default {
|
||||
name: 'MailSetup',
|
||||
components: {
|
||||
ValidationObserver,
|
||||
ValidationProvider,
|
||||
AppInputText,
|
||||
SelectInput,
|
||||
FormLabel,
|
||||
},
|
||||
watch: {
|
||||
mail: {
|
||||
handler(newValue, oldValue) {
|
||||
this.$emit('input', newValue)
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'mail.smtp.username': function (val) {
|
||||
if (this.$isValidEmail(val)) {
|
||||
this.mail.smtp.email = undefined
|
||||
this.shouldSetSMTPEmail = false
|
||||
} else {
|
||||
this.shouldSetSMTPEmail = true
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
s3Regions() {
|
||||
return this.$store.getters.s3Regions
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shouldSetSMTPEmail: false,
|
||||
mail: {
|
||||
driver: undefined,
|
||||
ses: {
|
||||
access_key: undefined,
|
||||
secret_access_key: undefined,
|
||||
default_region: undefined,
|
||||
session_token: undefined,
|
||||
sender: undefined,
|
||||
},
|
||||
smtp: {
|
||||
host: undefined,
|
||||
port: undefined,
|
||||
email: undefined,
|
||||
username: undefined,
|
||||
password: undefined,
|
||||
encryption: undefined,
|
||||
},
|
||||
mailgun: {
|
||||
domain: undefined,
|
||||
secret: undefined,
|
||||
endpoint: undefined,
|
||||
sender: undefined,
|
||||
},
|
||||
postmark: {
|
||||
token: undefined,
|
||||
sender: undefined,
|
||||
},
|
||||
},
|
||||
mailgunRegions: [
|
||||
{
|
||||
label: 'US Endpoint (api.mailgun.net)',
|
||||
value: 'api.mailgun.net',
|
||||
},
|
||||
{
|
||||
label: 'EU Endpoint (api.eu.mailgun.net)',
|
||||
value: 'api.eu.mailgun.net',
|
||||
},
|
||||
],
|
||||
mailEncryptionList: [
|
||||
{
|
||||
label: 'TLS',
|
||||
value: 'tls',
|
||||
},
|
||||
{
|
||||
label: 'SSL',
|
||||
value: 'ssl',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
driversList: [
|
||||
{
|
||||
label: 'SMTP',
|
||||
value: 'smtp',
|
||||
},
|
||||
{
|
||||
label: 'Mailgun',
|
||||
value: 'mailgun',
|
||||
},
|
||||
{
|
||||
label: 'SES',
|
||||
value: 'ses',
|
||||
},
|
||||
{
|
||||
label: 'Postmark',
|
||||
value: 'postmark',
|
||||
},
|
||||
{
|
||||
label: 'None',
|
||||
value: 'log',
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -158,6 +158,9 @@
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
s3Regions() {
|
||||
return this.$store.getters.s3Regions
|
||||
},
|
||||
regionList() {
|
||||
return {
|
||||
storj: this.storjRegions,
|
||||
@@ -333,88 +336,6 @@
|
||||
value: 'fra1',
|
||||
},
|
||||
],
|
||||
s3Regions: [
|
||||
{
|
||||
label: 'us-east-1',
|
||||
value: 'us-east-1',
|
||||
},
|
||||
{
|
||||
label: 'us-east-2',
|
||||
value: 'us-east-2',
|
||||
},
|
||||
{
|
||||
label: 'us-west-1',
|
||||
value: 'us-west-1',
|
||||
},
|
||||
{
|
||||
label: 'us-west-2',
|
||||
value: 'us-west-2',
|
||||
},
|
||||
{
|
||||
label: 'af-south-1',
|
||||
value: 'af-south-1',
|
||||
},
|
||||
{
|
||||
label: 'ap-east-1',
|
||||
value: 'ap-east-1',
|
||||
},
|
||||
{
|
||||
label: 'ap-south-1',
|
||||
value: 'ap-south-1',
|
||||
},
|
||||
{
|
||||
label: 'ap-northeast-2',
|
||||
value: 'ap-northeast-2',
|
||||
},
|
||||
{
|
||||
label: 'ap-southeast-1',
|
||||
value: 'ap-southeast-1',
|
||||
},
|
||||
{
|
||||
label: 'ap-southeast-2',
|
||||
value: 'ap-southeast-2',
|
||||
},
|
||||
{
|
||||
label: 'ap-northeast-1',
|
||||
value: 'ap-northeast-1',
|
||||
},
|
||||
{
|
||||
label: 'ca-central-1',
|
||||
value: 'ca-central-1',
|
||||
},
|
||||
{
|
||||
label: 'eu-central-1',
|
||||
value: 'eu-central-1',
|
||||
},
|
||||
{
|
||||
label: 'eu-west-1',
|
||||
value: 'eu-west-1',
|
||||
},
|
||||
{
|
||||
label: 'eu-west-2',
|
||||
value: 'eu-west-2',
|
||||
},
|
||||
{
|
||||
label: 'eu-south-1',
|
||||
value: 'eu-south-1',
|
||||
},
|
||||
{
|
||||
label: 'eu-west-3',
|
||||
value: 'eu-west-3',
|
||||
},
|
||||
{
|
||||
label: 'eu-north-1',
|
||||
value: 'eu-north-1',
|
||||
},
|
||||
{
|
||||
label: 'me-south-1',
|
||||
value: 'me-south-1',
|
||||
},
|
||||
{
|
||||
label: 'sa-east-1',
|
||||
value: 'sa-east-1',
|
||||
},
|
||||
],
|
||||
storageServiceList: [
|
||||
{
|
||||
label: 'Local Driver',
|
||||
|
||||
Reference in New Issue
Block a user