Improve UX on config page

[strazto]

Resolves #2

Done:

• Revisit help texts, particularly
  • Add UI Page for OIDC Configuration #18 (comment) (Enable Authorization)
  • Help text for all un-json'd fields
  • Uh
• Stylesheet improvements, particularly for:
  • Role map list should be clearly delineated, paddings and colours of the nested checklists need to be improved to clearly mark their connection to the input field.
• Input validation
  • Optional json fields should send empty placeholder Allow configuration of OIDC scopes to request to support role-claim #23 (comment)
    • JSON Fields have all been removed
• Improve UX for configuring complex properties
  (JSON is not acceptable long term)
  • 1a Folder selection should resemble https://github.com/jellyfin/jellyfin-plugin-ldapauth
    Add UI Page for OIDC Configuration #18 (comment)
    
  • Role Selection
    • Add UI Page for OIDC Configuration #18 (comment)
    • (Applies to both admin role & standard role)
    • won't work like folder selection, as listing roles requires authenticating with SSO provider to enumerate roles
      Options:
      • 2a Give role lists as multiline text input, split on newline (Relatively simple, decent UX)
      • 2b Implement some kind of list-append dialog, similar to builtin library / folder management (More complex, better (?) UX)
        
• Role -> Folder Mapping
  • Add UI Page for OIDC Configuration #18 (comment)
  • I envisage this will look like a combination of 2b + 1a, where selecting the "+" (add) button creates a dialog with a text input, for the role name, and a set of checkboxes for each library that role should have access to.

[strazto]

@9p4 ready for review

[strazto]

I request a release be made to the manifest upon this PR's merge

[9p4]

Sure, I'll put out a new release (maybe not 4.0 though)

[9p4]

Looks good, but I would prefer the multi-line textareas to be below the slug instead of inline.

Furthermore, I think there needs to be a tiny bit more info for "Roles" and "Admin Roles" and whether or not the roles are separated by newlines.

[strazto]

Looks good, but I would prefer the multi-line textareas to be below the slug instead of inline.

I'm not sure what you mean by that, this is what they look like to me

Unless you mean the folder role mapping inputs

Also, by "slug" do you mean the input labels?

Furthermore, I think there needs to be a tiny bit more info for "Roles" and "Admin Roles" and whether or not the roles are separated by newlines.

good point

[strazto]

Role mappings:

Help strings:

[strazto]

if it's ready to merge, I'd rather squash 6e198ef into 4668213 , although it's not a dirty commit so if you don't care you can just merge

[9p4]

This is what I see on Firefox

[strazto]

This is what I see on Firefox


Ew! Looks terrible!

I'll try it on Firefox, I copied the textarea styling over from Jellyfin's, since for some reason they don't expose the textarea stylesheet to plugin pages, and maybe there was something missing

[strazto]

I don't know how to reproduce your problem on firefox, for me it looks like this:

[strazto]

It looks fine on all my browsers, it kind of looks like the entire stylesheet isn't being loaded

Check devtools console-

https://github.com/9p4/jellyfin-plugin-sso/pull/27/files#diff-dbce8897198b98e490eac0f35c3bce167a71104bd110d7df7b6c6ae2b12b6cbdR340-R345

Is this code running okay?

Is the stylesheet 404'ing?

I've introduced the stylesheet as another embedded asset, is something going wrong there?

Looks liek your folder lists & role mappings also aren't recieving custom styling, so my best guess is the entire stylesheet isn't making it into your build.

[9p4]

Seems like the stylesheet isn't loading when Jellyfin is served under a subdirectory.

[9p4]

Yep that's the issue

[9p4]

Should be /jellyfin/web/configurationpage...

Seems like a bug in JF.

The proper URL (/jellyfin/web/configurationpage?name=SSO-Auth.css) loads the stylesheet so the issue is the frontend that isn't adding in the right URL.

[9p4]

Scratch that, it's a bug in the JS

  addTextAreaStyle: (view) => {
    var style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = "/web/configurationpage?name=SSO-Auth.css";
    view.appendChild(style);
  },

[9p4]

Alright it seems to be all fixed now.

[9p4]

Before I merge, there are a few more issues. First, the Folder-Role mapping doesn't have the proper role nor folders.

Maybe for the default providers, add a hint for what a suitable entry would be. Maybe Jellyfin.Server.Implementations.Users.DefaultAuthenticationProvider?

[9p4]

Just checked and it doesn't seem like the per-provider allowed folders isn't working either (POSTing an empty array, doesn't populate)

[9p4]

Alright, those issues should all be fixed now. Let me know your thoughts before I merge.

[strazto]

I'll have a look, but if it's all good from your end, I'm happy.
Just squash merge it if you can, please :)

[strazto]

LGTM, thanks for fixing those issues up.
I was naughty & never actually tried to save or load folder role mappings, so didn't realize that I had understood the data structure wrong