add mail configuration

app/Http/Controllers/EnvironmentController.php

@@ -75,9 +75,19 @@ class EnvironmentController extends Controller
             'mail_port' => config('mail.port'),
             'mail_username' => config('mail.username'),
             'mail_password' => config('mail.password'),
-            'mail_encryption' => config('mail.encryption')
+            'mail_encryption' => config('mail.encryption'),
+            'from_name' => config('mail.from.name'),
+            'from_mail' => config('mail.from.address'),
+            'mail_mailgun_endpoint' => config('services.mailgun.endpoint'),
+            'mail_mailgun_domain' => config('services.mailgun.domain'),
+            'mail_mailgun_secret' => config('services.mailgun.secret'),
+            'mail_sparkpost_secret' => config('services.sparkpost.secret'),
+            'mail_ses_key' => config('services.ses.key'),
+            'mail_ses_secret' => config('services.ses.secret'),
+            'mail_mandrill_secret' => config('services.mandrill.secret'),
         ];
 
+
         return response()->json($MailData);
     }
 

app/Http/Requests/MailEnvironmentRequest.php

@@ -23,13 +23,85 @@ class MailEnvironmentRequest extends FormRequest
      */
     public function rules()
     {
-        return [
+        switch ($this->get('mail_driver')) {
-            'mail_driver'           => 'required|string|max:50',
+            case 'smtp':
-            'mail_host'             => 'required|string|max:50',
+                return [
-            'mail_port'             => 'required|max:50',
+                    'mail_driver'           => 'required|string|max:50',
-            'mail_username'         => 'required|string|max:50',
+                    'mail_host'             => 'required|string|max:50',
-            'mail_password'         => 'required|string|max:50',
+                    'mail_port'             => 'required|max:50',
-            'mail_encryption'       => 'required|string|max:50',
+                    'mail_username'         => 'required|string|max:50',
-        ];
+                    'mail_password'         => 'required|string|max:50',
+                    'mail_encryption'       => 'required|string|max:50',
+                    'from_name'             => 'required|string|max:50',
+                    'from_mail'             => 'required|string|max:50',
+                ];
+                break;
+
+            case 'mailgun':
+                return [
+                    'mail_driver'           => 'required|string|max:50',
+                    'mail_host'             => 'required|string|max:50',
+                    'mail_port'             => 'required|max:50',
+                    'mail_mailgun_domain'   => 'required|string|max:50',
+                    'mail_mailgun_secret'   => 'required|string|max:50',
+                    'mail_mailgun_endpoint' => 'required|string|max:50',
+                    'mail_encryption'       => 'required|string|max:50',
+                    'from_name'             => 'required|string|max:50',
+                    'from_mail'             => 'required|string|max:50',
+                ];
+                break;
+
+            case 'sparkpost':
+                return [
+                    'mail_driver'           => 'required|string|max:50',
+                    'mail_host'             => 'required|string|max:50',
+                    'mail_port'             => 'required|max:50',
+                    'mail_sparkpost_secret' => 'required|string|max:50',
+                    'mail_encryption'       => 'required|string|max:50',
+                    'from_name'             => 'required|string|max:50',
+                    'from_mail'             => 'required|string|max:50',
+                ];
+                break;
+
+            case 'ses':
+                return [
+                    'mail_driver'           => 'required|string|max:50',
+                    'mail_host'             => 'required|string|max:50',
+                    'mail_port'             => 'required|max:50',
+                    'mail_ses_key'          => 'required|string|max:50',
+                    'mail_ses_secret'       => 'required|string|max:50',
+                    'mail_encryption'       => 'required|string|max:50',
+                    'from_name'             => 'required|string|max:50',
+                    'from_mail'             => 'required|string|max:50',
+                ];
+                break;
+
+            case 'mail':
+                return [
+                    'from_name'             => 'required|string|max:50',
+                    'from_mail'             => 'required|string|max:50',
+                ];
+                break;
+
+            case 'sendmail':
+                return [
+                    'from_name'             => 'required|string|max:50',
+                    'from_mail'             => 'required|string|max:50',
+                ];
+                break;
+
+            case 'mandrill':
+                return [
+                    'mail_driver'           => 'required|string|max:50',
+                    'mail_host'             => 'required|string|max:50',
+                    'mail_port'             => 'required|max:50',
+                    'mail_mandrill_secret'  => 'required|string|max:50',
+                    'mail_encryption'       => 'required|string|max:50',
+                    'from_name'             => 'required|string|max:50',
+                    'from_mail'             => 'required|string|max:50',
+                ];
+                break;
+        }
+
     }
 }

