re-factor(front): use new components on plugin pages and pw reset

front/src/components/auth/Plugin.vue

@@ -67,20 +67,27 @@ const submitAndScan = async () => {
     :class="['ui form', {loading: isLoading}]"
     @submit.prevent="submit"
   >
-    <h3>{{ plugin.label }}</h3>
+    <h2>{{ plugin.label }}</h2>
-    <sanitized-html
+    <Alert blue>
-      v-if="plugin.description"
+    <Layout flex>
-      :html="description"
+      <p><i class="bi bi-info-circle-fill" /></p>
-    />
+        <Layout stack no-gap>
-    <template v-if="plugin.homepage">
+          <sanitized-html
-      <a
+            v-if="plugin.description"
-        :href="plugin.homepage"
+            :html="description"
-        target="_blank"
+          />
-      >
+          <template v-if="plugin.homepage">
-        <i class="external icon" />
+            <a
-        {{ t('components.auth.Plugin.link.documentation') }}
+              :href="plugin.homepage"
-      </a>
+              target="_blank"
-    </template>
+            >
+              <i class="bi bi-box-arrow-up-right" />
+              {{ t('components.auth.Plugin.link.documentation') }}
+            </a>
+          </template>
+        </Layout>
+      </Layout>
+    </Alert>
     <Alert
       v-if="errors.length > 0"
       red

front/src/views/auth/PasswordResetConfirm.vue

@@ -6,7 +6,10 @@ import { computed, ref } from 'vue'
 
 import axios from 'axios'
 
+import Layout from '~/components/ui/Layout.vue'
 import Alert from '~/components/ui/Alert.vue'
+import Input from '~/components/ui/Input.vue'
+import Link from '~/components/ui/Link.vue'
 import Button from '~/components/ui/Button.vue'
 
 interface Props {
@@ -56,15 +59,13 @@ const submit = async () => {
     class="main"
   >
     <h2>{{ labels.changePassword }}</h2>
-    <form
+    <Layout form
       v-if="!success"
-      class="ui form"
       @submit.prevent="submit()"
     >
       <Alert
         v-if="errors.length > 0"
-        role="alert"
+        red
-        class="ui negative message"
       >
         <h4 class="header">
           {{ t('views.auth.PasswordResetConfirm.header.failure') }}
@@ -83,26 +84,33 @@ const submit = async () => {
           <Input
             v-model="newPassword"
             password
-            label="t('views.auth.PasswordResetConfirm.label.newPassword')"
+            :label="t('views.auth.PasswordResetConfirm.label.newPassword')"
           />
         </div>
-        <router-link :to="{path: '/login'}">
+        <Layout flex>
-          {{ t('views.auth.PasswordResetConfirm.link.back') }}
+          <Link
-        </router-link>
+            solid
-        <Button
+            secondary
-          :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
+            :to="{path: '/login'}"
-          type="submit"
+          >
-          auto
+            {{ t('views.auth.PasswordResetConfirm.link.back') }}
-        >
+          </Link>
-          {{ t('views.auth.PasswordResetConfirm.button.update') }}
+          <Button
-        </Button>
+            :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
+            type="submit"
+            auto
+            primary
+          >
+            {{ t('views.auth.PasswordResetConfirm.button.update') }}
+          </Button>
+        </Layout>
       </template>
       <template v-else>
         <p>
           {{ t('views.auth.PasswordResetConfirm.message.requestSent') }}
         </p>
       </template>
-    </form>
+    </Layout>
     <Alert
       v-else
       green

front/src/views/auth/Plugins.vue

@@ -7,6 +7,7 @@ import axios from 'axios'
 import PluginForm from '~/components/auth/Plugin.vue'
 
 import Layout from '~/components/ui/Layout.vue'
+import Loader from '~/components/ui/Loader.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -46,13 +47,10 @@ fetchData()
     main
     stack
   >
-    <h2>{{ labels.title }}</h2>
+    <h1>{{ labels.title }}</h1>
-    <div
+    <Loader
       v-if="isLoading"
-      class="ui inverted active dimmer"
+    />
-    >
-      <div class="ui loader" />
-    </div>
 
     <template v-if="plugins && plugins.length > 0">
       <plugin-form