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

src/components/Login/JellyfinLogin.tsx

@@ -1,5 +1,6 @@
 import Button from '@app/components/Common/Button';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
+import UsernameInput from '@app/components/Login/UsernameInput';
 import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
@@ -120,16 +121,15 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                   </h2>
 
                   <div className="mt-1 mb-4">
-                    <div className="form-input-field">
-                      <Field
-                        id="username"
-                        name="username"
-                        type="text"
-                        placeholder={intl.formatMessage(messages.username)}
-                        className="!bg-gray-700/80 placeholder:text-gray-400"
-                        data-form-type="username"
-                      />
-                    </div>
+                    <Field
+                      id="username"
+                      name="username"
+                      type="text"
+                      placeholder={intl.formatMessage(messages.username)}
+                      className="!bg-gray-700/80 placeholder:text-gray-400"
+                      data-form-type="username"
+                      component={UsernameInput}
+                    />
                     {errors.username && touched.username && (
                       <div className="error">{errors.username}</div>
                     )}

src/components/Login/LocalLogin.tsx

@@ -1,5 +1,6 @@
 import Button from '@app/components/Common/Button';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
+import UsernameInput from '@app/components/Login/UsernameInput';
 import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
@@ -78,20 +79,19 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                 </h2>
 
                 <div className="mt-1 mb-4">
-                  <div className="form-input-field">
-                    <Field
-                      id="email"
-                      name="email"
-                      placeholder={`${intl.formatMessage(
-                        messages.email
-                      )} / ${intl.formatMessage(messages.username)}`}
-                      type="text"
-                      inputMode="email"
-                      data-testid="email"
-                      data-form-type="username,email"
-                      className="!bg-gray-700/80 placeholder:text-gray-400"
-                    />
-                  </div>
+                  <Field
+                    id="email"
+                    name="email"
+                    placeholder={`${intl.formatMessage(
+                      messages.email
+                    )} / ${intl.formatMessage(messages.username)}`}
+                    type="text"
+                    inputMode="email"
+                    data-testid="email"
+                    data-form-type="username,email"
+                    className="!bg-gray-700/80 placeholder:text-gray-400"
+                    component={UsernameInput}
+                  />
                   {errors.email &&
                     touched.email &&
                     typeof errors.email === 'string' && (

src/components/Login/UsernameInput.tsx

@@ -0,0 +1,29 @@
+import defineMessages from '@app/utils/defineMessages';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
+import type { FieldProps } from 'formik';
+import { useIntl } from 'react-intl';
+
+const messages = defineMessages('components.Login', {
+  tipUsernameHasTrailingWhitespace: 'The username/email ends with a space',
+});
+
+const hasTrailingWhitespace = (value: string): boolean => {
+  return /\s$/.test(value);
+};
+
+const UsernameInput = ({ field, form: { touched }, ...props }: FieldProps) => {
+  const intl = useIntl();
+  return (
+    <div>
+      <input type="text" {...field} {...props} />
+      {field.name in touched && hasTrailingWhitespace(field.value) ? (
+        <div className="warning label-tip flex items-center">
+          <ExclamationTriangleIcon className="mr-1 h-4 w-4" />
+          {intl.formatMessage(messages.tipUsernameHasTrailingWhitespace)}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default UsernameInput;

src/i18n/locale/en.json

@@ -266,6 +266,7 @@
   "components.Login.signinwithjellyfin": "Use your {mediaServerName} account",
   "components.Login.signinwithoverseerr": "Use your {applicationTitle} account",
   "components.Login.signinwithplex": "Use your Plex account",
+  "components.Login.tipUsernameHasTrailingWhitespace": "The username/email ends with a space",
   "components.Login.title": "Add Email",
   "components.Login.urlBase": "URL Base",
   "components.Login.username": "Username",

src/styles/globals.css

@@ -378,6 +378,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;
   }