app/Space/EnvironmentManager.php

@@ -94,33 +94,14 @@ class EnvironmentManager
      */
     public function saveMailVariables(MailEnvironmentRequest $request)
     {
-        $oldMailData =
-        'MAIL_DRIVER='.config('mail.driver')."\n".
-        'MAIL_HOST='.config('mail.host')."\n".
-        'MAIL_PORT='.config('mail.port')."\n".
-        'MAIL_USERNAME='.config('mail.username')."\n".
-        'MAIL_PASSWORD='.config('mail.password')."\n".
-        'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n";
 
-        $newMailData =
+        $mailData = $this->getMailData($request);
-        'MAIL_DRIVER='.$request->mail_driver."\n".
-        'MAIL_HOST='.$request->mail_host."\n".
-        'MAIL_PORT='.$request->mail_port."\n".
-        'MAIL_USERNAME='.$request->mail_username."\n".
-        'MAIL_PASSWORD='.$request->mail_password."\n".
-        'MAIL_ENCRYPTION='.$request->mail_encryption."\n\n";
 
         try {
 
             file_put_contents($this->envPath, str_replace(
-                $oldMailData,
+                $mailData['old_mail_data'],
-                $newMailData,
+                $mailData['new_mail_data'],
-                file_get_contents($this->envPath)
-            ));
-
-            file_put_contents($this->envPath, str_replace(
-                $oldMailData,
-                $newMailData,
                 file_get_contents($this->envPath)
             ));
 
@@ -135,6 +116,132 @@ class EnvironmentManager
         ];
     }
 
