fix: bypass cacheable-lookup when resolving localhost

validation for ipv6 was sort of broken where for example `::1` was being sent as `1`, therefore,
logins were broken. This PR fixes it by using nodejs `net.isIPv4()` & `net.isIPv6` for ipv4 and ipv6
validation.

possibly related to and fixes #795

.all-contributorsrc

@@ -367,6 +367,15 @@
       "contributions": [
         "translation"
       ]
+    },
+    {
+      "login": "ThowZzy",
+      "name": "ThowZzy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/61882536?v=4",
+      "profile": "https://github.com/ThowZzy",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

.github/workflows/release.yml

@@ -35,60 +35,60 @@ jobs:
           DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
         run: npx semantic-release
 
-  build-snap:
+  # build-snap:
-    name: Build Snap Package (${{ matrix.architecture }})
+  #   name: Build Snap Package (${{ matrix.architecture }})
-    needs: semantic-release
+  #   needs: semantic-release
-    runs-on: ubuntu-22.04
+  #   runs-on: ubuntu-22.04
-    strategy:
+  #   strategy:
-      fail-fast: false
+  #     fail-fast: false
-      matrix:
+  #     matrix:
-        architecture:
+  #       architecture:
-          - amd64
+  #         - amd64
-          - arm64
+  #         - arm64
-          - armhf
+  #         - armhf
-    steps:
+  #   steps:
-      - name: Checkout Code
+  #     - name: Checkout Code
-        uses: actions/checkout@v4
+  #       uses: actions/checkout@v4
-        with:
+  #       with:
-          fetch-depth: 0
+  #         fetch-depth: 0
-      - name: Switch to main branch
+  #     - name: Switch to main branch
-        run: git checkout main
+  #       run: git checkout main
-      - name: Pull latest changes
+  #     - name: Pull latest changes
-        run: git pull
+  #       run: git pull
-      - name: Prepare
+  #     - name: Prepare
-        id: prepare
+  #       id: prepare
-        run: |
+  #       run: |
-          git fetch --prune --tags
+  #         git fetch --prune --tags
-          if [[ $GITHUB_REF == refs/tags/* || $GITHUB_REF == refs/heads/master ]]; then
+  #         if [[ $GITHUB_REF == refs/tags/* || $GITHUB_REF == refs/heads/master ]]; then
-            echo "RELEASE=stable" >> $GITHUB_OUTPUT
+  #           echo "RELEASE=stable" >> $GITHUB_OUTPUT
-          else
+  #         else
-            echo "RELEASE=edge" >> $GITHUB_OUTPUT
+  #           echo "RELEASE=edge" >> $GITHUB_OUTPUT
-          fi
+  #         fi
-      - name: Set Up QEMU
+  #     - name: Set Up QEMU
-        uses: docker/setup-qemu-action@v3
+  #       uses: docker/setup-qemu-action@v3
-        with:
+  #       with:
-          image: tonistiigi/binfmt@sha256:df15403e06a03c2f461c1f7938b171fda34a5849eb63a70e2a2109ed5a778bde
+  #         image: tonistiigi/binfmt@sha256:df15403e06a03c2f461c1f7938b171fda34a5849eb63a70e2a2109ed5a778bde
-      - name: Build Snap Package
+  #     - name: Build Snap Package
-        uses: diddlesnaps/snapcraft-multiarch-action@v1
+  #       uses: diddlesnaps/snapcraft-multiarch-action@v1
-        id: build
+  #       id: build
-        with:
+  #       with:
-          architecture: ${{ matrix.architecture }}
+  #         architecture: ${{ matrix.architecture }}
-      - name: Upload Snap Package
+  #     - name: Upload Snap Package
-        uses: actions/upload-artifact@v4
+  #       uses: actions/upload-artifact@v4
-        with:
+  #       with:
-          name: jellyseerr-snap-package-${{ matrix.architecture }}
+  #         name: jellyseerr-snap-package-${{ matrix.architecture }}
-          path: ${{ steps.build.outputs.snap }}
+  #         path: ${{ steps.build.outputs.snap }}
-      - name: Review Snap Package
+  #     - name: Review Snap Package
-        uses: diddlesnaps/snapcraft-review-tools-action@v1
+  #       uses: diddlesnaps/snapcraft-review-tools-action@v1
-        with:
+  #       with:
-          snap: ${{ steps.build.outputs.snap }}
+  #         snap: ${{ steps.build.outputs.snap }}
-      - name: Publish Snap Package
+  #     - name: Publish Snap Package
-        uses: snapcore/action-publish@v1
+  #       uses: snapcore/action-publish@v1
-        env:
+  #       env:
-          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAP_LOGIN }}
+  #         SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAP_LOGIN }}
-        with:
+  #       with:
-          snap: ${{ steps.build.outputs.snap }}
+  #         snap: ${{ steps.build.outputs.snap }}
-          release: ${{ steps.prepare.outputs.RELEASE }}
+  #         release: ${{ steps.prepare.outputs.RELEASE }}
 
   discord:
     name: Send Discord Notification

.github/workflows/snap.yaml

@@ -2,7 +2,7 @@ name: Publish Snap
 
 # turn off edge snap builds temporarily and make it manual
 
-# on: 
+# on:
 #  push:
 #    branches:
 #      - develop

README.md

@@ -11,7 +11,7 @@
 <a href="http://jellyseerr.borgcube.de/engage/jellyseerr/"><img src="http://jellyseerr.borgcube.de/widget/jellyseerr/jellyseerr-frontend/svg-badge.svg" alt="Translation status" /></a>
 <a href="https://github.com/fallenbagel/jellyseerr/blob/develop/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/fallenbagel/jellyseerr"></a>
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-39-orange.svg"/></a>
+<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-40-orange.svg"/></a>
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 **Jellyseerr** is a free and open source software application for managing requests for your media library.
@@ -236,6 +236,7 @@ Thanks goes to these wonderful people from Overseerr ([emoji key](https://allcon
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Kara-Zor-El"><img src="https://avatars.githubusercontent.com/u/69772087?v=4?s=100" width="100px;" alt="Kara"/><br /><sub><b>Kara</b></sub></a><br /><a href="#infra-Kara-Zor-El" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://joaquinolivero.com"><img src="https://avatars.githubusercontent.com/u/66050823?v=4?s=100" width="100px;" alt="Joaquin Olivero"/><br /><sub><b>Joaquin Olivero</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=JoaquinOlivero" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Bretterteig"><img src="https://avatars.githubusercontent.com/u/47298401?v=4?s=100" width="100px;" alt="Julian Behr"/><br /><sub><b>Julian Behr</b></sub></a><br /><a href="#translation-Bretterteig" title="Translation">🌍</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ThowZzy"><img src="https://avatars.githubusercontent.com/u/61882536?v=4?s=100" width="100px;" alt="ThowZzy"/><br /><sub><b>ThowZzy</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=ThowZzy" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package.json

@@ -44,6 +44,7 @@
     "axios-rate-limit": "1.3.0",
     "bcrypt": "5.1.0",
     "bowser": "2.11.0",
+    "cacheable-lookup": "^7.0.0",
     "connect-typeorm": "1.1.4",
     "cookie-parser": "1.4.6",
     "copy-to-clipboard": "3.3.3",

server/api/jellyfin.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import ExternalAPI from '@server/api/externalapi';
 import { ApiErrorCode } from '@server/constants/error';
 import availabilitySync from '@server/lib/availabilitySync';
 import logger from '@server/logger';
 import { ApiError } from '@server/types/error';
-import type { AxiosInstance } from 'axios';
+import { getAppVersion } from '@server/utils/appVersion';
-import axios from 'axios';
 
 export interface JellyfinUserResponse {
   Name: string;
@@ -92,31 +92,33 @@ export interface JellyfinLibraryItemExtended extends JellyfinLibraryItem {
   DateCreated?: string;
 }
 
-class JellyfinAPI {
+class JellyfinAPI extends ExternalAPI {
   private authToken?: string;
   private userId?: string;
   private jellyfinHost: string;
-  private axios: AxiosInstance;
 
   constructor(jellyfinHost: string, authToken?: string, deviceId?: string) {
-    this.jellyfinHost = jellyfinHost;
+    let authHeaderVal: string;
-    this.authToken = authToken;
+    if (authToken) {
-
+      authHeaderVal = `MediaBrowser Client="Jellyseerr", Device="Jellyseerr", DeviceId="${deviceId}", Version="${getAppVersion()}", Token="${authToken}"`;
-    let authHeaderVal = '';
-    if (this.authToken) {
-      authHeaderVal = `MediaBrowser Client="Jellyseerr", Device="Jellyseerr", DeviceId="${deviceId}", Version="10.8.0", Token="${authToken}"`;
     } else {
-      authHeaderVal = `MediaBrowser Client="Jellyseerr", Device="Jellyseerr", DeviceId="${deviceId}", Version="10.8.0"`;
+      authHeaderVal = `MediaBrowser Client="Jellyseerr", Device="Jellyseerr", DeviceId="${deviceId}", Version="${getAppVersion()}"`;
     }
 
-    this.axios = axios.create({
+    super(
-      baseURL: this.jellyfinHost,
+      jellyfinHost,
-      headers: {
+      {},
-        'X-Emby-Authorization': authHeaderVal,
+      {
-        'Content-Type': 'application/json',
+        headers: {
-        Accept: 'application/json',
+          'X-Emby-Authorization': authHeaderVal,
-      },
+          'Content-Type': 'application/json',
-    });
+          Accept: 'application/json',
+        },
+      }
+    );
+
+    this.jellyfinHost = jellyfinHost;
+    this.authToken = authToken;
   }
 
   public async login(
@@ -130,7 +132,8 @@ class JellyfinAPI {
             'X-Forwarded-For': ClientIP,
           }
         : {};
-      const account = await this.axios.post<JellyfinLoginResponse>(
+
+      const authResponse = await this.post<JellyfinLoginResponse>(
         '/Users/AuthenticateByName',
         {
           Username: Username,
@@ -141,7 +144,7 @@ class JellyfinAPI {
         }
       );
 
-      return account.data;
+      return authResponse;
     } catch (e) {
       const status = e.response?.status;
 
@@ -177,66 +180,72 @@ class JellyfinAPI {
 
   public async getServerName(): Promise<string> {
     try {
-      const account = await this.axios.get<JellyfinUserResponse>(
+      const serverResponse = await this.get<JellyfinUserResponse>(
-        "/System/Info/Public'}"
+        '/System/Info/Public'
       );
-      return account.data.ServerName;
+
+      return serverResponse.ServerName;
     } catch (e) {
       logger.error(
         `Something went wrong while getting the server name from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('girl idk');
+
+      throw new ApiError(e.response?.status, ApiErrorCode.Unknown);
     }
   }
 
   public async getUsers(): Promise<JellyfinUserListResponse> {
     try {
-      const account = await this.axios.get(`/Users`);
+      const userReponse = await this.get<JellyfinUserResponse[]>(`/Users`);
-      return { users: account.data };
+
+      return { users: userReponse };
     } catch (e) {
       logger.error(
         `Something went wrong while getting the account from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('Invalid auth token');
+
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
   public async getUser(): Promise<JellyfinUserResponse> {
     try {
-      const account = await this.axios.get<JellyfinUserResponse>(
+      const userReponse = await this.get<JellyfinUserResponse>(
         `/Users/${this.userId ?? 'Me'}`
       );
-      return account.data;
+      return userReponse;
     } catch (e) {
       logger.error(
         `Something went wrong while getting the account from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('Invalid auth token');
+
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
   public async getLibraries(): Promise<JellyfinLibrary[]> {
     try {
-      const mediaFolders = await this.axios.get<any>(`/Library/MediaFolders`);
+      const mediaFolderResponse = await this.get<any>(`/Library/MediaFolders`);
 
-      return this.mapLibraries(mediaFolders.data.Items);
+      return this.mapLibraries(mediaFolderResponse.Items);
-    } catch (mediaFoldersError) {
+    } catch (mediaFoldersResponseError) {
       // fallback to user views to get libraries
-      // this only affects LDAP users
+      // this only and maybe/depending on factors affects LDAP users
       try {
-        const mediaFolders = await this.axios.get<any>(
+        const mediaFolderResponse = await this.get<any>(
           `/Users/${this.userId ?? 'Me'}/Views`
         );
 
-        return this.mapLibraries(mediaFolders.data.Items);
+        return this.mapLibraries(mediaFolderResponse.Items);
       } catch (e) {
         logger.error(
           `Something went wrong while getting libraries from the Jellyfin server: ${e.message}`,
           { label: 'Jellyfin API' }
         );
+
         return [];
       }
     }
@@ -270,11 +279,11 @@ class JellyfinAPI {
 
   public async getLibraryContents(id: string): Promise<JellyfinLibraryItem[]> {
     try {
-      const contents = await this.axios.get<any>(
+      const libraryItemsResponse = await this.get<any>(
         `/Users/${this.userId}/Items?SortBy=SortName&SortOrder=Ascending&IncludeItemTypes=Series,Movie,Others&Recursive=true&StartIndex=0&ParentId=${id}&collapseBoxSetItems=false`
       );
 
-      return contents.data.Items.filter(
+      return libraryItemsResponse.Items.filter(
         (item: JellyfinLibraryItem) => item.LocationType !== 'Virtual'
       );
     } catch (e) {
@@ -282,23 +291,25 @@ class JellyfinAPI {
         `Something went wrong while getting library content from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('Invalid auth token');
+
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
   public async getRecentlyAdded(id: string): Promise<JellyfinLibraryItem[]> {
     try {
-      const contents = await this.axios.get<any>(
+      const itemResponse = await this.get<any>(
         `/Users/${this.userId}/Items/Latest?Limit=12&ParentId=${id}`
       );
 
-      return contents.data;
+      return itemResponse;
     } catch (e) {
       logger.error(
         `Something went wrong while getting library content from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('Invalid auth token');
+
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -306,36 +317,38 @@ class JellyfinAPI {
     id: string
   ): Promise<JellyfinLibraryItemExtended | undefined> {
     try {
-      const contents = await this.axios.get<any>(
+      const itemResponse = await this.get<any>(
         `/Users/${this.userId}/Items/${id}`
       );
 
-      return contents.data;
+      return itemResponse;
     } catch (e) {
       if (availabilitySync.running) {
         if (e.response && e.response.status === 500) {
           return undefined;
         }
       }
+
       logger.error(
         `Something went wrong while getting library content from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('Invalid auth token');
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
   public async getSeasons(seriesID: string): Promise<JellyfinLibraryItem[]> {
     try {
-      const contents = await this.axios.get<any>(`/Shows/${seriesID}/Seasons`);
+      const seasonResponse = await this.get<any>(`/Shows/${seriesID}/Seasons`);
 
-      return contents.data.Items;
+      return seasonResponse.Items;
     } catch (e) {
       logger.error(
         `Something went wrong while getting the list of seasons from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('Invalid auth token');
+
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -344,11 +357,11 @@ class JellyfinAPI {
     seasonID: string
   ): Promise<JellyfinLibraryItem[]> {
     try {
-      const contents = await this.axios.get<any>(
+      const episodeResponse = await this.get<any>(
         `/Shows/${seriesID}/Episodes?seasonId=${seasonID}`
       );
 
-      return contents.data.Items.filter(
+      return episodeResponse.Items.filter(
         (item: JellyfinLibraryItem) => item.LocationType !== 'Virtual'
       );
     } catch (e) {
@@ -356,7 +369,8 @@ class JellyfinAPI {
         `Something went wrong while getting the list of episodes from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new Error('Invalid auth token');
+
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 }

server/constants/error.ts

@@ -1,5 +1,7 @@
 export enum ApiErrorCode {
   InvalidUrl = 'INVALID_URL',
   InvalidCredentials = 'INVALID_CREDENTIALS',
+  InvalidAuthToken = 'INVALID_AUTH_TOKEN',
   NotAdmin = 'NOT_ADMIN',
+  Unknown = 'UNKNOWN',
 }

server/index.ts

@@ -23,19 +23,25 @@ import imageproxy from '@server/routes/imageproxy';
 import { getAppVersion } from '@server/utils/appVersion';
 import restartFlag from '@server/utils/restartFlag';
 import { getClientIp } from '@supercharge/request-ip';
+import type CacheableLookupType from 'cacheable-lookup';
 import { TypeormStore } from 'connect-typeorm/out';
 import cookieParser from 'cookie-parser';
 import csurf from 'csurf';
+import { lookup } from 'dns';
 import type { NextFunction, Request, Response } from 'express';
 import express from 'express';
 import * as OpenApiValidator from 'express-openapi-validator';
 import type { Store } from 'express-session';
 import session from 'express-session';
 import next from 'next';
+import http from 'node:http';
+import https from 'node:https';
 import path from 'path';
 import swaggerUi from 'swagger-ui-express';
 import YAML from 'yamljs';
 
+const _importDynamic = new Function('modulePath', 'return import(modulePath)');
+
 const API_SPEC_PATH = path.join(__dirname, '../overseerr-api.yml');
 
 logger.info(`Starting Overseerr version ${getAppVersion()}`);
@@ -46,6 +52,25 @@ const handle = app.getRequestHandler();
 app
   .prepare()
   .then(async () => {
+    const CacheableLookup = (await _importDynamic('cacheable-lookup'))
+      .default as typeof CacheableLookupType;
+    const cacheable = new CacheableLookup();
+
+    const originalLookup = cacheable.lookup;
+
+    // if hostname is localhost use dns.lookup instead of cacheable-lookup
+    cacheable.lookup = (...args: any) => {
+      const [hostname] = args;
+      if (hostname === 'localhost') {
+        lookup(...(args as Parameters<typeof lookup>));
+      } else {
+        originalLookup(...(args as Parameters<typeof originalLookup>));
+      }
+    };
+
+    cacheable.install(http.globalAgent);
+    cacheable.install(https.globalAgent);
+
     const dbConnection = await dataSource.initialize();
 
     // Run migrations in production

server/lib/scanners/jellyfin/index.ts

@@ -83,13 +83,17 @@ class JellyfinScanner {
       }
 
       const has4k = metadata.MediaSources?.some((MediaSource) => {
-        return MediaSource.MediaStreams.some((MediaStream) => {
+        return MediaSource.MediaStreams.filter(
+          (MediaStream) => MediaStream.Type === 'Video'
+        ).some((MediaStream) => {
           return (MediaStream.Width ?? 0) > 2000;
         });
       });
 
       const hasOtherResolution = metadata.MediaSources?.some((MediaSource) => {
-        return MediaSource.MediaStreams.some((MediaStream) => {
+        return MediaSource.MediaStreams.filter(
+          (MediaStream) => MediaStream.Type === 'Video'
+        ).some((MediaStream) => {
           return (MediaStream.Width ?? 0) <= 2000;
         });
       });

server/routes/auth.ts

@@ -14,6 +14,7 @@ import { ApiError } from '@server/types/error';
 import * as EmailValidator from 'email-validator';
 import { Router } from 'express';
 import gravatarUrl from 'gravatar-url';
+import net from 'net';
 
 const authRoutes = Router();
 
@@ -271,11 +272,21 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       ? jellyfinHost.slice(0, -1)
       : jellyfinHost;
 
-    const ip = req.ip ? req.ip.split(':').reverse()[0] : undefined;
+    const ip = req.ip;
+    let clientIp;
+
+    if (ip) {
+      if (net.isIPv4(ip)) {
+        clientIp = ip;
+      } else if (net.isIPv6(ip)) {
+        clientIp = ip.startsWith('::ffff:') ? ip.substring(7) : ip;
+      }
+    }
+
     const account = await jellyfinserver.login(
       body.username,
       body.password,
-      ip
+      clientIp
     );
 
     // Next let's see if the user already exists
@@ -314,6 +325,9 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         userType: UserType.JELLYFIN,
       });
 
+      const serverName = await jellyfinserver.getServerName();
+
+      settings.jellyfin.name = serverName;
       settings.jellyfin.hostname = body.hostname ?? '';
       settings.jellyfin.serverId = account.User.ServerId;
       settings.save();
@@ -322,7 +336,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       await userRepository.save(user);
     }
     // User already exists, let's update their information
-    else if (body.username === user?.jellyfinUsername) {
+    else if (account.User.Id === user?.jellyfinUserId) {
       logger.info(
         `Found matching ${
           settings.main.mediaServerType === MediaServerType.JELLYFIN

src/components/MovieDetails/index.tsx

@@ -434,33 +434,38 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                 </Button>
               </Tooltip>
             )}
-          {hasPermission(Permission.MANAGE_REQUESTS) && data.mediaInfo && (
+          {hasPermission(Permission.MANAGE_REQUESTS) &&
-            <Tooltip content={intl.formatMessage(messages.managemovie)}>
+            data.mediaInfo &&
-              <Button
+            (data.mediaInfo.jellyfinMediaId ||
-                buttonType="ghost"
+              data.mediaInfo.jellyfinMediaId4k ||
-                onClick={() => setShowManager(true)}
+              data.mediaInfo.status !== MediaStatus.UNKNOWN ||
-                className="relative ml-2 first:ml-0"
+              data.mediaInfo.status4k !== MediaStatus.UNKNOWN) && (
-              >
+              <Tooltip content={intl.formatMessage(messages.managemovie)}>
-                <CogIcon className="!mr-0" />
+                <Button
-                {hasPermission(
+                  buttonType="ghost"
-                  [Permission.MANAGE_ISSUES, Permission.VIEW_ISSUES],
+                  onClick={() => setShowManager(true)}
-                  {
+                  className="relative ml-2 first:ml-0"
-                    type: 'or',
+                >
-                  }
+                  <CogIcon className="!mr-0" />
-                ) &&
+                  {hasPermission(
-                  (
+                    [Permission.MANAGE_ISSUES, Permission.VIEW_ISSUES],
-                    data.mediaInfo?.issues.filter(
+                    {
-                      (issue) => issue.status === IssueStatus.OPEN
+                      type: 'or',
-                    ) ?? []
+                    }
-                  ).length > 0 && (
+                  ) &&
-                    <>
+                    (
-                      <div className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-red-600" />
+                      data.mediaInfo?.issues.filter(
-                      <div className="absolute -right-1 -top-1 h-3 w-3 animate-ping rounded-full bg-red-600" />
+                        (issue) => issue.status === IssueStatus.OPEN
-                    </>
+                      ) ?? []
-                  )}
+                    ).length > 0 && (
-              </Button>
+                      <>
-            </Tooltip>
+                        <div className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-red-600" />
-          )}
+                        <div className="absolute -right-1 -top-1 h-3 w-3 animate-ping rounded-full bg-red-600" />
+                      </>
+                    )}
+                </Button>
+              </Tooltip>
+            )}
         </div>
       </div>
       <div className="media-overview">

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -53,6 +53,8 @@ const messages = defineMessages({
   discordId: 'Discord User ID',
   discordIdTip:
     'The <FindDiscordIdLink>multi-digit ID number</FindDiscordIdLink> associated with your Discord user account',
+  validationemailrequired: 'Email required',
+  validationemailformat: 'Valid email required',
   validationDiscordId: 'You must provide a valid Discord user ID',
   plexwatchlistsyncmovies: 'Auto-Request Movies',
   plexwatchlistsyncmoviestip:
@@ -88,6 +90,9 @@ const UserGeneralSettings = () => {
   );
 
   const UserGeneralSettingsSchema = Yup.object().shape({
+    email: Yup.string()
+      .email(intl.formatMessage(messages.validationemailformat))
+      .required(intl.formatMessage(messages.validationemailrequired)),
     discordId: Yup.string()
       .nullable()
       .matches(/^\d{17,19}$/, intl.formatMessage(messages.validationDiscordId)),

src/i18n/locale/en.json

@@ -1177,6 +1177,8 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings saved successfully!",
   "components.UserProfile.UserSettings.UserGeneralSettings.user": "User",
   "components.UserProfile.UserSettings.UserGeneralSettings.validationDiscordId": "You must provide a valid Discord user ID",
+  "components.UserProfile.UserSettings.UserGeneralSettings.validationemailformat": "Valid email required",
+  "components.UserProfile.UserSettings.UserGeneralSettings.validationemailrequired": "Email required",
   "components.UserProfile.UserSettings.UserNotificationSettings.deviceDefault": "Device Default",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordId": "User ID",
   "components.UserProfile.UserSettings.UserNotificationSettings.discordIdTip": "The <FindDiscordIdLink>multi-digit ID number</FindDiscordIdLink> associated with your user account",

yarn.lock

@@ -5033,6 +5033,11 @@ cacache@^16.0.0, cacache@^16.1.0, cacache@^16.1.3:
     tar "^6.1.11"
     unique-filename "^2.0.0"
 
+cacheable-lookup@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz#3476a8215d046e5a3202a9209dd13fec1f933a27"
+  integrity sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==
+
 cachedir@2.3.0, cachedir@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"