vuefilemanager/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue

<template>
    <PageTab :is-loading="isLoading">
        <ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="card shadow-card">
            <FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>

			<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="Select your 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-red': 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-red': 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="smtp.username" placeholder="Type your mail username" type="text" :class="{ 'border-red': 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-red': errors[0] }" />
					</AppInputText>
				</ValidationProvider>

				<ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" 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>
			</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-red': 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-red': errors[0] }" />
					</AppInputText>
				</ValidationProvider>

				<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
					<AppInputText title="Endpoint" :error="errors[0]">
						<input class="focus-border-theme input-dark" v-model="mailgun.endpoint" placeholder="Type your endpoint" type="text" :class="{ 'border-red': 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-red': 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-red': 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-red': errors[0] }" />
					</AppInputText>
				</ValidationProvider>

				<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
					<AppInputText title="Default Region" :error="errors[0]">
						<input class="focus-border-theme input-dark" v-model="ses.default_region" placeholder="Type your default region" type="text" :class="{ 'border-red': errors[0] }" />
					</AppInputText>
				</ValidationProvider>

				<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
					<AppInputText title="Session Token" :error="errors[0]">
						<input class="focus-border-theme input-dark" v-model="ses.session_token" placeholder="Type your session token" type="text" :class="{ 'border-red': errors[0] }" />
					</AppInputText>
				</ValidationProvider>
			</div>

            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
                {{ $t('admin_settings.email.save_button') }}
            </ButtonBase>
        </ValidationObserver>
    </PageTab>
</template>

<script>
import AppInputText from '../../../../components/Admin/AppInputText'
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
import SelectInput from '../../../../components/Others/Forms/SelectInput'
import ImageInput from '../../../../components/Others/Forms/ImageInput'
import FormLabel from '../../../../components/Others/Forms/FormLabel'
import ButtonBase from '../../../../components/FilesView/ButtonBase'
import SetupBox from '../../../../components/Others/Forms/SetupBox'
import PageTab from '../../../../components/Others/Layout/PageTab'
import InfoBox from '../../../../components/Others/Forms/InfoBox'
import { required } from 'vee-validate/dist/rules'
import { events } from '../../../../bus'
import axios from 'axios'
import {mapGetters} from "vuex";

export default {
    name: 'AppAppearance',
    components: {
        AppInputText,
        ValidationObserver,
        ValidationProvider,
        PageTabGroup,
        SelectInput,
        ImageInput,
        ButtonBase,
        FormLabel,
        SetupBox,
        required,
        PageTab,
        InfoBox,
    },
	computed: {
		...mapGetters([
			'mailEncryptionList',
			'mailDriverList',
		]),
	},
    data() {
        return {
            isLoading: false,
            isSendingRequest: false,
			mailDriver: undefined,
			ses: {
				access_key: undefined,
				secret_access_key: undefined,
				default_region: undefined,
				session_token: undefined,
			},
			smtp: {
				host: undefined,
				port: undefined,
				username: undefined,
				password: undefined,
				encryption: undefined,
			},
			mailgun: {
				domain: undefined,
				secret: undefined,
				endpoint: undefined,
			},
			postmark: {
				token: undefined,
			},
        }
    },
    methods: {
        async EmailSetupSubmit() {

			// Validate fields
			const isValid = await this.$refs.EmailSetup.validate()

			if (!isValid) return

			// Start loading
			this.isSendingRequest = true

			// Send request to get verify account
			axios
				.post('/api/admin/settings/email', {
					environment: this.environment,
					storage: this.storage,
					mailDriver: this.mailDriver,
					smtp: this.smtp,
					mailgun: this.mailgun,
					ses: this.ses,
					postmark: this.postmark,
				})
				.then(() => {
					events.$emit('toaster', {
						type: 'success',
						message: this.$t('toaster.email_set'),
					})
				})
				.catch((error) => {
					events.$emit('alert:open', {
						title: this.$t('popup_error.title'),
						message: this.$t('popup_error.message'),
					})

				})
				.finally(() => {
					this.isSendingRequest = false
				})
        },
    },
}
</script>