feat(ui): Move PROXY setting to UI (#782)

Users who have set PROXY=yes in their Docker containers will need to configure this setting in the UI and restart the container.

docs/extending-overseerr/fail2ban.md

@@ -1,7 +1,7 @@
 # Fail2ban Filter
 
 {% hint style="warning" %}
-If you are running Overseerr behind a reverse proxy, make sure that the `PROXY` environment variable is set to `yes`.
+If you are running Overseerr behind a reverse proxy, make sure that the **Enable Proxy Support** setting is **enabled**.
 {% endhint %}
 
 To use Fail2ban with Overseerr, create a new file named `overseerr.local` in your Fail2ban `filter.d` directory with the following filter definition:

docs/getting-started/installation.md

@@ -17,7 +17,6 @@ After running Overseerr for the first time, configure it by visiting the web UI
 docker run -d \
   -e LOG_LEVEL=info \
   -e TZ=Asia/Tokyo \
-  -e PROXY=<yes|no> \
   -p 5055:5055 \
   -v /path/to/appdata/config:/app/config \
   --restart unless-stopped \
@@ -33,7 +32,6 @@ docker run -d \
   --user=[ user | user:group | uid | uid:gid | user:gid | uid:group ] \
   -e LOG_LEVEL=info \
   -e TZ=Asia/Tokyo \
-  -e PROXY=<yes|no> \
   -p 5055:5055 \
   -v /path/to/appdata/config:/app/config \
   --restart unless-stopped \

overseerr-api.yml

@@ -62,6 +62,9 @@ components:
         applicationUrl:
           type: string
           example: https://os.example.com
+        trustProxy:
+          type: boolean
+          example: true
         csrfProtection:
           type: boolean
           example: false

server/index.ts

@@ -61,7 +61,7 @@ app
     startJobs();
 
     const server = express();
-    if (process.env.PROXY === 'yes') {
+    if (settings.main.trustProxy) {
       server.enable('trust proxy');
     }
     server.use(cookieParser());

server/lib/settings.ts

@@ -54,6 +54,7 @@ export interface MainSettings {
   csrfProtection: boolean;
   defaultPermissions: number;
   hideAvailable: boolean;
+  trustProxy: boolean;
 }
 
 interface PublicSettings {
@@ -158,9 +159,10 @@ class Settings {
       main: {
         apiKey: '',
         applicationUrl: '',
-        hideAvailable: false,
         csrfProtection: false,
         defaultPermissions: Permission.REQUEST,
+        hideAvailable: false,
+        trustProxy: false,
       },
       plex: {
         name: '',

src/components/Settings/SettingsMain.tsx

@@ -30,6 +30,9 @@ const messages = defineMessages({
   csrfProtection: 'Enable CSRF Protection',
   csrfProtectionTip:
     'Sets external API access to read-only (Overseerr must be reloaded for changes to take effect)',
+  trustProxy: 'Enable Proxy Support',
+  trustProxyTip:
+    'Allows Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)',
 });
 
 const SettingsMain: React.FC = () => {
@@ -78,6 +81,7 @@ const SettingsMain: React.FC = () => {
             csrfProtection: data?.csrfProtection,
             defaultPermissions: data?.defaultPermissions ?? 0,
             hideAvailable: data?.hideAvailable,
+            trustProxy: data?.trustProxy,
           }}
           enableReinitialize
           onSubmit={async (values) => {
@@ -87,6 +91,7 @@ const SettingsMain: React.FC = () => {
                 csrfProtection: values.csrfProtection,
                 defaultPermissions: values.defaultPermissions,
                 hideAvailable: values.hideAvailable,
+                trustProxy: values.trustProxy,
               });
 
               addToast(intl.formatMessage(messages.toastSettingsSuccess), {
@@ -170,6 +175,32 @@ const SettingsMain: React.FC = () => {
                     </div>
                   </div>
                 </div>
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
+                  <label
+                    htmlFor="trustProxy"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
+                  >
+                    <div className="flex flex-col">
+                      <span className="mr-2">
+                        {intl.formatMessage(messages.trustProxy)}
+                      </span>
+                      <span className="text-gray-500">
+                        {intl.formatMessage(messages.trustProxyTip)}
+                      </span>
+                    </div>
+                  </label>
+                  <div className="mt-1 sm:mt-0 sm:col-span-2">
+                    <Field
+                      type="checkbox"
+                      id="trustProxy"
+                      name="trustProxy"
+                      onChange={() => {
+                        setFieldValue('trustProxy', !values.trustProxy);
+                      }}
+                      className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
+                    />
+                  </div>
+                </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
                   <label
                     htmlFor="csrfProtection"

src/i18n/locale/en.json

@@ -475,6 +475,8 @@
   "components.Settings.toastPlexRefreshSuccess": "Retrieved Plex server list.",
   "components.Settings.toastSettingsFailure": "Something went wrong while saving settings.",
   "components.Settings.toastSettingsSuccess": "Settings saved.",
+  "components.Settings.trustProxy": "Enable Proxy Support",
+  "components.Settings.trustProxyTip": "Allows Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)",
   "components.Settings.validationHostnameRequired": "You must provide a hostname/IP",
   "components.Settings.validationPortRequired": "You must provide a port",
   "components.Setup.configureplex": "Configure Plex",