Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

michaelhthomas
Copy link

@michaelhthomas michaelhthomas commented Jan 18, 2025

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
Plex and Local Login Plex login only
Local Login only Jellyfin/Emby Login
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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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

Fallenbagel commented Jan 19, 2025

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
Copy link
Author

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
Copy link
Owner

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

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.
@michaelhthomas michaelhthomas marked this pull request as ready for review January 19, 2025 15:53
@Gauvino
Copy link
Contributor

Gauvino commented Jan 19, 2025

The design is gorgeous, good job really!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants