test: update cypress login command

Update the login screen for better usability, especially with OpenID
Connect and Plex login, allowing one-click login and removing the
accordion layout. Additionally, ensures that media server login is
hidden when disabled in the settings.

Dockerfile

@@ -14,7 +14,7 @@ RUN \
   ;; \
   esac
 
-RUN npm install --global pnpm
+RUN npm install --global pnpm@9
 
 COPY package.json pnpm-lock.yaml postinstall-win.js ./
 RUN CYPRESS_INSTALL_BINARY=0 pnpm install --frozen-lockfile
@@ -29,7 +29,7 @@ RUN pnpm build
 # remove development dependencies
 RUN pnpm prune --prod --ignore-scripts
 
-RUN rm -rf src server .next/cache
+RUN rm -rf src server .next/cache charts gen-docs docs
 
 RUN touch config/DOCKER
 
@@ -45,7 +45,7 @@ WORKDIR /app
 
 RUN apk add --no-cache tzdata tini && rm -rf /tmp/*
 
-RUN npm install -g pnpm
+RUN npm install -g pnpm@9
 
 # copy from build image
 COPY --from=BUILD_IMAGE /app ./

Dockerfile.local

@@ -3,7 +3,7 @@ FROM node:22-alpine
 COPY . /app
 WORKDIR /app
 
-Run npm install --global pnpm
+RUN npm install --global pnpm@9
 
 RUN pnpm install
 

charts/jellyseerr-chart/Chart.yaml

@@ -3,7 +3,7 @@ kubeVersion: ">=1.23.0-0"
 name: jellyseerr-chart
 description: Jellyseerr helm chart for Kubernetes
 type: application
-version: 2.1.0
+version: 2.1.1
 appVersion: "2.3.0"
 maintainers:
   - name: Jellyseerr

charts/jellyseerr-chart/README.md

@@ -1,6 +1,6 @@
 # jellyseerr-chart
 
-![Version: 2.1.0](https://img.shields.io/badge/Version-2.1.0-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.3.0](https://img.shields.io/badge/AppVersion-2.3.0-informational?style=flat-square)
+![Version: 2.1.1](https://img.shields.io/badge/Version-2.1.1-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.3.0](https://img.shields.io/badge/AppVersion-2.3.0-informational?style=flat-square)
 
 Jellyseerr helm chart for Kubernetes
 

cypress/support/commands.ts

@@ -6,7 +6,6 @@ Cypress.Commands.add('login', (email, password) => {
     [email, password],
     () => {
       cy.visit('/login');
-      cy.contains('Use your Overseerr account').click();
 
       cy.get('[data-testid=email]').type(email);
       cy.get('[data-testid=password]').type(password);

docs/using-jellyseerr/settings/users.md

@@ -14,6 +14,14 @@ When disabled, your mediaserver OAuth becomes the only sign-in option, and any "
 
 This setting is **enabled** by default.
 
+## Enable Jellyfin/Emby/Plex Sign-In
+
+When enabled, users will be able to sign in to Jellyseerr using their Jellyfin/Emby/Plex credentials, provided they have linked their media server accounts.
+
+When disabled, users will only be able to sign in using their email address. Users without a password set will not be able to sign in to Jellyseerr.
+
+This setting is **enabled** by default.
+
 ## Enable New Jellyfin/Emby/Plex Sign-In
 
 When enabled, users with access to your media server will be able to sign in to Jellyseerr even if they have not yet been imported. Users will be automatically assigned the permissions configured in the [Default Permissions](#default-permissions) setting upon first sign-in.

next.config.js

@@ -11,6 +11,7 @@ module.exports = {
       { hostname: 'gravatar.com' },
       { hostname: 'image.tmdb.org' },
       { hostname: 'artworks.thetvdb.com' },
+      { hostname: 'plex.tv' },
     ],
   },
   webpack(config) {

package.json

@@ -42,6 +42,7 @@
     "@supercharge/request-ip": "1.2.0",
     "@svgr/webpack": "6.5.1",
     "@tanem/react-nprogress": "5.0.30",
+    "@types/wink-jaro-distance": "^2.0.2",
     "ace-builds": "1.15.2",
     "bcrypt": "5.1.0",
     "bowser": "2.11.0",
@@ -85,6 +86,7 @@
     "react-spring": "9.7.1",
     "react-tailwindcss-datepicker-sct": "1.3.4",
     "react-toast-notifications": "2.5.1",
+    "react-transition-group": "^4.4.5",
     "react-truncate-markup": "5.1.2",
     "react-use-clipboard": "1.0.9",
     "reflect-metadata": "0.1.13",
@@ -94,9 +96,11 @@
     "sqlite3": "5.1.4",
     "swagger-ui-express": "4.6.2",
     "swr": "2.2.5",
+    "tailwind-merge": "^2.6.0",
     "typeorm": "0.3.11",
     "undici": "^6.20.1",
     "web-push": "3.5.0",
+    "wink-jaro-distance": "^2.0.0",
     "winston": "3.8.2",
     "winston-daily-rotate-file": "4.7.1",
     "xml2js": "0.4.23",

pnpm-lock.yaml

@@ -38,6 +38,9 @@ importers:
       '@tanem/react-nprogress':
         specifier: 5.0.30
         version: 5.0.30(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/wink-jaro-distance':
+        specifier: ^2.0.2
+        version: 2.0.2
       ace-builds:
         specifier: 1.15.2
         version: 1.15.2
@@ -167,6 +170,9 @@ importers:
       react-toast-notifications:
         specifier: 2.5.1
         version: 2.5.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-transition-group:
+        specifier: ^4.4.5
+        version: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-truncate-markup:
         specifier: 5.1.2
         version: 5.1.2(react@18.3.1)
@@ -194,6 +200,9 @@ importers:
       swr:
         specifier: 2.2.5
         version: 2.2.5(react@18.3.1)
+      tailwind-merge:
+        specifier: ^2.6.0
+        version: 2.6.0
       typeorm:
         specifier: 0.3.11
         version: 0.3.11(pg@8.11.0)(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@22.10.5)(typescript@4.9.5))
@@ -203,6 +212,9 @@ importers:
       web-push:
         specifier: 3.5.0
         version: 3.5.0
+      wink-jaro-distance:
+        specifier: ^2.0.0
+        version: 2.0.0
       winston:
         specifier: 3.8.2
         version: 3.8.2
@@ -3250,6 +3262,9 @@ packages:
   '@types/webxr@0.5.20':
     resolution: {integrity: sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==}
 
+  '@types/wink-jaro-distance@2.0.2':
+    resolution: {integrity: sha512-Q79orp7qA/g/uLdFmqd5MtEa0ZfJW5X1WXikAu8IVHt24IrHWrcTNYNdPpLK5mwVg34C6FQnrv/DMtcUhjE/zA==}
+
   '@types/xml2js@0.4.11':
     resolution: {integrity: sha512-JdigeAKmCyoJUiQljjr7tQG3if9NkqGUgwEUqBvV0N7LM4HyQk7UXCnusRa1lnvXAEYJ8mw8GtZWioagNztOwA==}
 
@@ -8835,6 +8850,9 @@ packages:
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0
 
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
   tailwindcss@3.2.7:
     resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
     engines: {node: '>=12.13.0'}
@@ -9467,6 +9485,9 @@ packages:
   wide-align@1.1.5:
     resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
 
+  wink-jaro-distance@2.0.0:
+    resolution: {integrity: sha512-9bcUaXCi9N8iYpGWbFkf83OsBkg17r4hEyxusEzl+nnReLRPqxhB9YNeRn3g54SYnVRNXP029lY3HDsbdxTAuA==}
+
   winston-daily-rotate-file@4.7.1:
     resolution: {integrity: sha512-7LGPiYGBPNyGHLn9z33i96zx/bd71pjBn9tqQzO3I4Tayv94WPmBNwKC7CO1wPHdP9uvu+Md/1nr6VSH9h0iaA==}
     engines: {node: '>=8'}
@@ -11281,7 +11302,7 @@ snapshots:
   '@emotion/babel-plugin@11.11.0':
     dependencies:
       '@babel/helper-module-imports': 7.24.7
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
       '@emotion/hash': 0.9.1
       '@emotion/memoize': 0.8.1
       '@emotion/serialize': 1.1.4
@@ -11311,7 +11332,7 @@ snapshots:
 
   '@emotion/core@10.3.1(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
       '@emotion/cache': 10.0.29
       '@emotion/css': 10.0.27
       '@emotion/serialize': 0.11.16
@@ -11339,7 +11360,7 @@ snapshots:
 
   '@emotion/react@11.11.4(@types/react@18.3.3)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
       '@emotion/babel-plugin': 11.11.0
       '@emotion/cache': 11.11.0
       '@emotion/serialize': 1.1.4
@@ -13737,6 +13758,8 @@ snapshots:
 
   '@types/webxr@0.5.20': {}
 
+  '@types/wink-jaro-distance@2.0.2': {}
+
   '@types/xml2js@0.4.11':
     dependencies:
       '@types/node': 22.10.5
@@ -14240,13 +14263,13 @@ snapshots:
 
   babel-plugin-macros@2.8.0:
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
       cosmiconfig: 6.0.0
       resolve: 1.22.8
 
   babel-plugin-macros@3.1.0:
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
       cosmiconfig: 7.1.0
       resolve: 1.22.8
 
@@ -15336,7 +15359,7 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
       csstype: 3.1.3
 
   dom-serializer@1.4.1:
@@ -19352,7 +19375,7 @@ snapshots:
 
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -19479,7 +19502,7 @@ snapshots:
 
   regenerator-transform@0.15.2:
     dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
 
   regexp.prototype.flags@1.5.2:
     dependencies:
@@ -20260,6 +20283,8 @@ snapshots:
       react: 18.3.1
       use-sync-external-store: 1.2.2(react@18.3.1)
 
+  tailwind-merge@2.6.0: {}
+
   tailwindcss@3.2.7(postcss@8.4.21)(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@22.10.5)(typescript@4.9.5)):
     dependencies:
       arg: 5.0.2
@@ -20905,6 +20930,8 @@ snapshots:
     dependencies:
       string-width: 4.2.3
 
+  wink-jaro-distance@2.0.0: {}
+
   winston-daily-rotate-file@4.7.1(winston@3.8.2):
     dependencies:
       file-stream-rotator: 0.6.1

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

server/api/rating/rottentomatoes.ts

@@ -1,6 +1,7 @@
 import ExternalAPI from '@server/api/externalapi';
 import cacheManager from '@server/lib/cache';
 import { getSettings } from '@server/lib/settings';
+import jaro from 'wink-jaro-distance';
 
 interface RTAlgoliaSearchResponse {
   results: {
@@ -15,7 +16,7 @@ interface RTAlgoliaHit {
   tmsId: string;
   type: string;
   title: string;
-  titles: string[];
+  titles?: string[];
   description: string;
   releaseYear: number;
   rating: string;
@@ -24,9 +25,9 @@ interface RTAlgoliaHit {
   isEmsSearchable: boolean;
   rtId: number;
   vanity: string;
-  aka: string[];
+  aka?: string[];
   posterImageUrl: string;
-  rottenTomatoes: {
+  rottenTomatoes?: {
     audienceScore: number;
     criticsIconUrl: string;
     wantToSeeCount: number;
@@ -47,6 +48,47 @@ export interface RTRating {
   url: string;
 }
 
+// Tunables
+const INEXACT_TITLE_FACTOR = 0.25;
+const ALTERNATE_TITLE_FACTOR = 0.8;
+const PER_YEAR_PENALTY = 0.4;
+const MINIMUM_SCORE = 0.175;
+
+// Normalization for title comparisons.
+// Lowercase and strip non-alphanumeric (unicode-aware).
+const norm = (s: string): string =>
+  s.toLowerCase().replace(/[^\p{L}\p{N} ]/gu, '');
+
+// Title similarity. 1 if exact, quarter-jaro otherwise.
+const similarity = (a: string, b: string): number =>
+  a === b ? 1 : jaro(a, b).similarity * INEXACT_TITLE_FACTOR;
+
+// Gets the best similarity score between the searched title and all alternate
+// titles of the search result. Non-main titles are penalized.
+const t_score = ({ title, titles, aka }: RTAlgoliaHit, s: string): number => {
+  const f = (t: string, i: number) =>
+    similarity(norm(t), norm(s)) * (i ? ALTERNATE_TITLE_FACTOR : 1);
+  return Math.max(...[title].concat(aka || [], titles || []).map(f));
+};
+
+// Year difference to score: 0 -> 1.0, 1 -> 0.6, 2 -> 0.2, 3+ -> 0.0
+const y_score = (r: RTAlgoliaHit, y?: number): number =>
+  y ? Math.max(0, 1 - Math.abs(r.releaseYear - y) * PER_YEAR_PENALTY) : 1;
+
+// Cut score in half if result has no ratings.
+const extra_score = (r: RTAlgoliaHit): number => (r.rottenTomatoes ? 1 : 0.5);
+
+// Score search result as product of all subscores
+const score = (r: RTAlgoliaHit, name: string, year?: number): number =>
+  t_score(r, name) * y_score(r, year) * extra_score(r);
+
+// Score each search result and return the highest scoring result, if any
+const best = (rs: RTAlgoliaHit[], name: string, year?: number): RTAlgoliaHit =>
+  rs
+    .map((r) => ({ score: score(r, name, year), result: r }))
+    .filter(({ score }) => score > MINIMUM_SCORE)
+    .sort(({ score: a }, { score: b }) => b - a)[0]?.result;
+
 /**
  * This is a best-effort API. The Rotten Tomatoes API is technically
  * private and getting access costs money/requires approval.
@@ -90,47 +132,21 @@ class RottenTomatoes extends ExternalAPI {
     year: number
   ): Promise<RTRating | null> {
     try {
+      const filters = encodeURIComponent('isEmsSearchable=1 AND type:"movie"');
       const data = await this.post<RTAlgoliaSearchResponse>('/queries', {
         requests: [
           {
             indexName: 'content_rt',
-            query: name,
-            params: 'filters=isEmsSearchable%20%3D%201&hitsPerPage=20',
+            query: name.replace(/\bthe\b ?/gi, ''),
+            params: `filters=${filters}&hitsPerPage=20`,
           },
         ],
       });
 
       const contentResults = data.results.find((r) => r.index === 'content_rt');
+      const movie = best(contentResults?.hits || [], name, year);
 
-      if (!contentResults) {
-        return null;
-      }
-
-      // First, attempt to match exact name and year
-      let movie = contentResults.hits.find(
-        (movie) => movie.releaseYear === year && movie.title === name
-      );
-
-      // If we don't find a movie, try to match partial name and year
-      if (!movie) {
-        movie = contentResults.hits.find(
-          (movie) => movie.releaseYear === year && movie.title.includes(name)
-        );
-      }
-
-      // If we still dont find a movie, try to match just on year
-      if (!movie) {
-        movie = contentResults.hits.find((movie) => movie.releaseYear === year);
-      }
-
-      // One last try, try exact name match only
-      if (!movie) {
-        movie = contentResults.hits.find((movie) => movie.title === name);
-      }
-
-      if (!movie?.rottenTomatoes) {
-        return null;
-      }
+      if (!movie?.rottenTomatoes) return null;
 
       return {
         title: movie.title,
@@ -158,33 +174,21 @@ class RottenTomatoes extends ExternalAPI {
     year?: number
   ): Promise<RTRating | null> {
     try {
+      const filters = encodeURIComponent('isEmsSearchable=1 AND type:"tv"');
       const data = await this.post<RTAlgoliaSearchResponse>('/queries', {
         requests: [
           {
             indexName: 'content_rt',
             query: name,
-            params: 'filters=isEmsSearchable%20%3D%201&hitsPerPage=20',
+            params: `filters=${filters}&hitsPerPage=20`,
           },
         ],
       });
 
       const contentResults = data.results.find((r) => r.index === 'content_rt');
+      const tvshow = best(contentResults?.hits || [], name, year);
 
-      if (!contentResults) {
-        return null;
-      }
-
-      let tvshow: RTAlgoliaHit | undefined = contentResults.hits[0];
-
-      if (year) {
-        tvshow = contentResults.hits.find(
-          (series) => series.releaseYear === year
-        );
-      }
-
-      if (!tvshow || !tvshow.rottenTomatoes) {
-        return null;
-      }
+      if (!tvshow?.rottenTomatoes) return null;
 
       return {
         title: tvshow.title,

server/entity/User.ts

@@ -83,13 +83,13 @@ export class User {
   @Column({ nullable: true })
   public jellyfinUserId?: string;
 
-  @Column({ nullable: true })
+  @Column({ nullable: true, select: false })
   public jellyfinDeviceId?: string;
 
-  @Column({ nullable: true })
+  @Column({ nullable: true, select: false })
   public jellyfinAuthToken?: string;
 
-  @Column({ nullable: true })
+  @Column({ nullable: true, select: false })
   public plexToken?: string;
 
   @Column({ type: 'integer', default: 0 })

server/interfaces/api/settingsInterfaces.ts

@@ -30,6 +30,7 @@ export interface PublicSettingsResponse {
   applicationUrl: string;
   hideAvailable: boolean;
   localLogin: boolean;
+  mediaServerLogin: boolean;
   movie4kEnabled: boolean;
   series4kEnabled: boolean;
   discoverRegion: string;

server/job/schedule.ts

@@ -70,6 +70,35 @@ export const startJobs = (): void => {
       running: () => plexFullScanner.status().running,
       cancelFn: () => plexFullScanner.cancel(),
     });
+
+    scheduledJobs.push({
+      id: 'plex-refresh-token',
+      name: 'Plex Refresh Token',
+      type: 'process',
+      interval: 'fixed',
+      cronSchedule: jobs['plex-refresh-token'].schedule,
+      job: schedule.scheduleJob(jobs['plex-refresh-token'].schedule, () => {
+        logger.info('Starting scheduled job: Plex Refresh Token', {
+          label: 'Jobs',
+        });
+        refreshToken.run();
+      }),
+    });
+
+    // Watchlist Sync
+    scheduledJobs.push({
+      id: 'plex-watchlist-sync',
+      name: 'Plex Watchlist Sync',
+      type: 'process',
+      interval: 'seconds',
+      cronSchedule: jobs['plex-watchlist-sync'].schedule,
+      job: schedule.scheduleJob(jobs['plex-watchlist-sync'].schedule, () => {
+        logger.info('Starting scheduled job: Plex Watchlist Sync', {
+          label: 'Jobs',
+        });
+        watchlistSync.syncWatchlist();
+      }),
+    });
   } else if (
     mediaServerType === MediaServerType.JELLYFIN ||
     mediaServerType === MediaServerType.EMBY
@@ -112,21 +141,6 @@ export const startJobs = (): void => {
     });
   }
 
-  // Watchlist Sync
-  scheduledJobs.push({
-    id: 'plex-watchlist-sync',
-    name: 'Plex Watchlist Sync',
-    type: 'process',
-    interval: 'seconds',
-    cronSchedule: jobs['plex-watchlist-sync'].schedule,
-    job: schedule.scheduleJob(jobs['plex-watchlist-sync'].schedule, () => {
-      logger.info('Starting scheduled job: Plex Watchlist Sync', {
-        label: 'Jobs',
-      });
-      watchlistSync.syncWatchlist();
-    }),
-  });
-
   // Run full radarr scan every 24 hours
   scheduledJobs.push({
     id: 'radarr-scan',
@@ -223,19 +237,5 @@ export const startJobs = (): void => {
     }),
   });
 
-  scheduledJobs.push({
-    id: 'plex-refresh-token',
-    name: 'Plex Refresh Token',
-    type: 'process',
-    interval: 'fixed',
-    cronSchedule: jobs['plex-refresh-token'].schedule,
-    job: schedule.scheduleJob(jobs['plex-refresh-token'].schedule, () => {
-      logger.info('Starting scheduled job: Plex Refresh Token', {
-        label: 'Jobs',
-      });
-      refreshToken.run();
-    }),
-  });
-
   logger.info('Scheduled jobs loaded', { label: 'Jobs' });
 };

server/lib/settings/index.ts

@@ -124,6 +124,7 @@ export interface MainSettings {
   };
   hideAvailable: boolean;
   localLogin: boolean;
+  mediaServerLogin: boolean;
   newPlexLogin: boolean;
   discoverRegion: string;
   streamingRegion: string;
@@ -147,6 +148,7 @@ interface FullPublicSettings extends PublicSettings {
   applicationUrl: string;
   hideAvailable: boolean;
   localLogin: boolean;
+  mediaServerLogin: boolean;
   movie4kEnabled: boolean;
   series4kEnabled: boolean;
   discoverRegion: string;
@@ -340,6 +342,7 @@ class Settings {
         },
         hideAvailable: false,
         localLogin: true,
+        mediaServerLogin: true,
         newPlexLogin: true,
         discoverRegion: '',
         streamingRegion: '',
@@ -582,6 +585,8 @@ class Settings {
       applicationUrl: this.data.main.applicationUrl,
       hideAvailable: this.data.main.hideAvailable,
       localLogin: this.data.main.localLogin,
+      mediaServerLogin: this.data.main.mediaServerLogin,
+      jellyfinExternalHost: this.data.jellyfin.externalHostname,
       jellyfinForgotPasswordUrl: this.data.jellyfin.jellyfinForgotPasswordUrl,
       movie4kEnabled: this.data.radarr.some(
         (radarr) => radarr.is4k && radarr.isDefault

server/routes/auth.ts

@@ -56,8 +56,9 @@ authRoutes.post('/plex', async (req, res, next) => {
   }
 
   if (
-    settings.main.mediaServerType != MediaServerType.PLEX &&
-    settings.main.mediaServerType != MediaServerType.NOT_CONFIGURED
+    settings.main.mediaServerType != MediaServerType.NOT_CONFIGURED &&
+    (settings.main.mediaServerLogin === false ||
+      settings.main.mediaServerType != MediaServerType.PLEX)
   ) {
     return res.status(500).json({ error: 'Plex login is disabled' });
   }
@@ -231,10 +232,13 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
 
   //Make sure jellyfin login is enabled, but only if jellyfin && Emby is not already configured
   if (
-    settings.main.mediaServerType !== MediaServerType.JELLYFIN &&
-    settings.main.mediaServerType !== MediaServerType.EMBY &&
+    // media server not configured, allow login for setup
     settings.main.mediaServerType != MediaServerType.NOT_CONFIGURED &&
-    settings.jellyfin.ip !== ''
+    (settings.main.mediaServerLogin === false ||
+      // media server is neither jellyfin or emby
+      (settings.main.mediaServerType !== MediaServerType.JELLYFIN &&
+        settings.main.mediaServerType !== MediaServerType.EMBY &&
+        settings.jellyfin.ip !== ''))
   ) {
     return res.status(500).json({ error: 'Jellyfin login is disabled' });
   }
@@ -263,6 +267,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
     // Try to find deviceId that corresponds to jellyfin user, else generate a new one
     let user = await userRepository.findOne({
       where: { jellyfinUsername: body.username },
+      select: { id: true, jellyfinDeviceId: true },
     });
 
     let deviceId = '';

src/assets/services/jellyfin-icon.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- ***** BEGIN LICENSE BLOCK *****
+  - Part of the Jellyfin project (https://jellyfin.media)
+  - 
+  - All copyright belongs to the Jellyfin contributors; a full list can
+  - be found in the file CONTRIBUTORS.md
+  - 
+  - This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
+  - To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
+- ***** END LICENSE BLOCK ***** -->
+<svg version="1.1" id="icon-transparent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+	<defs>
+		<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="110.25" y1="213.3" x2="496.14" y2="436.09">
+			<stop offset="0" style="stop-color:#AA5CC3"/>
+			<stop offset="1" style="stop-color:#00A4DC"/>
+		</linearGradient>
+	</defs>
+	<title>icon-transparent</title>
+	<g id="icon-transparent">
+		<path id="inner-shape" d="M256,201.6c-20.4,0-86.2,119.3-76.2,139.4s142.5,19.9,152.4,0S276.5,201.6,256,201.6z" fill="url(#linear-gradient)"/>
+		<path id="outer-shape" d="M256,23.3c-61.6,0-259.8,359.4-229.6,420.1s429.3,60,459.2,0S317.6,23.3,256,23.3z
+		M406.5,390.8c-19.6,39.3-281.1,39.8-300.9,0s110.1-275.3,150.4-275.3S426.1,351.4,406.5,390.8z" fill="url(#linear-gradient)"/>
+	</g>
+</svg>

src/components/Common/Button/index.tsx

@@ -1,5 +1,6 @@
 import type { ForwardedRef } from 'react';
 import React from 'react';
+import { twMerge } from 'tailwind-merge';
 
 export type ButtonType =
   | 'default'
@@ -97,7 +98,7 @@ function Button<P extends ElementTypes = 'button'>(
   if (as === 'a') {
     return (
       <a
-        className={buttonStyle.join(' ')}
+        className={twMerge(buttonStyle)}
         {...(props as React.ComponentProps<'a'>)}
         ref={ref as ForwardedRef<HTMLAnchorElement>}
       >
@@ -107,7 +108,7 @@ function Button<P extends ElementTypes = 'button'>(
   } else {
     return (
       <button
-        className={buttonStyle.join(' ')}
+        className={twMerge(buttonStyle)}
         {...(props as React.ComponentProps<'button'>)}
         ref={ref as ForwardedRef<HTMLButtonElement>}
       >

src/components/Common/LabeledCheckbox/index.tsx

@@ -0,0 +1,44 @@
+import { Field } from 'formik';
+import { twMerge } from 'tailwind-merge';
+
+interface LabeledCheckboxProps {
+  id: string;
+  className?: string;
+  label: string;
+  description: string;
+  onChange: () => void;
+  children?: React.ReactNode;
+}
+
+const LabeledCheckbox: React.FC<LabeledCheckboxProps> = ({
+  id,
+  className,
+  label,
+  description,
+  onChange,
+  children,
+}) => {
+  return (
+    <>
+      <div className={twMerge('relative flex items-start', className)}>
+        <div className="flex h-6 items-center">
+          <Field type="checkbox" id={id} name={id} onChange={onChange} />
+        </div>
+        <div className="ml-3 text-sm leading-6">
+          <label htmlFor="localLogin" className="block">
+            <div className="flex flex-col">
+              <span className="font-medium text-white">{label}</span>
+              <span className="font-normal text-gray-400">{description}</span>
+            </div>
+          </label>
+        </div>
+      </div>
+      {
+        /* can hold child checkboxes */
+        children && <div className="mt-4 pl-10">{children}</div>
+      }
+    </>
+  );
+};
+
+export default LabeledCheckbox;

