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">
+    <div class="w-full flex items-center justify-center text-center">
-        <form class="children:pb-3">
+        <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">
+    <div class="flex flex-col items-center justify-center text-center">
-        <form class="items-center px-3 children:pb-3">
+        <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>

src/locales/en.json

@@ -212,6 +212,8 @@
         "hours": "{amount} hour(s)",
         "days": "{amount} day(s)",
         "weeks": "{amount} week(s)",
-        "months": "{amount} month(s)"
+        "months": "{amount} month(s)",
+        "register_note": "Register an account for this Piped instance. That allows you to sync your subscriptions and playlists with your account, hence they're saved on server side. You can use all features without an account too, however all data will only be stored in the local storage of the browser then. Please make sure to NOT use an email address as username, and to choose a safe password.",
+        "login_note": "Log in with an account that was created at this instance."
     }
 }