ChoiceSetting support added, added captcha settings

src/components/settings_modal/admin_tabs/instance_tab.vue

@@ -111,6 +111,57 @@
             APPROVAL REQUIRED
           </BooleanSetting>
         </li>
+        <li>
+          <h3>{{ $t('admin_dash.captcha.header') }}</h3>
+        </li>
+        <li>
+          <BooleanSetting
+            source="admin"
+            :path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+            draft-mode
+          >
+            CAPTCHA
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <ChoiceSetting
+                source="admin"
+                :path="[':pleroma', 'Pleroma.Captcha', ':method']"
+                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                :option-label-map="{
+                  'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
+                  'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
+                }"
+                draft-mode
+              >
+                CAPTCHA TYPE
+              </ChoiceSetting>
+              <IntegerSetting
+                source="admin"
+                :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
+                :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                draft-mode
+              >
+                VALID
+              </IntegerSetting>
+            </li>
+          </ul>
+          <ul
+            v-if="adminConfig[':pleroma']['Pleroma.Captcha'][':enabled'] && adminConfig[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+            class="setting-list suboptions"
+          >
+            <h4>{{ $t('admin_dash.kocaptcha') }}</h4>
+            <li>
+              <StringSetting
+                source="admin"
+                :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']"
+                draft-mode
+              >
+                cockAPTCHA ENDPOINT
+              </StringSetting>
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
   </div>

src/components/settings_modal/helpers/choice_setting.js

@@ -11,7 +11,32 @@ export default {
     ...Setting.props,
     options: {
       type: Array,
-      required: true
+      required: false
+    },
+    optionLabelMap: {
+      type: Object,
+      required: false,
+      default: {}
+    }
+  },
+  computed: {
+    ...Setting.computed,
+    realOptions () {
+      if (this.source === 'admin') {
+        console.log(this.backendDescriptionSuggestions)
+        return this.backendDescriptionSuggestions.map(x => ({
+          key: x,
+          value: x,
+          label: this.optionLabelMap[x] || x
+        }))
+      }
+      return this.options
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    getValue (e) {
+      return e
     }
   }
 }

src/components/settings_modal/helpers/choice_setting.vue

@@ -3,15 +3,20 @@
     v-if="matchesExpertLevel"
     class="ChoiceSetting"
   >
-    <slot />
+    <template v-if="backendDescription">
+      {{ backendDescriptionLabel }}
+    </template>
+    <template v-else>
+      <slot />
+    </template>
     {{ ' ' }}
     <Select
-      :model-value="state"
+      :model-value="draftMode ? draft :state"
       :disabled="disabled"
       @update:modelValue="update"
     >
       <option
-        v-for="option in options"
+        v-for="option in realOptions"
         :key="option.key"
         :value="option.value"
       >
@@ -24,6 +29,13 @@
       :onclick="reset"
     />
     <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </label>
 </template>
 

src/components/settings_modal/helpers/number_setting.vue

@@ -4,7 +4,12 @@
     class="NumberSetting"
   >
     <label :for="path">
-      <slot />
+      <template v-if="backendDescription">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
     </label>
     <input
       :id="path"
@@ -21,6 +26,14 @@
       :changed="isChanged"
       :onclick="reset"
     />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
   </span>
 </template>
 

src/components/settings_modal/helpers/setting.js

@@ -13,7 +13,7 @@ export default {
   },
   props: {
     path: {
-      type: String,
+      type: [String, Array],
       required: true
     },
     disabled: {
@@ -21,7 +21,7 @@ export default {
       default: false
     },
     parentPath: {
-      type: String
+      type: [String, Array]
     },
     parentInvert: {
       type: Boolean,
@@ -68,6 +68,9 @@ export default {
     backendDescriptionDescription () {
       return this.backendDescription?.description
     },
+    backendDescriptionSuggestions () {
+      return this.backendDescription?.suggestions
+    },
     shouldBeDisabled () {
       const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
       return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)

src/components/settings_modal/helpers/shared_computed_object.js

@@ -7,6 +7,9 @@ const SharedComputedObject = () => ({
   },
   mergedConfig () {
     return this.$store.getters.mergedConfig
+  },
+  adminConfig () {
+    return this.$store.state.adminSettings.config
   }
 })
 

src/modules/adminSettings.js

@@ -29,7 +29,7 @@ const adminSettingsStorage = {
       const config = state.config || {}
       const modifiedPaths = state.modifiedPaths || new Set()
       backendDbConfig.configs.forEach(c => {
-        const path = c.group + '.' + c.key
+        const path = [c.group, c.key]
         if (c.db) {
           c.db.forEach(x => modifiedPaths.add(path + '.' + x))
         }
@@ -44,16 +44,16 @@ const adminSettingsStorage = {
         }
         set(config, path, convert(c.value))
       })
-      console.log(config[':pleroma'][':welcome'])
+      console.log(config[':pleroma'])
       commit('updateAdminSettings', { config, modifiedPaths })
     },
     setInstanceAdminDescriptions ({ state, commit, dispatch }, { backendDescriptions }) {
       const convert = ({ children, description, label, key = '<ROOT>', group, suggestions }, path, acc) => {
-        const newPath = group ? group + '.' + key : key
+        const newPath = group ? [group, key] : [key]
         const obj = { description, label, suggestions }
         if (Array.isArray(children)) {
           children.forEach(c => {
-            convert(c, '.' + newPath, obj)
+            convert(c, newPath, obj)
           })
         }
         set(acc, newPath, obj)
@@ -61,12 +61,13 @@ const adminSettingsStorage = {
 
       const descriptions = {}
       backendDescriptions.forEach(d => convert(d, '', descriptions))
+      console.log(descriptions[':pleroma']['Pleroma.Captcha'])
       commit('updateAdminDescriptions', { descriptions })
     },
     pushAdminSetting ({ rootState, state, commit, dispatch }, { path, value }) {
-      const [group, key, ...rest] = path.split(/\./g)
+      const [group, key, ...rest] = Array.isArray(path) ? path : path.split(/\./g)
       const clone = {} // not actually cloning the entire thing to avoid excessive writes
-      set(clone, rest.join('.'), value)
+      set(clone, rest, value)
 
       // TODO cleanup paths in modifiedPaths
       const convert = (value) => {