You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
7.0 KiB

  1. <template lang='pug'>
  2. v-container(fluid, grid-list-lg)
  3. v-layout(row, wrap)
  4. v-flex(xs12)
  5. .admin-header
  6. img.animated.fadeInUp(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;')
  7. .admin-header-title
  8. .headline.primary--text.animated.fadeInLeft {{ $t('admin:mail.title') }}
  9. .subheading.grey--text.animated.fadeInLeft.wait-p4s {{ $t('admin:mail.subtitle') }}
  10. v-spacer
  11. v-btn.animated.fadeInDown(color='success', depressed, @click='save', large)
  12. v-icon(left) check
  13. span {{$t('common:actions.apply')}}
  14. v-form.pt-3
  15. v-layout(row wrap)
  16. v-flex(lg6 xs12)
  17. v-form
  18. v-card.wiki-form.animated.fadeInUp
  19. v-toolbar(color='primary', dark, dense, flat)
  20. v-toolbar-title
  21. .subheading {{ $t('admin:mail.configuration') }}
  22. v-subheader Sender
  23. .px-3.pb-3
  24. v-text-field(
  25. outline
  26. v-model='config.senderName'
  27. label='Sender Name'
  28. required
  29. :counter='255'
  30. prepend-icon='person'
  31. )
  32. v-text-field(
  33. outline
  34. v-model='config.senderEmail'
  35. label='Sender Email'
  36. required
  37. :counter='255'
  38. prepend-icon='email'
  39. )
  40. v-divider
  41. v-subheader SMTP Settings
  42. .px-3.pb-3
  43. v-text-field(
  44. outline
  45. v-model='config.host'
  46. label='Host'
  47. required
  48. :counter='255'
  49. prepend-icon='memory'
  50. )
  51. v-text-field(
  52. outline
  53. v-model='config.port'
  54. label='Port'
  55. required
  56. prepend-icon='router'
  57. persistent-hint
  58. hint='Usually 465 (recommended), 587 or 25.'
  59. style='max-width: 300px;'
  60. )
  61. v-switch(
  62. v-model='config.secure'
  63. label='Secure (TLS)'
  64. color='primary'
  65. persistent-hint
  66. hint='Should be enabled when using port 465, otherwise turned off (587 or 25).'
  67. prepend-icon='vpn_lock'
  68. )
  69. v-text-field.mt-3(
  70. outline
  71. v-model='config.user'
  72. label='Username'
  73. required
  74. :counter='255'
  75. prepend-icon='lock_outline'
  76. )
  77. v-text-field(
  78. outline
  79. v-model='config.pass'
  80. label='Password'
  81. required
  82. prepend-icon='lock'
  83. type='password'
  84. )
  85. v-flex(lg6 xs12)
  86. v-card.wiki-form.animated.fadeInUp.wait-p2s
  87. v-form
  88. v-toolbar(color='primary', dark, dense, flat)
  89. v-toolbar-title
  90. .subheading {{ $t('admin:mail.dkim') }}
  91. .pa-3
  92. .body-2.grey--text.text--darken-2 DKIM (DomainKeys Identified Mail) provides a layer of security on all emails sent from Wiki.js by providing the means for recipients to validate the domain name and ensure the message authenticity.
  93. v-switch(
  94. v-model='config.useDKIM'
  95. label='Use DKIM'
  96. color='primary'
  97. prepend-icon='vpn_key'
  98. )
  99. v-text-field(
  100. outline
  101. v-model='config.dkimDomainName'
  102. label='Domain Name'
  103. :counter='255'
  104. prepend-icon='vpn_key'
  105. :disabled='!config.useDKIM'
  106. )
  107. v-text-field(
  108. outline
  109. v-model='config.dkimKeySelector'
  110. label='Key Selector'
  111. :counter='255'
  112. prepend-icon='vpn_key'
  113. :disabled='!config.useDKIM'
  114. )
  115. v-text-field(
  116. outline
  117. v-model='config.dkimPrivateKey'
  118. label='Private Key'
  119. prepend-icon='vpn_key'
  120. persistent-hint
  121. hint='Private key for the selector in PEM format'
  122. :disabled='!config.useDKIM'
  123. )
  124. </template>
  125. <script>
  126. import _ from 'lodash'
  127. import { get } from 'vuex-pathify'
  128. import mailConfigQuery from 'gql/admin/mail/mail-query-config.gql'
  129. import mailUpdateConfigMutation from 'gql/admin/mail/mail-mutation-save-config.gql'
  130. export default {
  131. data() {
  132. return {
  133. config: {
  134. senderName: '',
  135. senderEmail: '',
  136. host: '',
  137. port: 0,
  138. secure: false,
  139. user: '',
  140. pass: '',
  141. useDKIM: false,
  142. dkimDomainName: '',
  143. dkimKeySelector: '',
  144. dkimPrivateKey: ''
  145. }
  146. }
  147. },
  148. computed: {
  149. darkMode: get('site/dark')
  150. },
  151. methods: {
  152. async save () {
  153. try {
  154. await this.$apollo.mutate({
  155. mutation: mailUpdateConfigMutation,
  156. variables: {
  157. senderName: this.config.senderName || '',
  158. senderEmail: this.config.senderEmail || '',
  159. host: this.config.host || '',
  160. port: _.toSafeInteger(this.config.port) || 0,
  161. secure: this.config.secure || false,
  162. user: this.config.user || '',
  163. pass: this.config.pass || '',
  164. useDKIM: this.config.useDKIM || false,
  165. dkimDomainName: this.config.dkimDomainName || '',
  166. dkimKeySelector: this.config.dkimKeySelector || '',
  167. dkimPrivateKey: this.config.dkimPrivateKey || ''
  168. },
  169. watchLoading (isLoading) {
  170. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-update')
  171. }
  172. })
  173. this.$store.commit('showNotification', {
  174. style: 'success',
  175. message: 'Configuration saved successfully.',
  176. icon: 'check'
  177. })
  178. } catch (err) {
  179. this.$store.commit('pushGraphError', err)
  180. }
  181. }
  182. },
  183. apollo: {
  184. config: {
  185. query: mailConfigQuery,
  186. fetchPolicy: 'network-only',
  187. update: (data) => _.cloneDeep(data.mail.config),
  188. watchLoading (isLoading) {
  189. this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-refresh')
  190. }
  191. }
  192. }
  193. }
  194. </script>
  195. <style lang='scss'>
  196. </style>