From f303c852386e7886f5ae54cb8b6701365ef1873c Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 15 Nov 2019 00:49:35 +0900
Subject: [PATCH] Rename settingGroup prop and add one more prop for
 settingparent

---
 src/views/settings/components/ActivityPub.vue |   4 +-
 .../settings/components/Authentication.vue    |   8 +-
 src/views/settings/components/Captcha.vue     |   4 +-
 src/views/settings/components/Database.vue    | 113 +-----------------
 src/views/settings/components/Endpoint.vue    |   2 +-
 src/views/settings/components/Esshd.vue       |   2 +-
 src/views/settings/components/Frontend.vue    |  10 +-
 src/views/settings/components/Http.vue        |   6 +-
 src/views/settings/components/Inputs.vue      |  47 ++++----
 src/views/settings/components/Instance.vue    |  14 +--
 src/views/settings/components/JobQueue.vue    |   4 +-
 src/views/settings/components/Logger.vue      |   8 +-
 src/views/settings/components/Setting.vue     |  22 ++--
 src/views/settings/components/WebPush.vue     |   2 +-
 14 files changed, 75 insertions(+), 171 deletions(-)

diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue
index 24618362..0ec54f5d 100644
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@@ -1,11 +1,11 @@
 <template>
   <div v-if="!loading">
     <el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth">
-      <setting :settings-group="activitypub" :data="activitypubData"/>
+      <setting :setting-group="activitypub" :data="activitypubData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="userData" :model="userData" :label-width="labelWidth">
-      <setting :settings-group="user" :data="userData"/>
+      <setting :setting-group="user" :data="userData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue
index e0eec56d..502b9694 100644
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@@ -1,19 +1,19 @@
 <template>
   <div v-if="!loading">
     <el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
-      <setting :settings-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
+      <setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="authData" :model="authData" :label-width="labelWidth">
-      <setting :settings-group="auth" :data="authData"/>
+      <setting :setting-group="auth" :data="authData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="ldapData" :model="ldapData" :label-width="labelWidth">
-      <setting :settings-group="ldap" :data="ldapData"/>
+      <setting :setting-group="ldap" :data="ldapData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
-      <setting :settings-group="oauth2" :data="oauth2Data"/>
+      <setting :setting-group="oauth2" :data="oauth2Data"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue
index 6dbc92ac..abaa897e 100644
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@@ -1,11 +1,11 @@
 <template>
   <div v-if="!loading">
     <el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
-      <setting :settings-group="captcha" :data="captchaData"/>
+      <setting :setting-group="captcha" :data="captchaData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
-      <setting :settings-group="kocaptcha" :data="kocaptchaData"/>
+      <setting :setting-group="kocaptcha" :data="kocaptchaData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
diff --git a/src/views/settings/components/Database.vue b/src/views/settings/components/Database.vue
index fa0099ec..cb360073 100644
--- a/src/views/settings/components/Database.vue
+++ b/src/views/settings/components/Database.vue
@@ -1,119 +1,11 @@
 <template>
   <div v-if="!loading">
     <el-form ref="databaseData" :model="databaseData" :label-width="labelWidth">
-      <setting :settings-group="database" :data="databaseData"/>
+      <setting :setting-group="database" :data="databaseData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
     </el-form>
