chore(front): refactor plugin settings pages

front/src/components/auth/Plugin.vue

@@ -7,6 +7,12 @@ import useMarkdown, { useMarkdownRaw } from '~/composables/useMarkdown'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Layout from '~/components/ui/Layout.vue'
+import Input from '~/components/ui/Input.vue'
+import Toggle from '~/components/ui/Toggle.vue'
+import Alert from '~/components/ui/Alert.vue'
+import Button from '~/components/ui/Button.vue'
+
 interface Props {
   plugin: Plugin
   libraries: Library[]
@@ -56,8 +62,9 @@ const submitAndScan = async () => {
 </script>
 
 <template>
-  <form
-    :class="['ui segment form', {loading: isLoading}]"
+  <Layout
+    form
+    :class="['ui form', {loading: isLoading}]"
     @submit.prevent="submit"
   >
     <h3>{{ plugin.label }}</h3>
@@ -66,7 +73,6 @@ const submitAndScan = async () => {
       :html="description"
     />
     <template v-if="plugin.homepage">
-      <div class="ui small hidden divider" />
       <a
         :href="plugin.homepage"
         target="_blank"
@@ -75,11 +81,9 @@ const submitAndScan = async () => {
         {{ t('components.auth.Plugin.link.documentation') }}
       </a>
     </template>
-    <div class="ui clearing hidden divider" />
-    <div
+    <Alert
       v-if="errors.length > 0"
-      role="alert"
-      class="ui negative message"
+      red
     >
       <h4 class="header">
         {{ t('components.auth.Plugin.header.failure') }}
@@ -92,18 +96,14 @@ const submitAndScan = async () => {
           {{ error }}
         </li>
       </ul>
-    </div>
+    </Alert>
     <div class="field">
-      <div class="ui toggle checkbox">
-        <input
-          :id="`${plugin.name}-enabled`"
-          v-model="enabled"
-          type="checkbox"
-        >
-        <label :for="`${plugin.name}-enabled`">{{ t('components.auth.Plugin.label.pluginEnabled') }}</label>
-      </div>
+      <Toggle
+        v-model="enabled"
+        big
+        :label="t('components.auth.Plugin.label.pluginEnabled')"
+      />
     </div>
-    <div class="ui clearing hidden divider" />
     <div
       v-if="plugin.source"
       class="field"
@@ -134,12 +134,12 @@ const submitAndScan = async () => {
           v-if="field.type === 'text'"
           class="field"
         >
-          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-          <input
+          <Input
             :id="`plugin-${field.name}`"
             v-model="values[field.name]"
+            :label="field.label || field.name"
             type="text"
-          >
+          />
           <sanitized-html
             v-if="field.help"
             :html="useMarkdownRaw(field.help)"
@@ -149,10 +149,10 @@ const submitAndScan = async () => {
           v-if="field.type === 'long_text'"
           class="field"
         >
-          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
           <textarea
             :id="`plugin-${field.name}`"
             v-model="values[field.name]"
+            :label="field.label || field.name"
             type="text"
             rows="5"
           />
@@ -165,12 +165,12 @@ const submitAndScan = async () => {
           v-if="field.type === 'url'"
           class="field"
         >
-          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-          <input
+          <Input
             :id="`plugin-${field.name}`"
             v-model="values[field.name]"
+            :label="field.label || field.name"
             type="url"
-          >
+          />
           <sanitized-html
             v-if="field.help"
             :html="useMarkdownRaw(field.help)"
@@ -180,12 +180,12 @@ const submitAndScan = async () => {
           v-if="field.type === 'password'"
           class="field"
         >
-          <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-          <input
+          <Input
             :id="`plugin-${field.name}`"
             v-model="values[field.name]"
-            type="password"
-          >
+            :label="field.label || field.name"
+            password
+          />
           <sanitized-html
             v-if="field.help"
             :html="useMarkdownRaw(field.help)"
@@ -195,30 +195,27 @@ const submitAndScan = async () => {
           v-if="field.type === 'boolean'"
           class="field"
         >
-          <div class="ui toggle checkbox">
-            <input
-              :id="`plugin-${field.name}`"
-              v-model="values[field.name]"
-              type="checkbox"
-            >
-            <label :for="`plugin-${field.name}`">{{ field.label || field.name }}</label>
-          </div>
+          <Toggle
+            v-model="values[field.name]"
+            :label="field.label || field.name"
+          />
         </div>
       </template>
     </template>
-    <button
+    <Button
       type="submit"
-      :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
+      primary
+      :class="[{'loading': isLoading}]"
     >
       {{ t('components.auth.Plugin.button.save') }}
-    </button>
-    <button
+    </Button>
+    <Button
       v-if="plugin.source"
-      :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
+      primary
+      :class="[{'loading': isLoading}]"
       @click.prevent="submitAndScan"
     >
       {{ t('components.auth.Plugin.button.scan') }}
-    </button>
-    <div class="ui clearing hidden divider" />
-  </form>
+    </Button>
+  </Layout>
 </template>

front/src/components/auth/Settings.vue

@@ -685,12 +685,14 @@ fetchOwnedApps()
       <p>
         {{ t('components.auth.Settings.description.plugins') }}
       </p>
-      <Button
+      <Link
         primary
+        solid
         :to="{name: 'settings.plugins'}"
+        icon="bi-puzzle-fill"
       >
         {{ t('components.auth.Settings.link.managePlugins') }}
-      </Button>
+      </Link>
     </section>
     <section class="ui text container">
       <div class="ui hidden divider" />

front/src/views/auth/Plugins.vue

@@ -6,6 +6,8 @@ import axios from 'axios'
 
 import PluginForm from '~/components/auth/Plugin.vue'
 
+import Layout from '~/components/ui/Layout.vue'
+
 import useErrorHandler from '~/composables/useErrorHandler'
 
 const { t } = useI18n()
@@ -39,30 +41,27 @@ fetchData()
 </script>
 
 <template>
-  <main
+  <Layout
     v-title="labels.title"
-    class="main"
+    main
+    stack
   >
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2>{{ labels.title }}</h2>
-        <div
-          v-if="isLoading"
-          class="ui inverted active dimmer"
-        >
-          <div class="ui loader" />
-        </div>
+    <h2>{{ labels.title }}</h2>
+    <div
+      v-if="isLoading"
+      class="ui inverted active dimmer"
+    >
+      <div class="ui loader" />
+    </div>
 
-        <template v-if="plugins && plugins.length > 0">
-          <plugin-form
-            v-for="plugin in plugins"
-            :key="plugin.name"
-            :plugin="plugin"
-            :libraries="libraries"
-          />
-        </template>
-        <empty-state v-else />
-      </div>
-    </section>
-  </main>
+    <template v-if="plugins && plugins.length > 0">
+      <plugin-form
+        v-for="plugin in plugins"
+        :key="plugin.name"
+        :plugin="plugin"
+        :libraries="libraries"
+      />
+    </template>
+    <empty-state v-else />
+  </Layout>
 </template>