diff --git a/server/api/plexapi.ts b/server/api/plexapi.ts index a3abf0526..c8e123710 100644 --- a/server/api/plexapi.ts +++ b/server/api/plexapi.ts @@ -62,6 +62,7 @@ class PlexAPI { this.plexClient = new NodePlexAPI({ hostname: settings.plex.ip, port: settings.plex.port, + https: settings.plex.useSsl, token: plexToken, authenticator: { authenticate: ( diff --git a/server/lib/settings.ts b/server/lib/settings.ts index 1f33f3bee..f618615cb 100644 --- a/server/lib/settings.ts +++ b/server/lib/settings.ts @@ -14,6 +14,7 @@ export interface PlexSettings { machineId?: string; ip: string; port: number; + useSsl?: boolean; libraries: Library[]; } @@ -109,6 +110,7 @@ class Settings { name: '', ip: '127.0.0.1', port: 32400, + useSsl: false, libraries: [], }, radarr: [], diff --git a/server/types/plex-api.d.ts b/server/types/plex-api.d.ts index fd6db2dd9..9222faafc 100644 --- a/server/types/plex-api.d.ts +++ b/server/types/plex-api.d.ts @@ -4,6 +4,7 @@ declare module 'plex-api' { hostname: string; port: number; token?: string; + https?: boolean; authenticator: { authenticate: ( _plexApi: PlexAPI, diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx index d9d97c5d8..d4fa052ed 100644 --- a/src/components/Settings/SettingsPlex.tsx +++ b/src/components/Settings/SettingsPlex.tsx @@ -2,21 +2,23 @@ import React, { useState } from 'react'; import LoadingSpinner from '../Common/LoadingSpinner'; import type { PlexSettings } from '../../../server/lib/settings'; import useSWR from 'swr'; -import { useFormik } from 'formik'; +import { Formik, Field } from 'formik'; import Button from '../Common/Button'; import axios from 'axios'; import LibraryItem from './LibraryItem'; import Badge from '../Common/Badge'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; +import * as Yup from 'yup'; const messages = defineMessages({ plexsettings: 'Plex Settings', plexsettingsDescription: 'Configure the settings for your Plex server. Overseerr uses your Plex server to scan your library at an interval and see what content is available.', - servername: 'Server Name (Automatically Set)', + servername: 'Server Name (Automatically set after you save)', servernamePlaceholder: 'Plex Server Name', hostname: 'Hostname/IP', port: 'Port', + ssl: 'SSL', save: 'Save Changes', saving: 'Saving...', plexlibraries: 'Plex Libraries', @@ -32,6 +34,8 @@ const messages = defineMessages({ librariesRemaining: 'Libraries Remaining: {count}', startscan: 'Start Scan', cancelscan: 'Cancel Scan', + validationHostnameRequired: 'You must provide a hostname/IP', + validationPortRequired: 'You must provide a port', }); interface Library { @@ -64,33 +68,15 @@ const SettingsPlex: React.FC = ({ onComplete }) => { } ); const [isSyncing, setIsSyncing] = useState(false); - const [isUpdating, setIsUpdating] = useState(false); const [submitError, setSubmitError] = useState(null); - const formik = useFormik({ - initialValues: { - hostname: data?.ip, - port: data?.port, - }, - enableReinitialize: true, - onSubmit: async (values) => { - setSubmitError(null); - setIsUpdating(true); - try { - await axios.post('/api/v1/settings/plex', { - ip: values.hostname, - port: Number(values.port), - } as PlexSettings); - revalidate(); - if (onComplete) { - onComplete(); - } - } catch (e) { - setSubmitError(e.response.data.message); - } finally { - setIsUpdating(false); - } - }, + const PlexSettingsSchema = Yup.object().shape({ + hostname: Yup.string().required( + intl.formatMessage(messages.validationHostnameRequired) + ), + port: Yup.number().required( + intl.formatMessage(messages.validationPortRequired) + ), }); const activeLibraries = @@ -164,91 +150,154 @@ const SettingsPlex: React.FC = ({ onComplete }) => {

-
-
- {submitError && ( -
- {submitError} -
- )} -
- -
-
- + { + setSubmitError(null); + try { + await axios.post('/api/v1/settings/plex', { + ip: values.hostname, + port: Number(values.port), + useSsl: values.useSsl, + } as PlexSettings); + + revalidate(); + if (onComplete) { + onComplete(); + } + } catch (e) { + setSubmitError(e.response.data.message); + } + }} + > + {({ + errors, + touched, + values, + handleSubmit, + setFieldValue, + isSubmitting, + }) => { + return ( + +
+ {submitError && ( +
+ {submitError} +
+ )} +
+ +
+
+ +
+
+
+
+ +
+
+ +
+ {errors.hostname && touched.hostname && ( +
{errors.hostname}
+ )} +
+
+
+ +
+
+ +
+ {errors.port && touched.port && ( +
{errors.port}
+ )} +
+
-
-
-
- -
-
- +
+ +
+ { + setFieldValue('useSsl', !values.useSsl); + }} + className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out" + /> +
-
-
-
- -
-
- +
+
+ + + +
-
-
-
-
-
- - - -
-
- + + ); + }} +

diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index a9d4c7aed..b7530f42e 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -210,7 +210,7 @@ "components.Settings.runnow": "Run Now", "components.Settings.save": "Save Changes", "components.Settings.saving": "Saving...", - "components.Settings.servername": "Server Name (Automatically Set)", + "components.Settings.servername": "Server Name (Automatically set after you save)", "components.Settings.servernamePlaceholder": "Plex Server Name", "components.Settings.sonarrSettingsDescription": "Set up your Sonarr connection below. You can have multiple, but only two active as defaults at any time (one for standard HD and one for 4K). Administrators can override which server is used for new requests.", "components.Settings.sonarrsettings": "Sonarr Settings", @@ -218,6 +218,8 @@ "components.Settings.startscan": "Start Scan", "components.Settings.sync": "Sync Plex Libraries", "components.Settings.syncing": "Syncing…", + "components.Settings.validationHostnameRequired": "You must provide a hostname/IP", + "components.Settings.validationPortRequired": "You must provide a port", "components.Setup.configureplex": "Configure Plex", "components.Setup.configureservices": "Configure Services", "components.Setup.continue": "Continue",