add mail sender in setting

resources/scripts/admin/views/settings/mail-sender/SmtpDriver.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- Host -->
+  <BaseInputGroup
+    :label="$t(`${pre_t}.host`)"
+    :error="v$.host.$error && v$.host.$errors[0].$message"
+    required
+  >
+    <BaseInput
+      v-model.trim="mailSenderStore.smtpConfig.host"
+      :invalid="v$.host.$error"
+      type="text"
+      @input="v$.host.$touch()"
+    />
+  </BaseInputGroup>
+
+  <!-- Port -->
+  <BaseInputGroup
+    :label="$t(`${pre_t}.port`)"
+    :error="v$.port.$error && v$.port.$errors[0].$message"
+    required
+  >
+    <BaseInput
+      v-model.trim="mailSenderStore.smtpConfig.port"
+      type="text"
+      :invalid="v$.port.$error"
+      @input="v$.port.$touch()"
+    />
+  </BaseInputGroup>
+
+  <!-- Username -->
+  <BaseInputGroup :label="$t(`${pre_t}.username`)">
+    <BaseInput v-model.trim="mailSenderStore.smtpConfig.username" type="text" />
+  </BaseInputGroup>
+
+  <!-- Password -->
+  <BaseInputGroup :label="$t(`${pre_t}.password`)">
+    <BaseInput
+      v-model="mailSenderStore.smtpConfig.password"
+      :type="getInputType"
+    >
+      <template #right>
+        <BaseIcon
+          v-if="isShowPassword"
+          class="mr-1 text-gray-500 cursor-pointer"
+          name="EyeOffIcon"
+          @click="isShowPassword = !isShowPassword"
+        />
+        <BaseIcon
+          v-else
+          class="mr-1 text-gray-500 cursor-pointer"
+          name="EyeIcon"
+          @click="isShowPassword = !isShowPassword"
+        />
+      </template>
+    </BaseInput>
+  </BaseInputGroup>
+
+  <!-- Encryption -->
+  <BaseInputGroup
+    :label="$t(`${pre_t}.encryption`)"
+    :error="v$.encryption.$error && v$.encryption.$errors[0].$message"
+    required
+  >
+    <BaseMultiselect
+      v-model.trim="mailSenderStore.smtpConfig.encryption"
+      :options="encryptions"
+      :searchable="true"
+      :show-labels="false"
+      :placeholder="$t('general.select_option')"
+      :invalid="v$.encryption.$error"
+      @input="v$.encryption.$touch()"
+    />
+  </BaseInputGroup>
+</template>
+
+<script setup>
+import { computed, ref, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, numeric, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+
+const pre_t = 'settings.mail_sender.smtp_config'
+const { t } = useI18n()
+
+const props = defineProps({
+  mailSenderStore: {
+    type: Object,
+    require: true,
+    default: Object,
+  },
+})
+let isShowPassword = ref(false)
+const getInputType = computed(() => {
+  if (isShowPassword.value) {
+    return 'text'
+  }
+  return 'password'
+})
+const encryptions = props.mailSenderStore.mail_encryptions
+
+const rules = computed(() => {
+  return {
+    host: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    port: {
+      required: helpers.withMessage(t('validation.required'), required),
+      numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
+    },
+    encryption: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+  }
+})
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => props.mailSenderStore.smtpConfig)
+)
+</script>