Update login screen for existing logged in user

[razvanpapadopol]

Changes proposed in this Pull Request

• increase the gravatar image size and remove login form and other links from initial view
• display Log in with another account text below with a link to show login form and everything else

Testing instructions

• Stay logged-in
• Open /log-in

Fixes (together with #40314): #39988
Related: #35309

[matticbot]

Test live: https://calypso.live/?branch=update/login-continue-as-user

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~144 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-login       +698 B  (+0.1%)     +144 B  (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Async-loaded Components (~150 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks       +705 B  (+0.0%)     +150 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[simison]

Tests well. Tested:

• connecting Jetpack, no signup form presented when already logged in
• open /log-in and /log-in/en as authenticated, non-authenticated, and 2fa users
• open /log-in?site=SITE_SLUG same as above
• Tested that actually logging in with another user in this scenario worked

With ?site=SITE_SLUG still works (my name is the site name in this case):

Non-2FA user, no first+lastname set, english locale:

With 2FA user in different locale:

(These texts just need translating)

[simison]

Added [Status] String Freeze label to ensure these are sent to translation before we merge this.

[simison]

There's a short gap when the login form is rendered while data loads and this avatar step isn't loaded:

https://cloudup.com/cL5OLeTemOW

Assuming that would be the case even if we would constantly show the form, this isn't a big change in behavior.

To prevent this, we should hide the login form until API response tells us that the user in-fact is logged in. That would delay the login form visibility for many, while this visual jump is visible to few, so I think it's acceptable.

@Automattic/team-calypso @sgomes would you like to review/test this before merging as it's touching the login landingpage?

[sgomes]

@Automattic/team-calypso @sgomes would you like to review/test this before merging as it's touching the login landingpage?

Thanks, @simison! I think this PR mostly deals with UI questions, not performance issues, so I'm going to leave any considerations to more knowledgeable folks in that area. There seems to be nothing concerning, perf-wise, from a brief glance at the code and the ICFY results.

[simison]

@sgomes sure, no worries 👍 Just pinged you because you introduced the initial feature in #35309 and wanted to make sure I'm not missing anything. :-)

[sgomes]

@sgomes sure, no worries 👍 Just pinged you because you introduced the initial feature in #35309 and wanted to make sure I'm not missing anything. :-)

Thank you for keeping me in the loop, @simision! 🙂 It's nice to see folks taking the idea and improving it further 🎉

[simison]

Some of the test failures seem related (test runner cannot see an element with #usernameOrEmail) and might need adjusting before the merge.

[amamujee]

Not sure if it's something weird with my browser but some of the spacing looks off and the old login screen appeared for a second before the new shiny one.

[lancewillett]

Looking good! Quick test in Firefox latest stable on macOS, using a test user (non-Automattician).

Before	After

Click thumbnails for large view.

[razvanpapadopol]

Thanks for checking this out @amamujee !

some of the spacing looks off

Looks like the new CSS definitions included in this PR are ignored by your browser. I'm not sure if there can be a caching issue given the hash in the live URL. Anyway if this doesn't go away with a hard refresh (CMD + shift + R in Chrome), please share the browser version. I've tested in latest Chrome/Firefox/Safari including mobile and it looks fine.

old login screen appeared for a second before the new shiny one.

This is the UI issue @simison mentioned earlier and it's illustrated in this demo: https://cloudup.com/cL5OLeTemOW
We need to decide if the jump is acceptable from UX perspective because hiding the login form until user data is available would cause a delay (1 second or more depending on the bandwidth) in showing the whole login block. cc @Automattic/dotcom-create-design

[simison]

We need to decide if the jump is acceptable from UX perspective because hiding the login form until user data is available would cause a delay (1 second or more depending on the bandwidth) in showing the whole login block.

We could ease it a bit by fading the avatar into the view, so it'll look more intentional instead of the sudden jump.

[lancewillett]

Comment on the idea to improve the jump. Let's ship without that for now. Because this change was meant to be a quick adjustment to a much-used screen, speed is more important than perfect.

The change is already a major improvement for users, and those additional improvements fall into the nice-to-have category, "maybe later."

[amamujee]

How hard is the fade to implement?

When I tried it, I personally felt it was pretty jarring and also like there was a bug or screen that I missed that made me feel anxious. If the fade is not easy, I think the delay is a better UX than the disappearing screen for 1 second (although I've not tried it side by side).

I think @razvanpapadopol and @simison should make the call here though.

[razvanpapadopol]

Some of the test failures seem related (test runner cannot see an element with #usernameOrEmail) and might need adjusting before the merge.

Yes, some of the tests were expecting the login form to always be there. Fixed in 898153b

cc @Automattic/e2e-test-reviewers

[lancewillett]

@razvanpapadopol What do you think about @simison's suggestion to hide the login form until the API request is successful?

Now that I understand the issue, I can see how the login form hide / show delay even on a fast connection is not ideal.

Another suggestion is to use a loading icon and then once ready, show the correct version of the page.

fixed the failing e2e tests by implemented suggested change. Thanks!

[simison]

Looks good and works well. 👍

Once translations are done, we can switch to final texts in a separate PR.

Thanks for tackling this one!

[razvanpapadopol]

Once translations are done, we can switch to final texts in a separate PR.

Merging this one now and once translations are ready we can do the switch on #40314 🚀

[lancewillett]

🎉 Testing it live on iPhone XS with mobile Safari — smooth transition and works as expected.

[olaolusoga]

Late design feedback, it'd be great to get these changes in before pushing:

After looking at Non-2FA user, no first+lastname set, english locale: screenshot, made small adjustments to address translation, and longer usernames.

Design feedback:

• Bump down the gravatar width/height to 110px—it's currently at 200px.
• Add 1px border to gravatar. Border color: #A7AAAD
• Gravatar should be clickable—it isn't at the moment.
• Can we make sure everything is center.
• Remove username from button, and add below gravatar image (see mock)
• Update copy from "Not [username]? Login in with a different account" to "Not you?
  Log in with another account" (see screenshot)

Updates
Only first name

First and last name

no first and last name, no set gravatar image

Updates map closely to mobile view. Here's mobile view mock (for reference on things to adjust):

[lancewillett]

Work still needed to wrap up the feedback: #40314

[roo2]

created #40556 to capture the design feedback