Email verification link #7117

shaunanoordin · 2024-06-01T02:25:19Z

PR Overview

Staging branch URL: https://pr-7117.pfe-preview.zooniverse.org/settings/email
Follows #7083, towards #7032

This PR adds a link to the Email Settings page (under User -> Settings -> Email), which allows users to request a confirmation email from Panoptes.

New behaviour:

This link only appears if your account's email is unverified.
Clicking on the link will send a request to Panoptes, to send the confirmation email.
Status messages:
- Idle: "Resend confirmation email" (link)
- Requesting: "Requesting..."
- Success: "Confirmation email requested, please check your inbox"
- Error: "ERROR: could not request confirmation email"

Testing

Login using a test account with an unverified email.
Go to the Email Settings page.
Click on the "Resend confirmation email" link.

Status

⚠️ WIP - this PR is not yet functional.

As of commit aeaeca2, there's a problem where sending the request results in a 406 error, at least for staging.

coveralls · 2024-06-01T02:28:17Z

coverage: 56.94% (-0.03%) from 56.969%
when pulling 14eb6ec on email-verification-link
into 5150a5e on master.

app/pages/settings/email.jsx

app/pages/settings/helpers/getBearerToken.js

eatyourgreens · 2024-06-01T07:08:05Z

app/pages/settings/email.jsx

