refactor(jellyfin): abstract jellyfin hostname, updated ui to reflect it, better validation (#773)

* refactor(jellyfinsettings): abstract jellyfin hostname, updated ui to reflect it, better validation

This PR refactors and abstracts jellyfin hostname into, jellyfin ip, jellyfin port, jellyfin useSsl,
and jellyfin urlBase. This makes it more consistent with how plex settings are stored as well. In
addition, this improves validation as validation can be applied seperately to them instead of as one
whole regex doing the work to validate the url.
UI was updated to reflect this.

BREAKING CHANGE: Jellyfin settings now does not include a hostname. Instead it abstracted it to ip,
port, useSsl, and urlBase. However, migration of old settings to new settings should work
automatically.

* refactor: remove console logs and use getHostname and ApiErrorCodes

* fix: store req.body jellyfin settings temporarily and store only if valid

This should fix the issue where settings are saved even if the url
was invalid. Now the settings will only be saved if the url is
valid. Sort of like a test connection.

* refactor: clean up commented out code

* refactor(i18n): extract translation keys

* fix(auth): auth failing with jellyfin login is disabled

* fix(settings): jellyfin migrations replacing the rest of the settings

* fix(settings): jellyfin hostname should be carried out if hostname exists

* fix(settings): merging the wrong settings source

* refactor(settings): use migrator for dynamic settings migrations

* refactor(settingsmigrator): settings migration handler and the migrations

* test(cypress): fix cypress tests failing

cypress settings were lacking some of the jobs so when the startJobs() is called when the app
starts, it was failing to schedule the jobs where their cron timings were not specified in the
cypress settings. Therefore, this commit adds those jobs back. In addition, other setting options
were added to keep cypress settings consistent with a normal user.

* chore(prettierignore): ignore cypress/config/settings.cypress.json as it does not need prettier

* chore(prettier): ran formatter on cypress config to fix format check error

format check locally passes on this file. However, it fails during the github actions format check.
Therefore, json language features formatter was run instead of prettier to see if that fixes the
issue.

* test(cypress): add only missing jobs to the cypress settings

* ci: attempt at trying to get formatter to pass on cypress config json file

* refactor: revert the changes brought to try and fix formatter

added back the rest of the cypress settings and removed cypress settings from .prettierignore

* refactor(settings): better erorr logging when jellyfin connection test fails in settings page

src/components/Login/JellyfinLogin.tsx

@@ -14,7 +14,10 @@ import * as Yup from 'yup';
 const messages = defineMessages({
   username: 'Username',
   password: 'Password',
-  host: '{mediaServerName} URL',
+  hostname: '{mediaServerName} URL',
+  port: 'Port',
+  enablessl: 'Use SSL',
+  urlBase: 'URL Base',
   email: 'Email',
   emailtooltip:
     'Address does not need to be associated with your {mediaServerName} instance.',
@@ -24,6 +27,11 @@ const messages = defineMessages({
   validationemailformat: 'Valid email required',
   validationusernamerequired: 'Username required',
   validationpasswordrequired: 'Password required',
+  validationHostnameRequired: 'You must provide a valid hostname or IP address',
+  validationPortRequired: 'You must provide a valid port number',
+  validationUrlTrailingSlash: 'URL must not end in a trailing slash',
+  validationUrlBaseLeadingSlash: 'URL base must have a leading slash',
+  validationUrlBaseTrailingSlash: 'URL base must not end in a trailing slash',
   loginerror: 'Something went wrong while trying to sign in.',
   adminerror: 'You must use an admin account to sign in.',
   credentialerror: 'The username or password is incorrect.',
@@ -51,16 +59,23 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
 
   if (initial) {
     const LoginSchema = Yup.object().shape({
-      host: Yup.string()
+      hostname: Yup.string().required(
+        intl.formatMessage(messages.validationhostrequired, {
+          mediaServerName:
+            publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+        })
+      ),
+      port: Yup.number().required(
+        intl.formatMessage(messages.validationPortRequired)
+      ),
+      urlBase: Yup.string()
         .matches(
-          /^(?:(?:(?:https?):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/,
-          intl.formatMessage(messages.validationhostformat)
+          /^(\/[^/].*[^/]$)/,
+          intl.formatMessage(messages.validationUrlBaseLeadingSlash)
         )
-        .required(
-          intl.formatMessage(messages.validationhostrequired, {
-            mediaServerName:
-              publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
-          })
+        .matches(
+          /^(.*[^/])$/,
+          intl.formatMessage(messages.validationUrlBaseTrailingSlash)
         ),
       email: Yup.string()
         .email(intl.formatMessage(messages.validationemailformat))
@@ -75,12 +90,16 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
       mediaServerName:
         publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
     };
+
     return (
       <Formik
         initialValues={{
           username: '',
           password: '',
-          host: '',
+          hostname: '',
+          port: 8096,
+          useSsl: false,
+          urlBase: '',
           email: '',
         }}
         validationSchema={LoginSchema}
@@ -89,7 +108,10 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
             await axios.post('/api/v1/auth/jellyfin', {
               username: values.username,
               password: values.password,
-              hostname: values.host,
+              hostname: values.hostname,
+              port: values.port,
+              useSsl: values.useSsl,
+              urlBase: values.urlBase,
               email: values.email,
             });
           } catch (e) {
@@ -121,32 +143,100 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
           }
         }}
       >
-        {({ errors, touched, isSubmitting, isValid }) => (
+        {({
+          errors,
+          touched,
+          values,
+          setFieldValue,
+          isSubmitting,
+          isValid,
+        }) => (
           <Form>
             <div className="sm:border-t sm:border-gray-800">
-              <label htmlFor="host" className="text-label">
-                {intl.formatMessage(messages.host, mediaServerFormatValues)}
+              <div className="flex flex-col sm:flex-row sm:gap-4">
+                <div className="w-full">
+                  <label htmlFor="hostname" className="text-label">
+                    {intl.formatMessage(
+                      messages.hostname,
+                      mediaServerFormatValues
+                    )}
+                  </label>
+                  <div className="mt-1 mb-2 sm:col-span-2 sm:mb-0 sm:mt-0">
+                    <div className="flex rounded-md shadow-sm">
+                      <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
+                        {values.useSsl ? 'https://' : 'http://'}
+                      </span>
+                      <Field
+                        id="hostname"
+                        name="hostname"
+                        type="text"
+                        className="rounded-r-only flex-1"
+                        placeholder={intl.formatMessage(
+                          messages.hostname,
+                          mediaServerFormatValues
+                        )}
+                      />
+                    </div>
+                    {errors.hostname && touched.hostname && (
+                      <div className="error">{errors.hostname}</div>
+                    )}
+                  </div>
+                </div>
+                <div className="flex-1">
+                  <label htmlFor="port" className="text-label">
+                    {intl.formatMessage(messages.port)}
+                  </label>
+                  <div className="mt-1 sm:mt-0">
+                    <Field
+                      id="port"
+                      name="port"
+                      inputMode="numeric"
+                      type="text"
+                      className="short flex-1"
+                      placeholder={intl.formatMessage(messages.port)}
+                    />
+                    {errors.port && touched.port && (
+                      <div className="error">{errors.port}</div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <label htmlFor="useSsl" className="text-label mt-2">
+                {intl.formatMessage(messages.enablessl)}
+              </label>
+              <div className="mt-1 mb-2 sm:col-span-2">
+                <div className="flex rounded-md shadow-sm">
+                  <Field
+                    id="useSsl"
+                    name="useSsl"
+                    type="checkbox"
+                    onChange={() => {
+                      setFieldValue('useSsl', !values.useSsl);
+                      setFieldValue('port', values.useSsl ? 8096 : 443);
+                    }}
+                  />
+                </div>
+              </div>
+              <label htmlFor="urlBase" className="text-label mt-1">
+                {intl.formatMessage(messages.urlBase)}
               </label>
               <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
                 <div className="flex rounded-md shadow-sm">
                   <Field
-                    id="host"
-                    name="host"
                     type="text"
-                    placeholder={intl.formatMessage(
-                      messages.host,
-                      mediaServerFormatValues
-                    )}
+                    inputMode="url"
+                    id="urlBase"
+                    name="urlBase"
+                    placeholder={intl.formatMessage(messages.urlBase)}
                   />
                 </div>
-                {errors.host && touched.host && (
-                  <div className="error">{errors.host}</div>
+                {errors.urlBase && touched.urlBase && (
+                  <div className="error">{errors.urlBase}</div>
                 )}
               </div>
               <label
                 htmlFor="email"
-                className="text-label"
-                style={{ display: 'inline-flex' }}
+                className="text-label inline-flex gap-1 align-middle"
               >
                 {intl.formatMessage(messages.email)}
                 <span className="label-tip">
@@ -162,7 +252,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                   </Tooltip>
                 </span>
               </label>
-              <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+              <div className="mt-1 sm:col-span-2 sm:mb-2 sm:mt-0">
                 <div className="flex rounded-md shadow-sm">
                   <Field
                     id="email"

src/components/Settings/SettingsJellyfin.tsx

@@ -4,6 +4,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import LibraryItem from '@app/components/Settings/LibraryItem';
 import globalMessages from '@app/i18n/globalMessages';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
+import { ApiErrorCode } from '@server/constants/error';
 import type { JellyfinSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
@@ -32,14 +33,17 @@ const messages = defineMessages({
   jellyfinSettingsDescription:
     'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL. A custom password reset URL can also be set for {mediaServerName} login, in case you would like to redirect to a different password reset page.',
   externalUrl: 'External URL',
-  internalUrl: 'Internal URL',
+  hostname: 'Hostname or IP Address',
+  port: 'Port',
+  enablessl: 'Use SSL',
+  urlBase: 'URL Base',
   jellyfinForgotPasswordUrl: 'Forgot Password URL',
   jellyfinSyncFailedNoLibrariesFound: 'No libraries were found',
   jellyfinSyncFailedAutomaticGroupedFolders:
     'Custom authentication with Automatic Library Grouping not supported',
   jellyfinSyncFailedGenericError:
     'Something went wrong while syncing libraries',
-  validationUrl: 'You must provide a valid URL',
+  invalidurlerror: 'Unable to connect to {mediaServerName} server.',
   syncing: 'Syncing',
   syncJellyfin: 'Sync Libraries',
   manualscanJellyfin: 'Manual Library Scan',
@@ -50,6 +54,12 @@ const messages = defineMessages({
   librariesRemaining: 'Libraries Remaining: {count}',
   startscan: 'Start Scan',
   cancelscan: 'Cancel Scan',
+  validationUrl: 'You must provide a valid URL',
+  validationHostnameRequired: 'You must provide a valid hostname or IP address',
+  validationPortRequired: 'You must provide a valid port number',
+  validationUrlTrailingSlash: 'URL must not end in a trailing slash',
+  validationUrlBaseLeadingSlash: 'URL base must have a leading slash',
+  validationUrlBaseTrailingSlash: 'URL base must not end in a trailing slash',
 });
 
 interface Library {
@@ -65,6 +75,7 @@ interface SyncStatus {
   currentLibrary?: Library;
   libraries: Library[];
 }
+
 interface SettingsJellyfinProps {
   showAdvancedSettings?: boolean;
   onComplete?: () => void;
@@ -93,18 +104,50 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
   const { publicRuntimeConfig } = getConfig();
 
   const JellyfinSettingsSchema = Yup.object().shape({
-    jellyfinExternalUrl: Yup.string().matches(
-      /^(https?:\/\/)?(?:[\w-]+\.)*[\w-]+(?::\d{2,5})?(?:\/[\w-]+)*(?:\/)?$/gm,
-      intl.formatMessage(messages.validationUrl)
-    ),
-    jellyfinInternalUrl: Yup.string().matches(
-      /^(https?:\/\/)?(?:[\w-]+\.)*[\w-]+(?::\d{2,5})?(?:\/[\w-]+)*(?:\/)?$/gm,
-      intl.formatMessage(messages.validationUrl)
-    ),
-    jellyfinForgotPasswordUrl: Yup.string().matches(
-      /^(https?:\/\/)?(?:[\w-]+\.)*[\w-]+(?::\d{2,5})?(?:\/[\w-]+)*(?:\/)?$/gm,
-      intl.formatMessage(messages.validationUrl)
-    ),
+    hostname: Yup.string()
+      .nullable()
+      .required(intl.formatMessage(messages.validationHostnameRequired))
+      .matches(
+        /^(((([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])):((([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))@)?(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
+        intl.formatMessage(messages.validationHostnameRequired)
+      ),
+    port: Yup.number().when(['hostname'], {
+      is: (value: unknown) => !!value,
+      then: Yup.number()
+        .typeError(intl.formatMessage(messages.validationPortRequired))
+        .nullable()
+        .required(intl.formatMessage(messages.validationPortRequired)),
+      otherwise: Yup.number()
+        .typeError(intl.formatMessage(messages.validationPortRequired))
+        .nullable(),
+    }),
+    urlBase: Yup.string()
+      .test(
+        'leading-slash',
+        intl.formatMessage(messages.validationUrlBaseLeadingSlash),
+        (value) => !value || value.startsWith('/')
+      )
+      .test(
+        'trailing-slash',
+        intl.formatMessage(messages.validationUrlBaseTrailingSlash),
+        (value) => !value || !value.endsWith('/')
+      ),
+    jellyfinExternalUrl: Yup.string()
+      .nullable()
+      .url(intl.formatMessage(messages.validationUrl))
+      .test(
+        'no-trailing-slash',
+        intl.formatMessage(messages.validationUrlTrailingSlash),
+        (value) => !value || !value.endsWith('/')
+      ),
+    jellyfinForgotPasswordUrl: Yup.string()
+      .nullable()
+      .url(intl.formatMessage(messages.validationUrl))
+      .test(
+        'no-trailing-slash',
+        intl.formatMessage(messages.validationUrlTrailingSlash),
+        (value) => !value || !value.endsWith('/')
+      ),
   });
 
   const activeLibraries =
@@ -394,7 +437,10 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           </div>
           <Formik
             initialValues={{
-              jellyfinInternalUrl: data?.hostname || '',
+              hostname: data?.ip,
+              port: data?.port ?? 8096,
+              useSsl: data?.useSsl,
+              urlBase: data?.urlBase || '',
               jellyfinExternalUrl: data?.externalHostname || '',
               jellyfinForgotPasswordUrl: data?.jellyfinForgotPasswordUrl || '',
             }}
@@ -402,7 +448,10 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
             onSubmit={async (values) => {
               try {
                 await axios.post('/api/v1/settings/jellyfin', {
-                  hostname: values.jellyfinInternalUrl,
+                  ip: values.hostname,
+                  port: Number(values.port),
+                  useSsl: values.useSsl,
+                  urlBase: values.urlBase,
                   externalHostname: values.jellyfinExternalUrl,
                   jellyfinForgotPasswordUrl: values.jellyfinForgotPasswordUrl,
                 } as JellyfinSettings);
@@ -420,44 +469,127 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                   }
                 );
               } catch (e) {
-                addToast(
-                  intl.formatMessage(messages.jellyfinSettingsFailure, {
-                    mediaServerName:
-                      publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                        ? 'Emby'
-                        : 'Jellyfin',
-                  }),
-                  {
-                    autoDismiss: true,
-                    appearance: 'error',
-                  }
-                );
+                if (e.response?.data?.message === ApiErrorCode.InvalidUrl) {
+                  addToast(
+                    intl.formatMessage(messages.invalidurlerror, {
+                      mediaServerName:
+                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                          ? 'Emby'
+                          : 'Jellyfin',
+                    }),
+                    {
+                      autoDismiss: true,
+                      appearance: 'error',
+                    }
+                  );
+                } else {
+                  addToast(
+                    intl.formatMessage(messages.jellyfinSettingsFailure, {
+                      mediaServerName:
+                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                          ? 'Emby'
+                          : 'Jellyfin',
+                    }),
+                    {
+                      autoDismiss: true,
+                      appearance: 'error',
+                    }
+                  );
+                }
               } finally {
                 revalidate();
               }
             }}
           >
-            {({ errors, touched, handleSubmit, isSubmitting, isValid }) => {
+            {({
+              errors,
+              touched,
+              values,
+              setFieldValue,
+              handleSubmit,
+              isSubmitting,
+              isValid,
+            }) => {
               return (
                 <form className="section" onSubmit={handleSubmit}>
                   <div className="form-row">
-                    <label htmlFor="jellyfinInternalUrl" className="text-label">
-                      {intl.formatMessage(messages.internalUrl)}
+                    <label htmlFor="hostname" className="text-label">
+                      {intl.formatMessage(messages.hostname)}
+                      <span className="text-red-500">*</span>
+                    </label>
+                    <div className="form-input-area">
+                      <div className="form-input-field">
+                        <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
+                          {values.useSsl ? 'https://' : 'http://'}
+                        </span>
+                        <Field
+                          type="text"
+                          inputMode="url"
+                          id="hostname"
+                          name="hostname"
+                          className="rounded-r-only"
+                        />
+                      </div>
+                      {errors.hostname &&
+                        touched.hostname &&
+                        typeof errors.hostname === 'string' && (
+                          <div className="error">{errors.hostname}</div>
+                        )}
+                    </div>
+                  </div>
+                  <div className="form-row">
+                    <label htmlFor="port" className="text-label">
+                      {intl.formatMessage(messages.port)}
+                      <span className="label-required">*</span>
+                    </label>
+                    <div className="form-input-area">
+                      <Field
+                        type="text"
+                        inputMode="numeric"
+                        id="port"
+                        name="port"
+                        className="short"
+                      />
+                      {errors.port &&
+                        touched.port &&
+                        typeof errors.port === 'string' && (
+                          <div className="error">{errors.port}</div>
+                        )}
+                    </div>
+                  </div>
+                  <div className="form-row">
+                    <label htmlFor="useSsl" className="checkbox-label">
+                      {intl.formatMessage(messages.enablessl)}
+                    </label>
+                    <div className="form-input-area">
+                      <Field
+                        type="checkbox"
+                        id="useSsl"
+                        name="useSsl"
+                        onChange={() => {
+                          setFieldValue('useSsl', !values.useSsl);
+                          setFieldValue('port', values.useSsl ? 8096 : 443);
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="form-row">
+                    <label htmlFor="urlBase" className="text-label">
+                      {intl.formatMessage(messages.urlBase)}
                     </label>
                     <div className="form-input-area">
                       <div className="form-input-field">
                         <Field
                           type="text"
                           inputMode="url"
-                          id="jellyfinInternalUrl"
-                          name="jellyfinInternalUrl"
+                          id="urlBase"
+                          name="urlBase"
                         />
                       </div>
-                      {errors.jellyfinInternalUrl &&
-                        touched.jellyfinInternalUrl && (
-                          <div className="error">
-                            {errors.jellyfinInternalUrl}
-                          </div>
+                      {errors.urlBase &&
+                        touched.urlBase &&
+                        typeof errors.urlBase === 'string' && (
+                          <div className="error">{errors.urlBase}</div>
                         )}
                     </div>
                   </div>