From 7c32201cb0b1826630159b1fcecf28ad8b91e13e Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 14 Sep 2023 17:24:00 +0200
Subject: [PATCH] feat: show explaination on register and login page

---
 src/components/LoginPage.vue    | 10 ++++++++--
 src/components/LoginPage.vue,   |  1 +
 src/components/RegisterPage.vue |  8 +++++---
 src/components/TooltipIcon.vue  | 29 +++++++++++++++++++++++++++++
 src/locales/en.json             |  4 +++-
 5 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 src/components/LoginPage.vue,
 create mode 100644 src/components/TooltipIcon.vue

diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index ab586a20..72c111c2 100644
--- a/src/components/LoginPage.vue
+++ b/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,
diff --git a/src/components/LoginPage.vue, b/src/components/LoginPage.vue,
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/components/LoginPage.vue,
@@ -0,0 +1 @@
+
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index c131c542..89dce364 100644
--- a/src/components/RegisterPage.vue
+++ b/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,
diff --git a/src/components/TooltipIcon.vue b/src/components/TooltipIcon.vue
new file mode 100644
index 00000000..a227377f
--- /dev/null
+++ b/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>
diff --git a/src/locales/en.json b/src/locales/en.json
index f294cb4d..4385a3cc 100644
--- a/src/locales/en.json
+++ b/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."
     }
 }