Render esshd using apo description data

src/views/settings/components/Esshd.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form :label-width="labelWidth">
+    <el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
       <el-form-item>
         <p class="expl">Before enabling this you must:
           <ol class="esshd-list">
@@ -14,32 +14,7 @@
           </ol>
         </p>
       </el-form-item>
-    </el-form>
-    <el-form ref="enabled" :model="enabled" :label-width="labelWidth">
-      <el-form-item label="Enabled">
-        <el-switch :value="enabled.value" @change="updateSetting($event, 'enabled', 'value')"/>
-      </el-form-item>
-    </el-form>
-    <el-form ref="privDir" :model="privDir" :label-width="labelWidth">
-      <el-form-item label="Priv dir">
-        <el-input :value="privDir.value" @input="updateSetting($event, 'priv_dir', 'value')"/>
-        <p class="expl">You can input relative path here</p>
-      </el-form-item>
-    </el-form>
-    <el-form ref="handler" :model="handler" :label-width="labelWidth">
-      <el-form-item label="Handler">
-        <el-input :value="handler.value" @input="updateSetting($event, 'handler', 'value')"/>
-      </el-form-item>
-    </el-form>
-    <el-form ref="port" :model="port" :label-width="labelWidth">
-      <el-form-item label="Port">
-        <el-input :value="port.value" @input="updateSetting($event, 'port', 'value')"/>
-      </el-form-item>
-    </el-form>
-    <el-form ref="passwordAuthenticator" :model="passwordAuthenticator" :label-width="labelWidth">
-      <el-form-item label="Password authenticator">
-        <el-input :value="passwordAuthenticator.value" @input="updateSetting($event, 'password_authenticator', 'value')"/>
-      </el-form-item>
+      <setting :settings-group="esshd" :data="esshdData"/>
       <el-form-item>
         <p class="expl">Feel free to adjust the priv_dir and port number.
         Then you will have to create the key for the keys (in the example <span class="code">priv/ssh_keys</span>) and create the host keys with
@@ -57,17 +32,18 @@
 <script>
 import i18n from '@/lang'
 import { mapGetters } from 'vuex'
+import Setting from './Setting'
 
 export default {
   name: 'Instance',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'enabled',
-      'handler',
-      'passwordAuthenticator',
-      'port',
-      'privDir'
+      'esshdData'
     ]),
+    esshd() {
+      return this.$store.state.settings.description.find(setting => setting.group === ':esshd')
+    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },

src/views/settings/components/Setting.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading">
-    <el-form-item v-if="settingsGroup.description" class="options-paragraph-container">
+    <el-form-item v-if="settingsGroup.description && settingsGroup.group !== ':esshd'" class="options-paragraph-container">
       <p class="options-paragraph">{{ settingsGroup.description }}</p>
     </el-form-item>
     <div v-for="setting in settingsGroup.children" :key="setting.key">