Skip to content

Login UX – SSO login options unclear to users #24808

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.

Sign up for GitHub

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

Jump to bottom
Closed
EternalDeiwos opened this issue May 19, 2023 · 5 comments · Fixed by #25030
Closed

Login UX – SSO login options unclear to users #24808

EternalDeiwos opened this issue May 19, 2023 · 5 comments · Fixed by #25030
Assignees
@HesterG
Labels
topic/ui Change the appearance of the Gitea UI topic/ui-interaction Change the process how users use Gitea instead of the visual appearance type/enhancement An improvement of existing functionality type/proposal The new feature has not been accepted yet but needs to be discussed first.
Milestone
1.20.0

Comments

@EternalDeiwos
Copy link

EternalDeiwos commented May 19, 2023 •
edited
Loading

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

image

image

Gitea Version

1.19.3

Can you reproduce the bug on the Gitea demo site?

Yes

Operating System

N/A

Browser Version

N/A
@EternalDeiwos EternalDeiwos added type/bug topic/ui Change the appearance of the Gitea UI labels May 19, 2023
@silverwind
Copy link
Member

silverwind commented May 19, 2023 •
edited
Loading

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.

@lunny lunny removed the type/bug label May 19, 2023
@silverwind silverwind added the type/enhancement An improvement of existing functionality label May 19, 2023
@lunny lunny added topic/ui-interaction Change the process how users use Gitea instead of the visual appearance and removed type/enhancement An improvement of existing functionality labels May 19, 2023
@silverwind silverwind added type/enhancement An improvement of existing functionality type/proposal The new feature has not been accepted yet but needs to be discussed first. topic/ui-interaction Change the process how users use Gitea instead of the visual appearance and removed topic/ui-interaction Change the process how users use Gitea instead of the visual appearance labels May 19, 2023
@EternalDeiwos
Copy link
Author

@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.

image

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
Copy link
Member

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
Copy link
Contributor

HesterG commented May 31, 2023

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?

Screen Shot 2023-05-31 at 15 02 15

@silverwind
Copy link
Member

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

@HesterG HesterG self-assigned this May 31, 2023
@HesterG HesterG mentioned this issue Jun 1, 2023
Merged
silverwind added a commit that referenced this issue Jun 8, 2023
@HesterG @silverwind @wxiaoguang
Modify OAuth login ui and fix display name, iconurl related logic (#2…
63a4295 
…5030)

Close #24808 

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="https://github.com/go-gitea/gitea/assets/17645053/a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="https://github.com/go-gitea/gitea/assets/17645053/71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="https://github.com/go-gitea/gitea/assets/17645053/27010e7e-2785-4fc5-8c49-b06621898f37">

---------

Co-authored-by: silverwind <[email protected]>
Co-authored-by: wxiaoguang <[email protected]>
GiteaBot pushed a commit to GiteaBot/gitea that referenced this issue Jun 9, 2023
@HesterG @silverwind
@wxiaoguang @GiteaBot
Modify OAuth login ui and fix display name, iconurl related logic (go…
d0a73c1 
…-gitea#25030)

Close go-gitea#24808 

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="https://github.com/go-gitea/gitea/assets/17645053/a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="https://github.com/go-gitea/gitea/assets/17645053/71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="https://github.com/go-gitea/gitea/assets/17645053/27010e7e-2785-4fc5-8c49-b06621898f37">

---------

Co-authored-by: silverwind <[email protected]>
Co-authored-by: wxiaoguang <[email protected]>
@GiteaBot GiteaBot mentioned this issue Jun 9, 2023
Merged
@lunny lunny added this to the 1.20.0 milestone Jun 9, 2023
silverwind added a commit that referenced this issue Jun 9, 2023
@GiteaBot @HesterG
@silverwind @wxiaoguang
Modify OAuth login ui and fix display name, iconurl related logic (#2…
0058453 
…5030) (#25161)

Backport #25030 by @HesterG

Close #24808 

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="https://github.com/go-gitea/gitea/assets/17645053/a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="https://github.com/go-gitea/gitea/assets/17645053/71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="https://github.com/go-gitea/gitea/assets/17645053/27010e7e-2785-4fc5-8c49-b06621898f37">

Co-authored-by: HesterG <[email protected]>
Co-authored-by: silverwind <[email protected]>
Co-authored-by: wxiaoguang <[email protected]>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 25, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@HesterG HesterG

Labels
topic/ui Change the appearance of the Gitea UI topic/ui-interaction Change the process how users use Gitea instead of the visual appearance type/enhancement An improvement of existing functionality type/proposal The new feature has not been accepted yet but needs to be discussed first.
Projects
None yet
Milestone
1.20.0
Development

Successfully merging a pull request may close this issue.

Modify OAuth login ui and fix display name, iconurl related logic HesterG/gitea
4 participants
@lunny @silverwind @EternalDeiwos @HesterG