Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-72928

Further improve login page

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72928-rebase
    • Hide

      Setup:

      1. Enable oauth2 authentication
      2. Navigate to Server > OAuth 2 services
      3. Create a new dummy Google service (Dummy values are fine this test is not testing the service)
      4. Create a new custom service
        1. Set the "This service will be used" field to Login page only
        2. Set the "Name displayed on the login page" to "Some super long login method that will highlight issues with the login page width foo bar testing content andy"
        3. Set the rest of the required fields (Dummy values are fine this test is not testing the service)

      Test:

      1. Ensure you are logged out
      2. Navigate to the login page
      3. Confirm there is only the minimal footer (? with the popup)
      4. Confirm That you do not see "Cookies must be enabled in your browser"
      5. Confirm You see "Lost password?" instead of "Forgotten your username or password?"
      6. Confirm You do not see the "Remember password" checkbox
      7. Confirm That the text fields now use the form-control-lg class
      8. Confirm That the language selector is now at the bottom of the form with a divider to the right
      9. Click the "Cookies notice"
      10. Confirm that a modal appears
        1. Confirm that the title is "Cookies must be enabled in your browser"
        2. Confirm that the body text has the following: "Two cookies are used on this site:"
      11. Confirm that you see "Log in using your account on:"
        1. Confirm that each login method appears on its own line within a border
        2. Confirm that the login method "Some super long login method that will highlight issues with the login page width foo bar testing content andy" appears on two lines but does not interfere with other login methods
      12. Log in to the site
      13. Log out
      14. Navigate to the login page
      15. Confirm Your username is auto-populated
      Show
      Setup: Enable oauth2 authentication Navigate to Server > OAuth 2 services Create a new dummy Google service (Dummy values are fine this test is not testing the service) Create a new custom service Set the "This service will be used" field to Login page only Set the "Name displayed on the login page" to "Some super long login method that will highlight issues with the login page width foo bar testing content andy" Set the rest of the required fields (Dummy values are fine this test is not testing the service) Test: Ensure you are logged out Navigate to the login page Confirm there is only the minimal footer (? with the popup) Confirm That you do not see "Cookies must be enabled in your browser" Confirm You see "Lost password?" instead of "Forgotten your username or password?" Confirm You do not see the "Remember password" checkbox Confirm That the text fields now use the form-control-lg class Confirm That the language selector is now at the bottom of the form with a divider to the right Click the "Cookies notice" Confirm that a modal appears Confirm that the title is "Cookies must be enabled in your browser" Confirm that the body text has the following: "Two cookies are used on this site:" Confirm that you see "Log in using your account on:" Confirm that each login method appears on its own line within a border Confirm that the login method "Some super long login method that will highlight issues with the login page width foo bar testing content andy" appears on two lines but does not interfere with other login methods Log in to the site Log out Navigate to the login page Confirm Your username is auto-populated
    • 3
    • Navigation push 11, Navigation push 13

      I'm going to suggest that we further simplify the design of the login page as there are a number of UI features which belong in the previous century, and the design is still slightly too cluttered.

      In short, I'm going to suggest that we should consider some more drastic changes:

      1. Remove the Footer entirely - especially when it is empty, but also consider hiding the performance info (collapse it perhaps) when stats are shown
      2. Make the login region wider. For some reason it appears narrower now than it does on the screenshots from when Angelia tested MDL-69371 - considerably narrower.
      3. Remove the Cookies warning - we should only show information about this when a login fails because cookies are not enabled. It's a standard feature of browsers and very very few people disable cookies. Logins are too prevalent these days to consider disabling them entirely.
      4. Reword the "Forgotten your username or password?" link to simply "Forgot password?"
      5. Remove the "Remember username" checkbox entirely. This should be the default. I quite like what Chrome have done whereby they show information on how to open a private browsing window if you do not want your login to be remembered. This is a much safer and more user-friendly approach.
      6. Make the username and password fields taller. At the moment they're really short but they are the main focus of this page. We should make the area that users are expected to interact with more prominent. Equally we can increase the padding around them to make the area clearer.
      7. Move the Language selection to beneath the username and password fields. The Username field should be the first field in the tab order
      8. The "Username / email" placeholder text should read "Username or email" rather than having a slash (not very user friendly)
      9. I'd like to suggest that we move the Cookie warning, to a new page which opens in a popup. It can also have the information on starting a private browsing session, and any other help we need to show in future (i.e. password recovery for admin, etc.).

      Comparing a number of other big login screens, none of them has the "Remember" or Cookie warnings.

      Mockups

      Current:

      Minimum width:

      Simplified by removing Cookies prompt, and replacing "Remember username" with instructions for private browsing

        1. 2021-10-28_17-22.png
          72 kB
          Brendan Heywood
        2. 2021-10-28_17-25.png
          15 kB
          Brendan Heywood
        3. Current.png
          3.00 MB
          Andrew Lyons
        4. Current but wider (380px min).png
          3.66 MB
          Andrew Lyons
        5. Current login.png
          791 kB
          Mathew May
        6. Current with alt login methods.png
          3.66 MB
          Andrew Lyons
        7. Current without debug footer.png
          3.69 MB
          Andrew Lyons
        8. Facebook login.pdf
          72 kB
          Andrew Lyons
        9. Firefox Sync login.png
          323 kB
          Andrew Lyons
        10. Footer removed and input fields taller.png
          3.72 MB
          Andrew Lyons
        11. Github login.pdf
          18 kB
          Andrew Lyons
        12. Google login.png
          1.12 MB
          Andrew Lyons
        13. MDL-72928 testing.webm
          2.15 MB
          Angelia Dela Cruz
        14. Moodle (EN) Log in to the site.pdf
          380 kB
          Andrew Lyons
        15. Proposed login.png
          803 kB
          Mathew May
        16. Proposed login with modal.png
          687 kB
          Mathew May
        17. Screen Shot 2021-10-28 at 15.50.10.png
          147 kB
          Andrew Lyons
        18. scrollbar-caused-by-language-menu.png
          69 kB
          Jun Pataleta
        19. Simplified but missing Help link and Private browsing instructions.png
          3.73 MB
          Andrew Lyons
        20. Ubuntu One login.pdf
          40 kB
          Andrew Lyons
        21. With private browsing prompt.png
          3.63 MB
          Andrew Lyons
        22. Yahoo login.pdf
          26 kB
          Andrew Lyons

            mathewmay Mathew May
            dobedobedoh Andrew Lyons
            Andrew Lyons Andrew Lyons
            Jun Pataleta Jun Pataleta
            Angelia Dela Cruz Angelia Dela Cruz
            Votes:
            1 Vote for this issue
            Watchers:
            16 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 1 hour
                4d 1h

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.