-                  </a>
-                  */}
+                  {(this.state.requestConfirmationEmailStatus === 'idle') && (
+                    <a href="#" onClick={this.requestConfirmationEmail}>


This link links back to the current page. I think you meant to use a button here. In a screen reader, or even as a sighted user, I would expect the browser to navigate to a new location after clicking a link. I think the screen reader is more confusing, as this will be announced as a link, but the browser doesn't navigate anywhere after I click it (very confusing if I can't see the page.)

See the WebAIM accessibility cheat sheet for more info about accessible links, but the code here would fail an accessibility audit.

eatyourgreens · 2024-06-01T08:24:10Z

By the way, 406: Not Acceptable is the response when content negotiation fails, so my first thought would be to look at the Accept headers.

However, when the 406 Not Acceptable response is returned, the message body will contain a list of available representations that the client can choose from.

https://http.dev/406

app/pages/settings/email.jsx

eatyourgreens · 2024-06-01T08:33:02Z

If I go to https://pr-7117.pfe-preview.zooniverse.org/settings/email, then change my email address to a totally new email address, the page still says my email is verified. Is that a bug that I can exploit in order to get around spam blocks?

I tested this by switching between an address on a personal domain that I own (which is verified), and my work address on the ox.ac.uk domain (which is not verified.)

EDIT: when I changed my email address, the old address didn't get an email to say 'hey, someone changed your email address to a new address.' That's possibly an exploitable security hole too. Or maybe the notification emails are being a bit slow today.

EDIT THE EDIT: I've now changed my email address a few times, swapping between personal and work domains. I haven't had any email notifications to say that someone else may have changed my email address, or that there's potentially suspicious activity on my account.

eatyourgreens · 2024-06-03T08:55:07Z

Here's a weird bug (particularly if I'm using a screen reader, or colour blind, so don't see the change in colour of the input label.) When I delete my email address completely, I'm told the empty box is both valid and verified. When you're using colour like this, it's good practice to test your component in a greyscale mode, to catch accessibility failures where colour is being used to convey important information.

There's also no button to submit changes. That's another potential accessibility failure. I guess that if I'm on a phone or tablet, I can discover by trial-and-error that tapping outside the box will save changes, but the UX is less than ideal.

Screen.Recording.2024-06-03.at.09.52.23.mov

app/layout/account-bar.jsx

shaunanoordin · 2024-06-17T19:11:15Z

PR Update

Update: the resend confirmation email link should now be fully functional!

406 error has been resolved by actually sending the correct request format.
- To be specific, the solution was: 1. POST to the correct URL, 2. header should only include Content-Type and charset, 3. body/data should NOT be in JSON format, 4. NOTHING ELSE
Reviewing Zach's example, I realised I was overthinking what actually needed to be sent. As a result, all code require getBearerToken() has been stripped out, and all attempts to make the POST request resemble a PJC JSON API client request have been removed.

Status

This PR is ready for review.

A follow up is required to address the accessibility feedback.

lcjohnso · 2024-06-17T19:28:13Z

Great work, Shaun! I can confirm this solution works when tested for an unconfirmed user account.

I agree with Jim's comment regarding link vs. button. When "Resend Confirmation Email" appears as a clickable link -- as Sean and I recommend -- it is a bit odd to see https://pr-7117.pfe-preview.zooniverse.org/settings/email# as the link destination. Now that I've used the feature, I'd prefer a button so I don't expect to navigate away to a different page.

Sorry for the indecision! @seanmiller26 -- are you OK with a button instead of a link?

seanmiller26 · 2024-06-17T19:48:25Z

Sure, that sounds good. Let's use this style of button design - #ffffff fill with #005d69 outline, 4pt rounded corners, 16pt font.

shaunanoordin · 2024-06-18T16:02:40Z

PR Update

Thanks for the feedback, everyone!

Accessibility updates:
- Status messages are now inside <output>
- "Resend email" link replaced with button. (@seanmiller26 see design notes below)

Design note 1: button looks like this. Font size is kept consistent with rest of text, which is... uh... 13.3333px? PFE is weird like that.

(If you're curious to see what the button looks like with font-size: 16px, click here)

Design note 2: hover & click has a different background.

Design note 3: status text

For further discussion, but won't be addressed in this PR:

❓ can an email be un-verified by changing it? Does changing an email mean it's still verified?

lcjohnso · 2024-06-18T17:18:34Z

@shaunanoordin -- I can answer this one:

❓ can an email be un-verified by changing it? Does changing an email mean it's still verified?

No. Once verified, the account is always considered verified, which is more about confirming the validity of the account rather than the email. See zooniverse/panoptes#4268 (comment).

eatyourgreens · 2024-06-19T07:52:43Z

Yep,once I've verified an account, I can change the email address to any valid email address at all, without the owner of that address being notified that their address is being used.

lcjohnso · 2024-06-19T16:51:11Z

re: email notifications -- I've opened zooniverse/panoptes#4351; that is out of scope for this PR and will be resolved separately.

kieftrav

Works as expected and code looks good!

kieftrav · 2024-06-26T18:06:47Z

app/pages/settings/email.jsx

+                      'posting': <Translate content="emailSettings.general.emailUnverifiedRequesting" />,
+                      'success': <Translate content="emailSettings.general.emailUnverifiedSuccess" />,
+                      'error': <Translate content="emailSettings.general.emailUnverifiedError" />,
+                    }[this.state.requestConfirmationEmailStatus] || ''}


…hing's wrong

eatyourgreens reviewed Jun 1, 2024

View reviewed changes

app/pages/settings/email.jsx Show resolved Hide resolved

eatyourgreens reviewed Jun 1, 2024

View reviewed changes

app/pages/settings/helpers/getBearerToken.js Outdated Show resolved Hide resolved

eatyourgreens reviewed Jun 1, 2024

View reviewed changes

app/pages/settings/email.jsx Outdated Show resolved Hide resolved

shaunanoordin force-pushed the email-verification-link branch from aeaeca2 to ef2da95 Compare June 17, 2024 17:37

shaunanoordin requested a review from a team June 17, 2024 18:51

shaunanoordin commented Jun 17, 2024

View reviewed changes

app/layout/account-bar.jsx Outdated Show resolved Hide resolved

shaunanoordin force-pushed the email-verification-link branch from 4e510e3 to c7387ee Compare June 18, 2024 16:02

shaunanoordin force-pushed the email-verification-link branch 2 times, most recently from c2e095e to b4296ef Compare June 18, 2024 21:15

lcjohnso mentioned this pull request Jun 19, 2024

