refs #982 Add radio button to switch proxy config

src/config/locales/en/translation.json

@@ -195,6 +195,15 @@
       "cancel": "Cancel",
       "confirm_message": "Are you sure to remove all associations?"
     },
+    "network": {
+      "title": "Network",
+      "proxy": {
+        "title": "Proxy Configuration",
+        "no": "No proxy",
+        "system": "Use system proxy",
+        "manual": "Manual proxy configuration"
+      }
+    },
     "language": {
       "title": "Language",
       "language_description": "Choose the language you would like to use with Whalebird.",

src/renderer/components/Preferences.vue

@@ -36,6 +36,10 @@
             <icon name="user" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.account.title') }}</span>
           </el-menu-item>
+          <el-menu-item index="/preferences/network">
+            <icon name="network-wired" class="icon" scale="1.3"></icon>
+            <span>{{ $t('preferences.network.title') }}</span>
+          </el-menu-item>
           <el-menu-item index="/preferences/language">
             <icon name="language" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.language.title') }}</span>

src/renderer/components/Preferences/Network.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="network">
+    <h2>{{ $t('preferences.network.proxy.title') }}</h2>
+    <el-form class="network session" size="small" label-position="top">
+      <div class="proxy-source">
+        <el-radio v-model="source" label="no">{{ $t('preferences.network.proxy.no') }}</el-radio>
+      </div>
+      <div class="proxy-source">
+        <el-radio v-model="source" label="system">{{ $t('preferences.network.proxy.system') }}</el-radio>
+      </div>
+      <div class="proxy-source">
+        <el-radio v-model="source" label="manual">{{ $t('preferences.network.proxy.manual') }}</el-radio>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'network',
+  computed: {
+    source: {
+      get() {
+        return this.$store.state.Preferences.Network.source
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Network/changeSource', value)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.network {
+  .proxy-source {
+    line-height: 32px;
+    margin: 12px 8px;
+    font-size: 14px;
+
+    .el-radio /deep/ {
+      color: var(--theme-secondary-color);
+    }
+  }
+}
+</style>

src/renderer/router/index.ts

@@ -41,6 +41,11 @@ const router = new Router({
           name: 'account',
           component: require('@/components/Preferences/Account').default
         },
+        {
+          path: 'network',
+          name: 'network',
+          component: require('@/components/Preferences/Network').default
+        },
         {
           path: 'language',
           name: 'language',

src/renderer/store/Preferences.ts

@@ -3,6 +3,7 @@ import Account, { AccountState } from './Preferences/Account'
 import Language, { LanguageState } from './Preferences/Language'
 import Appearance, { AppearanceState } from './Preferences/Appearance'
 import Notification, { NotificationState } from './Preferences/Notification'
+import Network, { NetworkState } from './Preferences/Network'
 import { Module } from 'vuex'
 import { RootState } from '@/store'
 
@@ -16,6 +17,7 @@ type PreferencesModule = {
   Language: LanguageState
   Notification: NotificationState
   Appearance: AppearanceState
+  Network: NetworkState
 }
 
 export type PreferencesModuleState = PreferencesState & PreferencesModule
@@ -27,7 +29,8 @@ const Preferences: Module<PreferencesState, RootState> = {
     Account,
     Language,
     Notification,
-    Appearance
+    Appearance,
+    Network
   },
   state: state
 }

src/renderer/store/Preferences/Network.ts

@@ -0,0 +1,35 @@
+import { Module, MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store'
+
+export type NetworkState = {
+  source: 'no' | 'system' | 'manual'
+}
+
+const state = (): NetworkState => {
+  return {
+    source: 'no'
+  }
+}
+
+export const MUTATION_TYPES = {
+  CHANGE_SOURCE: 'changeSource'
+}
+
+const mutations: MutationTree<NetworkState> = {
+  [MUTATION_TYPES.CHANGE_SOURCE]: (state, source: 'no' | 'system' | 'manual') => {
+    state.source = source
+  }
+}
+
+const actions: ActionTree<NetworkState, RootState> = {
+  changeSource: ({ commit }, source: string) => {
+    commit(MUTATION_TYPES.CHANGE_SOURCE, source)
+  }
+}
+
+export default {
+  namespaced: true,
+  state: state,
+  mutations: mutations,
+  actions: actions
+} as Module<NetworkState, RootState>