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

move sign in labels to be above inputs #28753

Merged
merged 30 commits into from
Feb 15, 2024
Merged

move sign in labels to be above inputs #28753

merged 30 commits into from
Feb 15, 2024

Conversation

rafh
Copy link
Contributor

@rafh rafh commented Jan 10, 2024

There are a few inconsistencies within Gitea and this PR addresses one of them. This PR updates the sign-in page layout, including the register and openID tabs, to match the layout of the settings pages (/user/settings) for more consistency.

Before
Screenshot 2024-02-05 at 8 27 24 AM

After
Screenshot 2024-02-05 at 8 26 39 AM

@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jan 10, 2024
@pull-request-size pull-request-size bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Jan 10, 2024
@KN4CK3R
Copy link
Member

KN4CK3R commented Jan 10, 2024

OAuth buttons have been moved above the sign-in form as OAuth is typically used more than traditional sign-in forms

That's debatable 😏 I like the other order more. A non-representative survey between me and some online services results in first login form then other. (GitLab, Instagram, Firefox, Cloudflare = first login form, Twitter/X = first oauth)

@denyskon
Copy link
Member

@KN4CK3R I agree, OAuth as second is the more common I think.

@lunny lunny added this to the 1.22.0 milestone Jan 11, 2024
@rafh
Copy link
Contributor Author

rafh commented Jan 11, 2024

OAuth buttons have been moved above the sign-in form as OAuth is typically used more than traditional sign-in forms

That's debatable 😏 I like the other order more. A non-representative survey between me and some online services results in first login form then other. (GitLab, Instagram, Firefox, Cloudflare = first login form, Twitter/X = first oauth)

I can see how the order might feel more familiar with the login form first. However, research actually shows a strong shift towards passwordless options like social logins and SSO. For example, this report shows many consumers prefer social logins (LoginRadius Consumer Digital Identity Trend Report 2022). The 2023 report isn't published yet but you can download it here. This inforgraphic from this report shows the trends towards passwordless.

Screenshot 2024-01-11 at 9 51 27 AM

I understand personal preference is subjective, but the data seems to favor the convenience and security of passwordless sign-in. Finally, many sites are using the proposed layout first, perhaps due to its increasing popularity. Here are a few examples:

logrocket
medium
dropbox
fitbit
strava
spotify

@denyskon
Copy link
Member

I think there's a big difference between developers or at least technical users who will use Gitea, and a 'normal consumer' on a site like Spotify, however I won't block this change....

@rafh
Copy link
Contributor Author

rafh commented Jan 11, 2024

I think there's a big difference between developers or at least technical users who will use Gitea, and a 'normal consumer' on a site like Spotify, however I won't block this change....

I understand your point and I agree there's a difference. However, we have to keep in mind that not all users are developers. Gitea is an open-source project that caters to a variety of end users.

@JakobDev
Copy link
Contributor

I'm also in favour for putting the normal login on top. It is a more usual layout.

@lunny
Copy link
Member

lunny commented Jan 17, 2024

If no maintainers support this PR, I think maybe we can close this one. Let's wait for more reviews.

@KN4CK3R
Copy link
Member

KN4CK3R commented Jan 17, 2024

If no maintainers support this PR, I think maybe we can close this one. Let's wait for more reviews.

The moved input field labels are good.

However, research actually shows a strong shift towards passwordless options like social logins and SSO. For example, this report shows many consumers prefer social logins (LoginRadius Consumer Digital Identity Trend Report 2022).

LoginRadius offers services related to SSO. Not really surprising they have a report that shows what they want to sell. Here is the link to the report, they send you after registering.

@pull-request-size pull-request-size bot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Feb 5, 2024
@rafh rafh changed the title rearrange the sign in page input and labels move sign in labels to be above inputs Feb 5, 2024
@lafriks
Copy link
Member

lafriks commented Feb 14, 2024