-    <div class="line"/>
-    <!-- <el-form ref="ectoRepos" :model="ectoRepos" :label-width="labelWidth">
-      <el-form-item label="Ecto repos">
-        <el-select :value="ectoRepos.value || []" multiple filterable allow-create @change="updateSetting($event, 'ecto_repos', 'value')">
-          <el-option label="Pleroma.Repo" value="Pleroma.Repo"/>
-        </el-select>
-      </el-form-item>
-    </el-form> -->
-    <!-- <div class="line"/>
-    <el-form ref="pleromaRepo" :model="pleromaRepo" :label-width="labelWidth">
-      <el-form-item label="Pleroma Repo configuration:"/>
-      <el-form-item label="Name">
-        <el-input :value="pleromaRepo.name" @input="updateSetting($event, 'Pleroma.Repo', 'name')"/>
-        <p class="expl">The name of the Repo supervisor process</p>
-      </el-form-item>
-      <el-form-item label="Priv">
-        <el-input :value="pleromaRepo.priv" @input="updateSetting($event, 'Pleroma.Repo', 'priv')"/>
-        <p class="expl">The directory where to keep repository data, like migrations, schema and more. Defaults to <span class="code">
-          priv/YOUR_REPO</span>. It must always point to a subdirectory inside the priv directory</p>
-      </el-form-item>
-      <el-form-item label="URL">
-        <el-input :value="pleromaRepo.url" @input="updateSetting($event, 'Pleroma.Repo', 'url')"/>
-        <p class="expl">An URL that specifies storage information</p>
-      </el-form-item>
-      <el-form-item label="Log level">
-        <el-select :value="pleromaRepo.log" clearable @change="updateSetting($event, 'Pleroma.Repo', 'log')">
-          <el-option :value="false" label="False - disables logging for that repository."/>
-          <el-option value=":debug" label=":debug - for debug-related messages"/>
-          <el-option value=":info" label=":info - for information of any kind"/>
-          <el-option value=":warn" label=":warn - for warnings"/>
-          <el-option value=":error" label=":error - for errors"/>
-        </el-select>
-        <p class="expl">The log level used when logging the query with Elixir's Logger</p>
-      </el-form-item>
-      <el-form-item label="Pool size">
-        <el-input-number :value="pleromaRepo.pool_size" :step="1" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Repo', 'pool_size')"/>
-        <p class="expl">The size of the pool used by the connection module. Defaults to <span class="code">10</span></p>
-      </el-form-item>
-      <el-form-item label="Telemetry prefix">
-        <el-select :value="pleromaRepo.telemetry_prefix || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Repo', 'telemetry_prefix')">
-          <el-option label=":my_app" value=":my_app"/>
-          <el-option label=":repo" value=":repo"/>
-          <el-option label=":query" value=":query"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Types">
-        <el-input :value="pleromaRepo.types" @input="updateSetting($event, 'Pleroma.Repo', 'types')"/>
-      </el-form-item>
-      <el-form-item label="Telemetry event">
-        <el-select :value="pleromaRepo.telemetry_event || []" multiple filterable allow-create @change="updateSetting($event, 'Pleroma.Repo', 'telemetry_event')">
-          <el-option label="Pleroma.Repo.Instrumenter" value="Pleroma.Repo.Instrumenter"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Connection options:"/>
-      <el-form-item label="Hostname">
-        <el-input :value="pleromaRepo.hostname" @input="updateSetting($event, 'Pleroma.Repo', 'hostname')"/>
-        <p class="expl">Server hostname</p>
-      </el-form-item>
-      <el-form-item label="Socket dir">
-        <el-input :value="pleromaRepo.socket_dir" @input="updateSetting($event, 'Pleroma.Repo', 'socket_dir')"/>
-        <p class="expl">Connect to Postgres via UNIX sockets in the given directory. The socket name is derived based on the port.
-        This is the preferred method for configuring sockets and it takes precedence over the hostname.
-        If you are connecting to a socket outside of the Postgres convention, use <span class="code">:socket</span> instead.</p>
-      </el-form-item>
-      <el-form-item label="Socket">
-        <el-input :value="pleromaRepo.socket" @input="updateSetting($event, 'Pleroma.Repo', 'socket')"/>
-        <p class="expl">Connect to Postgres via UNIX sockets in the given path. This option takes precedence over the
-        <span class="code">:hostname</span> and <span class="code">:socket_dir</span></p>
-      </el-form-item>
-      <el-form-item label="Username">
-        <el-input :value="pleromaRepo.username" @input="updateSetting($event, 'Pleroma.Repo', 'username')"/>
-      </el-form-item>
-      <el-form-item label="Password">
-        <el-input :value="pleromaRepo.password" @input="updateSetting($event, 'Pleroma.Repo', 'password')"/>
-      </el-form-item>
-      <el-form-item label="Port">
-        <el-input :value="pleromaRepo.port" @input="updateSetting($event, 'Pleroma.Repo', 'port')"/>
-        <p class="expl">Server port (default: 5432)</p>
-      </el-form-item>
-      <el-form-item label="Database">
-        <el-input :value="pleromaRepo.database" @input="updateSetting($event, 'Pleroma.Repo', 'database')"/>
-        <p class="expl">The database to connect to</p>
-      </el-form-item>
-      <el-form-item label="Maintenance database">
-        <el-input :value="pleromaRepo.maintenance_database" @input="updateSetting($event, 'Pleroma.Repo', 'maintenance_database')"/>
-        <p class="expl">Specifies the name of the database to connect to when creating or dropping the database. Defaults to "postgres"</p>
-      </el-form-item>
-      <el-form-item label="Pool">
-        <el-input :value="pleromaRepo.pool" @input="updateSetting($event, 'Pleroma.Repo', 'pool')"/>
-        <p class="expl">The connection pool module, defaults to <span class="code">DBConnection.ConnectionPool</span></p>
-      </el-form-item>
-      <el-form-item label="SSL">
-        <el-switch :value="pleromaRepo.ssl" @change="updateSetting($event, 'Pleroma.Repo', 'ssl')"/>
-        <p class="expl">Set to true if ssl should be used</p>
-      </el-form-item>
-      <el-form-item label="Connect timeout">
-        <el-input-number :value="pleromaRepo.connect_timeout" :step="1000" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Repo', 'connect_timeout')"/>
-        <p class="expl">The timeout for establishing new connections. Defaults to 5000</p>
-      </el-form-item>
-      <el-form-item label="Prepare">
-        <el-select :value="pleromaRepo.prepare" clearable @change="updateSetting($event, 'Pleroma.Repo', 'prepare')">
-          <el-option label="named" value=":named"/>
-          <el-option label="unnamed" value=":unnamed"/>
-        </el-select>
-        <p class="expl">How to prepare queries, either <span class="code">:named</span> to use named queries or
-        <span class="code">:unnamed</span> to force unnamed queries (default: :named)</p>
-      </el-form-item>
-    </el-form> -->
   </div>
 </template>
 
