move sign in labels to be above inputs #28753

rafh · 2024-01-10T17:52:47Z

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

KN4CK3R · 2024-01-10T20:47:21Z

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 · 2024-01-10T21:11:21Z

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

rafh · 2024-01-11T14:58:59Z

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.

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 · 2024-01-11T15:09:03Z

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 · 2024-01-11T15:12:41Z

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 · 2024-01-15T14:37:27Z

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

lunny · 2024-01-17T08:48:16Z

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

KN4CK3R · 2024-01-17T08:55:51Z

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.

This reverts commit 95bdc7b.

lafriks · 2024-02-14T19:50:27Z

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

kdumontnu · 2024-02-14T22:24:12Z

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 · 2024-02-15T06:05:36Z

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

wxiaoguang · 2024-02-18T04:16:40Z

I guess it breaks some other pages.

rafh · 2024-02-18T18:59:28Z

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 <rafaelheard@gmail.com>

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 <rafaelheard@gmail.com>

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 <rafaelheard@gmail.com>

lunny · 2024-02-21T12:57:11Z

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.

Revert #29255 Revert #28753

* 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 · 2024-02-22T17:22:00Z

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.

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 <rafaelheard@gmail.com> (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 <rafaelheard@gmail.com> (cherry picked from commit e4e5d76932e9d5ba1f8c63213aefae1493012a81)

github-actions · 2024-03-01T00:04:38Z

Automatically locked because of our CONTRIBUTING guidelines

update sign form layout

95bdc7b

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 bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Jan 10, 2024

github-actions bot added the modifies/frontend label Jan 10, 2024

lunny added this to the 1.22.0 milestone Jan 11, 2024

Merge branch 'main' into main

52507ed

Merge branch 'main' into main

997590f

rafh and others added 7 commits January 17, 2024 10:17

Merge branch 'main' into main

c6d3151

Revert "update sign form layout"

c26931b

This reverts commit 95bdc7b.

move sign in labels above inputs

49652f7

move register labels above inputs

fc81417

move openid labels above inputs

3b322fb

fix input overflowing on mobile screens

59ed2b1

Merge branch 'main' of github.com:rafh/gitea

a5f4aae

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 added 2 commits February 5, 2024 08:21

use updated css class name for 100 width

7f163ac

add newline to signin_inner

f353718

rafh changed the title ~~rearrange the sign in page input and labels~~ move sign in labels to be above inputs Feb 5, 2024

rafh added 3 commits February 5, 2024 08:50

Merge branch 'main' into main

b77f566

Merge branch 'main' into main

231f9fb

Merge branch 'main' into main

7ffc9ba

GiteaBot added 5 commits February 15, 2024 00:32

Merge branch 'main' into main

d783b80

Merge branch 'main' into main

430b783

Merge branch 'main' into main

7fbc2ec

Merge branch 'main' into main

f55c22a

Merge branch 'main' into main

58a2502

Merge branch 'main' into main

4d06fb1

delvh merged commit 1c14cd0 into go-gitea:main Feb 15, 2024
26 checks passed

GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 15, 2024

rafh mentioned this pull request Feb 19, 2024

Left align the input labels for the link account page #29255

Merged

lafriks mentioned this pull request Feb 20, 2024

Sign In form UI refactoring #29280

Closed

lunny added a commit to lunny/gitea that referenced this pull request Feb 21, 2024

Revert "move sign in labels to be above inputs (go-gitea#28753)"

6e9b587

This reverts commit 1c14cd0.

lunny mentioned this pull request Feb 21, 2024

Revert #28753 because UI broken. #29293

Merged

lunny added a commit that referenced this pull request Feb 21, 2024

Revert #28753 because UI broken. (#29293)

e6e5069

Revert #29255 Revert #28753

rafh mentioned this pull request Feb 26, 2024

Move all login and account creation page labels to be above inputs #29432

Merged

github-actions bot locked as resolved and limited conversation to collaborators Mar 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

move sign in labels to be above inputs #28753

move sign in labels to be above inputs #28753

rafh commented Jan 10, 2024 •

edited

Loading

KN4CK3R commented Jan 10, 2024

denyskon commented Jan 10, 2024

rafh commented Jan 11, 2024

denyskon commented Jan 11, 2024

rafh commented Jan 11, 2024

JakobDev commented Jan 15, 2024

lunny commented Jan 17, 2024

KN4CK3R commented Jan 17, 2024 •

edited

Loading

lafriks commented Feb 14, 2024

kdumontnu commented Feb 14, 2024

denyskon commented Feb 15, 2024

wxiaoguang commented Feb 18, 2024

rafh commented Feb 18, 2024

lunny commented Feb 21, 2024

rafh commented Feb 22, 2024

github-actions bot commented Mar 1, 2024

move sign in labels to be above inputs #28753

move sign in labels to be above inputs #28753

Conversation

rafh commented Jan 10, 2024 • edited Loading

KN4CK3R commented Jan 10, 2024

denyskon commented Jan 10, 2024

rafh commented Jan 11, 2024

denyskon commented Jan 11, 2024

rafh commented Jan 11, 2024

JakobDev commented Jan 15, 2024

lunny commented Jan 17, 2024

KN4CK3R commented Jan 17, 2024 • edited Loading

lafriks commented Feb 14, 2024

kdumontnu commented Feb 14, 2024

denyskon commented Feb 15, 2024

wxiaoguang commented Feb 18, 2024

rafh commented Feb 18, 2024

lunny commented Feb 21, 2024

rafh commented Feb 22, 2024

github-actions bot commented Mar 1, 2024

rafh commented Jan 10, 2024 •

edited

Loading

KN4CK3R commented Jan 17, 2024 •

edited

Loading