+    private function getMailData($request)
+    {
+        $mailCredential = "";
+        $otherCredential = "";
+        $oldMailOtherCredential = "";
+
+        if(env('MAIL_FROM_ADDRESS') && env('MAIL_FROM_NAME')) {
+            $oldMailOtherCredential =
+                'MAIL_FROM_ADDRESS='.config('mail.from.address')."\n".
+                'MAIL_FROM_NAME='.config('mail.from.name')."\n\n";
+        }
+
+        $oldMailCredential =
+            'MAIL_USERNAME='.config('mail.username')."\n".
+            'MAIL_PASSWORD='.config('mail.password')."\n";
+
+        switch ($request->mail_driver) {
+            case 'smtp':
+                $mailCredential=
+                    'MAIL_USERNAME='.$request->mail_username."\n".
+                    'MAIL_PASSWORD='.$request->mail_password."\n";
+                break;
+
+            case 'mailgun':
+                $mailCredential = $oldMailCredential;
+                $otherCredential=
+                    'MAILGUN_DOMAIN='.$request->mail_mailgun_domain."\n".
+                    'MAILGUN_SECRET='.$request->mail_mailgun_secret."\n".
+                    'MAILGUN_ENDPOINT='.$request->mail_mailgun_endpoint."\n\n";
+
+                if(env('MAILGUN_DOMAIN') && env('MAILGUN_SECRET') && env('MAILGUN_ENDPOINT')) {
+                    $oldMailOtherCredential =
+                        'MAILGUN_DOMAIN='.config('services.mailgun.domain')."\n".
+                        'MAILGUN_SECRET='.config('services.mailgun.secret')."\n".
+                        'MAILGUN_ENDPOINT='.config('services.mailgun.endpoint')."\n\n";
+                }
+
+                break;
+
+            case 'sparkpost':
+                $mailCredential = $oldMailCredential;
+                $otherCredential=
+                    'SPARKPOST_SECRET='.$request->mail_sparkpost_secret."\n\n";
+
+                if(env('SPARKPOST_SECRET')) {
+                    $oldMailOtherCredential =
+                        'SPARKPOST_SECRET='.config('services.sparkpost.secret')."\n\n";
+                }
+                break;
+
+            case 'ses':
+                $mailCredential = $oldMailCredential;
+                $otherCredential=
+                    'SES_KEY='.$request->mail_ses_key."\n".
+                    'SES_SECRET='.$request->mail_ses_secret."\n\n";
+
+                if(env('SES_KEY') && env('SES_SECRET')) {
+                    $oldMailOtherCredential =
+                        'SES_KEY='.config('services.ses.key')."\n".
+                        'SES_SECRET='.config('services.ses.secret')."\n\n";
+                }
+                break;
+
+            case 'mail':
+                $existMailData = 'MAIL_DRIVER='.$request->mail_driver."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    $oldMailCredential.
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+                    'MAIL_FROM_NAME='.$request->from_name."\n\n".
+                    $otherCredential;
+                break;
+
+            case 'sendmail':
+                $existMailData = 'MAIL_DRIVER='.$request->mail_driver."\n".
+                    'MAIL_HOST='.config('mail.host')."\n".
+                    'MAIL_PORT='.config('mail.port')."\n".
+                    $oldMailCredential.
+                    'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+                    'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+                    'MAIL_FROM_NAME='.$request->from_name."\n\n".
+                    $otherCredential;
+                break;
+
+            case 'mandrill':
+                $mailCredential = $oldMailCredential;
+                $otherCredential=
+                    'MANDRILL_API_KEY='.$request->mail_mandrill_secret."\n\n";
+
+                if(env('MANDRILL_API_KEY')) {
+                    $oldMailOtherCredential =
+                        'MANDRILL_API_KEY='.config('services.mandrill.secret')."\n\n";
+                }
+                break;
+
+            default:
+                $mailCredential = "\n";
+                $otherCredential = "\n";
+                break;
+        }
+
+        $oldMailData =
+            'MAIL_DRIVER='.config('mail.driver')."\n".
+            'MAIL_HOST='.config('mail.host')."\n".
+            'MAIL_PORT='.config('mail.port')."\n".
+            $oldMailCredential.
+            'MAIL_ENCRYPTION='.config('mail.encryption')."\n\n".
+            $oldMailOtherCredential;
+
+        $newMailData = $existMailData ??
+            'MAIL_DRIVER='.$request->mail_driver."\n".
+            'MAIL_HOST='.$request->mail_host."\n".
+            'MAIL_PORT='.$request->mail_port."\n".
+            $mailCredential.
+            'MAIL_ENCRYPTION='.$request->mail_encryption."\n\n".
+            'MAIL_FROM_ADDRESS='.$request->from_mail."\n".
+            'MAIL_FROM_NAME='.$request->from_name."\n\n".
+            $otherCredential;
+
+        return [
+            'old_mail_data' => $oldMailData,
+            'new_mail_data' => $newMailData
+        ];
+    }
+
     /**
      *
      * @param DatabaseEnvironmentRequest $request

config/services.php

@@ -34,6 +34,10 @@ return [
         'api_key' => env('SENDGRID_API_KEY'),
     ],
 
+    'mandrill' => [
+        'secret' => env('MANDRILL_API_KEY'),
+    ],
+
     'stripe' => [
         'model' => Crater\User::class,
         'key' => env('STRIPE_KEY'),

resources/assets/js/plugins/en.js

@@ -565,9 +565,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.'
     },

resources/assets/js/views/settings/MailConfig.vue

@@ -7,175 +7,49 @@
           {{ $t('settings.mail.mail_config_desc') }}
         </p>
       </div>
-      <form action="" @submit.prevent="saveEmailConfig()">
+      <div v-if="mailConfigData">
-        <div class="row">
+        <component
-          <div class="col-md-6 my-2">
+          :is="mail_driver"
-            <label class="form-label">{{ $t('settings.mail.driver') }}</label>
+          :config-data="mailConfigData"
-            <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('settings.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('settings.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('settings.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('settings.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('settings.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>
-        <base-button
           :loading="loading"
-          class="pull-right mt-4"
+          :mail-drivers="mail_drivers"
-          icon="save"
+          @on-change-driver="(val) => mail_driver = mailConfigData.mail_driver = val"
-          color="theme"
+          @submit-data="saveEmailConfig"
-          type="submit"
+        />
-        >
+      </div>
-          {{ $t('general.save') }}
-        </base-button>
-      </form>
     </div>
   </div>
 </template>
 <script>
 import MultiSelect from 'vue-multiselect'
 import { validationMixin } from 'vuelidate'
-import Ls from '../../services/ls'
+import Smtp from './mailDriver/Smtp'
-const { required, email, numeric } = require('vuelidate/lib/validators')
+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: {
+      mailConfigData: null,
-        mail_driver: '',
+      mail_driver: 'smtp',
-        mail_host: '',
-        mail_port: null,
-        mail_username: '',
-        mail_password: '',
-        mail_encryption: ''
-      },
       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
-      }
-    }
-  },
   mounted () {
     this.loadData()
   },
@@ -191,17 +65,14 @@ export default {
       }
       if (mailData.data) {
         this.mailConfigData = mailData.data
+        this.mail_driver = mailData.data.mail_driver
       }
       this.loading = false
     },
-    async saveEmailConfig () {
+    async saveEmailConfig (mailConfigData) {
-      this.$v.mailConfigData.$touch()
-      if (this.$v.mailConfigData.$invalid) {
-        return true
-      }
       this.loading = true
       try {
-        let response = await window.axios.post('/api/settings/environment/mail', this.mailConfigData)
+        let response = await window.axios.post('/api/settings/environment/mail', mailConfigData)
         if (response.data.success) {
           window.toastr['success'](this.$t('wizard.success.' + response.data.success))
         } else {

resources/assets/js/views/settings/mailDriver/Basic.vue

@@ -0,0 +1,156 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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>

resources/assets/js/views/settings/mailDriver/Mailgun.vue

@@ -0,0 +1,276 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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 my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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('settings.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: '',
+        from_mail: '',
+        from_name: ''
+      }
+    }
+  },
+  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>

resources/assets/js/views/settings/mailDriver/Mandrill.vue

@@ -0,0 +1,228 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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 my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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: '',
+        from_mail: '',
+        from_name: ''
+      }
+    }
+  },
+  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>

resources/assets/js/views/settings/mailDriver/Ses.vue

@@ -0,0 +1,251 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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 my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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: '',
+        from_mail: '',
+        from_name: ''
+      }
+    }
+  },
+  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>

resources/assets/js/views/settings/mailDriver/Smtp.vue

@@ -0,0 +1,251 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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('settings.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('settings.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 my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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: '',
+        from_mail: '',
+        from_name: ''
+      }
+    }
+  },
+  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>

resources/assets/js/views/settings/mailDriver/Sparkpost.vue

@@ -0,0 +1,231 @@
+<template>
+  <form @submit.prevent="saveEmailConfig()">
+    <div class="row">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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('settings.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 my-2">
+      <div class="col-md-6 my-2">
+        <label class="form-label">{{ $t('settings.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('settings.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('settings.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: '',
+        from_mail: '',
+        from_name: ''
+      }
+    }
+  },
+  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>