Reset Password page has bad UI & UX (non-informative on errors, etc)

[shaunanoordin]

UI/UX Issue Bug

The Reset Email page has several UI and UX issues.

TL;DR:

• When you try to reset your password and encounter an error, no error message is displayed
• When you successfully reset your password, no success message is displayed, only an immediate redirect to a login prompt.
• You can access the password reset page while you're still logged in, in some cases.

(EDIT: updated this from a UI issue to an actual UI bug. There's an actual error in our error-catching code.)

Full Report

First, some context - there are TWO variations of the Reset Email page:

• Initiating a Password Reset: https://www.zooniverse.org/reset-password
  • Users reach this page by clicking Sign In -> Forgot my Password
• Confirming a Password Reset: https://www.zooniverse.org/reset-password?reset_password_token=ABC123
  • Users reach this version of the page via a link in a password reset email.
  • [ ] (SHAUN TODO: confirm that this is true for production password resets. You've only tested this with staging password resets, in which case the email link goes to Panoptes first, which then redirects to PFE's reset page. Yes, it's weird.)

OK, now to the issues.

• The "Initiate" version can't be accessed if the user is already logged in. ✔️ This makes sense.
  • The message you get is: "You are currently logged in. Please log out if you would like to reset your password."
• ❔ The "Confirm" version CAN be accessed if the user is already logged in. ✖️ This isn't a breaking issue, but makes less sense.
  • Caveat: with staging, the password reset link actually goes to something like https://panoptes-staging.zooniverse.org/users/password/edit?reset_password_token=ABC123 first, which actually stops you on the Panoptes page if you're logged in, but the actual PFE page it redirects you to on success doesn't have the same safeties.
• ❗ If the password reset action (on the "Confirm" version) runs into errors, no error message is displayed ❌ Screenshot: this is what you see after 1. you open the "Confirm" page with an INVALID password reset token, 2. type in a valid password, and 3. click on "Submit". Result: NO error messages are displayed, page remains as-is, but a 422 error is displayed in the dev console.
  • Tested with invalid password reset tokens, which is the most likely cause of errors.
  • This means users aren't aware when a password reset isn't successful!
  • "Invalid password" errors seem to be caught as expected.
  • ❓ If the password reset action (on the "Confirm" version) IS successful, you're immediately redirected back to the Projects page, with a login prompt. There is no success message.

Status

The lack of error messaging is the biggest problem here, as this may explain why some volunteers tell us they've "reset their password, but it still doesn't work". (Example: https://zooniverse.freshdesk.com/a/tickets/19558)

This may be affecting more users than we're aware of. Suggesting medium priority, at minimum.

[shaunanoordin]

Oh, butts - OK, there's an actual error in our error-catching code.

In reset-password.jsx, there's this code:

auth.resetPassword({ password, confirmation, token })
  .then(() => {
    ...
  })
  .catch((error) => {
    this.setState({
      resetError: error.message
    });
  })
  .then(() => {
    ...
  });

In the .catch() block, the error we get does NOT have an error.message when, for example, we get a 422 error from the server due to an invalid password reset token. As a result, state.resetError will be undefined, so it looks like there was no error!

The error is actually a HTTP Response object, not an Error/Exception object, so the actual error message is buried in error?.body?.errors?.[0]?.message === "Reset password token is invalid"

Suggested solution:

const errorMessage = error.message || error?.body?.errors?.[0]?.message || 'Unknown error';
this.setState({
  resetError: errorMessage
});