MbinOrg
Restyle login/register social and action button sections
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
Comparison screenshots
| before | after |
|---|---|
| login all social | |
| login mobile | |
| login 1 social | |
| login 0 social | |
| login sso mode 2 socials | |
| register all social | |
| register 1 social | |
| register 0 social | |
| register disabled | |
| reset password all social | |
| (reminder socials were just straight up removed in after) | |
| reset password 1 social | |
| reset password 0 social | |
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
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
Yes, with perhaps a fancy, yet subtle & intuitive (is this possible?) line above it 'log/sign in using'
On Sun, 14 Apr 2024, 01:15 e-five, @.***> wrote:
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 register does, as part of this
— Reply to this email directly, view it on GitHub https://github.com/MbinOrg/mbin/pull/706#issuecomment-2053792147, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALKLYOFRTGPQVKTOF477OKDY5G4ADAVCNFSM6AAAAABGFZC5LOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJTG44TEMJUG4 . You are receiving this because you were mentioned.Message ID: @.***>
@TheVillageGuy can we close https://github.com/MbinOrg/mbin/pull/642 and https://github.com/MbinOrg/mbin/pull/643 in favor of this PR instead (once @e-five256 has a chance to finish the work, no rush of course)?
Yes and done
On Sat, 20 Apr 2024, 18:34 debounced, @.***> wrote:
@TheVillageGuy https://github.com/TheVillageGuy can we close #642 https://github.com/MbinOrg/mbin/pull/642 and #643 https://github.com/MbinOrg/mbin/pull/643 in favor of this PR instead (once @e-five256 https://github.com/e-five256 has a chance to finish the work, no rush of course)?
— Reply to this email directly, view it on GitHub https://github.com/MbinOrg/mbin/pull/706#issuecomment-2067723811, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALKLYOGYRK6MLK2EABCWKOLY6KKJ7AVCNFSM6AAAAABGFZC5LOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANRXG4ZDGOBRGE . You are receiving this because you were mentioned.Message ID: @.***>
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