Add special input for Sender setting in Welcome setting group

src/views/settings/components/Inputs.vue

@@ -112,6 +112,7 @@
         <reg-invites-input v-if="[':registrations_open', ':invites_enabled'].includes(setting.key)" :data="data" :setting-group="settingGroup" :setting="setting"/>
         <select-input-with-reduced-labels v-if="reducedSelects" :data="data" :setting-group="settingGroup" :setting="setting"/>
         <specific-multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+        <sender-input v-if="senderInput(setting)" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
         <!-------------------->
         <el-tooltip v-if="canBeDeleted && isTablet" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
           <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
@@ -138,6 +139,7 @@ import {
   RateLimitInput,
   RegInvitesInput,
   SelectInputWithReducedLabels,
+  SenderInput,
   SpecificMultipleSelect } from './inputComponents'
 import { getBooleanValue, processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
@@ -156,6 +158,7 @@ export default {
     RateLimitInput,
     RegInvitesInput,
     SelectInputWithReducedLabels,
+    SenderInput,
     SpecificMultipleSelect
   },
   props: {
@@ -357,6 +360,9 @@ export default {
     renderSingleSelect(type) {
       return !this.reducedSelects && (type === 'module' || (type.includes('atom') && type.includes('dropdown')))
     },
+    senderInput({ key, type }) {
+      return Array.isArray(type) && type.includes('string') && type.includes('tuple') && key === ':sender'
+    },
     update(value, group, key, parents, input, type, nested) {
       const updatedValue = this.renderSingleSelect(type) ? getBooleanValue(value) : value
       nested

src/views/settings/components/inputComponents/SenderInput.vue

@@ -0,0 +1,98 @@
+<template>
+  <div :data-search="setting.key || setting.group" class="sender-input">
+    <el-input
+      :value="sender.email"
+      placeholder="email address"
+      class="email-address-input"
+      @input="updateSender($event, 'email')"/>
+    <el-input
+      :value="sender.nickname"
+      placeholder="nickname"
+      class="nickname-input"
+      @input="updateSender($event, 'nickname')"/>
+  </div>
+</template>
+
+<script>
+import { processNested } from '@/store/modules/normalizers'
+
+export default {
+  name: 'SenderInput',
+  props: {
+    data: {
+      type: [Object, Array],
+      default: function() {
+        return {}
+      }
+    },
+    parents: {
+      type: Array,
+      default: function() {
+        return []
+      },
+      required: false
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    settings() {
+      return this.$store.state.settings.settings
+    },
+    updatedSettings() {
+      return this.$store.state.settings.updatedSettings
+    },
+    sender() {
+      return Object.keys(this.data).length === 0 ? { email: null, nickname: null } : this.data
+    }
+  },
+  methods: {
+    updateSender(value, inputType) {
+      let data
+      if (inputType === 'email') {
+        data = { ...this.sender, email: value }
+      } else {
+        data = { ...this.sender, nickname: value }
+      }
+      this.updateSetting(data, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
+    },
+    updateSetting(value, group, key, input, type) {
+      const assembledData = value.nickname
+        ? [value.nickname, value.email]
+        : value.email
+
+      if (this.parents.length > 0) {
+        const { valueForState,
+          valueForUpdatedSettings,
+          setting } = processNested(value, assembledData, group, key, this.parents.reverse(), this.settings, this.updatedSettings)
+
+        this.$store.dispatch('UpdateSettings',
+          { group, key, input: setting.key, value: valueForUpdatedSettings, type: setting.type })
+        this.$store.dispatch('UpdateState',
+          { group, key, input: setting.key, value: valueForState })
+      } else {
+        this.$store.dispatch('UpdateSettings', { group, key, input, value: assembledData, type })
+        this.$store.dispatch('UpdateState', { group, key, input, value })
+      }
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

src/views/settings/styles/main.scss

@@ -46,6 +46,10 @@
   .el-tabs__header {
     z-index: 2002;
   }
+  .email-address-input {
+    width: 50%;
+    margin-right: 10px;
+  }
   .esshd-list {
     margin: 0;
   }
@@ -175,6 +179,9 @@
     width: 30%;
     margin-right: 8px
   }
+  .nickname-input {
+    width: 50%;
+  }
   .no-top-margin {
     margin-top: 0;
     p {
@@ -254,6 +261,12 @@
     margin-left: 8px;
     margin-right: 10px
   }
+  .sender-input {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    width: 100%;
+  }
   .scale-input {
     width: 47%;
     margin: 0 1% 5px 0