src/components/Login/JellyfinLogin.tsx

@@ -1,63 +1,39 @@
 import Button from '@app/components/Common/Button';
-import Tooltip from '@app/components/Common/Tooltip';
+import SensitiveInput from '@app/components/Common/SensitiveInput';
 import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
-import { InformationCircleIcon } from '@heroicons/react/24/solid';
+import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
 import { ApiErrorCode } from '@server/constants/error';
 import { MediaServerType, ServerType } from '@server/constants/server';
 import { Field, Form, Formik } from 'formik';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
 
 const messages = defineMessages('components.Login', {
+  loginwithapp: 'Login with {appName}',
   username: 'Username',
   password: 'Password',
-  hostname: '{mediaServerName} URL',
-  port: 'Port',
-  enablessl: 'Use SSL',
-  urlBase: 'URL Base',
-  email: 'Email',
-  emailtooltip:
-    'Address does not need to be associated with your {mediaServerName} instance.',
-  validationhostrequired: '{mediaServerName} URL required',
-  validationhostformat: 'Valid URL required',
-  validationemailrequired: 'Email required',
-  validationemailformat: 'Valid email required',
   validationusernamerequired: 'Username required',
   validationpasswordrequired: 'Password required',
-  validationservertyperequired: 'Please select a server type',
-  validationHostnameRequired: 'You must provide a valid hostname or IP address',
-  validationPortRequired: 'You must provide a valid port number',
-  validationUrlTrailingSlash: 'URL must not end in a trailing slash',
-  validationUrlBaseLeadingSlash: 'URL base must have a leading slash',
-  validationUrlBaseTrailingSlash: 'URL base must not end in a trailing slash',
   loginerror: 'Something went wrong while trying to sign in.',
   adminerror: 'You must use an admin account to sign in.',
   noadminerror: 'No admin user found on the server.',
   credentialerror: 'The username or password is incorrect.',
   invalidurlerror: 'Unable to connect to {mediaServerName} server.',
-  signingin: 'Signing in…',
+  signingin: 'Signing In…',
   signin: 'Sign In',
-  initialsigningin: 'Connecting…',
-  initialsignin: 'Connect',
   forgotpassword: 'Forgot Password?',
-  servertype: 'Server Type',
-  back: 'Go back',
 });
 
 interface JellyfinLoginProps {
   revalidate: () => void;
-  initial?: boolean;
   serverType?: MediaServerType;
-  onCancel?: () => void;
 }
 
 const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
   revalidate,
