add mail configuration

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 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="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
+      <div v-if="mailConfigData">
+        <component
+          :is="mail_driver"
+          :config-data="mailConfigData"
           :loading="loading"
-          class="pull-right mt-4"
-          icon="save"
-          color="theme"
-          type="submit"
-        >
-          {{ $t('general.save') }}
-        </base-button>
-      </form>
+          :mail-drivers="mail_drivers"
+          @on-change-driver="(val) => mail_driver = mailConfigData.mail_driver = val"
+          @submit-data="saveEmailConfig"
+        />
+      </div>
     </div>
   </div>
 </template>
 <script>
 import MultiSelect from 'vue-multiselect'
 import { validationMixin } from 'vuelidate'
-import Ls from '../../services/ls'
-const { required, email, numeric } = require('vuelidate/lib/validators')
+import Smtp from './mailDriver/Smtp'
+import Mailgun from './mailDriver/Mailgun'
+import Sparkpost from './mailDriver/Sparkpost'
+import Ses from './mailDriver/Ses'
+import Basic from './mailDriver/Basic'
+import Mandrill from './mailDriver/Mandrill'
 
 export default {
   components: {
-    MultiSelect
+    MultiSelect,
+    Smtp,
+    Mailgun,
+    Sparkpost,
+    Ses,
+    sendmail: Basic,
+    mail: Basic,
+    Mandrill
   },
   mixins: [validationMixin],
   data () {
     return {
-      mailConfigData: {
-        mail_driver: '',
-        mail_host: '',
-        mail_port: null,
-        mail_username: '',
-        mail_password: '',
-        mail_encryption: ''
-      },
+      mailConfigData: null,
+      mail_driver: 'smtp',
       loading: false,
       mail_drivers: []
     }
   },
-  validations: {
-    mailConfigData: {
-      mail_driver: {
-        required
-      },
-      mail_host: {
-        required
-      },
-      mail_port: {
-        required,
-        numeric
-      },
-      mail_username: {
-        required
-      },
-      mail_password: {
-        required
-      },
-      mail_encryption: {
-        required
-      }
-    }
-  },
   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 () {
-      this.$v.mailConfigData.$touch()
-      if (this.$v.mailConfigData.$invalid) {
-        return true
-      }
+    async saveEmailConfig (mailConfigData) {
       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 {