test: update cypress login command

feat: revamp login screen
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.
2025-12-24 02:39:18 -05:00 · 2025-02-16 10:33:33 -05:00 · 2025-02-16 10:33:33 -05:00 · 2025-02-16 10:33:33 -05:00 · 2025-02-16 11:37:59 +01:00 · 2025-02-14 17:21:08 +01:00
47 changed files with 1254 additions and 833 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -592,6 +592,15 @@
      "contributions": [
        "infra"
      ]
+    },
+    {
+      "login": "andrewkolda",
+      "name": "andrewkolda",
+      "avatar_url": "https://avatars.githubusercontent.com/u/158614532?v=4",
+      "profile": "https://github.com/andrewkolda",
+      "contributions": [
+        "design"
+      ]
    }
  ]
 }
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,7 +12,7 @@ jobs:
  test:
    name: Lint & Test Build
    if: github.event_name == 'pull_request'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
    container: node:22-alpine
    steps:
      - name: Checkout
@@ -43,15 +43,23 @@ jobs:
      - name: Build
        run: pnpm build

-  build_and_push:
+  build:
    name: Build & Publish Docker Images
    if: github.ref == 'refs/heads/develop' && !contains(github.event.head_commit.message, '[skip ci]')
-    runs-on: ubuntu-22.04
+    strategy:
+      matrix:
+        include:
+          - runner: ubuntu-24.04
+            platform: linux/amd64
+          - runner: ubuntu-24.04-arm
+            platform: linux/arm64
+    runs-on: ${{ matrix.runner }}
+    outputs:
+      digest-amd64: ${{ steps.set_outputs.outputs.digest-amd64 }}
+      digest-arm64: ${{ steps.set_outputs.outputs.digest-arm64 }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Log in to Docker Hub
@@ -70,24 +78,77 @@ jobs:
          echo "OWNER_LC=${OWNER,,}" >>${GITHUB_ENV}
        env:
          OWNER: ${{ github.repository_owner }}
-      - name: Build and push
+      - name: Docker metadata
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            fallenbagel/jellyseerr
+            ghcr.io/${{ env.OWNER_LC }}/jellyseerr
+          tags: |
+            type=ref,event=branch
+            type=sha,prefix=,suffix=,format=short
+      - name: Build and push by digest
+        id: build
        uses: docker/build-push-action@v5
        with:
          context: .
          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64
+          platforms: ${{ matrix.platform }}
          push: true
          build-args: |
            COMMIT_TAG=${{ github.sha }}
-          tags: |
-            fallenbagel/jellyseerr:develop
-            ghcr.io/${{ env.OWNER_LC }}/jellyseerr:develop
+          outputs: |
+            type=image,push-by-digest=true,name=fallenbagel/jellyseerr,push=true
+            type=image,push-by-digest=true,name=ghcr.io/${{ env.OWNER_LC }}/jellyseerr,push=true
+          cache-from: type=gha,scope=${{ matrix.platform }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
+          provenance: false
+      - name: Set outputs
+        id: set_outputs
+        run: |
+          platform="${{ matrix.platform == 'linux/amd64' && 'amd64' || 'arm64' }}"
+          echo "digest-${platform}=${{ steps.build.outputs.digest }}" >> $GITHUB_OUTPUT
+
+  merge_and_push:
+    name: Create and Push Multi-arch Manifest
+    needs: build
+    runs-on: ubuntu-24.04
+    steps:
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Set lower case owner name
+        run: |
+          echo "OWNER_LC=${OWNER,,}" >>${GITHUB_ENV}
+        env:
+          OWNER: ${{ github.repository_owner }}
+      - name: Create and push manifest
+        run: |
+          docker manifest create fallenbagel/jellyseerr:develop \
+            --amend fallenbagel/jellyseerr@${{ needs.build.outputs.digest-amd64 }} \
+            --amend fallenbagel/jellyseerr@${{ needs.build.outputs.digest-arm64 }}
+          docker manifest push fallenbagel/jellyseerr:develop
+
+          # GHCR manifest
+          docker manifest create ghcr.io/${{ env.OWNER_LC }}/jellyseerr:develop \
+            --amend ghcr.io/${{ env.OWNER_LC }}/jellyseerr@${{ needs.build.outputs.digest-amd64 }} \
+            --amend ghcr.io/${{ env.OWNER_LC }}/jellyseerr@${{ needs.build.outputs.digest-arm64 }}
+          docker manifest push ghcr.io/${{ env.OWNER_LC }}/jellyseerr:develop

  discord:
    name: Send Discord Notification
-    needs: build_and_push
+    needs: merge_and_push
    if: always() && github.event_name != 'pull_request' && !contains(github.event.head_commit.message, '[skip ci]')
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
    steps:
      - name: Get Build Job Status
        uses: technote-space/workflow-conclusion-action@v3
--- a/6
+++ b/6
@@ -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 ./
--- a/Dockerfile.local
+++ b/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

--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 <a href="http://translate.jellyseerr.dev/engage/jellyseerr/"><img src="http://translate.jellyseerr.dev/widget/jellyseerr/jellyseerr-frontend/svg-badge.svg" alt="Translation status" /></a>
 <a href="https://github.com/fallenbagel/jellyseerr/blob/develop/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/fallenbagel/jellyseerr"></a>
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-64-orange.svg"/></a>
+<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-65-orange.svg"/></a>
 <!-- ALL-CONTRIBUTORS-BADGE:END -->

 **Jellyseerr** is a free and open source software application for managing requests for your media library. It integrates with the media server of your choice: [Jellyfin](https://jellyfin.org), [Plex](https://plex.tv), and [Emby](https://emby.media/). In addition, it integrates with your existing services, such as **[Sonarr](https://sonarr.tv/)**, **[Radarr](https://radarr.video/)**.
@@ -168,6 +168,7 @@ Thanks goes to these wonderful people from Overseerr ([emoji key](https://allcon
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/methbkts"><img src="https://avatars.githubusercontent.com/u/30674934?v=4?s=100" width="100px;" alt="Metin Bektas"/><br /><sub><b>Metin Bektas</b></sub></a><br /><a href="#infra-methbkts" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/andrewkolda"><img src="https://avatars.githubusercontent.com/u/158614532?v=4?s=100" width="100px;" alt="andrewkolda"/><br /><sub><b>andrewkolda</b></sub></a><br /><a href="#design-andrewkolda" title="Design">🎨</a></td>
    </tr>
  </tbody>
 </table>
--- a/charts/jellyseerr-chart/Chart.yaml
+++ b/charts/jellyseerr-chart/Chart.yaml
@@ -3,8 +3,8 @@ kubeVersion: ">=1.23.0-0"
 name: jellyseerr-chart
 description: Jellyseerr helm chart for Kubernetes
 type: application
-version: 1.3.0
-appVersion: "2.2.3"
+version: 2.1.1
+appVersion: "2.3.0"
 maintainers:
  - name: Jellyseerr
    url: https://github.com/Fallenbagel/jellyseerr
--- a/charts/jellyseerr-chart/README.md
+++ b/charts/jellyseerr-chart/README.md
@@ -1,6 +1,6 @@
 # jellyseerr-chart

-![Version: 1.3.0](https://img.shields.io/badge/Version-1.3.0-informational?style=flat-square) ![Type: application](https://img.shields.io/badge/Type-application-informational?style=flat-square) ![AppVersion: 2.2.3](https://img.shields.io/badge/AppVersion-2.2.3-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

@@ -25,10 +25,6 @@ Kubernetes: `>=1.23.0-0`
 | Key | Type | Default | Description |
 |-----|------|---------|-------------|
 | affinity | object | `{}` |  |
-| autoscaling.enabled | bool | `false` |  |
-| autoscaling.maxReplicas | int | `100` |  |
-| autoscaling.minReplicas | int | `1` |  |
-| autoscaling.targetCPUUtilizationPercentage | int | `80` |  |
 | config | object | `{"persistence":{"accessModes":["ReadWriteOnce"],"annotations":{},"name":"","size":"5Gi","volumeName":""}}` | Creating PVC to store configuration |
 | config.persistence.accessModes | list | `["ReadWriteOnce"]` | Access modes of persistent disk |
 | config.persistence.annotations | object | `{}` | Annotations for PVCs |
@@ -39,7 +35,7 @@ Kubernetes: `>=1.23.0-0`
 | extraEnvFrom | list | `[]` | Environment variables from secrets or configmaps to add to the jellyseerr pods |
 | fullnameOverride | string | `""` |  |
 | image.pullPolicy | string | `"IfNotPresent"` |  |
-| image.registry | string | `"docker.io"` |  |
+| image.registry | string | `"ghcr.io"` |  |
 | image.repository | string | `"fallenbagel/jellyseerr"` |  |
 | image.sha | string | `""` |  |
 | image.tag | string | `""` | Overrides the image tag whose default is the chart appVersion. |
@@ -67,3 +63,5 @@ Kubernetes: `>=1.23.0-0`
 | serviceAccount.name | string | `""` | If not set and create is true, a name is generated using the fullname template |
 | strategy | object | `{"type":"Recreate"}` | Deployment strategy |
 | tolerations | list | `[]` |  |
+| volumeMounts | list | `[]` | Additional volumeMounts on the output Deployment definition. |
+| volumes | list | `[]` | Additional volumes on the output Deployment definition. |
--- a/charts/jellyseerr-chart/templates/deployment.yaml
+++ b/charts/jellyseerr-chart/templates/deployment.yaml
@@ -5,9 +5,7 @@ metadata:
  labels:
    {{- include "jellyseerr.labels" . | nindent 4 }}
 spec:
-  {{- if not .Values.autoscaling.enabled }}
  replicas: {{ .Values.replicaCount }}
-  {{- end }}
  strategy:
    type: {{ .Values.strategy.type }}
  selector:
@@ -67,10 +65,16 @@ spec:
          volumeMounts:
            - name: config
              mountPath: /app/config
+          {{- with .Values.volumeMounts }}
+            {{- toYaml . | nindent 12 }}
+          {{- end }}
      volumes:
        - name: config
          persistentVolumeClaim:
            claimName: {{ include "jellyseerr.configPersistenceName" . }}
+      {{- with .Values.volumes }}
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
      {{- with .Values.nodeSelector }}
      nodeSelector:
        {{- toYaml . | nindent 8 }}
--- a/charts/jellyseerr-chart/templates/hpa.yaml
+++ b/charts/jellyseerr-chart/templates/hpa.yaml
@@ -1,32 +0,0 @@
-{{- if .Values.autoscaling.enabled }}
-apiVersion: autoscaling/v2
-kind: HorizontalPodAutoscaler
-metadata:
-  name: {{ include "jellyseerr.fullname" . }}
-  labels:
-    {{- include "jellyseerr.labels" . | nindent 4 }}
-spec:
-  scaleTargetRef:
-    apiVersion: apps/v1
-    kind: Deployment
-    name: {{ include "jellyseerr.fullname" . }}
-  minReplicas: {{ .Values.autoscaling.minReplicas }}
-  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
-  metrics:
-    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
-    - type: Resource
-      resource:
-        name: cpu
-        target:
-          type: Utilization
-          averageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
-    {{- end }}
-    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
-    - type: Resource
-      resource:
-        name: memory
-        target:
-          type: Utilization
-          averageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
-    {{- end }}
-{{- end }}
--- a/charts/jellyseerr-chart/values.yaml
+++ b/charts/jellyseerr-chart/values.yaml
@@ -1,7 +1,7 @@
 replicaCount: 1

 image:
-  registry: docker.io
+  registry: ghcr.io
  repository: fallenbagel/jellyseerr
  pullPolicy: IfNotPresent
  # -- Overrides the image tag whose default is the chart appVersion.
@@ -94,12 +94,18 @@ resources: {}
  #   cpu: 100m
  #   memory: 128Mi

-autoscaling:
-  enabled: false
-  minReplicas: 1
-  maxReplicas: 100
-  targetCPUUtilizationPercentage: 80
-  # targetMemoryUtilizationPercentage: 80
+# -- Additional volumes on the output Deployment definition.
+volumes: []
+# - name: foo
+#   secret:
+#     secretName: mysecret
+#     optional: false
+
+# -- Additional volumeMounts on the output Deployment definition.
+volumeMounts: []
+# - name: foo
+#   mountPath: "/etc/foo"
+#   readOnly: true

 nodeSelector: {}

--- a/cypress/support/commands.ts
+++ b/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);
--- a/docs/using-jellyseerr/settings/users.md
+++ b/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.
--- a/gen-docs/docusaurus.config.ts
+++ b/gen-docs/docusaurus.config.ts
@@ -11,7 +11,7 @@ const config: Config = {
  baseUrl: '/',
  trailingSlash: false,

-  organizationName: 'Fallenbagel',
+  organizationName: 'fallenbagel',
  projectName: 'Jellyseerr',
  deploymentBranch: 'gh-pages',

@@ -32,7 +32,7 @@ const config: Config = {
          routeBasePath: '/',
          path: '../docs',
          editUrl:
-            'https://github.com/Fallenbagel/jellyseerr/edit/develop/docs/',
+            'https://github.com/fallenbagel/jellyseerr/edit/develop/docs/',
        },
        blog: false,
        pages: false,
@@ -70,7 +70,7 @@ const config: Config = {
      },
      items: [
        {
-          href: 'https://github.com/Fallenbagel/jellyseerr',
+          href: 'https://github.com/fallenbagel/jellyseerr',
          label: 'GitHub',
          position: 'right',
        },
--- a/next.config.js
+++ b/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) {
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
--- a/server/api/rating/rottentomatoes.ts
+++ b/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,
--- a/server/entity/User.ts
+++ b/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 })
--- a/server/interfaces/api/settingsInterfaces.ts
+++ b/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;
--- a/server/job/schedule.ts
+++ b/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' });
 };
--- a/server/lib/settings/index.ts
+++ b/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
--- a/server/routes/auth.ts
+++ b/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 = '';
--- a/src/assets/services/jellyfin-icon.svg
+++ b/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>
--- a/src/assets/services/jellyfin.svg
+++ b/src/assets/services/jellyfin.svg
--- a/src/components/Common/Button/index.tsx
+++ b/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>}
      >
--- a/src/components/Common/LabeledCheckbox/index.tsx
+++ b/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;
--- a/src/components/Login/JellyfinLogin.tsx
+++ b/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;
--- a/src/components/Login/LocalLogin.tsx
+++ b/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>
          </>
        );
--- a/src/components/Login/PlexLoginButton.tsx
+++ b/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;
--- a/src/components/Login/index.tsx
+++ b/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>
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -38,14 +38,14 @@ import {
  ExclamationTriangleIcon,
  EyeSlashIcon,
  FilmIcon,
+  MinusCircleIcon,
  PlayIcon,
+  StarIcon,
  TicketIcon,
 } from '@heroicons/react/24/outline';
 import {
  ChevronDoubleDownIcon,
  ChevronDoubleUpIcon,
-  MinusCircleIcon,
-  StarIcon,
 } from '@heroicons/react/24/solid';
 import { type RatingResponse } from '@server/api/ratings';
 import { IssueStatus } from '@server/constants/issue';
@@ -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',
 });
