feat: revamp login page and support disabling media server login #1286

michaelhthomas · 2025-01-18T22:01:10Z

Description

This PR includes enhancements from my original OpenID Connect PR which allowed disabling media server login, as well as additional enhancements to the login page to make it more usable, particularly with Plex and OpenID Connect setups. These changes enable future work on #183, while also addressing some of the concerns from #129. Below is a quick summary of the changes

Adds a mediaServerLogin setting, which can be disabled to remove the option to log in with Plex/Jellyfin/Emby from the login screen.
Updates the user settings page layout to add a section for login options, and includes the option to enable/disable media server login within that section
Removes the "instead of Plex OAuth" text from the local login tip, since it is no longer fully accurate and unnecessary.
Updates the design of the login page, removing the accordion design and making it easier to access Plex / OpenID connect login options (see screenshots below)
- This updated login page also hides the media server login options when the mediaServerLogin option is disabled.

Screenshot (if UI-related)

Plex and Local Login	Plex Login only

Local Login only	Jellyfin/Emby Login

8mb.video-lKf-jBZAUp3Y.mp4

To-Dos

Successful build pnpm build
Translation keys pnpm i18n:extract
Database migration (if required)

Issues Fixed or Closed

Fixes #XXXX

michaelhthomas · 2025-01-18T22:16:37Z

src/components/Common/Button/index.tsx