@@ -146,9 +38,6 @@ export default {
     }
   },
   methods: {
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')
diff --git a/src/views/settings/components/Endpoint.vue b/src/views/settings/components/Endpoint.vue
index d03fd134..a6f40a60 100644
--- a/src/views/settings/components/Endpoint.vue
+++ b/src/views/settings/components/Endpoint.vue
@@ -1,6 +1,6 @@
 <template>
   <el-form v-if="!loading" ref="endpointData" :model="endpointData" :label-width="labelWidth">
-    <setting :settings-group="endpoint" :data="endpointData"/>
+    <setting :setting-group="endpoint" :data="endpointData"/>
     <div class="line"/>
     <el-form-item class="options-paragraph-container">
       <p class="options-paragraph">Only common options are listed here. You can add more (all configuration options can be viewed
diff --git a/src/views/settings/components/Esshd.vue b/src/views/settings/components/Esshd.vue
index e92ce79b..c66ec01b 100644
--- a/src/views/settings/components/Esshd.vue
+++ b/src/views/settings/components/Esshd.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="!loading">
     <el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
-      <setting :settings-group="esshd" :data="esshdData"/>
+      <setting :setting-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
diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index ef9421af..7b693c3f 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -6,11 +6,11 @@
         By default, settings for <span class="code">pleroma_fe</span> and <span class="code">masto_fe</span> are configured.
         If you want to add your own configuration your settings need to be complete as they will override the defaults.</p>
       </el-form-item>
-      <setting :settings-group="frontend" :data="frontendData"/>
+      <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
     <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
       <el-form-item label="Assets:"/>
-      <setting :settings-group="assets" :data="assetsData"/>
+      <setting :setting-group="assets" :data="assetsData"/>
       <!-- <el-form-item label="Default mascot">
         <el-select :value="assets.default_mascot" clearable @change="updateSetting($event, 'assets', 'default_mascot')"/>
         <p class="expl">An element from mascots - This will be used as the default mascot on MastoFE
@@ -31,16 +31,16 @@
     <div class="line"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
       <el-form-item label="Emoji:"/>
-      <setting :settings-group="emoji" :data="emojiData"/>
+      <setting :setting-group="emoji" :data="emojiData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="chatData" :model="chatData" :label-width="labelWidth">
-      <setting :settings-group="chat" :data="chatData"/>
+      <setting :setting-group="chat" :data="chatData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="markupData" :model="markupData" :label-width="labelWidth">
       <el-form-item label="Markup settings:"/>
-      <setting :settings-group="markup" :data="markupData"/>
+      <setting :setting-group="markup" :data="markupData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue
index 057c1948..9c6a0401 100644
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="!loading">
     <el-form ref="httpData" :model="httpData" :label-width="labelWidth">
-      <setting :settings-group="http" :data="httpData"/>
+      <setting :setting-group="http" :data="httpData"/>
     </el-form>
     <el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
       <el-form-item label="Cors plug config:"/>
-      <setting :settings-group="corsPlug" :data="corsPlugData"/>
+      <setting :setting-group="corsPlug" :data="corsPlugData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
-      <setting :settings-group="httpSecurity" :data="httpSecurityData"/>
+      <setting :setting-group="httpSecurity" :data="httpSecurityData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="hackneyPoolsData" :model="hackneyPoolsData" :label-width="labelWidth">
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 69e81233..4fe634eb 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -4,11 +4,11 @@
       v-if="setting.type === 'string'"
       :value="data[setting.key]"
       :placeholder="setting.suggestions[0]"
-      @input="updateSetting($event, settingsGroup.key, setting.key)"/>
+      @input="updateSetting($event, settingGroup.key, setting.key)"/>
     <el-switch
       v-if="setting.type === 'boolean'"
       :value="data[setting.key]"
-      @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+      @change="updateSetting($event, settingGroup.key, setting.key)"/>
     <el-input-number
       v-if="setting.type === 'integer'"
       :value="data[setting.key]"
@@ -16,12 +16,12 @@
       :min="0"
       size="large"
       class="top-margin"
-      @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+      @change="updateSetting($event, settingGroup.key, setting.key)"/>
     <el-select
       v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
       :value="data[setting.key]"
       clearable
-      @change="updateSetting($event, settingsGroup.key, setting.key)">
+      @change="updateSetting($event, settingGroup.key, setting.key)">
       <el-option
         v-for="(option, index) in setting.suggestions"
         :value="option"
@@ -33,7 +33,7 @@
       multiple
       filterable
       allow-create
-      @change="updateSetting($event, settingsGroup.key, setting.key)">
+      @change="updateSetting($event, settingGroup.key, setting.key)">
       <el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
     </el-select>
     <editor
@@ -50,12 +50,12 @@
       v-if="setting.type === 'tuple'"
       :placeholder="setting.key === ':ip' ? 'xxx.xxx.xxx.xx' : setting.suggestions[0]"
       :value="data[setting.key]"
-      @input="updateSetting($event, settingsGroup.key, setting.key)"/>
+      @input="updateSetting($event, settingGroup.key, setting.key)"/>
     <el-input
       v-if="setting.type === 'atom'"
       :value="data[setting.key]"
       :placeholder="setting.suggestions[0]"
-      @input="updateSetting($event, settingsGroup.key, setting.key)">
+      @input="updateSetting($event, settingGroup.key, setting.key)">
       <template slot="prepend">:</template>
     </el-input>
     <div v-if="editableKeywordWithSelect(setting.type)">
@@ -87,7 +87,7 @@
           placeholder="1500"
           size="large"
           class="top-margin"
-          @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+          @change="updateSetting($event, settingGroup.key, setting.key)"/>
       </el-form-item>
       <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
         <el-input-number
@@ -96,7 +96,7 @@
           placeholder="3600"
           size="large"
           class="top-margin"
-          @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+          @change="updateSetting($event, settingGroup.key, setting.key)"/>
       </el-form-item>
     </div>
     <p class="expl">{{ setting.description }}</p>
@@ -114,12 +114,6 @@ export default {
     editor: AceEditor
   },
   props: {
-    settingsGroup: {
-      type: Object,
-      default: function() {
-        return {}
-      }
-    },
     data: {
       type: Object || Array,
       default: function() {
@@ -131,6 +125,19 @@ export default {
       default: function() {
         return {}
       }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingParent: {
+      type: Object,
+      default: function() {
+        return {}
+      },
+      required: false
     }
   },
   computed: {
@@ -139,7 +146,7 @@ export default {
         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])
+        this.processNestedData([value], this.settingGroup.key, this.setting.key, this.data[this.setting.key])
       }
     },
     prune() {
@@ -150,11 +157,11 @@ export default {
   },
   methods: {
     addRowToEditableKeyword() {
-      console.log(this.settingsGroup.key, this.setting.key)
+      console.log(this.settingGroup.key, this.setting.key)
       const updatedValue = this.editableKeywordData(this.data).reduce((acc, el, i) => {
         return { ...acc, [el[0]]: el[1] }
       }, {})
-      this.updateSetting({ ...updatedValue, '': [] }, this.settingsGroup.key, this.setting.key)
+      this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.key, this.setting.key)
     },
     deleteEditableKeywordRow(index) {
       const filteredValues = this.editableKeywordData(this.data).filter((el, i) => index !== i)
@@ -162,7 +169,7 @@ export default {
         return { ...acc, [el[0]]: el[1] }
       }, {})
       console.log(updatedValue)
-      this.updateSetting(updatedValue, this.settingsGroup.key, this.setting.key)
+      this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
     },
     editableKeywordWithInteger(type) {
       return Array.isArray(type)
@@ -185,7 +192,7 @@ export default {
         return { ...acc, [el[0]]: el[1] }
       }, {})
       console.log(updatedValue)
-      this.updateSetting(updatedValue, this.settingsGroup.key, this.setting.key)
+      this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
     },
     processNestedData(value, tab, inputName, childName) {
       const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue
index 4d83353e..9f0b2385 100644
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@@ -1,32 +1,32 @@
 <template>
   <div v-if="!loading">
     <el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
-      <setting :settings-group="instance" :data="instanceData"/>
+      <setting :setting-group="instance" :data="instanceData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="uriSchemesData" :model="uriSchemesData" :label-width="labelWidth">
-      <setting :settings-group="uriSchemes" :data="uriSchemesData"/>
+      <setting :setting-group="uriSchemes" :data="uriSchemesData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="adminTokenData" :model="adminTokenData" :label-width="labelWidth">
-      <setting :settings-group="adminToken" :data="adminTokenData"/>
+      <setting :setting-group="adminToken" :data="adminTokenData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="scheduledActivityData" :model="scheduledActivityData" :label-width="labelWidth">
-      <setting :settings-group="scheduledActivity" :data="scheduledActivityData"/>
+      <setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="fetchInitialPostsData" :model="fetchInitialPostsData" :label-width="labelWidth">
-      <setting :settings-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
+      <setting :setting-group="fetchInitialPosts" :data="fetchInitialPostsData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="suggestionsData" :model="suggestionsData" :label-width="labelWidth">
       <el-form-item label="Suggestions:"/>
-      <setting :settings-group="suggestions" :data="suggestionsData"/>
+      <setting :setting-group="suggestions" :data="suggestionsData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="pleromaUserData" :model="pleromaUserData" :label-width="labelWidth">
-      <setting :settings-group="pleromaUser" :data="pleromaUserData"/>
+      <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
diff --git a/src/views/settings/components/JobQueue.vue b/src/views/settings/components/JobQueue.vue
index f3791892..6b305152 100644
--- a/src/views/settings/components/JobQueue.vue
+++ b/src/views/settings/components/JobQueue.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="!loading">
     <el-form ref="obanQueuesData" :model="obanQueuesData" :label-width="labelWidth">
-      <setting :settings-group="obanQueues" :data="obanQueuesData"/>
+      <setting :setting-group="obanQueues" :data="obanQueuesData"/>
     </el-form>
     <el-form ref="workersData" :model="workersData" :label-width="labelWidth">
-      <setting :settings-group="workers" :data="workersData"/>
+      <setting :setting-group="workers" :data="workersData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue
index b6790679..29e49a0d 100644
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@@ -1,20 +1,20 @@
 <template>
   <div v-if="!loading">
     <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
-      <setting :settings-group="logger" :data="loggerData"/>
+      <setting :setting-group="logger" :data="loggerData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
-      <setting :settings-group="console" :data="consoleData"/>
+      <setting :setting-group="console" :data="consoleData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
-      <setting :settings-group="exsyslogger" :data="exsysloggerData"/>
+      <setting :setting-group="exsyslogger" :data="exsysloggerData"/>
     </el-form>
     <div class="line"/>
     <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
       <el-form-item label="Quack logger:"/>
-      <setting :settings-group="quack" :data="quackData"/>
+      <setting :setting-group="quack" :data="quackData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
diff --git a/src/views/settings/components/Setting.vue b/src/views/settings/components/Setting.vue
index 7291f74a..3730207b 100644
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@@ -1,19 +1,27 @@
 <template>
   <div v-if="!loading">
-    <el-form-item v-if="settingsGroup.description" class="options-paragraph-container">
-      <p class="options-paragraph">{{ settingsGroup.description }}</p>
+    <el-form-item v-if="settingGroup.description" class="options-paragraph-container">
+      <p class="options-paragraph">{{ settingGroup.description }}</p>
     </el-form-item>
-    <div v-for="setting in settingsGroup.children" :key="setting.key">
+    <div v-for="setting in settingGroup.children" :key="setting.key">
       <div v-if="!compound(setting.type)">
-        <inputs :settings-group="settingsGroup" :setting="setting" :data="data"/>
+        <inputs
+          :setting-group="settingGroup"
+          :setting="setting"
+          :data="data"/>
       </div>
       <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.key]"/>
+          <inputs
+            :setting-group="settingGroup"
+            :setting-parent="setting"
+            :setting="subSetting"
+            :data="data[setting.key]"
+          />
         </div>
         <div v-if="!setting.children">
-          <inputs :settings-group="settingsGroup" :setting="setting" :data="data[setting.key]"/>
+          <inputs :setting-group="settingGroup" :setting="setting" :data="data[setting.key]"/>
         </div>
         <div class="line"/>
       </div>
@@ -34,7 +42,7 @@ export default {
     Inputs
   },
   props: {
-    settingsGroup: {
+    settingGroup: {
       type: Object,
       default: function() {
         return {}
diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue
index ad0e55b3..a0a62971 100644
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@@ -1,6 +1,6 @@
 <template>
   <el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
-    <setting :settings-group="vapidDetails" :data="vapidDetailsData"/>
+    <setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">Submit</el-button>
     </el-form-item>