nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

mail setup refactoring

Browse Source
This commit is contained in:
Čarodej
2022-04-12 08:36:10 +02:00
parent b37bbe38dc
commit e71810a9bb
8 changed files with 810 additions and 1090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/mix-manifest.json
View File

@@ -6,7 +6,7 @@
"/chunks/status-check.js": "/chunks/status-check.js?id=f82f9939c1326fe2", "/chunks/status-check.js": "/chunks/status-check.js?id=f82f9939c1326fe2",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=df5bd89528649783", "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=df5bd89528649783",
"/chunks/database.js": "/chunks/database.js?id=15cc488117dccf7b", "/chunks/database.js": "/chunks/database.js?id=15cc488117dccf7b",
"/chunks/environment.js": "/chunks/environment.js?id=a47beaba2035573d", "/chunks/environment.js": "/chunks/environment.js?id=0cae9f804ca48d0e",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=15938ff1ad2d6ed2", "/chunks/app-setup.js": "/chunks/app-setup.js?id=15938ff1ad2d6ed2",
"/chunks/admin-account.js": "/chunks/admin-account.js?id=916450217130f3b8", "/chunks/admin-account.js": "/chunks/admin-account.js?id=916450217130f3b8",
"/chunks/shared.js": "/chunks/shared.js?id=ec06bf0d3ada0f65", "/chunks/shared.js": "/chunks/shared.js?id=ec06bf0d3ada0f65",
@@ -42,7 +42,7 @@
"/chunks/app-settings.js": "/chunks/app-settings.js?id=55da23af2b076069", "/chunks/app-settings.js": "/chunks/app-settings.js?id=55da23af2b076069",
"/chunks/app-appearance.js": "/chunks/app-appearance.js?id=a694a01f3641712c", "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=a694a01f3641712c",
"/chunks/app-index.js": "/chunks/app-index.js?id=efdbfa062749ca00", "/chunks/app-index.js": "/chunks/app-index.js?id=efdbfa062749ca00",
"/chunks/app-environment.js": "/chunks/app-environment.js?id=fc46ec03276194e0", "/chunks/app-environment.js": "/chunks/app-environment.js?id=eb6659a1355f0dff",
"/chunks/app-others.js": "/chunks/app-others.js?id=abb8d96cd7c3a576", "/chunks/app-others.js": "/chunks/app-others.js?id=abb8d96cd7c3a576",
"/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=1cfffc99465b9a7a", "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=1cfffc99465b9a7a",
"/chunks/app-adsense.js": "/chunks/app-adsense.js?id=a5dc9e715f8561bd", "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=a5dc9e715f8561bd",

358
resources/js/components/Setup/MailSetup.vue Normal file
View 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>

85
resources/js/components/Setup/StorageSetup.vue
View File