Email notification for email address change should be sent to old address zooniverse/panoptes#4351

Closed

shaunanoordin force-pushed the email-verification-link branch from b4296ef to 518f6a0 Compare June 25, 2024 15:23

kieftrav requested review from kieftrav and removed request for a team June 26, 2024 18:02

kieftrav approved these changes Jun 26, 2024

View reviewed changes

shaunanoordin added 4 commits June 27, 2024 15:38

WIP: setup for confirmation email

9686e4c

WIP Confirmation email: setup status vars

520c263

Add functionality to requestConfirmationEmail(). Unfortunately, somet…

90d3bdd

…hing's wrong

requestConfirmationEmail(): change Header

44b78ce

shaunanoordin added 5 commits June 27, 2024 15:38

Fix requestConfirmationEmail(). Now works! Probably!

91c7e93

remove getBearerToken

87603da

account-bar: remove accidental error-remover

982b07c

PR feedback: accessibility 'output', change link to button

4acca7e

Style button

14eb6ec

shaunanoordin force-pushed the email-verification-link branch from 518f6a0 to 14eb6ec Compare June 27, 2024 14:38

shaunanoordin enabled auto-merge (squash) June 27, 2024 14:39

shaunanoordin merged commit d7f9954 into master Jun 27, 2024
5 checks passed

shaunanoordin deleted the email-verification-link branch June 27, 2024 14:40

lcjohnso mentioned this pull request Aug 7, 2024

Add email verification and validity status to email settings page #7032

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Email verification link #7117

Email verification link #7117

shaunanoordin commented Jun 1, 2024 •

edited

Loading

coveralls commented Jun 1, 2024 •

edited

Loading

eatyourgreens Jun 1, 2024 •

edited

Loading

eatyourgreens Jun 1, 2024

eatyourgreens commented Jun 1, 2024 •

edited

Loading

eatyourgreens commented Jun 1, 2024 •

edited

Loading

eatyourgreens commented Jun 3, 2024 •

edited

Loading

shaunanoordin commented Jun 17, 2024

lcjohnso commented Jun 17, 2024 •

edited

Loading

seanmiller26 commented Jun 17, 2024

shaunanoordin commented Jun 18, 2024

lcjohnso commented Jun 18, 2024

eatyourgreens commented Jun 19, 2024

lcjohnso commented Jun 19, 2024

kieftrav left a comment

kieftrav Jun 26, 2024

Email verification link #7117

Email verification link #7117

Conversation

shaunanoordin commented Jun 1, 2024 • edited Loading

PR Overview

Testing

Status

coveralls commented Jun 1, 2024 • edited Loading

eatyourgreens Jun 1, 2024 • edited Loading

Choose a reason for hiding this comment

eatyourgreens Jun 1, 2024

Choose a reason for hiding this comment

eatyourgreens commented Jun 1, 2024 • edited Loading

eatyourgreens commented Jun 1, 2024 • edited Loading

eatyourgreens commented Jun 3, 2024 • edited Loading

shaunanoordin commented Jun 17, 2024

PR Update

Status

lcjohnso commented Jun 17, 2024 • edited Loading

seanmiller26 commented Jun 17, 2024

shaunanoordin commented Jun 18, 2024

PR Update

lcjohnso commented Jun 18, 2024

eatyourgreens commented Jun 19, 2024

lcjohnso commented Jun 19, 2024

kieftrav left a comment

Choose a reason for hiding this comment

kieftrav Jun 26, 2024

Choose a reason for hiding this comment

shaunanoordin commented Jun 1, 2024 •

edited

Loading

coveralls commented Jun 1, 2024 •

edited

Loading

eatyourgreens Jun 1, 2024 •

edited

Loading

eatyourgreens commented Jun 1, 2024 •

edited

Loading

eatyourgreens commented Jun 1, 2024 •

edited

Loading

eatyourgreens commented Jun 3, 2024 •

edited

Loading

lcjohnso commented Jun 17, 2024 •

edited

Loading