Inform user of Sync/FxA errors

[jaredhirsch]

Child of #38

If the user is logged in to Sync, there are two edge cases we might bump into:

1. their email is unverified
2. their password was changed on another device, so the locally-cached password is stale, and they need to sign in again to sync

In both cases, the existing desktop code redirects the user to the sync preferences page (about:preferences#sync) to fix their situation.

Acceptance criteria

• Should redirect to the same endpoint
• Should alert the user when the email is unverified
• Should alert the user when the Account password changed
• Should define own entrypoint in telemetry

Open questions:

• Product: Do we want to just redirect to that same endpoint? Assuming yes, more questions:
• Eng: We should be able to open the correct link via either gSync.openPrefs or gSync.openSignInAgainPage() (usage example) from an embedded API experiment. Need to make sure gSync is available in an API experiment js file (it should be).
• UX: What kind of UX do we want to offer in Lockbox for those cases? Some kind of info screen and a button to redirect to the preferences page? Show an alert badge over the icon?
• Telemetry question: The existing desktop hamburger menu item appends a query string when sending users to the sync preferences page: "about:preferences?entrypoint=menupanel#sync". Do we need to register a new entrypoint? (markh's thinking was that this query string is part of fxa server telemetry, ingested via amplitude, so, maybe it's dynamic and "entrypoint=lockbox" doesn't need to be explicitly registered anywhere)

Visual Design

InVision
Full View: https://mozilla.invisionapp.com/share/ENOL84959AK#/343774936_Logins_-_Sync_Issue_-Light-
Full View - User Menu: https://mozilla.invisionapp.com/share/ENOL84959AK#/343989952_Logins_-_Sync_Issue_-_Menu_-Light-
Doorhanger: https://mozilla.invisionapp.com/share/ENOL84959AK#/343777425_Doorhanger_-_Sync_Issue_-Light-

Zeplin
Full View: https://zpl.io/2ZjOwLJ
Full View - User Menu: https://zpl.io/adrod9e
Doorhanger: https://zpl.io/VOKELQl

*Link would direct to sync preferences

Requires #92

[linuxwolf]

From an IRL discussion between @6a68 and I:

• The distinction between "email is unverified" and "password was changed/invalidated" is likely irrelevant to Lockbox; the user action ("Go to Sync preferences and follow the directions") is the same.
• The moment-in-time account status (none/active/failed) is readily obtainable (technical details ensue):
  • none is currently in the API proposal as returning no profile
  • active is in the API proposal as returning a profile
  • failed is not yet in the API proposal

[jaredhirsch]

Nick was asking for some UX details on Slack, and it occurs to me that it would be good info to include here:

---

When your password becomes stale, if the hamburger menu is closed, it gets a little caution icon badge:

When you open the hamburger menu, the Sync menu item is highlighted yellow, and a warning message is shown:

Clicking on the sync menu item goes to the usual about:preferences#sync page, which shows some explanatory messaging, along with buttons to sign in or disconnect sync:

Note that we can use special built-in Firefox code to take users from the Lockbox management UI directly to the Sync page shown above.

[irrationalagent]

@6a68 I think we should definitely define our own entrypoint, my suggestion would be lockbox-extension or similar, not just lockbox because that may show up in the fxa telemetry elsewhere e.g. in the mobile apps.

the parameter value has to pass the regex documented here