feat: add trailing whitespace warning on login username field (#2040) (#2177)

src/components/Login/JellyfinLogin.tsx

@@ -3,6 +3,7 @@ import SensitiveInput from '@app/components/Common/SensitiveInput';
 import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import { ApiErrorCode } from '@server/constants/error';
 import { MediaServerType, ServerType } from '@server/constants/server';
 import axios from 'axios';
@@ -22,6 +23,7 @@ const messages = defineMessages('components.Login', {
   noadminerror: 'No admin user found on the server.',
   credentialerror: 'The username or password is incorrect.',
   invalidurlerror: 'Unable to connect to {mediaServerName} server.',
+  tipUsernameHasTrailingWhitespace: 'The username ends with whitespace',
   signingin: 'Signing In…',
   signin: 'Sign In',
   forgotpassword: 'Forgot Password?',
@@ -108,7 +110,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
           }
         }}
       >
-        {({ errors, touched, isSubmitting, isValid }) => {
+        {({ errors, touched, values, isSubmitting, isValid }) => {
           return (
             <>
               <Form data-form-type="login">
@@ -130,6 +132,14 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                         data-form-type="username"
                       />
                     </div>
+                    {touched.username && values.username.match(/\s$/) && (
+                      <div className="warning label-tip flex items-center">
+                        <ExclamationTriangleIcon className="mr-1 h-4 w-4" />
+                        {intl.formatMessage(
+                          messages.tipUsernameHasTrailingWhitespace
+                        )}
+                      </div>
+                    )}
                     {errors.username && touched.username && (
                       <div className="error">{errors.username}</div>
                     )}

src/components/Login/LocalLogin.tsx

@@ -3,6 +3,7 @@ import SensitiveInput from '@app/components/Common/SensitiveInput';
 import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
@@ -18,6 +19,7 @@ const messages = defineMessages('components.Login', {
   validationemailrequired: 'You must provide a valid email address',
   validationpasswordrequired: 'You must provide a password',
   loginerror: 'Something went wrong while trying to sign in.',
+  tipEmailHasTrailingWhitespace: 'The email ends with whitespace',
   signingin: 'Signing In…',
   signin: 'Sign In',
   forgotpassword: 'Forgot Password?',
@@ -66,7 +68,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
         }
       }}
     >
-      {({ errors, touched, isSubmitting, isValid }) => {
+      {({ errors, touched, values, isSubmitting, isValid }) => {
         return (
           <>
             <Form data-form-type="login">
@@ -92,6 +94,14 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       className="!bg-gray-700/80 placeholder:text-gray-400"
                     />
                   </div>
+                  {touched.email && values.email.match(/\s$/) && (
+                    <div className="warning label-tip flex items-center">
+                      <ExclamationTriangleIcon className="mr-1 h-4 w-4" />
+                      {intl.formatMessage(
+                        messages.tipEmailHasTrailingWhitespace
+                      )}
+                    </div>
+                  )}
                   {errors.email &&
                     touched.email &&
                     typeof errors.email === 'string' && (

src/i18n/locale/en.json

@@ -269,6 +269,8 @@
   "components.Login.signinwithjellyfin": "Use your {mediaServerName} account",
   "components.Login.signinwithoverseerr": "Use your {applicationTitle} account",
   "components.Login.signinwithplex": "Use your Plex account",
+  "components.Login.tipEmailHasTrailingWhitespace": "The email ends with whitespace",
+  "components.Login.tipUsernameHasTrailingWhitespace": "The username ends with whitespace",
   "components.Login.title": "Add Email",
   "components.Login.urlBase": "URL Base",
   "components.Login.username": "Username",

src/styles/globals.css

@@ -382,6 +382,10 @@
     @apply mt-2 text-sm text-red-500;
   }
 
+  .warning {
+    @apply mt-2 text-sm text-yellow-500;
+  }
+
   .form-group {
     @apply mt-6 text-white;
   }