fix(logging): handle media server connection refused error/toast (#748)

* fix(logging): handle media server connection refused error/toast

Properly log as connection refused if the jellyfin/emby server is unreachable. Previously it used to
throw a credentials error which lead to a lot of confusion

* refactor(i8n): extract translation keys

* refactor(auth): error message for a more consistent format

* refactor(auth/errors): use custom error types and error codes instead of abusing error messages

* refactor(i8n): replace connection refused translation key with invalidurl

* fix(error): combine auth and api error class into a single one called network error

* fix(error): use the new network error and network error codes in auth/api

* refactor(error): rename NetworkError to ApiError

src/components/Login/JellyfinLogin.tsx

@@ -2,6 +2,7 @@ import Button from '@app/components/Common/Button';
 import Tooltip from '@app/components/Common/Tooltip';
 import useSettings from '@app/hooks/useSettings';
 import { InformationCircleIcon } from '@heroicons/react/24/solid';
+import { ApiErrorCode } from '@server/constants/error';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
@@ -26,6 +27,7 @@ const messages = defineMessages({
   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.',
+  invalidurlerror: 'Unable to connect to {mediaServerName} server.',
   signingin: 'Signing in…',
   signin: 'Sign In',
   initialsigningin: 'Connecting…',
@@ -91,14 +93,24 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
               email: values.email,
             });
           } catch (e) {
+            let errorMessage = null;
+            switch (e.response?.data?.message) {
+              case ApiErrorCode.InvalidUrl:
+                errorMessage = messages.invalidurlerror;
+                break;
+              case ApiErrorCode.InvalidCredentials:
+                errorMessage = messages.credentialerror;
+                break;
+              case ApiErrorCode.NotAdmin:
+                errorMessage = messages.adminerror;
+                break;
+              default:
+                errorMessage = messages.loginerror;
+                break;
+            }
+
             toasts.addToast(
-              intl.formatMessage(
-                e.message == 'Request failed with status code 401'
-                  ? messages.credentialerror
-                  : e.message == 'Request failed with status code 403'
-                  ? messages.adminerror
-                  : messages.loginerror
-              ),
+              intl.formatMessage(errorMessage, mediaServerFormatValues),
               {
                 autoDismiss: true,
                 appearance: 'error',

src/i18n/locale/en.json

@@ -219,8 +219,9 @@
   "components.Layout.VersionStatus.outofdate": "Out of Date",
   "components.Layout.VersionStatus.streamdevelop": "Jellyseerr Develop",
   "components.Layout.VersionStatus.streamstable": "Jellyseerr Stable",
-  "components.Login.credentialerror": "The username or password is incorrect.",
   "components.Login.adminerror": "You must use an admin account to sign in.",
+  "components.Login.invalidurlerror": "Unable to connect to {mediaServerName} server.",
+  "components.Login.credentialerror": "The username or password is incorrect.",
   "components.Login.description": "Since this is your first time logging into {applicationName}, you are required to add a valid email address.",
   "components.Login.email": "Email Address",
   "components.Login.emailtooltip": "Address does not need to be associated with your {mediaServerName} instance.",
@@ -752,8 +753,8 @@
   "components.Settings.SettingsAbout.overseerrinformation": "About Jellyseerr",
   "components.Settings.SettingsAbout.preferredmethod": "Preferred",
   "components.Settings.SettingsAbout.runningDevelop": "You are running the <code>develop</code> branch of Jellyseerr, which is only recommended for those contributing to development or assisting with bleeding-edge testing.",
-  "components.Settings.SettingsAbout.supportoverseerr": "Support Overseerr",
   "components.Settings.SettingsAbout.supportjellyseerr": "Support Jellyseerr",
+  "components.Settings.SettingsAbout.supportoverseerr": "Support Overseerr",
   "components.Settings.SettingsAbout.timezone": "Time Zone",
   "components.Settings.SettingsAbout.totalmedia": "Total Media",
   "components.Settings.SettingsAbout.totalrequests": "Total Requests",
@@ -938,17 +939,18 @@
   "components.Settings.hostname": "Hostname or IP Address",
   "components.Settings.internalUrl": "Internal URL",
   "components.Settings.is4k": "4K",
+  "components.Settings.jellyfinForgotPasswordUrl": "Forgot Password URL",
   "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. 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.jellyfinSyncFailedAutomaticGroupedFolders": "Custom authentication with Automatic Library Grouping not supported",
+  "components.Settings.jellyfinSyncFailedGenericError": "Something went wrong while syncing libraries",
+  "components.Settings.jellyfinSyncFailedNoLibrariesFound": "No libraries were found",
   "components.Settings.jellyfinlibraries": "{mediaServerName} Libraries",
   "components.Settings.jellyfinlibrariesDescription": "The libraries {mediaServerName} scans for titles. Click the button below if no libraries are listed.",
   "components.Settings.jellyfinsettings": "{mediaServerName} Settings",
   "components.Settings.jellyfinsettingsDescription": "Configure the settings for your {mediaServerName} server. {mediaServerName} scans your {mediaServerName} libraries to see what content is available.",
-  "components.Settings.jellyfinSyncFailedNoLibrariesFound": "No libraries were found",
-  "components.Settings.jellyfinSyncFailedAutomaticGroupedFolders": "Custom authentication with Automatic Library Grouping not supported",
-  "components.Settings.jellyfinSyncFailedGenericError": "Something went wrong while syncing libraries",
   "components.Settings.librariesRemaining": "Libraries Remaining: {count}",
   "components.Settings.manualscan": "Manual Library Scan",
   "components.Settings.manualscanDescription": "Normally, this will only be run once every 24 hours. Jellyseerr will check your Plex server's recently added more aggressively. If this is your first time configuring Plex, a one-time full manual library scan is recommended!",