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"