Email Settings: add "valid email" and "verified email" status

[shaunanoordin]

PR Overview

Staging branch URL: https://pr-7083.pfe-preview.zooniverse.org
Towards #7032

This PR adds "🟢 valid / 🔴 invalid email" and "🟢 verified / 🔴 unverified email" indicators to the Email Settings page (under User -> Settings -> Email)

• These indicators are based on the user.valid_email and user.confirmed_at values of the User resource.

Status

Ready for review.

Next steps: the "request confirmation email" functionality requires either

1. a fairly custom (and complex) fetch() function inside email.jsx to POST to panoptes.zooniverse.org/api/users/confirmation with the auth token inside the code, or
2. an update to PJC to do the same, or
3. as a placeholder, a simple link to https://panoptes.zooniverse.org/users/confirmation/new

For this PR, the "request confirmation email" has been disabled. (I got halfway through option 1 but ran into some bugs due to a malformed request, and option 3 hit a small snag when I realised I need to check the env to get the correct URL.)

[coveralls]

coverage: 56.994% (+0.01%) from 56.98%
when pulling 6125950 on email-verification-status
into b8cf174 on master.

[eatyourgreens]

Some comments on how to make this work for screen reader users.

[eatyourgreens]

This icon will be missed by a screen reader. As an aside, icon fonts aren’t really used in web development any more, because they can cause accessibility problems.

[goplayoutside3]

Looks good! Please remove the new translations from all dictionaries other than en.js, and good to consider the accessibility comments from Jim.

On this PR branch I'm able to sign-in to my account and see that my email is valid and verified. If I create a new account, the email correctly shows it's unverified until I follow the confirm-email email. I can also edit the email validity of my account by removing the "@". I'll note that if my account has an invalid email, and I edit it to a valid email, a page refresh is not required for the settings indicator to change to "valid". However, if I change from a valid email to an invalid email, a page refresh is required to see the "invalid" indicator. Not a blocking behavior, but worth noting the quirk.

[shaunanoordin]

Thank you! 👍 I'll address the following feedback before I merge:

• accessibility.
• removing non-'en.json' translations.

The "request confirmation email" functionality will appear in a follow up PR.