@@ -97,7 +98,7 @@ function Button<P extends ElementTypes = 'button'>(
  if (as === 'a') {
    return (
      <a
-        className={buttonStyle.join(' ')}
+        className={twMerge(buttonStyle)}


tailwind-merge makes it possible to apply style overrides (like a different background color) without conflicts. I've added it as a dependency and would recommend adopting it generally, since it makes stuff like this a lot more pleasant. In this case, the Plex button would end up with the wrong background color otherwise.

michaelhthomas · 2025-01-18T22:18:27Z

src/components/Login/JellyfinLogin.tsx

@@ -1,63 +1,39 @@
 import Button from '@app/components/Common/Button';


I moved the Jellyfin setup to its own component (JellyfinSetup.tsx), since previously the entire JellyfinLogin component was just an if statement over the initial flag.

fallenbagel · 2025-01-19T15:36:10Z

I have attempted to update all of the translations as part of this PR

I would suggest not to make these changes and only do en.json and let weblare handle it. Otherwise, it will mess up weblate

Right? @gauthier-th

michaelhthomas · 2025-01-19T15:45:28Z

I would suggest not to make these changes and only do en.json and let weblare handle it. Otherwise, it will mess up weblate

Gotcha. I've gone through and verified most of the translations, so those I'm certain about I would be happy to just submit on weblate instead if that would be better.

fallenbagel · 2025-01-19T15:50:37Z

Gotcha. I've gone through and verified most of the translations, so those I'm certain about I would be happy to just submit on weblate instead if that would be better.

That would be better, yes

Gauvino · 2025-01-19T18:12:36Z

The design is gorgeous, good job really!

gauthier-th

What's the point of the react-transition-group library?
Can't this be done with TailwindCSS group?

gauthier-th

You should update the tests too, as they are all failing 😅

michaelhthomas · 2025-01-21T13:35:42Z

What's the point of the react-transition-group library? Can't this be done with TailwindCSS group?

Unfortunately, no. react-transition-group allows CSS transitions between two different elements (i.e. one fades out then the other fades in). This is used to have a nice transition between the different login forms. I was unable to get the same working with the Transition component from @headlessui/react, since it only supports transitioning a single element, not between elements. Luckily, react-transition-group was already being used as an indirect dependency (it seems to be pretty prevalent in react), so this change just makes it direct.

gauthier-th

Overall looks good, just a few comments :)

src/components/Login/LocalLogin.tsx

src/components/Login/index.tsx

src/components/Settings/SettingsUsers/index.tsx

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.

gauthier-th

LGTM.
I'll do a bit more tests this week-end before we can merge.
@fallenbagel do you want to review?

fallenbagel · 2025-01-24T16:07:49Z

LGTM.
I'll do a bit more tests this week-end before we can merge.
@fallenbagel do you want to review?

I can review tonight or tomorrow

michaelhthomas force-pushed the feat/login-settings branch from 7a600d5 to 727bd5a Compare January 18, 2025 22:12

michaelhthomas commented Jan 18, 2025

View reviewed changes

michaelhthomas force-pushed the feat/login-settings branch 2 times, most recently from bd62654 to 40c2aca Compare January 19, 2025 15:30

michaelhthomas force-pushed the feat/login-settings branch from 40c2aca to 8bce211 Compare January 19, 2025 15:43

michaelhthomas force-pushed the feat/login-settings branch from 8bce211 to e3c9048 Compare January 19, 2025 15:52

michaelhthomas marked this pull request as ready for review January 19, 2025 15:53

michaelhthomas requested review from fallenbagel and gauthier-th as code owners January 19, 2025 15:53

gauthier-th reviewed Jan 21, 2025

View reviewed changes

gauthier-th requested changes Jan 21, 2025

View reviewed changes

michaelhthomas requested a review from gauthier-th January 21, 2025 16:27

gauthier-th requested changes Jan 21, 2025

View reviewed changes

src/components/Login/LocalLogin.tsx Outdated Show resolved Hide resolved

src/components/Login/index.tsx Outdated Show resolved Hide resolved

src/components/Settings/SettingsUsers/index.tsx Outdated Show resolved Hide resolved

michaelhthomas force-pushed the feat/login-settings branch from 6a00fbc to bfbca42 Compare January 22, 2025 19:13

gauthier-th reviewed Jan 22, 2025

View reviewed changes

src/components/Settings/SettingsUsers/index.tsx Outdated Show resolved Hide resolved

michaelhthomas added 3 commits January 22, 2025 14:35

feat: support disabling jellyfin login

d60413c

feat: revamp login screen

bdcd061

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.

test: update cypress login command

eb2bd16

michaelhthomas force-pushed the feat/login-settings branch from bfbca42 to eb2bd16 Compare January 22, 2025 19:35

mzgaljic mentioned this pull request Jan 23, 2025

[Feature] OIDC login for Jellyseerr streamyfin/streamyfin#454

Open

michaelhthomas requested a review from gauthier-th January 24, 2025 14:41

gauthier-th approved these changes Jan 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: revamp login page and support disabling media server login #1286

feat: revamp login page and support disabling media server login #1286

michaelhthomas commented Jan 18, 2025 •

edited

Loading

michaelhthomas Jan 18, 2025

michaelhthomas Jan 18, 2025

fallenbagel commented Jan 19, 2025 •

edited

Loading

michaelhthomas commented Jan 19, 2025

fallenbagel commented Jan 19, 2025

Gauvino commented Jan 19, 2025

gauthier-th left a comment •

edited

Loading

gauthier-th left a comment

michaelhthomas commented Jan 21, 2025

gauthier-th left a comment

gauthier-th left a comment

fallenbagel commented Jan 24, 2025

		@@ -1,63 +1,39 @@
		import Button from '@app/components/Common/Button';

feat: revamp login page and support disabling media server login #1286

Are you sure you want to change the base?

feat: revamp login page and support disabling media server login #1286

Conversation

michaelhthomas commented Jan 18, 2025 • edited Loading

Description

Screenshot (if UI-related)

To-Dos

Issues Fixed or Closed

michaelhthomas Jan 18, 2025

Choose a reason for hiding this comment

michaelhthomas Jan 18, 2025

Choose a reason for hiding this comment

fallenbagel commented Jan 19, 2025 • edited Loading

michaelhthomas commented Jan 19, 2025

fallenbagel commented Jan 19, 2025

Gauvino commented Jan 19, 2025

gauthier-th left a comment • edited Loading

Choose a reason for hiding this comment

gauthier-th left a comment

Choose a reason for hiding this comment

michaelhthomas commented Jan 21, 2025

gauthier-th left a comment

Choose a reason for hiding this comment

gauthier-th left a comment

Choose a reason for hiding this comment

fallenbagel commented Jan 24, 2025

michaelhthomas commented Jan 18, 2025 •

edited

Loading

fallenbagel commented Jan 19, 2025 •

edited

Loading

gauthier-th left a comment •

edited

Loading