feat: revamp login page and support disabling media server login

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.

package.json

@@ -85,6 +85,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,6 +95,7 @@
     "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",

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/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' });
   }

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;