@@ -158,6 +158,9 @@
}, },
}, },
computed: { computed: {
s3Regions() {
return this.$store.getters.s3Regions
},
regionList() { regionList() {
return { return {
storj: this.storjRegions, storj: this.storjRegions,
@@ -333,88 +336,6 @@
value: 'fra1', 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: [ storageServiceList: [
{ {
label: 'Local Driver', label: 'Local Driver',

99
resources/js/store/modules/lists.js vendored
View File

@@ -1,38 +1,92 @@
const defaultState = { const defaultState = {
mailEncryptionList: [ s3Regions: [
{ {
label: 'TLS', label: 'us-east-1',
value: 'tls', value: 'us-east-1',
}, },
{ {
label: 'SSL', label: 'us-east-2',
value: 'ssl', value: 'us-east-2',
}, },
{ {
label: 'None', label: 'us-west-1',
value: '', value: 'us-west-1',
},
],
mailDriverList: [
{
label: 'SMTP',
value: 'smtp',
}, },
{ {
label: 'Mailgun', label: 'us-west-2',
value: 'mailgun', value: 'us-west-2',
}, },
{ {
label: 'SES', label: 'af-south-1',
value: 'ses', value: 'af-south-1',
}, },
{ {
label: 'Postmark', label: 'ap-east-1',
value: 'postmark', value: 'ap-east-1',
}, },
{ {
label: 'None', label: 'ap-south-1',
value: 'log', value: 'ap-south-1',
},
{
label: 'ap-southeast-1',
value: 'ap-southeast-1',
},
{
label: 'ap-southeast-2',
value: 'ap-southeast-2',
},
{
label: 'ap-southeast-3',
value: 'ap-southeast-3',
},
{
label: 'ap-northeast-1',
value: 'ap-northeast-1',
},
{
label: 'ap-northeast-2',
value: 'ap-northeast-2',
},
{
label: 'ap-northeast-3',
value: 'ap-northeast-3',
},
{
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',
}, },
], ],
transactionColumns: [ transactionColumns: [
@@ -1061,16 +1115,15 @@ const defaultState = {
} }
const getters = { const getters = {
mailEncryptionList: (state) => state.mailEncryptionList,
transactionColumns: (state) => state.transactionColumns, transactionColumns: (state) => state.transactionColumns,
subscriptionTypes: (state) => state.subscriptionTypes, subscriptionTypes: (state) => state.subscriptionTypes,
teamPermissions: (state) => state.teamPermissions, teamPermissions: (state) => state.teamPermissions,
mailDriverList: (state) => state.mailDriverList,
expirationList: (state) => state.expirationList, expirationList: (state) => state.expirationList,
currencyList: (state) => state.currencyList, currencyList: (state) => state.currencyList,
intervalList: (state) => state.intervalList, intervalList: (state) => state.intervalList,
timezones: (state) => state.timezones, timezones: (state) => state.timezones,
countries: (state) => state.countries, countries: (state) => state.countries,
s3Regions: (state) => state.s3Regions,
roles: (state) => state.roles, roles: (state) => state.roles,
} }

750
resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
View File

@@ -1,137 +1,136 @@
<template> <template>
<PageTab :is-loading="isLoading"> <PageTab :is-loading="isLoading">
<!--Broadcasting setup-->
<!--Broadcasting setup-->
<ValidationObserver <ValidationObserver
@submit.prevent="broadcastSetupSubmit" @submit.prevent="broadcastSetupSubmit"
ref="broadcastSetup" ref="broadcastSetup"
v-slot="{ invalid }" v-slot="{ invalid }"
tag="form" tag="form"
class="card shadow-card" class="card shadow-card"
> >
<FormLabel icon="wifi"> <FormLabel icon="wifi">
{{ $t('broadcasting') }} {{ $t('broadcasting') }}
</FormLabel> </FormLabel>
<ValidationProvider tag="div" mode="passive" name="Broadcast Driver" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Broadcast Driver" rules="required" v-slot="{ errors }">
<AppInputText title="Broadcast Driver" :error="errors[0]"> <AppInputText title="Broadcast Driver" :error="errors[0]">
<SelectInput <SelectInput
v-model="broadcast.driver" v-model="broadcast.driver"
:options="broadcastDrivers" :options="broadcastDrivers"
placeholder="Select your broadcast driver" placeholder="Select your broadcast driver"
:isError="errors[0]" :isError="errors[0]"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<div v-if="broadcast.driver === 'native'"> <div v-if="broadcast.driver === 'native'">
<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
<AppInputText title="Hostname or IP" :error="errors[0]"> <AppInputText title="Hostname or IP" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="broadcast.host" v-model="broadcast.host"
placeholder="Type your hostname or IP" placeholder="Type your hostname or IP"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
<AppInputText title="Port" :error="errors[0]"> <AppInputText title="Port" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="broadcast.port" v-model="broadcast.port"
placeholder="Type your port" placeholder="Type your port"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
</div> </div>
<div v-if="broadcast.driver === 'pusher'"> <div v-if="broadcast.driver === 'pusher'">
<ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }">
<AppInputText title="App ID" :error="errors[0]"> <AppInputText title="App ID" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="broadcast.id" v-model="broadcast.id"
placeholder="Type your app id" placeholder="Type your app id"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
<AppInputText title="Key" :error="errors[0]"> <AppInputText title="Key" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="broadcast.key" v-model="broadcast.key"
placeholder="Paste your key" placeholder="Paste your key"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
<AppInputText title="Secret" :error="errors[0]"> <AppInputText title="Secret" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="broadcast.secret" v-model="broadcast.secret"
placeholder="Paste your secret" placeholder="Paste your secret"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Cluster" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Cluster" rules="required" v-slot="{ errors }">
<AppInputText title="Cluster" :error="errors[0]"> <AppInputText title="Cluster" :error="errors[0]">
<SelectInput <SelectInput
v-model="broadcast.cluster" v-model="broadcast.cluster"
:options="pusherClusters" :options="pusherClusters"
placeholder="Select your cluster" placeholder="Select your cluster"
:isError="errors[0]" :isError="errors[0]"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
</div> </div>
<ButtonBase <ButtonBase
:loading="isSendingBroadcastForm" :loading="isSendingBroadcastForm"
:disabled="isSendingBroadcastForm" :disabled="isSendingBroadcastForm"
type="submit" type="submit"
button-style="theme" button-style="theme"
class="w-full sm:w-auto" class="w-full sm:w-auto"
> >
{{ $t('save_broadcast_settings') }} {{ $t('save_broadcast_settings') }}
</ButtonBase> </ButtonBase>
</ValidationObserver> </ValidationObserver>
<!--Storage setup--> <!--Storage setup-->
<ValidationObserver <ValidationObserver
@submit.prevent="storageSetupSubmit" @submit.prevent="storageSetupSubmit"
ref="storageSetup" ref="storageSetup"
v-slot="{ invalid }" v-slot="{ invalid }"
tag="form" tag="form"
class="card shadow-card" class="card shadow-card"
> >
<StorageSetup v-model="storage" /> <StorageSetup v-model="storage" />
<ButtonBase <ButtonBase
:loading="isSendingStorageForm" :loading="isSendingStorageForm"
:disabled="isSendingStorageForm" :disabled="isSendingStorageForm"
type="submit" type="submit"
button-style="theme" button-style="theme"
class="w-full sm:w-auto mt-6 sm:mt-7" class="mt-6 w-full sm:mt-7 sm:w-auto"
> >
{{ $t('save_storage_settings') }} {{ $t('save_storage_settings') }}
</ButtonBase> </ButtonBase>
</ValidationObserver> </ValidationObserver>
<!--Mail setup--> <!--Mail setup-->
<ValidationObserver <ValidationObserver
@submit.prevent="emailSetupSubmit" @submit.prevent="emailSetupSubmit"
ref="EmailSetup" ref="EmailSetup"
@@ -139,247 +138,14 @@
tag="form" tag="form"
class="card shadow-card" class="card shadow-card"
> >
<FormLabel icon="mail">{{ $t('mail_driver') }}</FormLabel> <MailSetup v-model="mail" />
<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
<AppInputText title="Mail Driver" :error="errors[0]">
<SelectInput
v-model="mailDriver"
:default="mailDriver"
:options="mailDriverList"
:placeholder="$t('select_mail_driver')"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<div v-if="mailDriver === '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="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="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="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="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]">
<SelectInput
v-model="smtp.encryption"
:default="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]">
<input
class="focus-border-theme input-dark"
v-model.trim="smtp.email"
placeholder="Type your mail from address"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === '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="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="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="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]">
<input
class="focus-border-theme input-dark"
v-model="mailgun.sender"
placeholder="Type your sender email..."
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === '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="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]">
<input
class="focus-border-theme input-dark"
v-model="postmark.sender"
placeholder="Type your sender signature..."
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === '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="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="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="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="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]">
<input
class="focus-border-theme input-dark"
v-model="ses.session_token"
placeholder="Type your session token"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<ButtonBase <ButtonBase
:loading="isSendingEmailForm" :loading="isSendingEmailForm"
:disabled="isSendingEmailForm" :disabled="isSendingEmailForm"
type="submit" type="submit"
button-style="theme" button-style="theme"
class="w-full sm:w-auto" class="mt-6 w-full sm:mt-7 sm:w-auto"
> >
{{ $t('admin_settings.email.save_button') }} {{ $t('admin_settings.email.save_button') }}
</ButtonBase> </ButtonBase>
@@ -388,229 +154,177 @@
</template> </template>
<script> <script>
import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full' import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
import SelectInput from '../../../../components/Others/Forms/SelectInput' import SelectInput from '../../../../components/Others/Forms/SelectInput'
import FormLabel from '../../../../components/Others/Forms/FormLabel' import FormLabel from '../../../../components/Others/Forms/FormLabel'
import AppInputText from '../../../../components/Admin/AppInputText' import AppInputText from '../../../../components/Admin/AppInputText'
import StorageSetup from '../../../../components/Setup/StorageSetup'
import ButtonBase from '../../../../components/FilesView/ButtonBase' import ButtonBase from '../../../../components/FilesView/ButtonBase'
import PageTab from '../../../../components/Others/Layout/PageTab' import PageTab from '../../../../components/Others/Layout/PageTab'
import StorageSetup from "../../../../components/Setup/StorageSetup" import MailSetup from '../../../../components/Setup/MailSetup'
import {events} from '../../../../bus' import { events } from '../../../../bus'
import {mapGetters} from 'vuex'
import axios from 'axios' import axios from 'axios'
export default { export default {
name: 'AppEnvironment', name: 'AppEnvironment',
components: { components: {
StorageSetup,
AppInputText,
ValidationObserver, ValidationObserver,
ValidationProvider, ValidationProvider,
StorageSetup,
AppInputText,
SelectInput, SelectInput,
ButtonBase, ButtonBase,
MailSetup,
FormLabel, FormLabel,
PageTab, PageTab,
},
watch: {
'smtp.username': function (val) {
if (this.$isValidEmail(val)) {
this.smtp.email = undefined
this.shouldSetSMTPEmail = false
} else {
this.shouldSetSMTPEmail = true
}
},
},
computed: {
...mapGetters([
'mailEncryptionList',
'mailDriverList'
]),
}, },
data() { data() {
return { return {
shouldSetSMTPEmail: false, storage: undefined,
mail: undefined,
isLoading: false, isLoading: false,
isSendingEmailForm: false, isSendingEmailForm: false,
isSendingStorageForm: false, isSendingStorageForm: false,
isSendingBroadcastForm: false, isSendingBroadcastForm: false,
mailDriver: undefined, broadcast: {
broadcastDrivers: [ driver: undefined,
{ id: undefined,
label: 'Pusher', key: undefined,
value: 'pusher',
},
{
label: 'VueFileManager Broadcast Server',
value: 'native',
},
{
label: 'None',
value: 'none',
},
],
mailgunRegions: [
{
label: 'US Endpoint (api.mailgun.net)',
value: 'api.mailgun.net',
},
{
label: 'EU Endpoint (api.eu.mailgun.net)',
value: 'api.eu.mailgun.net',
},
],
pusherClusters: [
{
label: 'US East (N. Virginia)',
value: 'mt1',
},
{
label: 'Asia Pacific (Singapore)',
value: 'ap1',
},
{
label: 'Asia Pacific (Mumbai)',
value: 'ap2',
},
{
label: 'US East (Ohio)',
value: 'us2',
},
{
label: 'Asia Pacific (Tokyo)',
value: 'ap3',
},
{
label: 'US West (Oregon)',
value: 'us3',
},
{
label: 'Asia Pacific (Sydney)',
value: 'ap4',
},
{
label: 'EU (Ireland)',
value: 'eu',
},
{
label: 'South America (São Paulo)',
value: 'sa1',
},
],
storage: 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, secret: undefined,
endpoint: undefined, cluster: undefined,
sender: undefined, port: undefined,
host: undefined,
}, },
postmark: { broadcastDrivers: [
token: undefined, {
sender: undefined, label: 'Pusher',
}, value: 'pusher',
broadcast: { },
driver: undefined, {
id: undefined, label: 'VueFileManager Broadcast Server',
key: undefined, value: 'native',
secret: undefined, },
cluster: undefined, {
port: undefined, label: 'None',
host: undefined, value: 'none',
} },
],
pusherClusters: [
{
label: 'US East (N. Virginia)',
value: 'mt1',
},
{
label: 'Asia Pacific (Singapore)',
value: 'ap1',
},
{
label: 'Asia Pacific (Mumbai)',
value: 'ap2',
},
{
label: 'US East (Ohio)',
value: 'us2',
},
{
label: 'Asia Pacific (Tokyo)',
value: 'ap3',
},
{
label: 'US West (Oregon)',
value: 'us3',
},
{
label: 'Asia Pacific (Sydney)',
value: 'ap4',
},
{
label: 'EU (Ireland)',
value: 'eu',
},
{
label: 'South America (São Paulo)',
value: 'sa1',
},
],
} }
}, },
methods: { methods: {
async broadcastSetupSubmit() { async broadcastSetupSubmit() {
// Validate fields // Validate fields
const isValid = await this.$refs.broadcastSetup.validate() const isValid = await this.$refs.broadcastSetup.validate()
if (!isValid) return if (!isValid) return
// Start loading // Start loading
this.isSendingBroadcastForm = true this.isSendingBroadcastForm = true
axios axios
.post('/api/admin/settings/broadcast', {...this.broadcast}) .post('/api/admin/settings/broadcast', { ...this.broadcast })
.then(() => { .then(() => {
events.$emit('toaster', { events.$emit('toaster', {
type: 'success', type: 'success',
message: this.$t('broadcast_driver_updated'), message: this.$t('broadcast_driver_updated'),
}) })
}) })
.catch(() => { .catch(() => {
events.$emit('toaster', { events.$emit('toaster', {
type: 'danger', type: 'danger',
message: this.$t('popup_error.title'), message: this.$t('popup_error.title'),
}) })
}) })
.finally(() => { .finally(() => {
this.isSendingBroadcastForm = false this.isSendingBroadcastForm = false
this.broadcast = { this.broadcast = {
driver: undefined, driver: undefined,
id: undefined, id: undefined,
key: undefined, key: undefined,
secret: undefined, secret: undefined,
cluster: undefined, cluster: undefined,
host: undefined, host: undefined,
port: undefined, port: undefined,
} }
}) })
}, },
async storageSetupSubmit() { async storageSetupSubmit() {
// Validate fields // Validate fields
const isValid = await this.$refs.storageSetup.validate() const isValid = await this.$refs.storageSetup.validate()
if (!isValid) return if (!isValid) return
// Start loading // Start loading
this.isSendingStorageForm = true this.isSendingStorageForm = true
axios axios
.post('/api/admin/settings/storage', { .post('/api/admin/settings/storage', {
storage: this.storage storage: this.storage,
}) })
.then(() => { .then(() => {
this.storage = undefined this.storage = undefined
events.$emit('toaster', { events.$emit('toaster', {
type: 'success', type: 'success',
message: this.$t('storage_driver_updated'), message: this.$t('storage_driver_updated'),
}) })
}) })
.catch((error) => { .catch((error) => {
if (error.response.status === 401 && error.response.data.type === 's3-connection-error') { if (error.response.status === 401 && error.response.data.type === 's3-connection-error') {
events.$emit('alert:open', { events.$emit('alert:open', {
title: 'S3 Connection Error - Wrong Credentials or Not Permitted', title: 'S3 Connection Error - Wrong Credentials or Not Permitted',
message: error.response.data.message, message: error.response.data.message,
}) })
} else { } else {
events.$emit('toaster', { events.$emit('toaster', {
type: 'danger', type: 'danger',
message: this.$t('popup_error.title'), message: this.$t('popup_error.title'),
}) })
} }
}) })
.finally(() => { .finally(() => {
this.isSendingStorageForm = false this.isSendingStorageForm = false
}) })
}, },
async emailSetupSubmit() { async emailSetupSubmit() {
// Validate fields // Validate fields
const isValid = await this.$refs.EmailSetup.validate() const isValid = await this.$refs.EmailSetup.validate()
@@ -622,13 +336,11 @@ export default {
axios axios
.post('/api/admin/settings/email', { .post('/api/admin/settings/email', {
environment: this.environment, mailDriver: this.mail.driver,
storage: this.storage, postmark: this.mail.postmark,
mailDriver: this.mailDriver, mailgun: this.mail.mailgun,
smtp: this.smtp, smtp: this.mail.smtp,
mailgun: this.mailgun, ses: this.mail.ses,
ses: this.ses,
postmark: this.postmark,
}) })
.then(() => { .then(() => {
events.$emit('toaster', { events.$emit('toaster', {
@@ -637,17 +349,17 @@ export default {
}) })
}) })
.catch((error) => { .catch((error) => {
if (error.response.status === 401 && error.response.data.type === 'mailer-connection-error') { if (error.response.status === 401 && error.response.data.type === 'mailer-connection-error') {
events.$emit('alert:open', { events.$emit('alert:open', {
title: 'Mailer Connection Error - Wrong Credentials', title: 'Mailer Connection Error - Wrong Credentials',
message: error.response.data.message, message: error.response.data.message,
}) })
} else { } else {
events.$emit('toaster', { events.$emit('toaster', {
type: 'danger', type: 'danger',
message: this.$t('popup_error.title'), message: this.$t('popup_error.title'),
}) })
} }
}) })
.finally(() => { .finally(() => {
this.isSendingEmailForm = false this.isSendingEmailForm = false

602
resources/js/views/SetupWizard/EnvironmentSetup.vue
View File

@@ -19,150 +19,81 @@
v-slot="{ invalid }" v-slot="{ invalid }"
tag="form" tag="form"
> >
<StorageSetup v-model="storage" class="card shadow-card text-left" /> <StorageSetup v-model="storage" class="card text-left shadow-card" />
<MailSetup v-model="mail" class="card text-left shadow-card" />
<div class="card text-left shadow-card"> <div class="card text-left shadow-card">
<FormLabel>Email Setup</FormLabel> <FormLabel icon="wifi">
{{ $t('Broadcasting') }}
</FormLabel>
<ValidationProvider <ValidationProvider
tag="div" tag="div"
mode="passive" mode="passive"
name="Mail Driver" name="Broadcast Driver"
rules="required" rules="required"
v-slot="{ errors }" v-slot="{ errors }"
> >
<AppInputText <AppInputText
title="Mail Driver" title="Broadcast Driver"
:error="errors[0]" :error="errors[0]"
:is-last="!mailDriver || mailDriver === 'log'" :is-last="broadcast.driver === 'none' || broadcast.driver === undefined"
> >
<SelectInput <SelectInput
v-model="mailDriver" v-model="broadcast.driver"
:default="mailDriver" :options="broadcastDrivers"
:options="mailDriverList" placeholder="Select your broadcast driver"
placeholder="Select your mail driver"
:isError="errors[0]" :isError="errors[0]"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<div v-if="mailDriver === 'smtp'"> <div v-if="broadcast.driver === 'native'">
<ValidationProvider <ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
tag="div" <AppInputText title="Hostname or IP" :error="errors[0]">
mode="passive"
name="Mail Host"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Mail Host" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="smtp.host" v-model="broadcast.host"
placeholder="Type your mail host" placeholder="Type your hostname or IP"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
<ValidationProvider <ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
tag="div" <AppInputText title="Port" :error="errors[0]" :is-last="true">
mode="passive"
name="Mail Port"
rules="required"
v-slot="{ errors }"
>
<AppInputText title="Mail Port" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="smtp.port" v-model="broadcast.port"
placeholder="Type your mail port" placeholder="Type your port"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </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="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="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="smtp.encryption"
:default="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.lazy="smtp.email"
placeholder="Type your mail from address"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div> </div>
<div v-if="mailDriver === 'mailgun'"> <div v-if="broadcast.driver === 'pusher'">
<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }">
<AppInputText title="Domain" :error="errors[0]"> <AppInputText title="App ID" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="mailgun.domain" v-model="broadcast.id"
placeholder="Type your domain" placeholder="Type your app id"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
<AppInputText title="Key" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="broadcast.key"
placeholder="Paste your key"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
@@ -173,83 +104,8 @@
<AppInputText title="Secret" :error="errors[0]"> <AppInputText title="Secret" :error="errors[0]">
<input <input
class="focus-border-theme input-dark" class="focus-border-theme input-dark"
v-model="mailgun.secret" v-model="broadcast.secret"
placeholder="Type your secret" placeholder="Paste your secret"
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 (Email)" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="mailgun.sender"
placeholder="Type your sender email..."
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]" :is-last="true">
<SelectInput
v-model="mailgun.endpoint"
:options="mailgunRegions"
placeholder="Select your endpoint"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === '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="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)" :is-last="true" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="postmark.sender"
placeholder="Type your sender signature..."
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="mailDriver === '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="ses.access_key"
placeholder="Type your access key"
type="text" type="text"
:class="{ '!border-rose-600': errors[0] }" :class="{ '!border-rose-600': errors[0] }"
/> />
@@ -259,156 +115,22 @@
<ValidationProvider <ValidationProvider
tag="div" tag="div"
mode="passive" mode="passive"
name="Secret Access Key" name="Cluster"
rules="required" rules="required"
v-slot="{ errors }" v-slot="{ errors }"
> >
<AppInputText title="Secret Access Key" :error="errors[0]"> <AppInputText title="Cluster" :error="errors[0]" :is-last="true">
<input <SelectInput
class="focus-border-theme input-dark" v-model="broadcast.cluster"
v-model="ses.secret_access_key" :options="pusherClusters"
placeholder="Type your secret access key" placeholder="Select your cluster"
type="text" :isError="errors[0]"
: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="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="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="ses.session_token"
placeholder="Type your session token"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/> />
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
</div> </div>
</div> </div>
<div class="card text-left shadow-card">
<FormLabel icon="wifi">
{{ $t('Broadcasting') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Broadcast Driver" rules="required" v-slot="{ errors }">
<AppInputText title="Broadcast Driver" :error="errors[0]" :is-last="broadcast.driver === 'none' || broadcast.driver === undefined">
<SelectInput
v-model="broadcast.driver"
:options="broadcastDrivers"
placeholder="Select your broadcast driver"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
<div v-if="broadcast.driver === 'native'">
<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
<AppInputText title="Hostname or IP" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="broadcast.host"
placeholder="Type your hostname or IP"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
<AppInputText title="Port" :error="errors[0]" :is-last="true">
<input
class="focus-border-theme input-dark"
v-model="broadcast.port"
placeholder="Type your port"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
</div>
<div v-if="broadcast.driver === 'pusher'">
<ValidationProvider tag="div" mode="passive" name="App ID" rules="required" v-slot="{ errors }">
<AppInputText title="App ID" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="broadcast.id"
placeholder="Type your app id"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
<AppInputText title="Key" :error="errors[0]">
<input
class="focus-border-theme input-dark"
v-model="broadcast.key"
placeholder="Paste your key"
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="broadcast.secret"
placeholder="Paste your secret"
type="text"
:class="{ '!border-rose-600': errors[0] }"
/>
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Cluster" rules="required" v-slot="{ errors }">
<AppInputText title="Cluster" :error="errors[0]" :is-last="true">
<SelectInput
v-model="broadcast.cluster"
:options="pusherClusters"
placeholder="Select your cluster"
:isError="errors[0]"
/>
</AppInputText>
</ValidationProvider>
</div>
</div>
<div class="card text-left shadow-card"> <div class="card text-left shadow-card">
<FormLabel>Environment Setup</FormLabel> <FormLabel>Environment Setup</FormLabel>
@@ -448,26 +170,27 @@
</template> </template>
<script> <script>
import AppInputText from '../../components/Admin/AppInputText'
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full' import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import AuthContentWrapper from '../../components/Auth/AuthContentWrapper' import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
import SelectInput from '../../components/Others/Forms/SelectInput' import SelectInput from '../../components/Others/Forms/SelectInput'
import FormLabel from '../../components/Others/Forms/FormLabel' import FormLabel from '../../components/Others/Forms/FormLabel'
import StorageSetup from '../../components/Setup/StorageSetup'
import AppInputText from '../../components/Admin/AppInputText'
import InfoBox from '../../components/Others/Forms/InfoBox' import InfoBox from '../../components/Others/Forms/InfoBox'
import AuthContent from '../../components/Auth/AuthContent' import AuthContent from '../../components/Auth/AuthContent'
import AuthButton from '../../components/Auth/AuthButton' import AuthButton from '../../components/Auth/AuthButton'
import MailSetup from '../../components/Setup/MailSetup'
import { required } from 'vee-validate/dist/rules'
import { SettingsIcon } from 'vue-feather-icons' import { SettingsIcon } from 'vue-feather-icons'
import Headline from '../Auth/Headline' import Headline from '../Auth/Headline'
import { required } from 'vee-validate/dist/rules' import { events } from '../../bus'
import axios from 'axios' import axios from 'axios'
import { mapGetters } from 'vuex'
import {events} from "../../bus";
import StorageSetup from "../../components/Setup/StorageSetup";
export default { export default {
name: 'EnvironmentSetup', name: 'EnvironmentSetup',
components: { components: {
StorageSetup, MailSetup,
StorageSetup,
AuthContentWrapper, AuthContentWrapper,
ValidationProvider, ValidationProvider,
ValidationObserver, ValidationObserver,
@@ -481,26 +204,9 @@ export default {
InfoBox, InfoBox,
Headline, Headline,
}, },
watch: {
'smtp.username': function (val) {
if (this.$isValidEmail(val)) {
this.smtp.email = undefined
this.shouldSetSMTPEmail = false
} else {
this.shouldSetSMTPEmail = true
}
},
},
computed: {
...mapGetters([
'mailEncryptionList',
'mailDriverList',
]),
},
data() { data() {
return { return {
shouldSetSMTPEmail: false, isError: false,
isError: false,
isLoading: false, isLoading: false,
environment: 'production', environment: 'production',
environmentSetupList: [ environmentSetupList: [
@@ -514,103 +220,68 @@ export default {
}, },
], ],
storage: undefined, storage: undefined,
mailDriver: undefined, mail: undefined,
ses: { broadcast: {
access_key: undefined, driver: undefined,
secret_access_key: undefined, id: undefined,
default_region: undefined, key: undefined,
session_token: undefined,
sender: undefined,
},
smtp: {
host: undefined,
port: undefined,
email: undefined,
username: undefined,
password: undefined,
encryption: undefined,
},
mailgun: {
domain: undefined,
secret: undefined, secret: undefined,
endpoint: undefined, cluster: undefined,
sender: undefined, port: undefined,
host: undefined,
}, },
postmark: { broadcastDrivers: [
token: undefined, {
sender: undefined, label: 'Pusher',
}, value: 'pusher',
broadcast: { },
driver: undefined, {
id: undefined, label: 'VueFileManager Broadcast Server',
key: undefined, value: 'native',
secret: undefined, },
cluster: undefined, {
port: undefined, label: 'None',
host: undefined, value: 'none',
}, },
broadcastDrivers: [ ],
{ pusherClusters: [
label: 'Pusher', {
value: 'pusher', label: 'US East (N. Virginia)',
}, value: 'mt1',
{ },
label: 'VueFileManager Broadcast Server', {
value: 'native', label: 'Asia Pacific (Singapore)',
}, value: 'ap1',
{ },
label: 'None', {
value: 'none', label: 'Asia Pacific (Mumbai)',
}, value: 'ap2',
], },
mailgunRegions: [ {
{ label: 'US East (Ohio)',
label: 'US Endpoint (api.mailgun.net)', value: 'us2',
value: 'api.mailgun.net', },
}, {
{ label: 'Asia Pacific (Tokyo)',
label: 'EU Endpoint (api.eu.mailgun.net)', value: 'ap3',
value: 'api.eu.mailgun.net', },
}, {
], label: 'US West (Oregon)',
pusherClusters: [ value: 'us3',
{ },
label: 'US East (N. Virginia)', {
value: 'mt1', label: 'Asia Pacific (Sydney)',
}, value: 'ap4',
{ },
label: 'Asia Pacific (Singapore)', {
value: 'ap1', label: 'EU (Ireland)',
}, value: 'eu',
{ },
label: 'Asia Pacific (Mumbai)', {
value: 'ap2', label: 'South America (São Paulo)',
}, value: 'sa1',
{ },
label: 'US East (Ohio)', ],
value: 'us2',
},
{
label: 'Asia Pacific (Tokyo)',
value: 'ap3',
},
{
label: 'US West (Oregon)',
value: 'us3',
},
{
label: 'Asia Pacific (Sydney)',
value: 'ap4',
},
{
label: 'EU (Ireland)',
value: 'eu',
},
{
label: 'South America (São Paulo)',
value: 'sa1',
},
],
} }
}, },
methods: { methods: {
@@ -634,30 +305,33 @@ export default {
broadcast: this.broadcast, broadcast: this.broadcast,
environment: this.environment, environment: this.environment,
storage: this.storage, storage: this.storage,
mailDriver: this.mailDriver, mailDriver: this.mail.driver,
smtp: this.smtp, smtp: this.mail.smtp,
mailgun: this.mailgun, mailgun: this.mail.mailgun,
ses: this.ses, ses: this.mail.ses,
postmark: this.postmark, postmark: this.mail.postmark,
}) })
.then(() => { .then(() => {
// Redirect to next step // Redirect to next step
this.$router.push({ name: 'AppSetup' }) this.$router.push({ name: 'AppSetup' })
}) })
.catch((error) => { .catch((error) => {
if (error.response.status === 401 && error.response.data.type === 's3-connection-error') { if (error.response.status === 401 && error.response.data.type === 's3-connection-error') {
events.$emit('alert:open', { events.$emit('alert:open', {
title: 'S3 Connection Error - Wrong Credentials or Not Permitted', title: 'S3 Connection Error - Wrong Credentials or Not Permitted',
message: error.response.data.message, message: error.response.data.message,
}) })
} else if (error.response.status === 401 && error.response.data.type === 'mailer-connection-error') { } else if (
events.$emit('alert:open', { error.response.status === 401 &&
title: 'Mailer Connection Error - Wrong Credentials', error.response.data.type === 'mailer-connection-error'
message: error.response.data.message, ) {
}) events.$emit('alert:open', {
} else { title: 'Mailer Connection Error - Wrong Credentials',
this.isError = true message: error.response.data.message,
} })
} else {
this.isError = true
}
}) })
.finally(() => { .finally(() => {
this.isLoading = false this.isLoading = false
@@ -666,11 +340,11 @@ export default {
}, },
beforeMount() { beforeMount() {
if (this.$root.$data.config.isSetupWizardDebug) { if (this.$root.$data.config.isSetupWizardDebug) {
this.mailDriver = 'smtp'
this.environment = 'local' this.environment = 'local'
this.storage.driver = 'local' this.storage.driver = 'local'
this.smtp = { this.mail.driver = 'smtp'
this.mail.smtp = {
host: 'test.mail.com', host: 'test.mail.com',
port: 445, port: 445,
username: 'howdy@hi5ve.digital', username: 'howdy@hi5ve.digital',

1
src/Domain/Settings/Controllers/StoreEmailCredentialsController.php
View File

@@ -55,6 +55,7 @@ class StoreEmailCredentialsController
'session_token' => $request->input('ses.session_token'), 'session_token' => $request->input('ses.session_token'),
'identity' => $request->input('ses.sender'), 'identity' => $request->input('ses.sender'),
]), ]),
default => null
}; };
$mail = [ $mail = [

1
src/Domain/SetupWizard/Controllers/StoreEnvironmentSettingsController.php
View File

@@ -62,6 +62,7 @@ class StoreEnvironmentSettingsController extends Controller
'session_token' => $request->input('ses.session_token'), 'session_token' => $request->input('ses.session_token'),
'identity' => $request->input('ses.sender'), 'identity' => $request->input('ses.sender'),
]), ]),
default => null
}; };
$setup = [ $setup = [