-  initial,
   serverType,
-  onCancel,
 }) => {
   const toasts = useToasts();
   const intl = useIntl();
@@ -72,56 +48,29 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
         : 'Media Server',
   };
 
-  if (initial) {
-    const LoginSchema = Yup.object().shape({
-      hostname: Yup.string().required(
-        intl.formatMessage(
-          messages.validationhostrequired,
-          mediaServerFormatValues
-        )
-      ),
-      port: Yup.number().required(
-        intl.formatMessage(messages.validationPortRequired)
-      ),
-      urlBase: Yup.string()
-        .test(
-          'leading-slash',
-          intl.formatMessage(messages.validationUrlBaseLeadingSlash),
-          (value) => !value || value.startsWith('/')
-        )
-        .test(
-          'trailing-slash',
-          intl.formatMessage(messages.validationUrlBaseTrailingSlash),
-          (value) => !value || !value.endsWith('/')
-        ),
-      email: Yup.string()
-        .email(intl.formatMessage(messages.validationemailformat))
-        .required(intl.formatMessage(messages.validationemailrequired)),
-      username: Yup.string().required(
-        intl.formatMessage(messages.validationusernamerequired)
-      ),
-      password: Yup.string(),
-    });
+  const LoginSchema = Yup.object().shape({
+    username: Yup.string().required(
+      intl.formatMessage(messages.validationusernamerequired)
+    ),
+    password: Yup.string(),
+  });
+  const baseUrl = settings.currentSettings.jellyfinExternalHost
+    ? settings.currentSettings.jellyfinExternalHost
+    : settings.currentSettings.jellyfinHost;
+  const jellyfinForgotPasswordUrl =
+    settings.currentSettings.jellyfinForgotPasswordUrl;
 
-    return (
+  return (
+    <div>
       <Formik
         initialValues={{
           username: '',
           password: '',
-          hostname: '',
-          port: 8096,
-          useSsl: false,
-          urlBase: '',
-          email: '',
         }}
         validationSchema={LoginSchema}
+        validateOnBlur={false}
         onSubmit={async (values) => {
           try {
-            // Check if serverType is either 'Jellyfin' or 'Emby'
-            // if (serverType !== 'Jellyfin' && serverType !== 'Emby') {
-            //   throw new Error('Invalid serverType'); // You can customize the error message
-            // }
-
             const res = await fetch('/api/v1/auth/jellyfin', {
               method: 'POST',
               headers: {
@@ -130,12 +79,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
               body: JSON.stringify({
                 username: values.username,
                 password: values.password,
-                hostname: values.hostname,
-                port: values.port,
-                useSsl: values.useSsl,
-                urlBase: values.urlBase,
-                email: values.email,
-                serverType: serverType,
+                email: values.username,
               }),
             });
             if (!res.ok) throw new Error(res.statusText, { cause: res });
@@ -165,7 +109,6 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                 errorMessage = messages.loginerror;
                 break;
             }
-
             toasts.addToast(
               intl.formatMessage(errorMessage, mediaServerFormatValues),
               {
@@ -178,303 +121,51 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
           }
         }}
       >
-        {({
-          errors,
-          touched,
-          values,
-          setFieldValue,
-          isSubmitting,
-          isValid,
-        }) => (
-          <Form>
-            <div className="sm:border-t sm:border-gray-800">
-              <div className="flex flex-col sm:flex-row sm:gap-4">
-                <div className="w-full">
-                  <label htmlFor="hostname" className="text-label">
-                    {intl.formatMessage(
-                      messages.hostname,
-                      mediaServerFormatValues
-                    )}
-                  </label>
-                  <div className="mt-1 mb-2 sm:col-span-2 sm:mb-0 sm:mt-0">
-                    <div className="flex rounded-md shadow-sm">
-                      <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
-                        {values.useSsl ? 'https://' : 'http://'}
-                      </span>
+        {({ errors, touched, isSubmitting, isValid }) => {
+          return (
+            <>
+              <Form>
+                <div>
+                  <h2 className="mb-6 -mt-1 text-center text-lg font-bold text-neutral-200">
+                    {intl.formatMessage(messages.loginwithapp, {
+                      appName: mediaServerFormatValues.mediaServerName,
+                    })}
+                  </h2>
+
+                  <div className="mt-1 mb-4">
+                    <div className="form-input-field">
                       <Field
-                        id="hostname"
-                        name="hostname"
+                        id="username"
+                        name="username"
                         type="text"
-                        className="rounded-r-only flex-1"
-                        placeholder={intl.formatMessage(
-                          messages.hostname,
-                          mediaServerFormatValues
-                        )}
+                        placeholder={intl.formatMessage(messages.username)}
+                        className="!bg-gray-700/80 placeholder:text-gray-400"
                       />
                     </div>
-                    {errors.hostname && touched.hostname && (
-                      <div className="error">{errors.hostname}</div>
+                    {errors.username && touched.username && (
+                      <div className="error">{errors.username}</div>
                     )}
                   </div>
-                </div>
-                <div className="flex-1">
-                  <label htmlFor="port" className="text-label">
-                    {intl.formatMessage(messages.port)}
-                  </label>
-                  <div className="mt-1 sm:mt-0">
-                    <Field
-                      id="port"
-                      name="port"
-                      inputMode="numeric"
-                      type="text"
-                      className="short flex-1"
-                      placeholder={intl.formatMessage(messages.port)}
-                    />
-                    {errors.port && touched.port && (
-                      <div className="error">{errors.port}</div>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <label htmlFor="useSsl" className="text-label mt-2">
-                {intl.formatMessage(messages.enablessl)}
-              </label>
-              <div className="mt-1 mb-2 sm:col-span-2">
-                <div className="flex rounded-md shadow-sm">
-                  <Field
-                    id="useSsl"
-                    name="useSsl"
-                    type="checkbox"
-                    onChange={() => {
-                      setFieldValue('useSsl', !values.useSsl);
-                      setFieldValue('port', values.useSsl ? 8096 : 443);
-                    }}
-                  />
-                </div>
-              </div>
-              <label htmlFor="urlBase" className="text-label mt-1">
-                {intl.formatMessage(messages.urlBase)}
-              </label>
-              <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
-                <div className="flex rounded-md shadow-sm">
-                  <Field
-                    type="text"
-                    inputMode="url"
-                    id="urlBase"
-                    name="urlBase"
-                    placeholder={intl.formatMessage(messages.urlBase)}
-                  />
-                </div>
-                {errors.urlBase && touched.urlBase && (
-                  <div className="error">{errors.urlBase}</div>
-                )}
-              </div>
-              <label
-                htmlFor="email"
-                className="text-label inline-flex gap-1 align-middle"
-              >
-                {intl.formatMessage(messages.email)}
-                <span className="label-tip">
-                  <Tooltip
-                    content={intl.formatMessage(
-                      messages.emailtooltip,
-                      mediaServerFormatValues
-                    )}
-                  >
-                    <span className="tooltip-trigger">
-                      <InformationCircleIcon className="h-4 w-4" />
-                    </span>
-                  </Tooltip>
-                </span>
-              </label>
-              <div className="mt-1 sm:col-span-2 sm:mb-2 sm:mt-0">
-                <div className="flex rounded-md shadow-sm">
-                  <Field
-                    id="email"
-                    name="email"
-                    type="text"
-                    placeholder={intl.formatMessage(messages.email)}
-                  />
-                </div>
-                {errors.email && touched.email && (
-                  <div className="error">{errors.email}</div>
-                )}
-              </div>
-              <label htmlFor="username" className="text-label">
-                {intl.formatMessage(messages.username)}
-              </label>
-              <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
-                <div className="flex rounded-md shadow-sm">
-                  <Field
-                    id="username"
-                    name="username"
-                    type="text"
-                    placeholder={intl.formatMessage(messages.username)}
-                  />
-                </div>
-                {errors.username && touched.username && (
-                  <div className="error">{errors.username}</div>
-                )}
-              </div>
-              <label htmlFor="password" className="text-label">
-                {intl.formatMessage(messages.password)}
-              </label>
-              <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
-                <div className="flexrounded-md shadow-sm">
-                  <Field
-                    id="password"
-                    name="password"
-                    type="password"
-                    placeholder={intl.formatMessage(messages.password)}
-                  />
-                </div>
-                {errors.password && touched.password && (
-                  <div className="error">{errors.password}</div>
-                )}
-              </div>
-            </div>
-            <div className="mt-8 border-t border-gray-700 pt-5">
-              <div className="flex flex-row-reverse justify-between">
-                <span className="inline-flex rounded-md shadow-sm">
-                  <Button
-                    buttonType="primary"
-                    type="submit"
-                    disabled={isSubmitting || !isValid}
-                  >
-                    {isSubmitting
-                      ? intl.formatMessage(messages.signingin)
-                      : intl.formatMessage(messages.signin)}
-                  </Button>
-                </span>
-                {onCancel && (
-                  <span className="inline-flex rounded-md shadow-sm">
-                    <Button buttonType="default" onClick={() => onCancel()}>
-                      <FormattedMessage {...messages.back} />
-                    </Button>
-                  </span>
-                )}
-              </div>
-            </div>
-          </Form>
-        )}
-      </Formik>
-    );
-  } else {
-    const LoginSchema = Yup.object().shape({
-      username: Yup.string().required(
-        intl.formatMessage(messages.validationusernamerequired)
-      ),
-      password: Yup.string(),
-    });
-    const baseUrl = settings.currentSettings.jellyfinExternalHost
-      ? settings.currentSettings.jellyfinExternalHost
-      : settings.currentSettings.jellyfinHost;
-    const jellyfinForgotPasswordUrl =
-      settings.currentSettings.jellyfinForgotPasswordUrl;
-    return (
-      <div>
-        <Formik
-          initialValues={{
-            username: '',
-            password: '',
-          }}
-          validationSchema={LoginSchema}
-          onSubmit={async (values) => {
-            try {
-              const res = await fetch('/api/v1/auth/jellyfin', {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                  username: values.username,
-                  password: values.password,
-                  email: values.username,
-                }),
-              });
-              if (!res.ok) throw new Error(res.statusText, { cause: res });
-            } catch (e) {
-              let errorData;
-              try {
-                errorData = await e.cause?.text();
-                errorData = JSON.parse(errorData);
-              } catch {
-                /* empty */
-              }
-              let errorMessage = null;
-              switch (errorData?.message) {
-                case ApiErrorCode.InvalidUrl:
-                  errorMessage = messages.invalidurlerror;
-                  break;
-                case ApiErrorCode.InvalidCredentials:
-                  errorMessage = messages.credentialerror;
-                  break;
-                case ApiErrorCode.NotAdmin:
-                  errorMessage = messages.adminerror;
-                  break;
-                case ApiErrorCode.NoAdminUser:
-                  errorMessage = messages.noadminerror;
-                  break;
-                default:
-                  errorMessage = messages.loginerror;
-                  break;
-              }
-              toasts.addToast(
-                intl.formatMessage(errorMessage, mediaServerFormatValues),
-                {
-                  autoDismiss: true,
-                  appearance: 'error',
-                }
-              );
-            } finally {
-              revalidate();
-            }
-          }}
-        >
-          {({ errors, touched, isSubmitting, isValid }) => {
-            return (
-              <>
-                <Form>
-                  <div className="sm:border-t sm:border-gray-800">
-                    <label htmlFor="username" className="text-label">
-                      {intl.formatMessage(messages.username)}
-                    </label>
-                    <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
-                      <div className="flex max-w-lg rounded-md shadow-sm">
-                        <Field
-                          id="username"
-                          name="username"
-                          type="text"
-                          placeholder={intl.formatMessage(messages.username)}
-                        />
-                      </div>
-                      {errors.username && touched.username && (
-                        <div className="error">{errors.username}</div>
-                      )}
+
+                  <div className="mt-1 mb-2">
+                    <div className="form-input-field">
+                      <SensitiveInput
+                        as="field"
+                        id="password"
+                        name="password"
+                        type="password"
+                        autoComplete="current-password"
+                        placeholder={intl.formatMessage(messages.password)}
+                        className="!bg-gray-700/80 placeholder:text-gray-400"
+                      />
                     </div>
-                    <label htmlFor="password" className="text-label">
-                      {intl.formatMessage(messages.password)}
-                    </label>
-                    <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
-                      <div className="flex max-w-lg rounded-md shadow-sm">
-                        <Field
-                          id="password"
-                          name="password"
-                          type="password"
-                          placeholder={intl.formatMessage(messages.password)}
-                        />
-                      </div>
+                    <div className="flex">
                       {errors.password && touched.password && (
                         <div className="error">{errors.password}</div>
                       )}
-                    </div>
-                  </div>
-                  <div className="mt-8 border-t border-gray-700 pt-5">
-                    <div className="flex justify-between">
-                      <span className="inline-flex rounded-md shadow-sm">
-                        <Button
-                          as="a"
-                          buttonType="ghost"
+                      <div className="flex-grow"></div>
+                      {baseUrl && (
+                        <a
                           href={
                             jellyfinForgotPasswordUrl
                               ? `${jellyfinForgotPasswordUrl}`
@@ -485,31 +176,35 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                                     : ''
                                 }forgotpassword.html`
                           }
+                          className="pt-2 text-sm text-indigo-500 hover:text-indigo-400"
                         >
                           {intl.formatMessage(messages.forgotpassword)}
-                        </Button>
-                      </span>
-                      <span className="inline-flex rounded-md shadow-sm">
-                        <Button
-                          buttonType="primary"
-                          type="submit"
-                          disabled={isSubmitting || !isValid}
-                        >
-                          {isSubmitting
-                            ? intl.formatMessage(messages.signingin)
-                            : intl.formatMessage(messages.signin)}
-                        </Button>
-                      </span>
+                        </a>
+                      )}
                     </div>
                   </div>
-                </Form>
-              </>
-            );
-          }}
-        </Formik>
-      </div>
-    );
-  }
+                </div>
+
+                <Button
+                  buttonType="primary"
+                  type="submit"
+                  disabled={isSubmitting || !isValid}
+                  className="mt-2 w-full shadow-sm"
+                >
+                  <ArrowLeftOnRectangleIcon />
+                  <span>
+                    {isSubmitting
+                      ? intl.formatMessage(messages.signingin)
+                      : intl.formatMessage(messages.signin)}
+                  </span>
+                </Button>
+              </Form>
+            </>
+          );
+        }}
+      </Formik>
+    </div>
+  );
 };
 
 export default JellyfinLogin;

src/components/Login/LocalLogin.tsx

@@ -2,10 +2,7 @@ import Button from '@app/components/Common/Button';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
-import {
-  ArrowLeftOnRectangleIcon,
-  LifebuoyIcon,
-} from '@heroicons/react/24/outline';
+import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
 import { useState } from 'react';
@@ -13,6 +10,7 @@ import { useIntl } from 'react-intl';
 import * as Yup from 'yup';
 
 const messages = defineMessages('components.Login', {
+  loginwithapp: 'Login with {appName}',
   username: 'Username',
   email: 'Email Address',
   password: 'Password',
@@ -53,6 +51,7 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
         password: '',
       }}
       validationSchema={LoginSchema}
+      validateOnBlur={false}
       onSubmit={async (values) => {
         try {
           const res = await fetch('/api/v1/auth/local', {
@@ -78,19 +77,24 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
           <>
             <Form>
               <div>
-                <label htmlFor="email" className="text-label">
-                  {intl.formatMessage(messages.email) +
-                    ' / ' +
-                    intl.formatMessage(messages.username)}
-                </label>
-                <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+                <h2 className="mb-6 -mt-1 text-center text-lg font-bold text-neutral-200">
+                  {intl.formatMessage(messages.loginwithapp, {
+                    appName: settings.currentSettings.applicationTitle,
+                  })}
+                </h2>
+
+                <div className="mt-1 mb-4">
                   <div className="form-input-field">
                     <Field
                       id="email"
                       name="email"
+                      placeholder={`${intl.formatMessage(
+                        messages.email
+                      )} / ${intl.formatMessage(messages.username)}`}
                       type="text"
                       inputMode="email"
                       data-testid="email"
+                      className="!bg-gray-700/80 placeholder:text-gray-400"
                     />
                   </div>
                   {errors.email &&
@@ -99,25 +103,35 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                       <div className="error">{errors.email}</div>
                     )}
                 </div>
-                <label htmlFor="password" className="text-label">
-                  {intl.formatMessage(messages.password)}
-                </label>
-                <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+                <div className="mt-1 mb-2">
                   <div className="form-input-field">
                     <SensitiveInput
                       as="field"
                       id="password"
                       name="password"
                       type="password"
+                      placeholder={intl.formatMessage(messages.password)}
                       autoComplete="current-password"
                       data-testid="password"
+                      className="!bg-gray-700/80 placeholder:text-gray-400"
                     />
                   </div>
-                  {errors.password &&
-                    touched.password &&
-                    typeof errors.password === 'string' && (
-                      <div className="error">{errors.password}</div>
+                  <div className="flex">
+                    {errors.password &&
+                      touched.password &&
+                      typeof errors.password === 'string' && (
+                        <div className="error">{errors.password}</div>
+                      )}
+                    <div className="flex-grow"></div>
+                    {passwordResetEnabled && (
+                      <Link
+                        href="/resetpassword"
+                        className="pt-2 text-sm text-indigo-500 hover:text-indigo-400"
+                      >
+                        {intl.formatMessage(messages.forgotpassword)}
+                      </Link>
                     )}
+                  </div>
                 </div>
                 {loginError && (
                   <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
@@ -125,37 +139,21 @@ const LocalLogin = ({ revalidate }: LocalLoginProps) => {
                   </div>
                 )}
               </div>
-              <div className="mt-8 border-t border-gray-700 pt-5">
-                <div className="flex flex-row-reverse justify-between">
-                  <span className="inline-flex rounded-md shadow-sm">
-                    <Button
-                      buttonType="primary"
-                      type="submit"
-                      disabled={isSubmitting || !isValid}
-                      data-testid="local-signin-button"
-                    >
-                      <ArrowLeftOnRectangleIcon />
-                      <span>
-                        {isSubmitting
-                          ? intl.formatMessage(messages.signingin)
-                          : intl.formatMessage(messages.signin)}
-                      </span>
-                    </Button>
-                  </span>
-                  {passwordResetEnabled && (
-                    <span className="inline-flex rounded-md shadow-sm">
-                      <Link href="/resetpassword" passHref legacyBehavior>
-                        <Button as="a" buttonType="ghost">
-                          <LifebuoyIcon />
-                          <span>
-                            {intl.formatMessage(messages.forgotpassword)}
-                          </span>
-                        </Button>
-                      </Link>
-                    </span>
-                  )}
-                </div>
-              </div>
+
+              <Button
+                buttonType="primary"
+                type="submit"
+                disabled={isSubmitting || !isValid}
+                data-testid="local-signin-button"
+                className="mt-2 w-full shadow-sm"
+              >
+                <ArrowLeftOnRectangleIcon />
+                <span>
+                  {isSubmitting
+                    ? intl.formatMessage(messages.signingin)
+                    : intl.formatMessage(messages.signin)}
+                </span>
+              </Button>
             </Form>
           </>
         );

src/components/Login/PlexLoginButton.tsx

@@ -0,0 +1,62 @@
+import PlexIcon from '@app/assets/services/plex.svg';
+import Button from '@app/components/Common/Button';
+import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
+import usePlexLogin from '@app/hooks/usePlexLogin';
+import defineMessages from '@app/utils/defineMessages';
+import { FormattedMessage } from 'react-intl';
+
+const messages = defineMessages('components.Login', {
+  loginwithapp: 'Login with {appName}',
+});
+
+interface PlexLoginButtonProps {
+  onAuthToken: (authToken: string) => void;
+  isProcessing?: boolean;
+  onError?: (message: string) => void;
+  large?: boolean;
+}
+
+const PlexLoginButton = ({
+  onAuthToken,
+  onError,
+  isProcessing,
+  large,
+}: PlexLoginButtonProps) => {
+  const { loading, login } = usePlexLogin({ onAuthToken, onError });
+
+  return (
+    <Button
+      className="relative flex-1 border-[#cc7b19] bg-[rgba(204,123,25,0.3)] hover:border-[#cc7b19] hover:bg-[rgba(204,123,25,0.7)] disabled:opacity-50"
+      onClick={login}
+      disabled={loading || isProcessing}
+      data-testid="plex-login-button"
+    >
+      {loading && (
+        <div className="absolute right-0 mr-4 h-4 w-4">
+          <SmallLoadingSpinner />
+        </div>
+      )}
+
+      {large ? (
+        <FormattedMessage
+          {...messages.loginwithapp}
+          values={{
+            appName: <PlexIcon className="mt-[2px] ml-[0.35em] w-8" />,
+          }}
+        >
+          {(chunks) => (
+            <>
+              {chunks.map((c) =>
+                typeof c === 'string' ? <span>{c}</span> : c
+              )}
+            </>
+          )}
+        </FormattedMessage>
+      ) : (
+        <PlexIcon className="w-8" />
+      )}
+    </Button>
+  );
+};
+
+export default PlexLoginButton;

src/components/Login/index.tsx

@@ -1,9 +1,13 @@
-import Accordion from '@app/components/Common/Accordion';
+import EmbyLogo from '@app/assets/services/emby-icon-only.svg';
+import JellyfinLogo from '@app/assets/services/jellyfin-icon.svg';
+import PlexLogo from '@app/assets/services/plex.svg';
+import Button from '@app/components/Common/Button';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
 import LanguagePicker from '@app/components/Layout/LanguagePicker';
+import JellyfinLogin from '@app/components/Login/JellyfinLogin';
 import LocalLogin from '@app/components/Login/LocalLogin';
-import PlexLoginButton from '@app/components/PlexLoginButton';
+import PlexLoginButton from '@app/components/Login/PlexLoginButton';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
@@ -12,10 +16,10 @@ import { XCircleIcon } from '@heroicons/react/24/solid';
 import { MediaServerType } from '@server/constants/server';
 import { useRouter } from 'next/dist/client/router';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { CSSTransition, SwitchTransition } from 'react-transition-group';
 import useSWR from 'swr';
-import JellyfinLogin from './JellyfinLogin';
 
 const messages = defineMessages('components.Login', {
   signin: 'Sign In',
@@ -23,16 +27,21 @@ const messages = defineMessages('components.Login', {
   signinwithplex: 'Use your Plex account',
   signinwithjellyfin: 'Use your {mediaServerName} account',
   signinwithoverseerr: 'Use your {applicationTitle} account',
+  orsigninwith: 'Or sign in with',
 });
 
 const Login = () => {
   const intl = useIntl();
+  const router = useRouter();
+  const settings = useSettings();
+  const { user, revalidate } = useUser();
+
   const [error, setError] = useState('');
   const [isProcessing, setProcessing] = useState(false);
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
-  const { user, revalidate } = useUser();
-  const router = useRouter();
-  const settings = useSettings();
+  const [mediaServerLogin, setMediaServerLogin] = useState(
+    settings.currentSettings.mediaServerLogin
+  );
 
   // Effect that is triggered when the `authToken` comes back from the Plex OAuth
   // We take the token and attempt to sign in. If we get a success message, we will
@@ -86,14 +95,73 @@ const Login = () => {
     revalidateOnFocus: false,
   });
 
-  const mediaServerFormatValues = {
-    mediaServerName:
-      settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
-        ? 'Jellyfin'
-        : settings.currentSettings.mediaServerType === MediaServerType.EMBY
-        ? 'Emby'
-        : undefined,
-  };
+  const mediaServerName =
+    settings.currentSettings.mediaServerType === MediaServerType.PLEX
+      ? 'Plex'
+      : settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
+      ? 'Jellyfin'
+      : settings.currentSettings.mediaServerType === MediaServerType.EMBY
+      ? 'Emby'
+      : undefined;
+
+  const MediaServerLogo =
+    settings.currentSettings.mediaServerType === MediaServerType.PLEX
+      ? PlexLogo
+      : settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
+      ? JellyfinLogo
+      : settings.currentSettings.mediaServerType === MediaServerType.EMBY
+      ? EmbyLogo
+      : undefined;
+
+  const isJellyfin =
+    settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN ||
+    settings.currentSettings.mediaServerType === MediaServerType.EMBY;
+  const mediaServerLoginRef = useRef<HTMLDivElement>(null);
+  const localLoginRef = useRef<HTMLDivElement>(null);
+  const loginRef = mediaServerLogin ? mediaServerLoginRef : localLoginRef;
+
+  const loginFormVisible =
+    (isJellyfin && settings.currentSettings.mediaServerLogin) ||
+    settings.currentSettings.localLogin;
+  const additionalLoginOptions = [
+    settings.currentSettings.mediaServerLogin &&
+      (settings.currentSettings.mediaServerType === MediaServerType.PLEX ? (
+        <PlexLoginButton
+          key="plex"
+          isProcessing={isProcessing}
+          onAuthToken={(authToken) => setAuthToken(authToken)}
+          large={!isJellyfin && !settings.currentSettings.localLogin}
+        />
+      ) : (
+        settings.currentSettings.localLogin &&
+        (mediaServerLogin ? (
+          <Button
+            key="jellyseerr"
+            data-testid="jellyseerr-login-button"
+            className="flex-1 bg-transparent"
+            onClick={() => setMediaServerLogin(false)}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/os_icon.svg"
+              alt={settings.currentSettings.applicationTitle}
+              className="mr-2 h-5"
+            />
+            <span>{settings.currentSettings.applicationTitle}</span>
+          </Button>
+        ) : (
+          <Button
+            key="mediaserver"
+            data-testid="mediaserver-login-button"
+            className="flex-1 bg-transparent"
+            onClick={() => setMediaServerLogin(true)}
+          >
+            <MediaServerLogo />
+            <span>{mediaServerName}</span>
+          </Button>
+        ))
+      )),
+  ].filter((o): o is JSX.Element => !!o);
 
   return (
     <div className="relative flex min-h-screen flex-col bg-gray-900 py-14">
@@ -112,9 +180,6 @@ const Login = () => {
         <div className="relative h-48 w-full max-w-full">
           <Image src="/logo_stacked.svg" alt="Logo" fill />
         </div>
-        <h2 className="mt-12 text-center text-3xl font-extrabold leading-9 text-gray-100">
-          {intl.formatMessage(messages.signinheader)}
-        </h2>
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div
@@ -145,65 +210,71 @@ const Login = () => {
                 </div>
               </div>
             </Transition>
-            <Accordion single atLeastOne>
-              {({ openIndexes, handleClick, AccordionContent }) => (
-                <>
-                  <button
-                    className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-sm font-bold text-gray-400 transition-colors duration-200 focus:outline-none sm:rounded-t-lg ${
-                      openIndexes.includes(0) && 'text-indigo-500'
-                    } ${
-                      settings.currentSettings.localLogin &&
-                      'hover:cursor-pointer hover:bg-gray-700'
-                    }`}
-                    onClick={() => handleClick(0)}
-                    disabled={!settings.currentSettings.localLogin}
-                  >
-                    {settings.currentSettings.mediaServerType ==
-                    MediaServerType.PLEX
-                      ? intl.formatMessage(messages.signinwithplex)
-                      : intl.formatMessage(
-                          messages.signinwithjellyfin,
-                          mediaServerFormatValues
-                        )}
-                  </button>
-                  <AccordionContent isOpen={openIndexes.includes(0)}>
-                    <div className="px-10 py-8">
-                      {settings.currentSettings.mediaServerType ==
-                      MediaServerType.PLEX ? (
-                        <PlexLoginButton
-                          isProcessing={isProcessing}
-                          onAuthToken={(authToken) => setAuthToken(authToken)}
-                        />
-                      ) : (
-                        <JellyfinLogin revalidate={revalidate} />
-                      )}
-                    </div>
-                  </AccordionContent>
-                  {settings.currentSettings.localLogin && (
-                    <div>
-                      <button
-                        className={`w-full cursor-default bg-gray-800 bg-opacity-70 py-2 text-center text-sm font-bold text-gray-400 transition-colors duration-200 hover:cursor-pointer hover:bg-gray-700 focus:outline-none ${
-                          openIndexes.includes(1)
-                            ? 'text-indigo-500'
-                            : 'sm:rounded-b-lg'
-                        }`}
-                        onClick={() => handleClick(1)}
-                      >
-                        {intl.formatMessage(messages.signinwithoverseerr, {
-                          applicationTitle:
-                            settings.currentSettings.applicationTitle,
-                        })}
-                      </button>
-                      <AccordionContent isOpen={openIndexes.includes(1)}>
-                        <div className="px-10 py-8">
-                          <LocalLogin revalidate={revalidate} />
-                        </div>
-                      </AccordionContent>
-                    </div>
-                  )}
-                </>
-              )}
-            </Accordion>
+            <div className="px-10 py-8">
+              <SwitchTransition mode="out-in">
+                <CSSTransition
+                  key={mediaServerLogin ? 'ms' : 'local'}
+                  nodeRef={loginRef}
+                  addEndListener={(done) => {
+                    loginRef.current?.addEventListener(
+                      'transitionend',
+                      done,
+                      false
+                    );
+                  }}
+                  onEntered={() => {
+                    document
+                      .querySelector<HTMLInputElement>('#email, #username')
+                      ?.focus();
+                  }}
+                  classNames={{
+                    appear: 'opacity-0',
+                    appearActive: 'transition-opacity duration-500 opacity-100',
+                    enter: 'opacity-0',
+                    enterActive: 'transition-opacity duration-500 opacity-100',
+                    exitActive: 'transition-opacity duration-0 opacity-0',
+                  }}
+                >
+                  <div ref={loginRef} className="button-container">
+                    {isJellyfin &&
+                    (mediaServerLogin ||
+                      !settings.currentSettings.localLogin) ? (
+                      <JellyfinLogin
+                        serverType={settings.currentSettings.mediaServerType}
+                        revalidate={revalidate}
+                      />
+                    ) : (
+                      settings.currentSettings.localLogin && (
+                        <LocalLogin revalidate={revalidate} />
+                      )
+                    )}
+                  </div>
+                </CSSTransition>
+              </SwitchTransition>
+
+              {additionalLoginOptions.length > 0 &&
+                (loginFormVisible ? (
+                  <div className="flex items-center py-5">
+                    <div className="flex-grow border-t border-gray-600"></div>
+                    <span className="mx-2 flex-shrink text-sm text-gray-400">
+                      {intl.formatMessage(messages.orsigninwith)}
+                    </span>
+                    <div className="flex-grow border-t border-gray-600"></div>
+                  </div>
+                ) : (
+                  <h2 className="mb-6 text-center text-lg font-bold text-neutral-200">
+                    {intl.formatMessage(messages.signinheader)}
+                  </h2>
+                ))}
+
+              <div
+                className={`flex w-full flex-wrap gap-2 ${
+                  !loginFormVisible ? 'flex-col' : ''
+                }`}
+              >
+                {additionalLoginOptions}
+              </div>
+            </div>
           </>
         </div>
       </div>

src/components/MovieDetails/index.tsx

@@ -102,7 +102,7 @@ const messages = defineMessages('components.MovieDetails', {
   watchlistSuccess: '<strong>{title}</strong> added to watchlist successfully!',
   watchlistDeleted:
     '<strong>{title}</strong> Removed from watchlist successfully!',
-  watchlistError: 'Something went wrong try again.',
+  watchlistError: 'Something went wrong. Please try again.',
   removefromwatchlist: 'Remove From Watchlist',
   addtowatchlist: 'Add To Watchlist',
 });

src/components/PlexLoginButton/index.tsx

@@ -1,66 +0,0 @@
-import globalMessages from '@app/i18n/globalMessages';
-import defineMessages from '@app/utils/defineMessages';
-import PlexOAuth from '@app/utils/plex';
-import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
-import { useState } from 'react';
-import { useIntl } from 'react-intl';
-
-const messages = defineMessages('components.PlexLoginButton', {
-  signinwithplex: 'Sign In',
-  signingin: 'Signing In…',
-});
-
-const plexOAuth = new PlexOAuth();
-
-interface PlexLoginButtonProps {
-  onAuthToken: (authToken: string) => void;
-  isProcessing?: boolean;
-  onError?: (message: string) => void;
-}
-
-const PlexLoginButton = ({
-  onAuthToken,
-  onError,
-  isProcessing,
-}: PlexLoginButtonProps) => {
-  const intl = useIntl();
-  const [loading, setLoading] = useState(false);
-
-  const getPlexLogin = async () => {
-    setLoading(true);
-    try {
-      const authToken = await plexOAuth.login();
-      setLoading(false);
-      onAuthToken(authToken);
-    } catch (e) {
-      if (onError) {
-        onError(e.message);
-      }
-      setLoading(false);
-    }
-  };
-  return (
-    <span className="block w-full rounded-md shadow-sm">
-      <button
-        type="button"
-        onClick={() => {
-          plexOAuth.preparePopup();
-          setTimeout(() => getPlexLogin(), 1500);
-        }}
-        disabled={loading || isProcessing}
-        className="plex-button"
-      >
-        <ArrowLeftOnRectangleIcon />
-        <span>
-          {loading
-            ? intl.formatMessage(globalMessages.loading)
-            : isProcessing
-            ? intl.formatMessage(messages.signingin)
-            : intl.formatMessage(messages.signinwithplex)}
-        </span>
-      </button>
-    </span>
-  );
-};
-
-export default PlexLoginButton;

src/components/Settings/SettingsUsers/index.tsx

@@ -1,4 +1,5 @@
 import Button from '@app/components/Common/Button';
+import LabeledCheckbox from '@app/components/Common/LabeledCheckbox';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
 import PermissionEdit from '@app/components/PermissionEdit';
@@ -13,6 +14,7 @@ import { Field, Form, Formik } from 'formik';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
+import * as yup from 'yup';
 
 const messages = defineMessages('components.Settings.SettingsUsers', {
   users: 'Users',
@@ -20,9 +22,15 @@ const messages = defineMessages('components.Settings.SettingsUsers', {
   userSettingsDescription: 'Configure global and default user settings.',
   toastSettingsSuccess: 'User settings saved successfully!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
+  loginMethods: 'Login Methods',
+  loginMethodsTip: 'Configure login methods for users.',
   localLogin: 'Enable Local Sign-In',
   localLoginTip:
-    'Allow users to sign in using their email address and password, instead of {mediaServerName} OAuth',
+    'Allow users to sign in using their email address and password',
+  mediaServerLogin: 'Enable {mediaServerName} Sign-In',
+  mediaServerLoginTip:
+    'Allow users to sign in using their {mediaServerName} account',
+  atLeastOneAuth: 'At least one authentication method must be selected.',
   newPlexLogin: 'Enable New {mediaServerName} Sign-In',
   newPlexLoginTip:
     'Allow {mediaServerName} users to sign in without first being imported',
@@ -42,6 +50,27 @@ const SettingsUsers = () => {
   } = useSWR<MainSettings>('/api/v1/settings/main');
   const settings = useSettings();
 
+  const schema = yup
+    .object()
+    .shape({
+      localLogin: yup.boolean(),
+      mediaServerLogin: yup.boolean(),
+    })
+    .test({
+      name: 'atLeastOneAuth',
+      test: function (values) {
+        const isValid = ['localLogin', 'mediaServerLogin'].some(
+          (field) => !!values[field]
+        );
+
+        if (isValid) return true;
+        return this.createError({
+          path: 'localLogin | mediaServerLogin',
+          message: intl.formatMessage(messages.atLeastOneAuth),
+        });
+      },
+    });
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -52,6 +81,8 @@ const SettingsUsers = () => {
         ? 'Jellyfin'
         : settings.currentSettings.mediaServerType === MediaServerType.EMBY
         ? 'Emby'
+        : settings.currentSettings.mediaServerType === MediaServerType.PLEX
+        ? 'Plex'
         : undefined,
   };
 
@@ -73,6 +104,7 @@ const SettingsUsers = () => {
         <Formik
           initialValues={{
             localLogin: data?.localLogin,
+            mediaServerLogin: data?.mediaServerLogin,
             newPlexLogin: data?.newPlexLogin,
             movieQuotaLimit: data?.defaultQuotas.movie.quotaLimit ?? 0,
             movieQuotaDays: data?.defaultQuotas.movie.quotaDays ?? 7,
@@ -80,6 +112,7 @@ const SettingsUsers = () => {
             tvQuotaDays: data?.defaultQuotas.tv.quotaDays ?? 7,
             defaultPermissions: data?.defaultPermissions ?? 0,
           }}
+          validationSchema={schema}
           enableReinitialize
           onSubmit={async (values) => {
             try {
@@ -90,6 +123,7 @@ const SettingsUsers = () => {
                 },
                 body: JSON.stringify({
                   localLogin: values.localLogin,
+                  mediaServerLogin: values.mediaServerLogin,
                   newPlexLogin: values.newPlexLogin,
                   defaultQuotas: {
                     movie: {
@@ -121,30 +155,61 @@ const SettingsUsers = () => {
             }
           }}
         >
-          {({ isSubmitting, values, setFieldValue }) => {
+          {({ isSubmitting, isValid, values, errors, setFieldValue }) => {
             return (
               <Form className="section">
-                <div className="form-row">
-                  <label htmlFor="localLogin" className="checkbox-label">
-                    {intl.formatMessage(messages.localLogin)}
-                    <span className="label-tip">
-                      {intl.formatMessage(
-                        messages.localLoginTip,
-                        mediaServerFormatValues
+                <div
+                  role="group"
+                  aria-labelledby="group-label"
+                  className="form-group"
+                >
+                  <div className="form-row">
+                    <span id="group-label" className="group-label">
+                      {intl.formatMessage(messages.loginMethods)}
+                      <span className="label-tip">
+                        {intl.formatMessage(messages.loginMethodsTip)}
+                      </span>
+                      {'localLogin | mediaServerLogin' in errors && (
+                        <span className="error">
+                          {errors['localLogin | mediaServerLogin'] as string}
+                        </span>
                       )}
                     </span>
-                  </label>
-                  <div className="form-input-area">
-                    <Field
-                      type="checkbox"
-                      id="localLogin"
-                      name="localLogin"
-                      onChange={() => {
-                        setFieldValue('localLogin', !values.localLogin);
-                      }}
-                    />
+
+                    <div className="form-input-area max-w-lg">
+                      <LabeledCheckbox
+                        id="localLogin"
+                        label={intl.formatMessage(messages.localLogin)}
+                        description={intl.formatMessage(
+                          messages.localLoginTip,
+                          mediaServerFormatValues
+                        )}
+                        onChange={() =>
+                          setFieldValue('localLogin', !values.localLogin)
+                        }
+                      />
+                      <LabeledCheckbox
+                        id="mediaServerLogin"
+                        className="mt-4"
+                        label={intl.formatMessage(
+                          messages.mediaServerLogin,
+                          mediaServerFormatValues
+                        )}
+                        description={intl.formatMessage(
+                          messages.mediaServerLoginTip,
+                          mediaServerFormatValues
+                        )}
+                        onChange={() =>
+                          setFieldValue(
+                            'mediaServerLogin',
+                            !values.mediaServerLogin
+                          )
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
+
                 <div className="form-row">
                   <label htmlFor="newPlexLogin" className="checkbox-label">
                     {intl.formatMessage(
@@ -229,7 +294,7 @@ const SettingsUsers = () => {
                       <Button
                         buttonType="primary"
                         type="submit"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || !isValid}
                       >
                         <ArrowDownOnSquareIcon />
                         <span>

src/components/Setup/JellyfinSetup.tsx

@@ -0,0 +1,352 @@
+import Button from '@app/components/Common/Button';
+import Tooltip from '@app/components/Common/Tooltip';
+import defineMessages from '@app/utils/defineMessages';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
+import { ApiErrorCode } from '@server/constants/error';
+import { MediaServerType, ServerType } from '@server/constants/server';
+import { Field, Form, Formik } from 'formik';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import * as Yup from 'yup';
+
+const messages = defineMessages('components.Login', {
+  username: 'Username',
+  password: 'Password',
+  hostname: '{mediaServerName} URL',
+  port: 'Port',
+  enablessl: 'Use SSL',
+  urlBase: 'URL Base',
+  email: 'Email Address',
+  emailtooltip:
+    'Address does not need to be associated with your {mediaServerName} instance.',
+  validationhostrequired: '{mediaServerName} URL required',
+  validationhostformat: 'Valid URL required',
+  validationemailrequired: 'You must provide a valid email address',
+  validationemailformat: 'Valid email required',
+  validationusernamerequired: 'Username required',
+  validationpasswordrequired: 'You must provide a password',
+  validationservertyperequired: 'Please select a server type',
+  validationHostnameRequired: 'You must provide a valid hostname or IP address',
+  validationPortRequired: 'You must provide a valid port number',
+  validationUrlTrailingSlash: 'URL must not end in a trailing slash',
+  validationUrlBaseLeadingSlash: 'URL base must have a leading slash',
+  validationUrlBaseTrailingSlash: 'URL base must not end in a trailing slash',
+  loginerror: 'Something went wrong while trying to sign in.',
+  adminerror: 'You must use an admin account to sign in.',
+  noadminerror: 'No admin user found on the server.',
+  credentialerror: 'The username or password is incorrect.',
+  invalidurlerror: 'Unable to connect to {mediaServerName} server.',
+  signingin: 'Signing In…',
+  signin: 'Sign In',
+  initialsigningin: 'Connecting…',
+  initialsignin: 'Connect',
+  forgotpassword: 'Forgot Password?',
+  servertype: 'Server Type',
+  back: 'Go back',
+});
+
+interface JellyfinSetupProps {
+  revalidate: () => void;
+  serverType?: MediaServerType;
+  onCancel?: () => void;
+}
+
+function JellyfinSetup({
+  revalidate,
+  serverType,
+  onCancel,
+}: JellyfinSetupProps) {
+  const toasts = useToasts();
+  const intl = useIntl();
+
+  const mediaServerFormatValues = {
+    mediaServerName:
+      serverType === MediaServerType.JELLYFIN
+        ? ServerType.JELLYFIN
+        : serverType === MediaServerType.EMBY
+        ? ServerType.EMBY
+        : 'Media Server',
+  };
+
+  const LoginSchema = Yup.object().shape({
+    hostname: Yup.string().required(
+      intl.formatMessage(
+        messages.validationhostrequired,
+        mediaServerFormatValues
+      )
+    ),
+    port: Yup.number().required(
+      intl.formatMessage(messages.validationPortRequired)
+    ),
+    urlBase: Yup.string()
+      .test(
+        'leading-slash',
+        intl.formatMessage(messages.validationUrlBaseLeadingSlash),
+        (value) => !value || value.startsWith('/')
+      )
+      .test(
+        'trailing-slash',
+        intl.formatMessage(messages.validationUrlBaseTrailingSlash),
+        (value) => !value || !value.endsWith('/')
+      ),
+    email: Yup.string()
+      .email(intl.formatMessage(messages.validationemailformat))
+      .required(intl.formatMessage(messages.validationemailrequired)),
+    username: Yup.string().required(
+      intl.formatMessage(messages.validationusernamerequired)
+    ),
+    password: Yup.string(),
+  });
+
+  return (
+    <Formik
+      initialValues={{
+        username: '',
+        password: '',
+        hostname: '',
+        port: 8096,
+        useSsl: false,
+        urlBase: '',
+        email: '',
+      }}
+      validationSchema={LoginSchema}
+      onSubmit={async (values) => {
+        try {
+          // Check if serverType is either 'Jellyfin' or 'Emby'
+          // if (serverType !== 'Jellyfin' && serverType !== 'Emby') {
+          //   throw new Error('Invalid serverType'); // You can customize the error message
+          // }
+
+          const res = await fetch('/api/v1/auth/jellyfin', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              username: values.username,
+              password: values.password,
+              hostname: values.hostname,
+              port: values.port,
+              useSsl: values.useSsl,
+              urlBase: values.urlBase,
+              email: values.email,
+              serverType: serverType,
+            }),
+          });
+          if (!res.ok) throw new Error(res.statusText, { cause: res });
+        } catch (e) {
+          let errorData;
+          try {
+            errorData = await e.cause?.text();
+            errorData = JSON.parse(errorData);
+          } catch {
+            /* empty */
+          }
+          let errorMessage = null;
+          switch (errorData?.message) {
+            case ApiErrorCode.InvalidUrl:
+              errorMessage = messages.invalidurlerror;
+              break;
+            case ApiErrorCode.InvalidCredentials:
+              errorMessage = messages.credentialerror;
+              break;
+            case ApiErrorCode.NotAdmin:
+              errorMessage = messages.adminerror;
+              break;
+            case ApiErrorCode.NoAdminUser:
+              errorMessage = messages.noadminerror;
+              break;
+            default:
+              errorMessage = messages.loginerror;
+              break;
+          }
+
+          toasts.addToast(
+            intl.formatMessage(errorMessage, mediaServerFormatValues),
+            {
+              autoDismiss: true,
+              appearance: 'error',
+            }
+          );
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, values, setFieldValue, isSubmitting, isValid }) => (
+        <Form>
+          <div className="sm:border-t sm:border-gray-800">
+            <div className="flex flex-col sm:flex-row sm:gap-4">
+              <div className="w-full">
+                <label htmlFor="hostname" className="text-label">
+                  {intl.formatMessage(
+                    messages.hostname,
+                    mediaServerFormatValues
+                  )}
+                </label>
+                <div className="mt-1 mb-2 sm:col-span-2 sm:mb-0 sm:mt-0">
+                  <div className="flex rounded-md shadow-sm">
+                    <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
+                      {values.useSsl ? 'https://' : 'http://'}
+                    </span>
+                    <Field
+                      id="hostname"
+                      name="hostname"
+                      type="text"
+                      className="rounded-r-only flex-1"
+                      placeholder={intl.formatMessage(
+                        messages.hostname,
+                        mediaServerFormatValues
+                      )}
+                    />
+                  </div>
+                  {errors.hostname && touched.hostname && (
+                    <div className="error">{errors.hostname}</div>
+                  )}
+                </div>
+              </div>
+              <div className="flex-1">
+                <label htmlFor="port" className="text-label">
+                  {intl.formatMessage(messages.port)}
+                </label>
+                <div className="mt-1 sm:mt-0">
+                  <Field
+                    id="port"
+                    name="port"
+                    inputMode="numeric"
+                    type="text"
+                    className="short flex-1"
+                    placeholder={intl.formatMessage(messages.port)}
+                  />
+                  {errors.port && touched.port && (
+                    <div className="error">{errors.port}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <label htmlFor="useSsl" className="text-label mt-2">
+              {intl.formatMessage(messages.enablessl)}
+            </label>
+            <div className="mt-1 mb-2 sm:col-span-2">
+              <div className="flex rounded-md shadow-sm">
+                <Field
+                  id="useSsl"
+                  name="useSsl"
+                  type="checkbox"
+                  onChange={() => {
+                    setFieldValue('useSsl', !values.useSsl);
+                    setFieldValue('port', values.useSsl ? 8096 : 443);
+                  }}
+                />
+              </div>
+            </div>
+            <label htmlFor="urlBase" className="text-label mt-1">
+              {intl.formatMessage(messages.urlBase)}
+            </label>
+            <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+              <div className="flex rounded-md shadow-sm">
+                <Field
+                  type="text"
+                  inputMode="url"
+                  id="urlBase"
+                  name="urlBase"
+                  placeholder={intl.formatMessage(messages.urlBase)}
+                />
+              </div>
+              {errors.urlBase && touched.urlBase && (
+                <div className="error">{errors.urlBase}</div>
+              )}
+            </div>
+            <label
+              htmlFor="email"
+              className="text-label inline-flex gap-1 align-middle"
+            >
+              {intl.formatMessage(messages.email)}
+              <span className="label-tip">
+                <Tooltip
+                  content={intl.formatMessage(
+                    messages.emailtooltip,
+                    mediaServerFormatValues
+                  )}
+                >
+                  <span className="tooltip-trigger">
+                    <InformationCircleIcon className="h-4 w-4" />
+                  </span>
+                </Tooltip>
+              </span>
+            </label>
+            <div className="mt-1 sm:col-span-2 sm:mb-2 sm:mt-0">
+              <div className="flex rounded-md shadow-sm">
+                <Field
+                  id="email"
+                  name="email"
+                  type="text"
+                  placeholder={intl.formatMessage(messages.email)}
+                />
+              </div>
+              {errors.email && touched.email && (
+                <div className="error">{errors.email}</div>
+              )}
+            </div>
+            <label htmlFor="username" className="text-label">
+              {intl.formatMessage(messages.username)}
+            </label>
+            <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+              <div className="flex rounded-md shadow-sm">
+                <Field
+                  id="username"
+                  name="username"
+                  type="text"
+                  placeholder={intl.formatMessage(messages.username)}
+                />
+              </div>
+              {errors.username && touched.username && (
+                <div className="error">{errors.username}</div>
+              )}
+            </div>
+            <label htmlFor="password" className="text-label">
+              {intl.formatMessage(messages.password)}
+            </label>
+            <div className="mt-1 mb-2 sm:col-span-2 sm:mt-0">
+              <div className="flexrounded-md shadow-sm">
+                <Field
+                  id="password"
+                  name="password"
+                  type="password"
+                  placeholder={intl.formatMessage(messages.password)}
+                />
+              </div>
+              {errors.password && touched.password && (
+                <div className="error">{errors.password}</div>
+              )}
+            </div>
+          </div>
+          <div className="mt-8 border-t border-gray-700 pt-5">
+            <div className="flex flex-row-reverse justify-between">
+              <span className="inline-flex rounded-md shadow-sm">
+                <Button
+                  buttonType="primary"
+                  type="submit"
+                  disabled={isSubmitting || !isValid}
+                >
+                  {isSubmitting
+                    ? intl.formatMessage(messages.signingin)
+                    : intl.formatMessage(messages.signin)}
+                </Button>
+              </span>
+              {onCancel && (
+                <span className="inline-flex rounded-md shadow-sm">
+                  <Button buttonType="default" onClick={() => onCancel()}>
+                    <FormattedMessage {...messages.back} />
+                  </Button>
+                </span>
+              )}
+            </div>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+}
+
+export default JellyfinSetup;

src/components/Setup/LoginWithPlex.tsx

@@ -1,4 +1,4 @@
-import PlexLoginButton from '@app/components/PlexLoginButton';
+import PlexLoginButton from '@app/components/Login/PlexLoginButton';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { useEffect, useState } from 'react';

src/components/Setup/SetupLogin.tsx

@@ -1,6 +1,6 @@
 import Button from '@app/components/Common/Button';
-import JellyfinLogin from '@app/components/Login/JellyfinLogin';
-import PlexLoginButton from '@app/components/PlexLoginButton';
+import PlexLoginButton from '@app/components/Login/PlexLoginButton';
+import JellyfinSetup from '@app/components/Setup/JellyfinSetup';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
@@ -83,11 +83,9 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({
       </div>
       {serverType === MediaServerType.PLEX && (
         <>
-          <div
-            className="px-10 py-8"
-            style={{ backgroundColor: 'rgba(0,0,0,0.3)' }}
-          >
+          <div className="flex justify-center bg-black/30 px-10 py-8">
             <PlexLoginButton
+              large
               onAuthToken={(authToken) => {
                 setMediaServerType(MediaServerType.PLEX);
                 setAuthToken(authToken);
@@ -102,16 +100,14 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({
         </>
       )}
       {serverType === MediaServerType.JELLYFIN && (
-        <JellyfinLogin
-          initial={true}
+        <JellyfinSetup
           revalidate={revalidate}
           serverType={serverType}
           onCancel={onCancel}
         />
       )}
       {serverType === MediaServerType.EMBY && (
-        <JellyfinLogin
-          initial={true}
+        <JellyfinSetup
           revalidate={revalidate}
           serverType={serverType}
           onCancel={onCancel}

src/components/Setup/index.tsx

@@ -133,10 +133,6 @@ const Setup = () => {
         setCurrentStep(3);
       }
     }
-
-    if (currentStep === 3) {
-      validateLibraries();
-    }
   }, [
     settings.currentSettings.mediaServerType,
     settings.currentSettings.initialized,
@@ -148,6 +144,13 @@ const Setup = () => {
     validateLibraries,
   ]);
 
+  useEffect(() => {
+    if (currentStep === 3) {
+      validateLibraries();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStep]);
+
   const handleComplete = () => {
     validateLibraries();
   };

src/components/TitleCard/index.tsx

@@ -51,7 +51,7 @@ const messages = defineMessages('components.TitleCard', {
   watchlistDeleted:
     '<strong>{title}</strong> Removed from watchlist  successfully!',
   watchlistCancel: 'watchlist for <strong>{title}</strong> canceled.',
-  watchlistError: 'Something went wrong try again.',
+  watchlistError: 'Something went wrong. Please try again.',
 });
 
 const TitleCard = ({

src/components/TvDetails/index.tsx

@@ -101,7 +101,7 @@ const messages = defineMessages('components.TvDetails', {
   watchlistSuccess: '<strong>{title}</strong> added to watchlist successfully!',
   watchlistDeleted:
     '<strong>{title}</strong> Removed from watchlist successfully!',
-  watchlistError: 'Something went wrong try again.',
+  watchlistError: 'Something went wrong. Please try again.',
   removefromwatchlist: 'Remove From Watchlist',
   addtowatchlist: 'Add To Watchlist',
 });

src/components/UserList/BulkEditModal.tsx

@@ -1,9 +1,10 @@
 import Modal from '@app/components/Common/Modal';
 import PermissionEdit from '@app/components/PermissionEdit';
 import type { User } from '@app/hooks/useUser';
-import { useUser } from '@app/hooks/useUser';
+import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
+import { hasPermission } from '@server/lib/permissions';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -79,7 +80,10 @@ const BulkEditModal = ({
       const { permissions: allPermissionsEqual } = selectedUsers.reduce(
         ({ permissions: aPerms }, { permissions: bPerms }) => {
           return {
-            permissions: aPerms === bPerms ? aPerms : NaN,
+            permissions:
+              aPerms === bPerms || hasPermission(Permission.ADMIN, aPerms)
+                ? aPerms
+                : NaN,
           };
         },
         { permissions: selectedUsers[0].permissions }

src/context/SettingsContext.tsx

@@ -14,6 +14,7 @@ const defaultSettings = {
   applicationUrl: '',
   hideAvailable: false,
   localLogin: true,
+  mediaServerLogin: true,
   movie4kEnabled: false,
   series4kEnabled: false,
   discoverRegion: '',

src/hooks/usePlexLogin.ts

@@ -0,0 +1,37 @@
+import PlexOAuth from '@app/utils/plex';
+import { useState } from 'react';
+
+const plexOAuth = new PlexOAuth();
+
+function usePlexLogin({
+  onAuthToken,
+  onError,
+}: {
+  onAuthToken: (authToken: string) => void;
+  onError?: (err: string) => void;
+}) {
+  const [loading, setLoading] = useState(false);
+
+  const getPlexLogin = async () => {
+    setLoading(true);
+    try {
+      const authToken = await plexOAuth.login();
+      setLoading(false);
+      onAuthToken(authToken);
+    } catch (e) {
+      if (onError) {
+        onError(e.message);
+      }
+      setLoading(false);
+    }
+  };
+
+  const login = () => {
+    plexOAuth.preparePopup();
+    setTimeout(() => getPlexLogin(), 1500);
+  };
+
+  return { loading, login };
+}
+
+export default usePlexLogin;

src/i18n/globalMessages.ts

@@ -58,7 +58,7 @@ const globalMessages = defineMessages('i18n', {
   blacklist: 'Blacklist',
   blacklisted: 'Blacklisted',
   blacklistSuccess: '<strong>{title}</strong> was successfully blacklisted.',
-  blacklistError: 'Something went wrong try again.',
+  blacklistError: 'Something went wrong. Please try again.',
   blacklistDuplicateError:
     '<strong>{title}</strong> has already been blacklisted.',
   removeFromBlacklistSuccess:

src/i18n/locale/en.json

@@ -246,7 +246,9 @@
   "components.Login.initialsigningin": "Connecting…",
   "components.Login.invalidurlerror": "Unable to connect to {mediaServerName} server.",
   "components.Login.loginerror": "Something went wrong while trying to sign in.",
+  "components.Login.loginwithapp": "Login with {appName}",
   "components.Login.noadminerror": "No admin user found on the server.",
+  "components.Login.orsigninwith": "Or sign in with",
   "components.Login.password": "Password",
   "components.Login.port": "Port",
   "components.Login.save": "Add",
@@ -340,7 +342,7 @@
   "components.MovieDetails.tmdbuserscore": "TMDB User Score",
   "components.MovieDetails.viewfullcrew": "View Full Crew",
   "components.MovieDetails.watchlistDeleted": "<strong>{title}</strong> Removed from watchlist successfully!",
-  "components.MovieDetails.watchlistError": "Something went wrong try again.",
+  "components.MovieDetails.watchlistError": "Something went wrong. Please try again.",
   "components.MovieDetails.watchlistSuccess": "<strong>{title}</strong> added to watchlist successfully!",
   "components.MovieDetails.watchtrailer": "Watch Trailer",
   "components.NotificationTypeSelector.adminissuecommentDescription": "Get notified when other users comment on issues.",
@@ -441,8 +443,6 @@
   "components.PersonDetails.birthdate": "Born {birthdate}",
   "components.PersonDetails.crewmember": "Crew",
   "components.PersonDetails.lifespan": "{birthdate} – {deathdate}",
-  "components.PlexLoginButton.signingin": "Signing In…",
-  "components.PlexLoginButton.signinwithplex": "Sign In",
   "components.QuotaSelector.days": "{count, plural, one {day} other {days}}",
   "components.QuotaSelector.movieRequests": "{quotaLimit} <quotaUnits>{movies} per {quotaDays} {days}</quotaUnits>",
   "components.QuotaSelector.movies": "{count, plural, one {movie} other {movies}}",
@@ -954,10 +954,15 @@
   "components.Settings.SettingsMain.validationApplicationUrl": "You must provide a valid URL",
   "components.Settings.SettingsMain.validationApplicationUrlTrailingSlash": "URL must not end in a trailing slash",
   "components.Settings.SettingsMain.validationProxyPort": "You must provide a valid port",
+  "components.Settings.SettingsUsers.atLeastOneAuth": "At least one authentication method must be selected.",
   "components.Settings.SettingsUsers.defaultPermissions": "Default Permissions",
   "components.Settings.SettingsUsers.defaultPermissionsTip": "Initial permissions assigned to new users",
   "components.Settings.SettingsUsers.localLogin": "Enable Local Sign-In",
-  "components.Settings.SettingsUsers.localLoginTip": "Allow users to sign in using their email address and password, instead of {mediaServerName} OAuth",
+  "components.Settings.SettingsUsers.localLoginTip": "Allow users to sign in using their email address and password",
+  "components.Settings.SettingsUsers.loginMethods": "Login Methods",
+  "components.Settings.SettingsUsers.loginMethodsTip": "Configure login methods for users.",
+  "components.Settings.SettingsUsers.mediaServerLogin": "Enable {mediaServerName} Sign-In",
+  "components.Settings.SettingsUsers.mediaServerLoginTip": "Allow users to sign in using their {mediaServerName} account",
   "components.Settings.SettingsUsers.movieRequestLimitLabel": "Global Movie Request Limit",
   "components.Settings.SettingsUsers.newPlexLogin": "Enable New {mediaServerName} Sign-In",
   "components.Settings.SettingsUsers.newPlexLoginTip": "Allow {mediaServerName} users to sign in without first being imported",
@@ -1171,7 +1176,7 @@
   "components.TitleCard.tvdbid": "TheTVDB ID",
   "components.TitleCard.watchlistCancel": "watchlist for <strong>{title}</strong> canceled.",
   "components.TitleCard.watchlistDeleted": "<strong>{title}</strong> Removed from watchlist  successfully!",
-  "components.TitleCard.watchlistError": "Something went wrong try again.",
+  "components.TitleCard.watchlistError": "Something went wrong. Please try again.",
   "components.TitleCard.watchlistSuccess": "<strong>{title}</strong> added to watchlist  successfully!",
   "components.TvDetails.Season.noepisodes": "Episode list unavailable.",
   "components.TvDetails.Season.somethingwentwrong": "Something went wrong while retrieving season data.",
@@ -1209,7 +1214,7 @@
   "components.TvDetails.tmdbuserscore": "TMDB User Score",
   "components.TvDetails.viewfullcrew": "View Full Crew",
   "components.TvDetails.watchlistDeleted": "<strong>{title}</strong> Removed from watchlist successfully!",
-  "components.TvDetails.watchlistError": "Something went wrong try again.",
+  "components.TvDetails.watchlistError": "Something went wrong. Please try again.",
   "components.TvDetails.watchlistSuccess": "<strong>{title}</strong> added to watchlist successfully!",
   "components.TvDetails.watchtrailer": "Watch Trailer",
   "components.UserList.accounttype": "Type",
@@ -1393,7 +1398,7 @@
   "i18n.back": "Back",
   "i18n.blacklist": "Blacklist",
   "i18n.blacklistDuplicateError": "<strong>{title}</strong> has already been blacklisted.",
-  "i18n.blacklistError": "Something went wrong try again.",
+  "i18n.blacklistError": "Something went wrong. Please try again.",
   "i18n.blacklistSuccess": "<strong>{title}</strong> was successfully blacklisted.",
   "i18n.blacklisted": "Blacklisted",
   "i18n.cancel": "Cancel",

src/pages/_app.tsx

@@ -194,6 +194,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     movie4kEnabled: false,
     series4kEnabled: false,
     localLogin: true,
+    mediaServerLogin: true,
     discoverRegion: '',
     streamingRegion: '',
     originalLanguage: '',

src/styles/globals.css

@@ -74,15 +74,6 @@
     top: env(safe-area-inset-top);
   }
 
-  .plex-button {
-    @apply flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-center text-sm font-medium text-white transition duration-150 ease-in-out disabled:opacity-50;
-    background-color: #cc7b19;
-  }
-
-  .plex-button:hover {
-    background: #f19a30;
-  }
-
   .server-type-button {
     @apply rounded-md border border-gray-500 bg-gray-700 px-4  py-2 text-white transition duration-150 ease-in-out hover:bg-gray-500;
   }
@@ -354,9 +345,8 @@
     @apply relative -ml-px inline-flex items-center border border-gray-500 bg-indigo-600 bg-opacity-80 px-3 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out last:rounded-r-md hover:bg-opacity-100 active:bg-gray-100 active:text-gray-700 sm:px-3.5;
   }
 
-  .button-md svg,
-  button.input-action svg,
-  .plex-button svg {
+  .button-md :where(svg),
+  button.input-action svg {
     @apply ml-2 mr-2 h-5 w-5 first:ml-0 last:mr-0;
   }