Redesigned Login Page: Adjust Design for Longer Custom Text
Problem
We recently introduced a new Login in Implement redesign of login page (!91673 - merged):
Before | Desktop | Mobile |
---|---|---|
Within the feedback issue we received quite a few comments that the new design has broken pages that have larger amounts of custom text. We are getting reports many users now have to scroll down the page to access the login fields, which isn't great UX.
I'm working with a large Ultimate customer that has a fair bit of custom info on the login page, including important guidance on which login option to use. In the new design, this info now sits above the sign-in form, causing users to have to scroll to get to the sign-in form.
We have a self-hosted GitLab instance. We currently have a lot of information for our users about using GitLab stored on the login page, such as notes on terms of use or help pages. From our point of view, this is actually necessary information that looks very bloated in the new design. Users have now to scroll over several lines to get to the login. Isn't there an option for both designs to be selectable? We also had the problem that logos were no longer displayed. With the workaround above we were able to add the logo again.
Text entered in
admin/application_settings/appearance
->Sign in/Sign up pages
->Description
is now centered which looks strange if the text is longer or uses some markdown features like lists.
So the page looks very empty, it seems that UI/UX designers not thinked that Standard authentication can be disabled in Admin Aera (Admin Aera > General > Sign-in restrictions > Allow password authentication for the web interface)
When a site owner defines text to appear on the "Sign in/Sign up" pages, that text is now above the login form. In addition, there seems to be a white gap at the top of the page (above the two banners in the image below, where a small GitLab logo used to be).This forces our users to scroll down the page to get to the login form. With the old design, all content was visible at once, without any scrolling necessary.
Proposed Solution
Split page into two sections, if users have custom text.
- Background of section will be Grey-10
- This section only appears if users have set custom text.
Responsive Colour Block | Mobile Colour Block |
---|---|
Figma File ✨
Availability & Testing
Ensure all e2e tests pass. Applying pipeline:run-all-e2e should help running all tests automatically.