Process ssl options in a separate tab, parse and wrap other setting from HTTP tab

src/store/modules/normalizers.js

@@ -3,8 +3,6 @@ const nonAtomsObjects = ['match_actor', ':match_actor']
 const objects = ['digest', 'pleroma_fe', 'masto_fe', 'poll_limits', 'styling']
 const objectParents = ['mascots']
 
-const groupWithoutKey = settings => settings._value ? settings._value[1] : false
-
 // REFACTOR
 export const parseTuples = (tuples, key) => {
   return tuples.reduce((accum, item) => {
@@ -88,8 +86,7 @@ export const partialUpdate = (group, key) => {
       (group === ':quack' && key === ':meta') ||
       (group === ':mime' && key === ':types') ||
       (group === ':auto_linker' && key === ':opts') ||
-      (group === ':swarm' && key === ':node_blacklist') ||
+      (group === ':swarm' && key === ':node_blacklist')) {
-      (group === ':cors_plug' && [':max_age', ':methods', ':expose', ':headers'].includes(key))) {
     return false
   }
   return true
@@ -110,7 +107,7 @@ export const valueHasTuples = (key, value) => {
 
 export const wrapUpdatedSettings = (group, settings) => {
   return Object.keys(settings).map((key) => {
-    const value = groupWithoutKey(settings[key]) || wrapValues(settings[key])
+    const value = settings[key]._value ? settings[key]._value[1] : wrapValues(settings[key])
     return { group, key, value }
   })
 }
@@ -133,6 +130,8 @@ const wrapValues = settings => {
     } else if (setting === ':ip') {
       const ip = value.split('.').map(s => parseInt(s, 10))
       return { 'tuple': [setting, { 'tuple': ip }] }
+    } else if (setting === ':ssl_options') {
+      return { 'tuple': [setting, wrapValues(value)] }
     } else {
       return { 'tuple': [setting, value] }
     }

src/views/settings/components/Http.vue

@@ -59,7 +59,7 @@ export default {
       return this.settings.description.find(setting => setting.group === ':http_signatures')
     },
     httpSignaturesData() {
-      return this.settings.settings.http_signatures
+      return this.settings.settings[':http_signatures']
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'

src/views/settings/components/Inputs.vue

@@ -11,7 +11,7 @@
       @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
     <el-input-number
       v-if="setting.type === 'integer'"
-      :value="inputValue"
+      :value="inputValue === null ? 0 : inputValue"
       :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
       :min="0"
       size="large"
@@ -110,6 +110,7 @@
     <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <icons-input v-if="setting.key === ':icons'" :data="data[':icons']" :setting-group="settingGroup" :setting="setting"/>
     <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
+    <ssl-options-input v-if="setting.key === ':ssl_options'" :setting-group="settingGroup" :setting-parent="settingParent" :setting="setting" :data="data" :nested="true" :custom-label-width="'100px'"/>
     <!-------------------->
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
@@ -119,7 +120,7 @@
 import AceEditor from 'vue2-ace-editor'
 import 'brace/mode/elixir'
 import 'default-passive-events'
-import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput } from './inputComponents'
+import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, SslOptionsInput } from './inputComponents'
 
 export default {
   name: 'Inputs',
@@ -129,7 +130,8 @@ export default {
     EditableKeywordInput,
     IconsInput,
     MascotsInput,
-    ProxyUrlInput
+    ProxyUrlInput,
+    SslOptionsInput
   },
   props: {
     customLabelWidth: {

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

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div v-for="subSetting in setting.children" :key="subSetting.key">
+      <el-select
+        v-if="subSetting.type.includes('list') && subSetting.type.includes('atom')"
+        :value="data[setting.key][subSetting.key]"
+        multiple
+        filterable
+        allow-create
+        @change="update($event, subSetting.key)">
+        <el-option v-for="(option, index) in subSetting.suggestions" :key="index" :value="option"/>
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import Inputs from '../Inputs'
+
+export default {
+  name: 'SslOptionsInput',
+  components: {
+    Inputs
+  },
+  props: {
+    customLabelWidth: {
+      type: String,
+      default: function() {
+        return this.labelWidth
+      },
+      required: false
+    },
+    data: {
+      type: [Object, Array],
+      default: function() {
+        return {}
+      }
+    },
+    nested: {
+      type: Boolean,
+      default: function() {
+        return false
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingParent: {
+      type: Object,
+      default: function() {
+        return {}
+      },
+      required: false
+    }
+  },
+  methods: {
+    inputValue(key) {
+      return this.data[this.setting.key][key]
+    },
+    update(value, key) {
+      const updatedState = { ...this.data, [this.setting.key]: { ...this.data[this.setting.key], [key]: value }}
+
+      this.$store.dispatch('UpdateSettings', { group: this.settingGroup.group, key: this.settingGroup.key, input: this.settingParent.key, value: updatedState, type: this.settingParent.type })
+      this.$store.dispatch('UpdateState', { group: this.settingGroup.group, key: this.settingGroup.key, input: this.settingParent.key, value: updatedState })
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

src/views/settings/components/inputComponents/index.js

@@ -3,3 +3,4 @@ export { default as MascotsInput } from './MascotsInput'
 export { default as EditableKeywordInput } from './EditableKeywordInput'
 export { default as IconsInput } from './IconsInput'
 export { default as ProxyUrlInput } from './ProxyUrlInput'
+export { default as SslOptionsInput } from './SslOptionsInput'

src/views/settings/index.vue

@@ -32,14 +32,13 @@
       <el-tab-pane :label="$t('settings.gopher')" lazy>
         <gopher/>
       </el-tab-pane>
+      <el-tab-pane :label="$t('settings.http')" lazy>
+        <http/>
+      </el-tab-pane>
       <el-tab-pane :label="$t('settings.instance')" name="instance">
         <instance/>
       </el-tab-pane>
       <!--
-      <el-tab-pane :label="$t('settings.http')" lazy>
-        <http/>
-      </el-tab-pane>
-
       <el-tab-pane :label="$t('settings.jobQueue')" lazy>
         <job-queue/>
       </el-tab-pane>