Email verification feedback

[yeraydiazdiaz]

Fixes #3590 , here are some captures:

Copy suggestions are welcomed and encouraged.

I couldn't find any tests for the actual rendering of the views, have I missed something or is this by design?

[pradyunsg]

LGTM visually. :)

[nlhkabu]

Hi @yeraydiazdiaz thanks for this PR 😁

From an accessibility perspective, we should give another indicator other than color to indicate status. This is for color blind users.

To do this, I think we should add a small icon inside each verified / unverified badge.

I'm thinking:

Badge class	Badge text	Badge icon	tooltip text / message
badge--success	Verified	fa-check	-
badge--warning	Verified	fa-exclamation-circle	Intermittent delivery problems may lead to verification loss
badge--danger	Unverified	fa-spinner	Verification in progress
badge--danger	Unverified	fa-exclamation-circle	Too many delivery problems
badge--danger	Unverified	fa-exclamation-circle	Hard failure during delivery
badge--danger	Unverified	fa-ban	Email from PyPI being treated as spam

Maybe we could also add a FAQ under https://pypi.org/help/#verified-email that describes each of these messages in detail?

We could link to the FAQ either from the tooltip, or by adding a link above the table, something like:

For more information on verification status', visit the [FAQ]

What do you think?

[yeraydiazdiaz]

Adding a badge makes total sense.

I don't think you can add a link in the tooltip though as the text is added in the arial-label attribute and putting and a tag would break the HTML.

[nlhkabu]

Ok, I thought that might be the case. In this case, we can add a separate link. Maybe, though, we can do this in a separate PR to keep this granular?

[yeraydiazdiaz]

Updated with icons and copy tweaks

[nlhkabu]

Looking good @yeraydiazdiaz! One thing - could we move the icons to the left of the text?
I'm also thinking that using exclamation-triangle might be better / clearer?

@dstufft are you happy with this text?

[dstufft]

The text looks fine to me.

[yeraydiazdiaz]

Updated location and exclamation-triangle:

[pradyunsg]

A super minor point -- we can probably drop the tick in the verified case, since it's redundant.

[nlhkabu]

I disagree @pradyunsg - I we should be explicit over implicit :) Also, visually, it is more consistent.

[dstufft]

Thanks! ✨

[pradyunsg]

I feel that having text only badge would be consistent with the badge beside it. ;)

As I said, it's a minor point anyway; I don't have a problem going either way and slightly prefer the one I'm suggesting. I'm not going to push for it. :)