move sign in labels to be above inputs #28753
Conversation
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) |
|
@KN4CK3R I agree, OAuth as second is the more common I think. |
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. 
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: |
|
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. |
|
I'm also in favour for putting the normal login on top. It is a more usual layout. |
|
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.
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. |
This reverts commit 95bdc7b.
|
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) |
|
It isn't a "feature" imo, so it can be merged after the freeze |
* 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) ...
|
I guess it breaks some other pages.
|
|
I'll open a PR to fix these issues. |
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]>
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]>
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]>
|
This change also breaks captcha, since it broke two places. I will revert this one and please send a new PR. |
This reverts commit 1c14cd0.
* 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) ...
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. |
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)
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)
|
Automatically locked because of our CONTRIBUTING guidelines |
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
After
