Fix rendering instance settings

front/.eslintrc.js

@@ -35,7 +35,6 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'off',
 
     // TODO (wvffle): Migrate to pinia
-    //                Vuex 3 store does not have types defined, hence we use `any`
     '@typescript-eslint/no-explicit-any': 'off',
 
     // TODO (wvffle): Migrate to <script setup>

front/src/components/admin/SettingsGroup.vue

@@ -144,8 +144,8 @@ const save = async () => {
       </template>
       <content-form
         v-if="setting.fieldType === 'markdown'"
-        v-model="values[setting.identifier]"
         v-bind="setting.fieldParams"
+        v-model="values[setting.identifier]"
       />
       <signup-form-builder
         v-else-if="setting.fieldType === 'formBuilder'"

front/src/components/admin/SignupFormBuilder.vue

@@ -103,6 +103,7 @@ const move = (idx: number, increment: number) => {
           </translate>
         </p>
         <content-form
+          v-if="value.help_text"
           v-model="value.help_text.text"
           field-id="help-text"
           :permissive="true"
@@ -117,7 +118,7 @@ const move = (idx: number, increment: number) => {
             Additional form fields to be displayed in the form. Only shown if manual sign-up validation is enabled.
           </translate>
         </p>
-        <table v-if="value.fields.length > 0">
+        <table v-if="value.fields?.length > 0">
           <thead>
             <tr>
               <th>
@@ -206,7 +207,7 @@ const move = (idx: number, increment: number) => {
         </table>
         <div class="ui hidden divider" />
         <button
-          v-if="value.fields.length < maxFields"
+          v-if="value.fields?.length < maxFields"
           class="ui basic button"
           @click.stop.prevent="addField"
         >

front/src/views/admin/Settings.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import type { SettingsGroup } from '~/types'
+import type { SettingsGroup as SettingsGroupType } from '~/types'
+
 import axios from 'axios'
 import $ from 'jquery'
 
+
+import SettingsGroup from '~/components/admin/SettingsGroup.vue'
+
 import { useCurrentElement } from '@vueuse/core'
 import { ref, nextTick, onMounted, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -112,7 +116,7 @@ const groups = computed(() => [
       { name: 'instance__nodeinfo_private' }
     ]
   }
-] as SettingsGroup[])
+] as SettingsGroupType[])
 
 const labels = computed(() => ({
   settings: $pgettext('Head/Admin/Title', 'Instance settings')