feat: account verification + mail config in admin area

client/components/admin.vue

@@ -66,6 +66,9 @@
           v-list-tile(to='/api')
             v-list-tile-avatar: v-icon call_split
             v-list-tile-title {{ $t('admin:api.title') }}
+          v-list-tile(to='/mail')
+            v-list-tile-avatar: v-icon email
+            v-list-tile-title {{ $t('admin:mail.title') }}
           v-list-tile(to='/system')
             v-list-tile-avatar: v-icon tune
             v-list-tile-title {{ $t('admin:system.title') }}
@@ -121,6 +124,7 @@ const router = new VueRouter({
     { path: '/search', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-search.vue') },
     { path: '/storage', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-storage.vue') },
     { path: '/api', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-api.vue') },
+    { path: '/mail', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-mail.vue') },
     { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-system.vue') },
     { path: '/utilities', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-utilities.vue') },
     { path: '/dev', component: () => import(/* webpackChunkName: "admin-dev" */ './admin/admin-dev.vue') },

client/components/admin/admin-mail.vue

@@ -0,0 +1,206 @@
+<template lang='pug'>
+  v-container(fluid, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .admin-header
+          img(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;')
+          .admin-header-title
+            .headline.primary--text {{ $t('admin:mail.title') }}
+            .subheading.grey--text {{ $t('admin:mail.subtitle') }}
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large)
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
+        v-form.pt-3
+          v-layout(row wrap)
+            v-flex(lg6 xs12)
+              v-form
+                v-card.wiki-form
+                  v-toolbar(color='primary', dark, dense, flat)
+                    v-toolbar-title
+                      .subheading {{ $t('admin:mail.configuration') }}
+                  v-subheader Sender
+                  .px-3.pb-3
+                    v-text-field(
+                      outline
+                      v-model='config.senderName'
+                      label='Sender Name'
+                      required
+                      :counter='255'
+                      prepend-icon='person'
+                      )
+                    v-text-field(
+                      outline
+                      v-model='config.senderEmail'
+                      label='Sender Email'
+                      required
+                      :counter='255'
+                      prepend-icon='email'
+                      )
+                  v-divider
+                  v-subheader SMTP Settings
+                  .px-3.pb-3
+                    v-text-field(
+                      outline
+                      v-model='config.host'
+                      label='Host'
+                      required
+                      :counter='255'
+                      prepend-icon='memory'
+                      )
+                    v-text-field(
+                      outline
+                      v-model='config.port'
+                      label='Port'
+                      required
+                      prepend-icon='router'
+                      persistent-hint
+                      hint='Usually 465 (recommended), 587 or 25.'
+                      style='max-width: 300px;'
+                      )
+                    v-switch(
+                      v-model='config.secure'
+                      label='Secure (TLS)'
+                      color='primary'
+                      persistent-hint
+                      hint='Should be enabled when using port 465, otherwise turned off (587 or 25).'
+                      prepend-icon='vpn_lock'
+                      )
+                    v-text-field.mt-3(
+                      outline
+                      v-model='config.user'
+                      label='Username'
+                      required
+                      :counter='255'
+                      prepend-icon='lock_outline'
+                      )
+                    v-text-field(
+                      outline
+                      v-model='config.pass'
+                      label='Password'
+                      required
+                      prepend-icon='lock'
+                      type='password'
+                      )
+
+            v-flex(lg6 xs12)
+              v-card.wiki-form
+                v-form
+                  v-toolbar(color='primary', dark, dense, flat)
+                    v-toolbar-title
+                      .subheading {{ $t('admin:mail.dkim') }}
+                  .pa-3
+                    .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.
+                    v-switch(
+                      v-model='config.useDKIM'
+                      label='Use DKIM'
+                      color='primary'
+                      prepend-icon='vpn_key'
+                      )
+                    v-text-field(
+                      outline
+                      v-model='config.dkimDomainName'
+                      label='Domain Name'
+                      :counter='255'
+                      prepend-icon='vpn_key'
+                      :disabled='!config.useDKIM'
+                      )
+                    v-text-field(
+                      outline
+                      v-model='config.dkimKeySelector'
+                      label='Key Selector'
+                      :counter='255'
+                      prepend-icon='vpn_key'
+                      :disabled='!config.useDKIM'
+                      )
+                    v-text-field(
+                      outline
+                      v-model='config.dkimPrivateKey'
+                      label='Private Key'
+                      prepend-icon='vpn_key'
+                      persistent-hint
+                      hint='Private key for the selector in PEM format'
+                      :disabled='!config.useDKIM'
+                      )
+
+</template>
+
+<script>
+import _ from 'lodash'
+import { get, sync } from 'vuex-pathify'
+import mailConfigQuery from 'gql/admin/mail/mail-query-config.gql'
+import mailUpdateConfigMutation from 'gql/admin/mail/mail-mutation-save-config.gql'
+
+export default {
+  data() {
+    return {
+      config: {
+        senderName: '',
+        senderEmail: '',
+        host: '',
+        port: 0,
+        secure: false,
+        user: '',
+        pass: '',
+        useDKIM: false,
+        dkimDomainName: '',
+        dkimKeySelector: '',
+        dkimPrivateKey: ''
+      }
+    }
+  },
+  computed: {
+    darkMode: get('site/dark')
+  },
+  methods: {
+    async save () {
+      try {
+        await this.$apollo.mutate({
+          mutation: mailUpdateConfigMutation,
+          variables: {
+            senderName: this.config.senderName || '',
+            senderEmail: this.config.senderEmail || '',
+            host: this.config.host || '',
+            port: _.toSafeInteger(this.config.port) || 0,
+            secure: this.config.secure || false,
+            user: this.config.user || '',
+            pass: this.config.pass || '',
+            useDKIM: this.config.useDKIM || false,
+            dkimDomainName: this.config.dkimDomainName || '',
+            dkimKeySelector: this.config.dkimKeySelector || '',
+            dkimPrivateKey: this.config.dkimPrivateKey || ''
+          },
+          watchLoading (isLoading) {
+            this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-update')
+          }
+        })
+        this.$store.commit('showNotification', {
+          style: 'success',
+          message: 'Configuration saved successfully.',
+          icon: 'check'
+        })
+      } catch (err) {
+        this.$store.commit('showNotification', {
+          style: 'red',
+          message: err.message,
+          icon: 'warning'
+        })
+      }
+    }
+  },
+  apollo: {
+    config: {
+      query: mailConfigQuery,
+      fetchPolicy: 'network-only',
+      update: (data) => _.cloneDeep(data.mail.config),
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-mail-refresh')
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/graph/admin/mail/mail-mutation-save-config.gql

@@ -0,0 +1,36 @@
+mutation (
+  $senderName: String!,
+  $senderEmail: String!,
+  $host: String!,
+  $port: Int!,
+  $secure: Boolean!,
+  $user: String!,
+  $pass: String!,
+  $useDKIM: Boolean!,
+  $dkimDomainName: String!,
+  $dkimKeySelector: String!,
+  $dkimPrivateKey: String!
+) {
+  mail {
+    updateConfig(
+      senderName: $senderName,
+      senderEmail: $senderEmail,
+      host: $host,
+      port: $port,
+      secure: $secure,
+      user: $user,
+      pass: $pass,
+      useDKIM: $useDKIM,
+      dkimDomainName: $dkimDomainName,
+      dkimKeySelector: $dkimKeySelector,
+      dkimPrivateKey: $dkimPrivateKey
+    ) {
+      responseResult {
+        succeeded
+        errorCode
+        slug
+        message
+      }
+    }
+  }
+}

client/graph/admin/mail/mail-query-config.gql

@@ -0,0 +1,17 @@
+{
+  mail {
+    config {
+      senderName
+      senderEmail
+      host
+      port
+      secure
+      user
+      pass
+      useDKIM
+      dkimDomainName
+      dkimKeySelector
+      dkimPrivateKey
+    }
+  }
+}

client/static/svg/icon-new-post.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="&#1057;&#1083;&#1086;&#1081;_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve" width="100px" height="100px">
+<linearGradient id="SVGID_1__44829" gradientUnits="userSpaceOnUse" x1="32" y1="11" x2="32" y2="53.6696" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1__44829);" d="M56,15.184v-1.183C56,12.347,54.654,11,53,11H11c-1.654,0-3,1.347-3,3.001v1.183  C6.837,15.597,6,16.696,6,18v32c0,1.657,1.343,3,3,3h46c1.657,0,3-1.343,3-3V18C58,16.696,57.163,15.597,56,15.184z M9,17h46  c0.395,0,0.729,0.234,0.892,0.567l-22.138,15.94c-1.049,0.754-2.459,0.754-3.508,0L8.108,17.567C8.271,17.234,8.605,17,9,17z M11,13  h42c0.552,0,1,0.449,1,1.001V15H10v-0.999C10,13.449,10.448,13,11,13z M55,51H9c-0.552,0-1-0.448-1-1V19.953L29.078,35.13  c0.874,0.629,1.897,0.943,2.922,0.943s2.048-0.314,2.922-0.943L56,19.953V50C56,50.552,55.552,51,55,51z"/>
+<linearGradient id="SVGID_2__44829" gradientUnits="userSpaceOnUse" x1="49" y1="11" x2="49" y2="53.6696" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="44" y="47" style="fill:url(#SVGID_2__44829);" width="10" height="2"/>
+<linearGradient id="SVGID_3__44829" gradientUnits="userSpaceOnUse" x1="50" y1="11" x2="50" y2="53.6696" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="46" y="43" style="fill:url(#SVGID_3__44829);" width="8" height="2"/>
+<linearGradient id="SVGID_4__44829" gradientUnits="userSpaceOnUse" x1="19" y1="11" x2="19" y2="53.6696" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="18" y="45" style="fill:url(#SVGID_4__44829);" width="2" height="4"/>
+<linearGradient id="SVGID_5__44829" gradientUnits="userSpaceOnUse" x1="15" y1="11" x2="15" y2="53.6696" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="14" y="45" style="fill:url(#SVGID_5__44829);" width="2" height="4"/>
+<linearGradient id="SVGID_6__44829" gradientUnits="userSpaceOnUse" x1="11" y1="11" x2="11" y2="53.6696" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<rect x="10" y="45" style="fill:url(#SVGID_6__44829);" width="2" height="4"/>
+<linearGradient id="SVGID_7__44829" gradientUnits="userSpaceOnUse" x1="32" y1="20.1667" x2="32" y2="31.2199" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_7__44829);" d="M20.062,20h23.876c0.969,0,1.374,1.238,0.593,1.811l-11.347,8.321  c-0.705,0.517-1.663,0.517-2.368,0l-11.347-8.322C18.688,21.238,19.093,20,20.062,20z"/>
+</svg>