chore(front): refactor admin settings

front/src/components/admin/SettingsGroup.vue

@@ -8,6 +8,13 @@ import { useStore } from '~/store'
 import useLogger from '~/composables/useLogger'
 import { useI18n } from 'vue-i18n'
 
+import Layout from '~/components/ui/Layout.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Input from '~/components/ui/Input.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
+
 const { t } = useI18n()
 
 interface Props {
@@ -99,19 +106,18 @@ const save = async () => {
 </script>
 
 <template>
-  <form
+  <Layout
     :id="group.id"
+    form
     class="ui form component-settings-group"
     @submit.prevent="save"
   >
-    <div class="ui divider" />
-    <h3 class="ui header">
+    <h2>
       {{ group.label }}
-    </h3>
-    <div
+    </h2>
+    <Alert
       v-if="errors.length > 0"
-      role="alert"
-      class="ui negative message"
+      red
     >
       <h4 class="header">
         {{ t('components.admin.SettingsGroup.header.error') }}
@@ -124,13 +130,13 @@ const save = async () => {
           {{ error }}
         </li>
       </ul>
-    </div>
-    <div
+    </Alert>
+    <Alert
       v-if="result"
-      class="ui positive message"
+      green
     >
       {{ t('components.admin.SettingsGroup.message.success') }}
-    </div>
+    </Alert>
     <div
       v-for="(setting, key) in settings"
       :key="key"
@@ -154,53 +160,43 @@ const save = async () => {
         :signup-approval-enabled="!!values.moderation__signup_approval_enabled"
       />
       <!-- eslint-enable vue/valid-v-model -->
-      <input
+      <Input
         v-else-if="setting.field.widget.class === 'PasswordInput'"
-        :id="setting.identifier"
         v-model="values[setting.identifier]"
-        :name="setting.identifier"
+        password
         type="password"
         class="ui input"
-      >
-      <input
+      />
+      <Input
         v-else-if="setting.field.widget.class === 'TextInput'"
-        :id="setting.identifier"
         v-model="values[setting.identifier]"
-        :name="setting.identifier"
         type="text"
         class="ui input"
-      >
-      <input
+      />
+      <Input
         v-else-if="setting.field.class === 'IntegerField'"
-        :id="setting.identifier"
         v-model.number="values[setting.identifier]"
-        :name="setting.identifier"
         type="number"
         class="ui input"
-      >
+      />
       <!-- eslint-disable vue/valid-v-model -->
       <textarea
         v-else-if="setting.field.widget.class === 'Textarea'"
-        :id="setting.identifier"
         v-model="values[setting.identifier] as string"
-        :name="setting.identifier"
         type="text"
         class="ui input"
       />
       <!-- eslint-enable vue/valid-v-model -->
       <div
         v-else-if="setting.field.widget.class === 'CheckboxInput'"
-        class="ui toggle checkbox"
       >
         <!-- eslint-disable vue/valid-v-model -->
-        <input
-          :id="setting.identifier"
+        <Toggle
           v-model="values[setting.identifier] as boolean"
-          :name="setting.identifier"
-          type="checkbox"
-        >
+          big
+          :label="setting.verbose_name"
+        />
         <!-- eslint-enable vue/valid-v-model -->
-        <label :for="setting.identifier">{{ setting.verbose_name }}</label>
         <p v-if="setting.help_text">
           {{ setting.help_text }}
         </p>
@@ -211,6 +207,7 @@ const save = async () => {
         v-model="values[setting.identifier]"
         multiple
         class="ui search selection dropdown"
+        style="height: 150px;"
       >
         <option
           v-for="v in setting.additional_data?.choices"
@@ -235,13 +232,12 @@ const save = async () => {
         </option>
       </select>
       <div v-else-if="setting.field.widget.class === 'ImageWidget'">
-        <input
+        <Input
           :id="setting.identifier"
           :ref="setFileRef(setting.identifier)"
           type="file"
-        >
+        />
         <div v-if="values[setting.identifier]">
-          <div class="ui hidden divider" />
           <h3 class="ui header">
             {{ t('components.admin.SettingsGroup.header.image') }}
           </h3>
@@ -254,11 +250,13 @@ const save = async () => {
         </div>
       </div>
     </div>
-    <button
+    <Button
       type="submit"
       :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
+      primary
     >
       {{ t('components.admin.SettingsGroup.button.save') }}
-    </button>
-  </form>
+    </Button>
+    <Spacer :size="32" />
+  </Layout>
 </template>

front/src/views/admin/Settings.vue

@@ -12,14 +12,8 @@ import { useRoute } from 'vue-router'
 import SettingsGroup from '~/components/admin/SettingsGroup.vue'
 
 import Layout from '~/components/ui/Layout.vue'
-import Toc from '~/components/ui/Toc.vue'
-import Section from '~/components/ui/Section.vue'
-import Header from '~/components/ui/Header.vue'
-import Button from '~/components/ui/Button.vue'
-import Alert from '~/components/ui/Alert.vue'
-import Spacer from '~/components/ui/Spacer.vue'
-import Pills from '~/components/ui/Pills.vue'
 import Loader from '~/components/ui/Loader.vue'
+import Toc from '~/components/ui/Toc.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -197,6 +191,7 @@ await nextTick()
     stack
     :class="['ui', {'loading': isLoading}]"
   >
+    <Loader v-if="isLoading" />
     <div
       v-if="settingsData"
       id="settings-grid"