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

Restyle login/register social and action button sections #706

Merged
merged 13 commits into from
May 10, 2024

Conversation

e-five256
Copy link
Member

@e-five256 e-five256 commented Apr 13, 2024

Based on the feedback @TheVillageGuy gave in #642 and #643

  • make buttons full form width
  • make social buttons larger and more grid/flex based
    • 1 social login = full width
    • mobile = full width
  • make social buttons appear before actions
    • on login page social login now appears before register links
    • on register page social register now appears before login links
  • add line separators that only show up if there are elements (no social login = no separator, same for register/login links)
  • social buttons on reset password form have been removed, passwords on our side aren't involved in regards to SSO
  • add new admin option to place social buttons above native login/registration forms
    image
Comparison screenshots
before after
login all social
image image
login mobile
image image
login 1 social
image image
login 0 social
image image
login social first
image
login sso mode 2 socials
image image
register all social
image image
register mobile
image image
register 1 social
image image
register 0 social
image image
register social first
image
register disabled
image image
reset password all social
(reminder socials were just straight up removed in after)
image image
reset password 1 social
image image
reset password 0 social
image image
resend account activation email
image image

@e-five256 e-five256 added the frontend Visual issues, improvements, bugs or other aspects relating mostly to the front end label Apr 13, 2024
@e-five256 e-five256 marked this pull request as ready for review April 13, 2024 23:00
@TheVillageGuy
Copy link
Contributor

That's great! I'd like to see some kind of indicator to draw attention to the fact that it's possible to use the socials as well, as people with little computer knowledge do not make the association when just seeing these buttons and simply either refrain from login in/registering or start filling in the form. I understand my layout on RimWorld.gallery is not very good looking but it's super clear that Google can be used to log in. Some kind of compromise would be appreciated

@e-five256
Copy link
Member Author

e-five256 commented Apr 13, 2024

Would an admin option of the social buttons appearing before login/register form fill your criteria?

I also realized going through this reset password form is shown when in SSO only mode, so potentially will make that redirect to login similar to how register does, as part of this

@TheVillageGuy
Copy link
Contributor

TheVillageGuy commented Apr 13, 2024 via email

@e-five256 e-five256 marked this pull request as draft April 13, 2024 23:58
@ghost
Copy link

ghost commented Apr 20, 2024

@TheVillageGuy can we close #642 and #643 in favor of this PR instead (once @e-five256 has a chance to finish the work, no rush of course)?

@TheVillageGuy
Copy link
Contributor

TheVillageGuy commented Apr 21, 2024 via email

@ghost ghost added this to the v1.6.0 milestone Apr 21, 2024
@BentiGorlich
Copy link
Member

Man this looks good. What is the draft part about this?

@e-five256
Copy link
Member Author

e-five256 commented May 3, 2024

I need #740 to make the separator not show up when SSO only mode is enabled (easier than trying to do CSS thats like :not before <form>, :not after <form>

I should be able to get this fixed up this weekend

I also found the full width buttons a little bad looking. I changed that to like 50% width on desktop and 100% on mobile. I'm trying to think of names for the classes, that's the hard part. I'd like to extend that kind of styling to many other forms like saving your profile information or saving the admin page settings because I think it makes it much easier to see/click on

increase margin slightly
remove entire socials div when no socials as the div was adding extra space to the layout even when empty
rename style class to say half as there might be a use case for full width buttons
@e-five256 e-five256 marked this pull request as ready for review May 5, 2024 01:42
@e-five256
Copy link
Member Author

I've updated the description/screenshots for the current state of things

Copy link

@ghost ghost left a comment

Choose a reason for hiding this comment

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

LGTM, massive improvement

@melroy89 melroy89 added the enhancement New feature or request label May 10, 2024
@e-five256 e-five256 merged commit 701d654 into main May 10, 2024
7 checks passed
@e-five256 e-five256 deleted the e5/login-buttons branch May 10, 2024 23:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request frontend Visual issues, improvements, bugs or other aspects relating mostly to the front end
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants