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

front/src/components/auth/Plugin.vue

@@ -67,7 +67,11 @@ const submitAndScan = async () => {
     :class="['ui form', {loading: isLoading}]"
     @submit.prevent="submit"
   >
-    <h3>{{ plugin.label }}</h3>
+    <h2>{{ plugin.label }}</h2>
+    <Alert blue>
+    <Layout flex>
+      <p><i class="bi bi-info-circle-fill" /></p>
+        <Layout stack no-gap>
           <sanitized-html
             v-if="plugin.description"
             :html="description"
@@ -77,10 +81,13 @@ const submitAndScan = async () => {
               :href="plugin.homepage"
               target="_blank"
             >
-        <i class="external icon" />
+              <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"
-        class="ui negative message"
+        red
       >
         <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>
+          <Link
+            solid
+            secondary
+            :to="{path: '/login'}"
+          >
             {{ t('views.auth.PasswordResetConfirm.link.back') }}
-        </router-link>
+          </Link>
           <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>
-    <div
+    <h1>{{ labels.title }}</h1>
+    <Loader
       v-if="isLoading"
-      class="ui inverted active dimmer"
-    >
-      <div class="ui loader" />
-    </div>
+    />
 
     <template v-if="plugins && plugins.length > 0">
       <plugin-form