feat: show explaination on register and login page

src/components/LoginPage.vue

@@ -1,8 +1,8 @@
 <template>
     <h1 v-t="'titles.login'" class="my-4 text-center font-bold" />
     <hr />
-    <div class="text-center">
-        <form class="children:pb-3">
+    <div class="w-full flex items-center justify-center text-center">
+        <form class="w-min children:pb-3">
             <div>
                 <input
                     v-model="username"
@@ -28,12 +28,18 @@
             <div>
                 <a v-t="'titles.login'" class="btn w-auto" @click="login" />
             </div>
+            <TooltipIcon icon="i-fa6-solid:circle-info" :tooltip="$t('info.login_note')" />
         </form>
     </div>
 </template>
 
 <script>
+import TooltipIcon from "./TooltipIcon.vue";
+
 export default {
+    components: {
+        TooltipIcon,
+    },
     data() {
         return {
             username: null,

src/components/LoginPage.vue,

@@ -0,0 +1 @@
+

src/components/RegisterPage.vue

@@ -1,8 +1,8 @@
 <template>
     <h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
     <hr />
-    <div class="flex justify-center text-center">
-        <form class="items-center px-3 children:pb-3">
+    <div class="flex flex-col items-center justify-center text-center">
+        <form class="w-max items-center px-3 children:pb-3">
             <div>
                 <input
                     v-model="username"
@@ -45,6 +45,7 @@
             <div>
                 <a v-t="'titles.register'" class="btn w-auto" @click="register" />
             </div>
+            <TooltipIcon icon="i-fa6-solid:circle-info" :tooltip="$t('info.register_note')" />
         </form>
     </div>
     <ConfirmModal
@@ -62,9 +63,10 @@
 <script>
 import { isEmail } from "../utils/Misc.js";
 import ConfirmModal from "./ConfirmModal.vue";
+import TooltipIcon from "./TooltipIcon.vue";
 
 export default {
-    components: { ConfirmModal },
+    components: { ConfirmModal, TooltipIcon },
     data() {
         return {
             username: null,

src/components/TooltipIcon.vue

@@ -0,0 +1,29 @@
+<template>
+    <div id="container" class="w-full">
+        <div :class="icon" class="cursor-pointer"></div>
+        <p id="tooltip" class="absolute mr-[20vw] mt-2 hidden rounded-l bg-gray-800 px-2 py-1 text-gray-200">
+            {{ tooltip }}
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        icon: {
+            type: String, // the class name of a font awesome icon
+            required: true,
+        },
+        tooltip: {
+            type: String,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style>
+#container:hover #tooltip {
+    display: block;
+}
+</style>