Extract proxy_url into a separate tab, parse and wrap that setting for the BE

src/store/modules/normalizers.js

@@ -24,6 +24,8 @@ export const parseTuples = (tuples, key) => {
           return { key: name, value: icon[name], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }
         })
       }, [])
+    } else if (item.tuple[0] === ':proxy_url') {
+      accum[item.tuple[0]] = parseProxyUrl(item.tuple[1])
     } else if ((item.tuple[0] === ':sslopts' && item.tuple[1].length === 0) || // should be removed
       (item.tuple[0] === ':tlsopts' && item.tuple[1].length === 0)) {
       accum[item.tuple[0]] = {}
@@ -70,6 +72,17 @@ const parseObject = object => {
   }, {})
 }
 
+const parseProxyUrl = value => {
+  if (!Array.isArray(value) && typeof value === 'object' && value.tuple.length === 3 && value.tuple[0] === ':socks5') {
+    const [, host, port] = value.tuple
+    return { socks5: true, host, port }
+  } else if (typeof value === 'string') {
+    const [host, port] = value.split(':')
+    return { socks5: false, host, port }
+  }
+  return { socks5: false, host: null, port: null }
+}
+
 export const partialUpdate = (group, key) => {
   if ((group === ':pleroma' && key === ':ecto_repos') ||
       (group === ':quack' && key === ':meta') ||
@@ -109,6 +122,8 @@ const wrapValues = settings => {
       return { 'tuple': [setting, wrapValues(value)] }
     } else if (type === 'atom') {
       return { 'tuple': [setting, `:${value}`] }
+    } else if (type.includes('tuple') && Array.isArray(value)) {
+      return { 'tuple': [setting, { 'tuple': value }] }
     } else if (type === 'map') {
       const objectValue = Object.keys(value).reduce((acc, key) => {
         acc[key] = value[key][1]

src/views/settings/components/Inputs.vue

@@ -104,19 +104,12 @@
         </div>
       </div>
     </div>
-    <div v-if="setting.key === ':proxy_url'" class="setting-input">
-      <el-checkbox v-model="proxyUrlTypeSocks5" class="name-input" border>Socks5</el-checkbox>
-      <el-input
-        :value="proxyUrlData"
-        :placeholder="setting.suggestions ? setting.suggestions[0] : ''"
-        class="value-input"
-        @input="updateSetting($event, settingGroup.group, settingGroup.key, setting.key)"/>
-    </div>
     <!-- special inputs -->
     <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <mascots-input v-if="setting.key === ':mascots'" :data="data" :setting-group="settingGroup" :setting="setting"/>
     <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"/>
     <!-------------------->
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
@@ -126,7 +119,7 @@
 import AceEditor from 'vue2-ace-editor'
 import 'brace/mode/elixir'
 import 'default-passive-events'
-import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput } from './inputComponents'
+import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput } from './inputComponents'
 
 export default {
   name: 'Inputs',
@@ -135,7 +128,8 @@ export default {
     AutoLinkerInput,
     EditableKeywordInput,
     IconsInput,
-    MascotsInput
+    MascotsInput,
+    ProxyUrlInput
   },
   props: {
     customLabelWidth: {
@@ -203,18 +197,6 @@ export default {
     labelWidth() {
       return this.isMobile ? '100px' : '240px'
     },
-    proxyUrlData() {
-      if (!this.data[this.setting.key]) {
-        return null
-      } else {
-        return typeof this.data[this.setting.key] === 'string'
-          ? this.data[this.setting.key]
-          : `${this.data[this.setting.key][1]}:${this.data[this.setting.key][2]}`
-      }
-    },
-    proxyUrlTypeSocks5() {
-      return Array.isArray(this.data[this.setting.key]) && this.data[this.setting.key][0] === 'socks5'
-    },
     prune() {
       return this.data[this.setting.key] === ':disabled'
         ? ':disabled'

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

+<template>
+  <div class="setting-input">
+    <el-input
+      :value="data.host"
+      placeholder="host (e.g. localhost or 127.0.0.1)"
+      class="value-input"
+      @input="updateProxyUrl($event, 'host')"/> :
+    <el-input
+      :value="data.port"
+      placeholder="port (e.g 9020 or 3090)"
+      class="value-input"
+      @input="updateProxyUrl($event, 'port')"/>
+    <el-checkbox :value="data.socks5" class="name-input" @change="updateProxyUrl($event, 'socks5')">Socks5</el-checkbox>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProxyUrlInput',
+  props: {
+    data: {
+      type: Object || Array,
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  methods: {
+    updateProxyUrl(value, inputType) {
+      let data
+      if (inputType === 'socks5') {
+        data = { ...this.data, socks5: value }
+      } else if (inputType === 'host') {
+        data = { ...this.data, host: value }
+      } else {
+        data = { ...this.data, port: 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.socks5
+        ? [':socks5', value.host, value.port]
+        : `${value.host}:${value.port}`
+      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/components/inputComponents/index.js

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

src/views/settings/styles/main.scss

@@ -147,7 +147,7 @@
     align-items: baseline;
   }
   .value-input {
-    width: 70%;
+    width: 35%;
     margin-left: 8px;
     margin-right: 10px
   }