412 enhancement add a login modal to select pod provider

rioredwards commented 8 months ago

This PR:

Resolves #412

1. Replaces basic text field for one with autocomplete (a dropdown appears with recommended options) in the OidcLoginComponent. 2. Adds SUGGESTED_OIDC_OPTIONS constant; a set of recommended pod servers.

Screenshots:

PASS_Autocorrect_Feature_Preview

Future Steps/PRs Needed to Finish This Work:

The SUGGESTED_OIDC_OPTIONS has placeholder options in it, for now, that should be replaced.
The UI for the component was based on the design of Pod Pro's design. The one I made ended up being more heavy-duty than theirs because I was using MUI's Auto Complete component, which is more bulky by default. We could slim it down if needed. I started on a version that looked more like theirs, here was the result:

Pod Pro's Design: Pod Pro's Component

My Attempt at a similar design: More Similar Design to Pod Pro

The code I used to achieve that (not part of this PR):

<Autocomplete
        // ...
        PaperComponent={({ children }) => (
          <Box
            sx={{
              bgcolor: 'black',
              opacity: '0.8',
              fontSize: '12px',
              width: 'max-content',
              transform: 'translateX(15%) translateY(8px)'
            }}
          >
            {children}
          </Box>
        )}
        // ...
      />

One last idea I had was to make the component expand to be wider when selected, similar to This. This could keep the UI clean, while also accommodating potentially long URLs in the dropdown. I tried incorporating this myself but ended up giving up... I don't have much experience using MUI, but if someone else does, I imagine it wouldn't be too difficult.

rioredwards commented 8 months ago

Hey, @timbot1789! I made some changes based on your suggestions, let me know what you think...

I also added some comments to explain my thinking. I'm still learning and I wanna make sure that I'm following best practices and not breaking things! Don't hesitate to let me know if I need to make more changes.

leekahung commented 8 months ago

Code itself looks good. However, it seems that we've left this linger too long and we have MERGE CONFLICTS. We'll need to resolve those, then we're good to merge.

I could help with the clean-up if needed, let me know here or on Discord @rioredwards

rioredwards commented 8 months ago

I could help with the clean-up if needed, let me know here or on Discord @rioredwards

Sounds good, I'll send you a message on Discord

timbot1789 commented 8 months ago

@rioredwards you're good to merge this yourself once all the git checks have passed

codeforpdx / PASS