Merge pull request #2951 from Bnyro/register-info

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>

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."
     }
 }