Adding Jellyfin Setting for Custom "Forgot Password" URL

Adding Jellyfin Setting for Custom "Forgot Password" URL.  Useful in cases where you are using a custom authentication provider such as the LDAP plugin, Authelia, lldap, or any other external auth scheme with its own password reset page.

src/components/Login/JellyfinLogin.tsx

@@ -222,6 +222,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
     const baseUrl = settings.currentSettings.jellyfinExternalHost
       ? settings.currentSettings.jellyfinExternalHost
       : settings.currentSettings.jellyfinHost;
+    const jellyfinForgotPasswordUrl = settings.currentSettings.jellyfinForgotPasswordUrl;
     return (
       <div>
         <Formik
@@ -298,11 +299,11 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                         <Button
                           as="a"
                           buttonType="ghost"
-                          href={`${baseUrl}/web/index.html#!/${
-                            process.env.JELLYFIN_TYPE === 'emby'
+                          href={jellyfinForgotPasswordUrl ? `${jellyfinForgotPasswordUrl}` :
+                            `${baseUrl}/web/index.html#!/${process.env.JELLYFIN_TYPE === 'emby'
                               ? 'startup/'
                               : ''
-                          }forgotpassword.html`}
+                            }forgotpassword.html`}
                         >
                           {intl.formatMessage(messages.forgotpassword)}
                         </Button>

src/components/Settings/SettingsJellyfin.tsx

@@ -30,9 +30,10 @@ const messages = defineMessages({
   jellyfinSettingsSuccess: '{mediaServerName} settings saved successfully!',
   jellyfinSettings: '{mediaServerName} Settings',
   jellyfinSettingsDescription:
-    'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL.',
+    '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',
+  jellyfinForgotPasswordUrl: 'Forgot Password URL',
   validationUrl: 'You must provide a valid URL',
   syncing: 'Syncing',
   syncJellyfin: 'Sync Libraries',
@@ -94,6 +95,10 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
       /^(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)
+    ),
   });
 
   const activeLibraries =
@@ -171,20 +176,20 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
         <h3 className="heading">
           {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
             ? intl.formatMessage(messages.jellyfinlibraries, {
-                mediaServerName: 'Emby',
-              })
+              mediaServerName: 'Emby',
+            })
             : intl.formatMessage(messages.jellyfinlibraries, {
-                mediaServerName: 'Jellyfin',
-              })}
+              mediaServerName: 'Jellyfin',
+            })}
         </h3>
         <p className="description">
           {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
             ? intl.formatMessage(messages.jellyfinlibrariesDescription, {
-                mediaServerName: 'Emby',
-              })
+              mediaServerName: 'Emby',
+            })
             : intl.formatMessage(messages.jellyfinlibrariesDescription, {
-                mediaServerName: 'Jellyfin',
-              })}
+              mediaServerName: 'Jellyfin',
+            })}
         </p>
       </div>
       <div className="section">
@@ -223,11 +228,11 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
         <p className="description">
           {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
             ? intl.formatMessage(messages.manualscanDescriptionJellyfin, {
-                mediaServerName: 'Emby',
-              })
+              mediaServerName: 'Emby',
+            })
             : intl.formatMessage(messages.manualscanDescriptionJellyfin, {
-                mediaServerName: 'Jellyfin',
-              })}
+              mediaServerName: 'Jellyfin',
+            })}
         </p>
       </div>
       <div className="section">
@@ -271,11 +276,11 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                       values={{
                         count: dataSync.currentLibrary
                           ? dataSync.libraries.slice(
-                              dataSync.libraries.findIndex(
-                                (library) =>
-                                  library.id === dataSync.currentLibrary?.id
-                              ) + 1
-                            ).length
+                            dataSync.libraries.findIndex(
+                              (library) =>
+                                library.id === dataSync.currentLibrary?.id
+                            ) + 1
+                          ).length
                           : 0,
                       }}
                     />
@@ -333,26 +338,27 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
             <h3 className="heading">
               {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                 ? intl.formatMessage(messages.jellyfinSettings, {
-                    mediaServerName: 'Emby',
-                  })
+                  mediaServerName: 'Emby',
+                })
                 : intl.formatMessage(messages.jellyfinSettings, {
-                    mediaServerName: 'Jellyfin',
-                  })}
+                  mediaServerName: 'Jellyfin',
+                })}
             </h3>
             <p className="description">
               {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
                 ? intl.formatMessage(messages.jellyfinSettingsDescription, {
-                    mediaServerName: 'Emby',
-                  })
+                  mediaServerName: 'Emby',
+                })
                 : intl.formatMessage(messages.jellyfinSettingsDescription, {
-                    mediaServerName: 'Jellyfin',
-                  })}
+                  mediaServerName: 'Jellyfin',
+                })}
             </p>
           </div>
           <Formik
             initialValues={{
               jellyfinInternalUrl: data?.hostname || '',
               jellyfinExternalUrl: data?.externalHostname || '',
+              jellyfinForgotPasswordUrl: data?.jellyfinForgotPasswordUrl || '',
             }}
             validationSchema={JellyfinSettingsSchema}
             onSubmit={async (values) => {
@@ -360,6 +366,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                 await axios.post('/api/v1/settings/jellyfin', {
                   hostname: values.jellyfinInternalUrl,
                   externalHostname: values.jellyfinExternalUrl,
+                  jellyfinForgotPasswordUrl: values.jellyfinForgotPasswordUrl,
                 } as JellyfinSettings);
 
                 addToast(
@@ -437,6 +444,27 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                         )}
                     </div>
                   </div>
+                  <div className="form-row">
+                    <label htmlFor="jellyfinForgotPasswordUrl" className="text-label">
+                      {intl.formatMessage(messages.jellyfinForgotPasswordUrl)}
+                    </label>
+                    <div className="form-input-area">
+                      <div className="form-input-field">
+                        <Field
+                          type="text"
+                          inputMode="url"
+                          id="jellyfinForgotPasswordUrl"
+                          name="jellyfinForgotPasswordUrl"
+                        />
+                      </div>
+                      {errors.jellyfinForgotPasswordUrl &&
+                        touched.jellyfinForgotPasswordUrl && (
+                          <div className="error">
+                            {errors.jellyfinForgotPasswordUrl}
+                          </div>
+                        )}
+                    </div>
+                  </div>
                   <div className="actions">
                     <div className="flex justify-end">
                       <span className="ml-3 inline-flex rounded-md shadow-sm">

src/i18n/locale/en.json

@@ -938,7 +938,7 @@
   "components.Settings.internalUrl": "Internal URL",
   "components.Settings.is4k": "4K",
   "components.Settings.jellyfinSettings": "{mediaServerName} Settings",
-  "components.Settings.jellyfinSettingsDescription": "Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL.",
+  "components.Settings.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.",
   "components.Settings.jellyfinSettingsFailure": "Something went wrong while saving {mediaServerName} settings.",
   "components.Settings.jellyfinSettingsSuccess": "{mediaServerName} settings saved successfully!",
   "components.Settings.jellyfinlibraries": "{mediaServerName} Libraries",
@@ -1305,4 +1305,4 @@
   "pages.returnHome": "Return Home",
   "pages.serviceunavailable": "Service Unavailable",
   "pages.somethingwentwrong": "Something Went Wrong"
-}
+}