--- a/src/components/PlexLoginButton/index.tsx
+++ b/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;
--- a/src/components/Settings/SettingsUsers/index.tsx
+++ b/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>
--- a/src/components/Setup/JellyfinSetup.tsx
+++ b/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;
--- a/src/components/Setup/LoginWithPlex.tsx
+++ b/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';
--- a/src/components/Setup/SetupLogin.tsx
+++ b/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}
--- a/src/components/Setup/index.tsx
+++ b/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();
  };
--- a/src/components/TitleCard/index.tsx
+++ b/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 = ({
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -41,13 +41,11 @@ import {
  ExclamationTriangleIcon,
  EyeSlashIcon,
  FilmIcon,
-  PlayIcon,
-} from '@heroicons/react/24/outline';
-import {
-  ChevronDownIcon,
  MinusCircleIcon,
+  PlayIcon,
  StarIcon,
-} from '@heroicons/react/24/solid';
+} from '@heroicons/react/24/outline';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import type { RTRating } from '@server/api/rating/rottentomatoes';
 import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
 import { IssueStatus } from '@server/constants/issue';
@@ -103,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',
 });
--- a/src/components/UserList/BulkEditModal.tsx
+++ b/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 }
--- a/src/context/SettingsContext.tsx
+++ b/src/context/SettingsContext.tsx
@@ -14,6 +14,7 @@ const defaultSettings = {
  applicationUrl: '',
  hideAvailable: false,
  localLogin: true,
+  mediaServerLogin: true,
  movie4kEnabled: false,
  series4kEnabled: false,
  discoverRegion: '',
--- a/src/hooks/usePlexLogin.ts
+++ b/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;
--- a/src/i18n/globalMessages.ts
+++ b/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:
--- a/src/i18n/locale/en.json
+++ b/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",
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -194,6 +194,7 @@ CoreApp.getInitialProps = async (initialProps) => {
    movie4kEnabled: false,
    series4kEnabled: false,
    localLogin: true,
+    mediaServerLogin: true,
    discoverRegion: '',
    streamingRegion: '',
    originalLanguage: '',
--- a/src/styles/globals.css
+++ b/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;
  }
Author	SHA1	Message	Date
Michael Thomas	321865f916	test: update cypress login command	2025-02-16 10:33:33 -05:00
Michael Thomas	1b84c89300	feat: revamp login screen 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.	2025-02-16 10:33:33 -05:00
Michael Thomas	3f6e5cc84a	feat: support disabling jellyfin login	2025-02-16 10:33:33 -05:00
854562	c181cee328	feat: update Jellyfin logo (#1359 ) * Replaced Jellyfin logo with new version * Update jellyfin.svg	2025-02-16 11:37:59 +01:00
Gauthier	98a5b05816	ci: set the pnpm version number explicitly (#1357 ) * ci: set the pnpm version number explicitly pnpm latest version is now v10. We still use v9, and the latest version of pnpm was used in Dockerfile instead of v9. * ci: add missing pnpm v9	2025-02-14 17:21:08 +01:00
0xsysr3ll	b29959b063	fix: missing plex.tv url in images remotePatterns (#1356 ) This fixes a 400 error while fetching user's avatar from plex api during user import.	2025-02-14 15:28:26 +01:00
Bryan J.	9a2c12e51c	docs: update error message for various components (#1354 )	2025-02-14 11:47:47 +01:00
Gauthier	620135aeac	fix: resolve a vulnerability with admin token (#1345 ) By default, the jellyfinAuthToken of every user was always retrieved from the database, and sometimes sent back to the client. Any logged-in user could retrieve this token via a request containing admin user information, and use it to gain full access to Jellyfin. This PR removes the auth token and the device ID from the fields selected by default by TypeORM.	2025-02-10 00:17:11 +01:00
Gauthier	2dbd1096d2	fix: disallow admins to edit other admins in bulk edit (#1340 ) This PR fixes a bug where admin users could edit the permissions of other admins in the bulk edit modal. fix #1309	2025-02-09 01:12:54 +08:00
Gauthier	24d3f523fc	feat: add a robots.txt file (#1335 ) This PR adds a `robots.txt` file to prevent crawlers to index the website re #1323	2025-02-08 02:23:37 +08:00
Gauthier	2b7974fa06	fix(jobs): run plex/jellyfin jobs only for the relevant media server (#1331 ) Due to merging issues with upstream, some jobs for the Plex media server where also running on Jellyfin/Emby instances. This PR makes them run only when the media server is Plex. fix #1329	2025-02-05 05:01:02 +08:00
Ben Haney	907ba6fdea	feat(api): make rottentomatoes matching more robust (#1265 )	2025-01-31 23:04:34 +08:00
fallenbagel	efaad21554	build: remove unnecessary files from final docker image (#1314 ) * build: remove charts from final docker image fix #1313 * build: remove docs too	2025-01-30 19:48:16 +08:00
Gauthier	6ab463285d	fix(setup): resolve looping library validation error message (#1316 ) This PR fixes a bug where the validation error message is displayed over and over because of a React useEffect dependency issue. Previously, the `validateLibraries()` function was being called inside a useEffect that depended on a state that this function was updating.	2025-01-30 11:22:23 +01:00
Ludovic Ortega	418f0c2eb8	fix(helm): no change, fixing OCI manifest corruption (#1310 ) Signed-off-by: Ludovic Ortega <ludovic.ortega@adminafk.fr>	2025-01-27 15:49:24 +01:00
fallenbagel	002557d2d0	docs: changed the name to lowercase (#1296 )	2025-01-21 17:20:33 +08:00
Ludovic Ortega	62c1a70b37	feat(helm): Add possibility to pass volumes and volume mounts (#1291 ) Signed-off-by: Ludovic Ortega <ludovic.ortega@adminafk.fr>	2025-01-20 20:20:27 +08:00
allcontributors[bot]	1b325e7c32	docs: add andrewkolda as a contributor for design (#1293 ) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>	2025-01-20 06:41:25 +08:00
andrewkolda	f247642b76	fix: make watchlist buttons consistent (#1272 ) fix #1270 Co-authored-by: andrewkolda <git@kolda.me>	2025-01-19 23:15:54 +01:00
Fallenbagel	396cd968ef	ci: push individual arch digest only and merge from digest (#1284 ) * ci: push individual arch digest only and merge from digest * ci: correct syntax for docker manifest * ci: add the missing id to the build step * ci: set proper ids and output digest that is dependant on matrix.id * ci: proper dynamic outputs by manually echoing it out * ci: remove unnecessary test step	2025-01-19 03:41:25 +08:00
fallenbagel	ca739315b2	ci: remove cleanup steps since docker registry v2 doesnt support it	2025-01-18 22:28:58 +08:00
fallenbagel	9143a6c027	ci: push temp tags and create multi-arch from them and cleanup	2025-01-18 22:19:39 +08:00
fallenbagel	d7fc03650f	ci: use direct docker manifest command to create and push manifest	2025-01-18 21:54:09 +08:00
fallenbagel	80fc5c1a78	ci: better manifest merging to only push final multi-arch manifest	2025-01-18 21:43:14 +08:00
fallenbagel	95737d36e6	ci: fix typo in create_manifest	2025-01-18 20:59:29 +08:00
fallenbagel	0fd6ca85a4	ci: fix missing version for create_manifest & discord notification after create_manifest	2025-01-18 20:53:09 +08:00
fallenbagel	7cee9b475d	ci: fix multi-arch image creation workflow use int128/docker-manifest-create-action to combine the images	2025-01-18 20:50:22 +08:00
fallenbagel	ff9af866f8	ci: use the proper action to merge manifests & pass in lowercase owner	2025-01-18 20:40:03 +08:00
fallenbagel	5ffe6419ee	ci: remove sanitisation and hardcode platform tag depending on platform	2025-01-18 20:31:18 +08:00
fallenbagel	8afcf5a8d8	ci: attempt to sanitise the platfom and add to gh env	2025-01-18 20:25:06 +08:00
Fallenbagel	17d93a8cb9	ci: fix typo when passing sanitised platform to github env (#1282 ) * ci: fix typo when passing sanitised platform to github env * ci: hardcode a platform & owner for testing sanitation * ci: fix typo * ci: fix typo * ci: fix yet another typo * ci: fix yet another typo * ci: another typo when echoing the tested variables fixed * ci: properly echo the values from github env * ci: attempt to echo out the sanitised variables * ci: finalise the sanitation test and remove it from lint & test build	2025-01-18 20:23:03 +08:00
Fallenbagel	549082c53e	ci: fix typo when sanitising platform (#1281 )	2025-01-18 19:55:36 +08:00
Fallenbagel	fbef7e2c72	ci: seperate job to pass in sanitised platform (#1280 ) This is done as github actions doesnt support inline replacement that was done on #1279	2025-01-18 19:49:58 +08:00
Fallenbagel	93d2e26ae9	ci: sanitise container tag (#1279 ) * ci: sanitise container tag Tags cant container `/` so this should sanitise them * ci: use simple case owner name	2025-01-18 19:42:05 +08:00
Fallenbagel	f09a432635	ci: add a job to merge and create multi-arch image (#1278 ) This has to be done now that arm64 and amd64 runs as two seperate jobs. Otherwise, whichever finishes the last would override the other one when pushed	2025-01-18 19:34:36 +08:00
Fallenbagel	a8f84d4f74	ci: correct arm runner label (#1277 ) The issue was all because of using the wrong label. 18 hours wasted waiting for a non-existent runner to start. It is `ubuntu-24.04-arm` https://github.com/orgs/community/discussions/148648#discussion-7793082	2025-01-18 19:07:45 +08:00
Fallenbagel	88e96fa163	ci: upgrade runner to ubuntu 24.04 to get arm64 runner working (#1276 ) This is another attempt to get arm64 runner working by upgrading the runner to ubuntu-24-04, hoping it works better. Related to #1275	2025-01-18 17:57:07 +08:00
Fallenbagel	2d814c1416	ci: attempt to fix arm64 runners with proper scoped caching (#1275 ) Added platform specific cache scoping and turned off provenance to prevent manifest merging. In addition we are now using ubuntu24.04 in an attempt to get the job to run as ubuntu-22.04 were stalled for more than 18 hours.	2025-01-18 17:49:35 +08:00
Fallenbagel	2f4b848b2c	ci: utilise the linux arm64 hosted runners (#1271 ) * ci: utilise the linux arm64 hosted runners This is an attempt to utilise the linux arm64 hosted runners which should reduce the build times significantly. In addition, this should leverage the github's built-in caching. * ci: fix typo	2025-01-18 05:14:33 +08:00
Ludovic Ortega	0ee3e69a61	feat: upgrade chart to 2.0.0 (#1268 ) - upgrade jellyseerr to 2.3.0 - disable HPA as it's not documented and not useful - migrate container image to ghcr.io registry Signed-off-by: Ludovic Ortega <ludovic.ortega@adminafk.fr>	2025-01-17 18:32:20 +08:00