Login UX – SSO login options unclear to users

[EternalDeiwos]

Description

I get questions all the time from new users about how to login to Gitea using our SSO, and I've concluded that the login form is just not clear about the option to login from those options.

I would suggest we can:

1. Place SSO options (if configured) at the top of the form
2. Make the SSO options look more like buttons
3. Create a better division between them
4. Clearly show that users can logon with SSO OR they can use the username/password form

Screenshots

Gitea Version

1.19.3

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

N/A

Browser Version

N/A

[silverwind]

How do other sites do this? Any suggested mockup? Keep note we support up to 8+ providers, which could in theory all be enabled simultaneuosly.

I think one enhancement that could be done is adding a "or" label at the divider.

[EternalDeiwos]

@silverwind every site does this according to whatever suits their needs best. I really like how Gitlab's login options look, and their SSO options are at the bottom.

The only reason I suggested putting the SSO at the top is because I think generally when SSO is configured users are seldom going to actually use the login form.

Either way, I would love to see some additional spacing, and an "or" label like you described.

[silverwind]

I think we could do slim vertical buttons as well, yes. Would still keep them on bottom so to not alter the "familiar" layout too drastically when they are present vs. not.

[HesterG]

I am trying to work on this one, and one small problem is that semantic has special background color and color for .ui.facebook.button class. So our facebook.png cannot be seen clearly. Should we change this png or overwrite semantic colors here?

[silverwind]

Please convert all these icons to SVG. With SVG we have full control over the rendered color.