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.

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

Refactor login page #31530

Merged
merged 27 commits into from
Jul 5, 2024
Merged

Refactor login page #31530

merged 27 commits into from
Jul 5, 2024

Conversation

anbraten
Copy link
Contributor

@anbraten anbraten commented Jun 30, 2024 •
edited
Loading

As requested in #31504 (comment). This PR refactor the login page:

Screenshot from 2024-07-04 19-23-10

Screenshot from 2024-07-04 19-23-21

Screenshot from 2024-06-30 09-35-20

Changes

  • use separate box for passkey login and go to registration
  • move forgot passoword next to password label
  • fix password required label * and padding
  • remove tabs from login page

@pull-request-size pull-request-size bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Jun 30, 2024
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jun 30, 2024
@github-actions github-actions bot added the modifies/templates This PR modifies the template files label Jun 30, 2024
@anbraten anbraten changed the title Refactor login Refactor login page Jun 30, 2024
@silverwind
Copy link
Member

Looks sexy, one issue that I see is the spacing below the Password text is not equal to the one below Username, please make it use the same spacing as below Username:

image

@silverwind
Copy link
Member

Oh and I would make the "Register Account" button also full width.

@anbraten
Copy link
Contributor Author

anbraten commented Jun 30, 2024 •
edited
Loading

Looks sexy, one issue that I see is the spacing below the Password text is not equal to the one below Username, please make it use the same spacing as below Username:

Do you have an idea how to do this "nicely"? Problem was that the label is now nested in a div to be able to have the forgot password link at the right, however the required and padding is broken. (feel free to push if you have any ideas etc.)

@silverwind
Copy link
Member

Looks sexy, one issue that I see is the spacing below the Password text is not equal to the one below Username, please make it use the same spacing as below Username:

Do you have an idea how to do this "nicely"? Problem was that the label is now nested in a div to be able to have the forgot password link at the right, however the required and padding is broken. (feel free to push if you have any ideas etc.)

Fixed in fcd4bd5. Probably the best option as nesting inside the label would change the label text which might be bad for accessibilty.

@silverwind
Copy link
Member

Did some tweaks on signup, button is full width, captchas are centered:

image

@silverwind
Copy link
Member

Not sure I like the logo on the signin page, it does take away a bit of vertical space and there is already a logo on the header.

image

@anbraten
Copy link
Contributor Author

anbraten commented Jul 1, 2024

Thanks for the adjustments.

Not sure I like the logo on the signin page, it does take away a bit of vertical space and there is already a logo on the header.

True, its not perfect yet. Without the logo it looked a bit too much like a dashboard card to me, but the header and the logo underneath isn't nice as well.

Could you check if we can somehow get the red required star for the password back.

@silverwind
Copy link
Member

Could you check if we can somehow get the red required star for the password back.

Hmm it looks like Fomantic UI's CSS expects the label as a direct descendant:

.ui.form .required.field > label::after

So we likely need to remove the wrapper and find other solutions.

@silverwind
Copy link
Member

But we also just can't add it to label as the ::after would appear after the link:

image

This will need a bit of hacky CSS. Luckily this indicator is not interactive and seem to be a pure CSS feature.

@anbraten
Copy link
Contributor Author

anbraten commented Jul 2, 2024

Removed the logo and did some smaller adjustments. PR should be ready from my side now.

@anbraten anbraten marked this pull request as ready for review July 2, 2024 12:42
@lunny
Copy link
Member

lunny commented Jul 4, 2024

Removed the logo and did some smaller adjustments. PR should be ready from my side now.

Could you also update the screenshots?

@anbraten
Copy link
Contributor Author

anbraten commented Jul 4, 2024

Sure updated them.

@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jul 4, 2024
denyskon
denyskon approved these changes Jul 4, 2024
View reviewed changes
Copy link
Member

@denyskon denyskon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks nice 🚀

@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jul 4, 2024
@denyskon denyskon added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Jul 4, 2024
@denyskon denyskon added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI topic/authentication topic/ux How users interact with Gitea labels Jul 4, 2024
@denyskon denyskon added this to the 1.23.0 milestone Jul 4, 2024
@lafriks lafriks merged commit 9c00dda into go-gitea:main Jul 5, 2024
26 checks passed
@anbraten anbraten deleted the refactor-login branch July 5, 2024 17:43
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Jul 5, 2024
zjjhot added a commit to zjjhot/gitea that referenced this pull request Jul 6, 2024
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
d52d93a 
* giteaofficial/main:
  [skip ci] Updated translations via Crowdin
  Allow force push to protected branches (go-gitea#28086)
  Refactor login page (go-gitea#31530)
This was referenced Jul 9, 2024
Closed
Closed
@KN4CK3R KN4CK3R mentioned this pull request Jul 23, 2024
Closed
@go-gitea go-gitea locked as resolved and limited conversation to collaborators Oct 4, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@denyskon denyskon denyskon approved these changes

@silverwind silverwind silverwind approved these changes

Assignees
No one assigned
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/templates This PR modifies the template files modifies/translation size/L Denotes a PR that changes 100-499 lines, ignoring generated files. topic/authentication topic/ui Change the appearance of the Gitea UI topic/ux How users interact with Gitea type/enhancement An improvement of existing functionality
Projects
None yet
Milestone
1.23.0
Development

Successfully merging this pull request may close these issues.
6 participants
@anbraten @silverwind @lunny @denyskon @lafriks @GiteaBot