From a15c85cbd18adb1bd3b7670946d4483b81bad28e Mon Sep 17 00:00:00 2001
From: Pikachu920 <28607612+Pikachu920@users.noreply.github.com>
Date: Sat, 25 Mar 2023 10:22:30 -0500
Subject: [PATCH 1/4] Add helper text to email address field in setup

---
 src/components/Login/JellyfinLogin.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Login/JellyfinLogin.tsx b/src/components/Login/JellyfinLogin.tsx
index 5bd38301e..314a779fc 100644
--- a/src/components/Login/JellyfinLogin.tsx
+++ b/src/components/Login/JellyfinLogin.tsx
@@ -13,6 +13,7 @@ const messages = defineMessages({
   password: 'Password',
   host: '{mediaServerName} URL',
   email: 'Email',
+  emailtooltip: 'This can be any valid email. It doesn\'t need to come from your {mediaServerName} instance.',
   validationhostrequired: '{mediaServerName} URL required',
   validationhostformat: 'Valid URL required',
   validationemailrequired: 'Email required',
@@ -63,6 +64,12 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
       ),
       password: Yup.string(),
     });
+    const mediaServerFormatValues = {
+      mediaServerName:
+        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+          ? 'Emby'
+          : 'Jellyfin',
+    };
     return (
       <Formik
         initialValues={{
@@ -101,12 +108,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
           <Form>
             <div className="sm:border-t sm:border-gray-800">
               <label htmlFor="host" className="text-label">
-                {intl.formatMessage(messages.host, {
-                  mediaServerName:
-                    publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                      ? 'Emby'
-                      : 'Jellyfin',
-                })}
+                {intl.formatMessage(messages.host, mediaServerFormatValues)}
               </label>
               <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                 <div className="flex rounded-md shadow-sm">
@@ -114,12 +116,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                     id="host"
                     name="host"
                     type="text"
-                    placeholder={intl.formatMessage(messages.host, {
-                      mediaServerName:
-                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                          ? 'Emby'
-                          : 'Jellyfin',
-                    })}
+                    placeholder={intl.formatMessage(messages.host, mediaServerFormatValues)}
                   />
                 </div>
                 {errors.host && touched.host && (
@@ -128,6 +125,9 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
               </div>
               <label htmlFor="email" className="text-label">
                 {intl.formatMessage(messages.email)}
+                <span className="label-tip">
+                  {intl.formatMessage(messages.emailtooltip, mediaServerFormatValues)}
+                </span>
               </label>
               <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                 <div className="flex rounded-md shadow-sm">

From cd7930eef98451a781e5c9dc5ec223600a379f42 Mon Sep 17 00:00:00 2001
From: Fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
Date: Sun, 11 Jun 2023 06:36:51 +0500
Subject: [PATCH 2/4] feat(tooltip): email tooltip now appears when hovered
 over info icon

---
 src/components/Login/JellyfinLogin.tsx | 30 ++++++++++++++++++++------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/Login/JellyfinLogin.tsx b/src/components/Login/JellyfinLogin.tsx
index 314a779fc..1e7a1d35d 100644
--- a/src/components/Login/JellyfinLogin.tsx
+++ b/src/components/Login/JellyfinLogin.tsx
@@ -1,5 +1,7 @@
 import Button from '@app/components/Common/Button';
+import Tooltip from '@app/components/Common/Tooltip';
 import useSettings from '@app/hooks/useSettings';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
@@ -13,7 +15,7 @@ const messages = defineMessages({
   password: 'Password',
   host: '{mediaServerName} URL',
   email: 'Email',
-  emailtooltip: 'This can be any valid email. It doesn\'t need to come from your {mediaServerName} instance.',
+  emailtooltip: 'Any valid email. Unrelated to your {mediaServerName} instance',
   validationhostrequired: '{mediaServerName} URL required',
   validationhostformat: 'Valid URL required',
   validationemailrequired: 'Email required',
@@ -66,9 +68,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
     });
     const mediaServerFormatValues = {
       mediaServerName:
-        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-          ? 'Emby'
-          : 'Jellyfin',
+        publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
     };
     return (
       <Formik
@@ -116,17 +116,33 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                     id="host"
                     name="host"
                     type="text"
-                    placeholder={intl.formatMessage(messages.host, mediaServerFormatValues)}
+                    placeholder={intl.formatMessage(
+                      messages.host,
+                      mediaServerFormatValues
+                    )}
                   />
                 </div>
                 {errors.host && touched.host && (
                   <div className="error">{errors.host}</div>
                 )}
               </div>
-              <label htmlFor="email" className="text-label">
+              <label
+                htmlFor="email"
+                className="text-label"
+                style={{ display: 'inline-flex' }}
+              >
                 {intl.formatMessage(messages.email)}
                 <span className="label-tip">
-                  {intl.formatMessage(messages.emailtooltip, mediaServerFormatValues)}
+                  <Tooltip
+                    content={intl.formatMessage(
+                      messages.emailtooltip,
+                      mediaServerFormatValues
+                    )}
+                  >
+                    <span className="tooltip-trigger">
+                      <InformationCircleIcon className="h-5 w-5" />
+                    </span>
+                  </Tooltip>
                 </span>
               </label>
               <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">

From 9daceb70174e9ea763af75888644390e3125ebfa Mon Sep 17 00:00:00 2001
From: Fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
Date: Sun, 11 Jun 2023 06:54:37 +0500
Subject: [PATCH 3/4] style: offsetted the info icon and increased clarity in
 the tooltip message

---
 src/components/Login/JellyfinLogin.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Login/JellyfinLogin.tsx b/src/components/Login/JellyfinLogin.tsx
index 1e7a1d35d..a21c441cc 100644
--- a/src/components/Login/JellyfinLogin.tsx
+++ b/src/components/Login/JellyfinLogin.tsx
@@ -15,7 +15,8 @@ const messages = defineMessages({
   password: 'Password',
   host: '{mediaServerName} URL',
   email: 'Email',
-  emailtooltip: 'Any valid email. Unrelated to your {mediaServerName} instance',
+  emailtooltip:
+    'Any valid address. Unrelated to your {mediaServerName} instance.',
   validationhostrequired: '{mediaServerName} URL required',
   validationhostformat: 'Valid URL required',
   validationemailrequired: 'Email required',
@@ -140,7 +141,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                     )}
                   >
                     <span className="tooltip-trigger">
-                      <InformationCircleIcon className="h-5 w-5" />
+                      <InformationCircleIcon className="h-4 w-4" />
                     </span>
                   </Tooltip>
                 </span>

From b4c74de7b393192e19a7c6a0387e212d85e2e169 Mon Sep 17 00:00:00 2001
From: Fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
Date: Sun, 11 Jun 2023 07:05:07 +0500
Subject: [PATCH 4/4] style: added more clarity to the tooltip message

Previous commits wordings made it sound like it NEEDS to be unrelated to the mediaserver instance.
However, it can be any valid address
---
 src/components/Login/JellyfinLogin.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Login/JellyfinLogin.tsx b/src/components/Login/JellyfinLogin.tsx
index a21c441cc..ff9575ff8 100644
--- a/src/components/Login/JellyfinLogin.tsx
+++ b/src/components/Login/JellyfinLogin.tsx
@@ -16,7 +16,7 @@ const messages = defineMessages({
   host: '{mediaServerName} URL',
   email: 'Email',
   emailtooltip:
-    'Any valid address. Unrelated to your {mediaServerName} instance.',
+    'Address does not need to be associated with your {mediaServerName} instance.',
   validationhostrequired: '{mediaServerName} URL required',
   validationhostformat: 'Valid URL required',
   validationemailrequired: 'Email required',