Update Endpoint and Esshd tabs to put data from API into forms

src/views/settings/components/Endpoint.vue

@@ -28,10 +28,13 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'endpointData'
+      'settings'
     ]),
     endpoint() {
-      return this.$store.state.settings.description.find(setting => setting.key === 'Pleroma.Web.Endpoint')
+      return this.settings.description.find(setting => setting.key === 'Pleroma.Web.Endpoint')
+    },
+    endpointData() {
+      return this.settings.settings['Pleroma.Web.Endpoint']
     },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -40,7 +43,7 @@ export default {
       return this.isMobile ? '100px' : '240px'
     },
     loading() {
-      return this.$store.state.settings.loading
+      return this.settings.loading
     }
   },
   methods: {

src/views/settings/components/Esshd.vue

@@ -1,19 +1,6 @@
 <template>
   <div v-if="!loading">
     <el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
-      <el-form-item>
-        <p class="expl">Before enabling this you must:
-          <ol class="esshd-list">
-            <li>Add <span class="code">:esshd</span> to <span class="code">mix.exs</span> as one of the
-              <span class="code">extra_applications</span>
-            </li>
-            <li>Generate host keys in your
-              <span class="code">priv</span> dir with
-              <span class="code">ssh-keygen -m PEM -N "" -b 2048 -t rsa -f ssh_host_rsa_key</span>
-            </li>
-          </ol>
-        </p>
-      </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.

src/views/settings/components/Inputs.vue

@@ -36,7 +36,7 @@
       filterable
       allow-create
       @change="updateSetting($event, settingsGroup.key, setting.key)">
-      <el-option v-for="option in setting.suggestions[0]" :key="option" :value="option"/>
+      <el-option v-for="option in setting.suggestions" :key="option" :value="option"/>
     </el-select>
     <el-select
       v-if="Array.isArray(setting.type) && setting.type.includes('list') && setting.type.includes('string')"
@@ -59,7 +59,7 @@
       theme="chrome"/>
     <el-input
       v-if="setting.type === 'tuple'"
-      :placeholder="setting.key === 'ip' ? 'xxx.xxx.xxx.xx' : setting.suggestions[0]"
+      :placeholder="setting.key === ':ip' ? 'xxx.xxx.xxx.xx' : setting.suggestions[0]"
       :value="data[setting.key]"
       @input="updateSetting($event, settingsGroup.key, setting.key)"/>
     <el-input
@@ -91,7 +91,7 @@ export default {
       }
     },
     data: {
-      type: Object,
+      type: Object || Array,
       default: function() {
         return {}
       }
@@ -106,8 +106,7 @@ export default {
   computed: {
     editorContent: {
       get: function() {
-        return ''
-        // return data[setting.key] ? data[setting.key][0] : ''
+        return this.data[this.setting.key] ? this.data[this.setting.key][0] : ''
       },
       set: function(value) {
         this.processNestedData([value], this.settingsGroup.key, this.setting.key, this.data[this.setting.key])

src/views/settings/components/Setting.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!loading">
-    <el-form-item v-if="settingsGroup.description && settingsGroup.group !== ':esshd'" class="options-paragraph-container">
+    <el-form-item v-if="settingsGroup.description" class="options-paragraph-container">
       <p class="options-paragraph">{{ settingsGroup.description }}</p>
     </el-form-item>
     <div v-for="setting in settingsGroup.children" :key="setting.key">
@@ -10,7 +10,7 @@
       <div v-if="compound(setting.type)">
         <el-form-item :label="`${setting.label}:`"/>
         <div v-for="subSetting in setting.children" :key="subSetting.key">
-          <inputs :settings-group="setting" :setting="subSetting" :data="data[setting]"/>
+          <inputs :settings-group="setting" :setting="subSetting" :data="data[setting.key]"/>
         </div>
         <div class="line"/>
       </div>
@@ -51,7 +51,7 @@ export default {
   },
   methods: {
     compound(type) {
-      return ['map', 'keyword'].includes(type)
+      return ['map', 'keyword'].includes(type) || type.includes('keyword')
     },
     updateSetting(value, tab, input) {
       this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})