Render Gopher settings from API description

src/views/settings/components/Gopher.vue

@@ -1,21 +1,6 @@
 <template>
-  <el-form v-if="!loading" ref="gopher" :model="gopher" :label-width="labelWidth">
-    <el-form-item label="Enabled">
-      <el-switch :value="gopher.enabled" @change="updateSetting($event, 'gopher', 'enabled')"/>
-      <p class="expl">Enables the gopher interface</p>
-    </el-form-item>
-    <el-form-item label="IP address">
-      <el-input :value="gopher.ip" placeholder="xxx.xxx.xxx.xx" @input="updateSetting($event, 'gopher', 'ip')"/>
-      <p class="expl">Enables the gopher interface</p>
-    </el-form-item>
-    <el-form-item label="Port">
-      <el-input :value="gopher.port" @input="updateSetting($event, 'gopher', 'port')"/>
-      <p class="expl">Port to bind to</p>
-    </el-form-item>
-    <el-form-item label="Dst port">
-      <el-input :value="gopher.dstport" @input="updateSetting($event, 'gopher', 'dstport')"/>
-      <p class="expl">Port advertised in urls (optional, defaults to port)</p>
-    </el-form-item>
+  <el-form v-if="!loading" ref="gopher" :model="gopherData" :label-width="labelWidth">
+    <setting :setting-group="gopher" :data="gopherData"/>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">Submit</el-button>
     </el-form-item>
@@ -25,13 +10,21 @@
 <script>
 import i18n from '@/lang'
 import { mapGetters } from 'vuex'
+import Setting from './Setting'
 
 export default {
   name: 'Gopher',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'gopher'
+      'settings'
     ]),
+    gopher() {
+      return this.settings.description.find(setting => setting.key === ':gopher')
+    },
+    gopherData() {
+      return this.settings.settings[':gopher']
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -43,9 +36,6 @@ export default {
     }
   },
   methods: {
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')