refs #982 Add form to configure proxy server

src/config/locales/en/translation.json

@@ -201,7 +201,18 @@
         "title": "Proxy Configuration",
         "no": "No proxy",
         "system": "Use system proxy",
-        "manual": "Manual proxy configuration"
+        "manual": "Manual proxy configuration",
+        "protocol": "Protocol",
+        "host": "Proxy host",
+        "port": "Proxy port",
+        "protocol_list": {
+          "http": "http",
+          "https": "https",
+          "socks4": "socks4",
+          "socks4a": "socks4a",
+          "socks5": "socks5",
+          "socks5h": "socks5h"
+        }
       }
     },
     "language": {

src/renderer/components/Preferences/Network.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="network">
     <h2>{{ $t('preferences.network.proxy.title') }}</h2>
-    <el-form class="network session" size="small" label-position="top">
+    <el-form class="network section" size="small" label-width="120px">
       <div class="proxy-source">
         <el-radio v-model="source" label="no">{{ $t('preferences.network.proxy.no') }}</el-radio>
       </div>
@@ -11,14 +11,33 @@
       <div class="proxy-source">
         <el-radio v-model="source" label="manual">{{ $t('preferences.network.proxy.manual') }}</el-radio>
       </div>
+      <el-form-item for="proxyProtocol" :label="$t('preferences.network.proxy.protocol')">
+        <el-select v-model="proxyProtocol" placeholder="Select protocol" :disabled="!manualProxyConfiguration">
+          <el-option :label="$t('preferences.network.proxy.protocol_list.http')" value="http"></el-option>
+          <el-option :label="$t('preferences.network.proxy.protocol_list.https')" value="https"></el-option>
+          <el-option :label="$t('preferences.network.proxy.protocol_list.socks4')" value="socks4"></el-option>
+          <el-option :label="$t('preferences.network.proxy.protocol_list.socks4a')" value="socks4a"></el-option>
+          <el-option :label="$t('preferences.network.proxy.protocol_list.socks5')" value="socks5"></el-option>
+          <el-option :label="$t('preferences.network.proxy.protocol_list.socks5h')" value="socks5h"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item for="proxyHost" :label="$t('preferences.network.proxy.host')">
+        <el-input v-model="proxyHost" :disabled="!manualProxyConfiguration" placeholder="proxy.example.com"></el-input>
+      </el-form-item>
+      <el-form-item for="proxyPort" :label="$t('preferences.network.proxy.port')">
+        <el-input v-model="proxyPort" :disabled="!manualProxyConfiguration" placeholder="8080"></el-input>
+      </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'network',
   computed: {
+    ...mapGetters('Preferences/Network', ['manualProxyConfiguration']),
     source: {
       get() {
         return this.$store.state.Preferences.Network.source
@@ -26,21 +45,51 @@ export default {
       set(value) {
         this.$store.dispatch('Preferences/Network/changeSource', value)
       }
+    },
+    proxyProtocol: {
+      get() {
+        return this.$store.state.Preferences.Network.proxy.protocol
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Network/updateProtocol', value)
+      }
+    },
+    proxyHost: {
+      get() {
+        return this.$store.state.Preferences.Network.proxy.host
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Network/updateHost', value)
+      }
+    },
+    proxyPort: {
+      get() {
+        return this.$store.state.Preferences.Network.proxy.port
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Network/updatePort', value)
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.network {
+.network /deep/ {
+  max-width: 720px;
+
   .proxy-source {
     line-height: 32px;
     margin: 12px 8px;
     font-size: 14px;
 
-    .el-radio /deep/ {
+    .el-radio {
-      color: var(--theme-secondary-color);
+      color: var(--theme-primary-color);
     }
   }
+
+  .el-form-item__label {
+    color: var(--theme-primary-color);
+  }
 }
 </style>

src/renderer/store/Preferences/Network.ts

@@ -1,29 +1,66 @@
-import { Module, MutationTree, ActionTree } from 'vuex'
+import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
 import { RootState } from '@/store'
 
 export type NetworkState = {
   source: 'no' | 'system' | 'manual'
+  proxy: {
+    protocol: string
+    host: string
+    port: string
+  }
 }
 
 const state = (): NetworkState => {
   return {
-    source: 'no'
+    source: 'no',
+    proxy: {
+      protocol: '',
+      host: '',
+      port: ''
+    }
   }
 }
 
 export const MUTATION_TYPES = {
-  CHANGE_SOURCE: 'changeSource'
+  CHANGE_SOURCE: 'changeSource',
+  UPDATE_PROTOCOL: 'updateProtocol',
+  UPDATE_HOST: 'updateHost',
+  UPDATE_PORT: 'updatePort'
 }
 
 const mutations: MutationTree<NetworkState> = {
   [MUTATION_TYPES.CHANGE_SOURCE]: (state, source: 'no' | 'system' | 'manual') => {
     state.source = source
+  },
+  [MUTATION_TYPES.UPDATE_PROTOCOL]: (state, protocol: string) => {
+    state.proxy.protocol = protocol
+  },
+  [MUTATION_TYPES.UPDATE_HOST]: (state, host: string) => {
+    state.proxy.host = host
+  },
+  [MUTATION_TYPES.UPDATE_PORT]: (state, port: string) => {
+    state.proxy.port = port
   }
 }
 
 const actions: ActionTree<NetworkState, RootState> = {
   changeSource: ({ commit }, source: string) => {
     commit(MUTATION_TYPES.CHANGE_SOURCE, source)
+  },
+  updateProtocol: ({ commit }, protocol: string) => {
+    commit(MUTATION_TYPES.UPDATE_PROTOCOL, protocol)
+  },
+  updateHost: ({ commit }, host: string) => {
+    commit(MUTATION_TYPES.UPDATE_HOST, host)
+  },
+  updatePort: ({ commit }, port: string) => {
+    commit(MUTATION_TYPES.UPDATE_PORT, port)
+  }
+}
+
+const getters: GetterTree<NetworkState, RootState> = {
+  manualProxyConfiguration: state => {
+    return state.source === 'manual'
   }
 }
 
@@ -31,5 +68,6 @@ export default {
   namespaced: true,
   state: state,
   mutations: mutations,
-  actions: actions
+  actions: actions,
+  getters: getters
 } as Module<NetworkState, RootState>