Maybe remove tabs at all (there is already link to register) and openid can be moved as other external buttons

@kdumontnu
Copy link
Contributor

Maybe remove tabs at all (there is already link to register) and openid can be moved as other external buttons

I totally agree with this, but it should be a separate PR I think (no reason to increase scope of this PR and miss 1.22 feature freeze for example)

@denyskon
Copy link
Member

It isn't a "feature" imo, so it can be merged after the freeze

@delvh delvh merged commit 1c14cd0 into go-gitea:main Feb 15, 2024
26 checks passed
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 15, 2024
zjjhot added a commit to zjjhot/gitea that referenced this pull request Feb 16, 2024
* giteaofficial/main: (23 commits)
  Remove jQuery from SSH key form parser (go-gitea#29193)
  Refactor request function (go-gitea#29187)
  Docker Tag Information in Docs (go-gitea#29047)
  Fix gitea-action user avatar broken on edited menu (go-gitea#29190)
  Disable parallel Make execution (go-gitea#29186)
  Auto-update the system status in admin dashboard (go-gitea#29163)
  Avoid vue warning in dev mode (go-gitea#29188)
  Update JS and PY dependencies (go-gitea#29184)
  [skip ci] Updated translations via Crowdin
  Implement contributors graph (go-gitea#27882)
  Add support for action artifact serve direct (go-gitea#29120)
  Advertise WebAuthn support (go-gitea#29176)
  Tweak repo header (go-gitea#29134)
  Change webhook-type in create-view (go-gitea#29114)
  Remove jQuery from the comment task list (go-gitea#29170)
  Fix can not select team reviewers when reviewers is empty (go-gitea#29174)
  move sign in labels to be above inputs (go-gitea#28753)
  Refactor locale&string&template related code (go-gitea#29165)
  Extract linguist code to method (go-gitea#29168)
  bump to use go 1.22 (go-gitea#29119)
  ...
@wxiaoguang
Copy link
Contributor

I guess it breaks some other pages.

image

image

@rafh
Copy link
Contributor Author

rafh commented Feb 18, 2024

I'll open a PR to fix these issues.

techknowlogick pushed a commit that referenced this pull request Feb 20, 2024
In a previous [PR](#28753) we
moved the labels to be above the inputs. The PR ensures that the
alignment is also on both tabs of the link account page
(`/user/link_account`).

Before
<img width="1094" alt="before"
src="https://github.com/go-gitea/gitea/assets/6152817/ac1e86bd-c4d6-4e45-87d1-87bb8a736149">

After
<img width="1094" alt="after"
src="https://github.com/go-gitea/gitea/assets/6152817/1b5fc109-f4d2-43ee-b924-0a9e53a0e391">

---------

Co-authored-by: rafh <[email protected]>
silverwind pushed a commit to silverwind/gitea that referenced this pull request Feb 20, 2024
There are a few inconsistencies within Gitea and this PR addresses one of them.
This PR updates the sign-in page layout, including the register and openID tabs,
to match the layout of the settings pages (`/user/settings`) for more consistency.

**Before**
<img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/fb0cb517-57c0-4eed-be1d-56f36bd1960d">


**After**
<img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/428d691d-0a42-4a67-a646-05527f2a7b41">

---------

Co-authored-by: rafh <[email protected]>
silverwind pushed a commit to silverwind/gitea that referenced this pull request Feb 20, 2024
In a previous [PR](go-gitea#28753) we
moved the labels to be above the inputs. The PR ensures that the
alignment is also on both tabs of the link account page
(`/user/link_account`).

Before
<img width="1094" alt="before"
src="https://github.com/go-gitea/gitea/assets/6152817/ac1e86bd-c4d6-4e45-87d1-87bb8a736149">

After
<img width="1094" alt="after"
src="https://github.com/go-gitea/gitea/assets/6152817/1b5fc109-f4d2-43ee-b924-0a9e53a0e391">

---------

Co-authored-by: rafh <[email protected]>
@lunny
Copy link
Member

lunny commented Feb 21, 2024

This change also breaks captcha, since it broke two places. I will revert this one and please send a new PR.

lunny added a commit to lunny/gitea that referenced this pull request Feb 21, 2024
lunny added a commit that referenced this pull request Feb 21, 2024
zjjhot added a commit to zjjhot/gitea that referenced this pull request Feb 22, 2024
* giteaofficial/main: (32 commits)
  [skip ci] Updated translations via Crowdin
  Prevent double use of `git cat-file` session. (go-gitea#29298)
  Revert go-gitea#28753 because UI broken. (go-gitea#29293)
  Fix error display when merging PRs (go-gitea#29288)
  Refactor markup rendering to accept general "protocol:" prefix (go-gitea#29276)
  Remove jQuery from the installation page (go-gitea#29284)
  Always write proc-receive hook for all git versions (go-gitea#29287)
  Do not use `ctx.Doer` when reset password (go-gitea#29289)
  Update Discord logo (go-gitea#29285)
  [skip ci] Updated translations via Crowdin
  Remove jQuery .map() and enable eslint rules for it (go-gitea#29272)
  Explained where create issue/PR template (go-gitea#29035) (go-gitea#29266)
  Remove jQuery from repo wiki creation page (go-gitea#29271)
  Do not show delete button when time tracker is disabled (go-gitea#29257)
  Left align the input labels for the link account page (go-gitea#29255)
  [skip ci] Updated translations via Crowdin
  Remove jQuery from the repo migration form (go-gitea#29229)
  Fix content size does not match error when uploading lfs file (go-gitea#29259)
  Workaround to clean up old reviews on creating a new one (go-gitea#28554)
  Deduplicate translations for contributors graph (go-gitea#29256)
  ...
@rafh
Copy link
Contributor Author

rafh commented Feb 22, 2024

This change also breaks captcha, since it broke two places. I will revert this one and please send a new PR.

I'll open a new PR to handle the captcha. The Gitea frontend has many different scenarios and could benefit from snapshot/visual testing for various scenarios. It won't be part of my next PR but I think it's worth considering.

6543 pushed a commit to 6543-forks/gitea that referenced this pull request Feb 26, 2024
There are a few inconsistencies within Gitea and this PR addresses one of them.
This PR updates the sign-in page layout, including the register and openID tabs,
to match the layout of the settings pages (`/user/settings`) for more consistency.

**Before**
<img width="968" alt="Screenshot 2024-02-05 at 8 27 24 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/fb0cb517-57c0-4eed-be1d-56f36bd1960d">

**After**
<img width="968" alt="Screenshot 2024-02-05 at 8 26 39 AM"
src="https://github.com/go-gitea/gitea/assets/6152817/428d691d-0a42-4a67-a646-05527f2a7b41">

---------

Co-authored-by: rafh <[email protected]>
(cherry picked from commit 1c14cd0)
DennisRasey pushed a commit to DennisRasey/forgejo that referenced this pull request Feb 27, 2024
In a previous [PR](go-gitea/gitea#28753) we
moved the labels to be above the inputs. The PR ensures that the
alignment is also on both tabs of the link account page
(`/user/link_account`).

Before
<img width="1094" alt="before"
src="https://github.com/go-gitea/gitea/assets/6152817/ac1e86bd-c4d6-4e45-87d1-87bb8a736149">

After
<img width="1094" alt="after"
src="https://github.com/go-gitea/gitea/assets/6152817/1b5fc109-f4d2-43ee-b924-0a9e53a0e391">

---------

Co-authored-by: rafh <[email protected]>
(cherry picked from commit e4e5d76932e9d5ba1f8c63213aefae1493012a81)
Copy link

github-actions bot commented Mar 1, 2024

Automatically locked because of our CONTRIBUTING guidelines

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants