fix(login): add missing keys to PlexLoginButton FormattedMessage children

Uses setValues instead of setFieldValue calls to properly trigger the validation and also added a
validateOnMOunt to ensure form validity is checked on initial render.

fix #2287

package.json

@@ -103,7 +103,7 @@
     "swagger-ui-express": "4.6.2",
     "swr": "2.3.7",
     "tailwind-merge": "^2.6.0",
-    "typeorm": "0.3.28",
+    "typeorm": "0.3.12",
     "ua-parser-js": "^1.0.35",
     "undici": "^7.16.0",
     "validator": "^13.15.23",

src/components/Login/PlexLoginButton.tsx

@@ -3,6 +3,7 @@ import Button from '@app/components/Common/Button';
 import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import usePlexLogin from '@app/hooks/usePlexLogin';
 import defineMessages from '@app/utils/defineMessages';
+import { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 const messages = defineMessages('components.Login', {
@@ -46,8 +47,12 @@ const PlexLoginButton = ({
         >
           {(chunks) => (
             <>
-              {chunks.map((c) =>
-                typeof c === 'string' ? <span>{c}</span> : c
+              {chunks.map((c, index) =>
+                typeof c === 'string' ? (
+                  <span key={index}>{c}</span>
+                ) : (
+                  <Fragment key={index}>{c}</Fragment>
+                )
               )}
             </>
           )}

src/components/Settings/SettingsPlex.tsx

@@ -377,6 +377,7 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
           webAppUrl: data?.webAppUrl,
         }}
         validationSchema={PlexSettingsSchema}
+        validateOnMount={true}
         onSubmit={async (values) => {
           let toastId: string | null = null;
           try {
@@ -423,6 +424,7 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
           values,
           handleSubmit,
           setFieldValue,
+          setValues,
           isSubmitting,
           isValid,
         }) => {
@@ -445,9 +447,12 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                           availablePresets[Number(e.target.value)];
 
                         if (targPreset) {
-                          setFieldValue('hostname', targPreset.address);
-                          setFieldValue('port', targPreset.port);
-                          setFieldValue('useSsl', targPreset.ssl);
+                          setValues({
+                            ...values,
+                            hostname: targPreset.address,
+                            port: targPreset.port,
+                            useSsl: targPreset.ssl,
+                          });
                         }
                       }}
                     >

src/components/Setup/LoginWithPlex.tsx

@@ -28,7 +28,8 @@ const LoginWithPlex = ({ onComplete }: LoginWithPlexProps) => {
       const response = await axios.post('/api/v1/auth/plex', { authToken });
 
       if (response.data?.id) {
-        revalidate();
+        const { data: user } = await axios.get('/api/v1/auth/me');
+        revalidate(user, false);
       }
     };
     if (authToken) {