Improve Talk Error Messages - email verification and banned

[lcjohnso]

Current behavior

If a user is banned or has an unverified email address (after email verification is deployed -- see https://github.com/zooniverse/talk-api/pull/311), the user is shown an error message when they try to post on Talk: not allowed to create this Comment

Expected / new behavior

Provide an informative error message that describes the reason why the user was unable to post a comment.

• For banned users: "You are banned. Email contact@zooniverse.org for further information."
• For unconfirmed users: "Your account email address is not yet confirmed. Please check your email for confirmation instructions, or visit https://www.zooniverse.org/settings/email to request new confirmation email."
  • Wording based on volunteer feedback in this Freshdesk ticket.

Note Regarding Existing Behavior for DMs:

• Case 1: When trying to send a DM or access a user page (e.g., https://www.zooniverse.org/users/lcjohnso) as a banned user, the error message presented to the user is You are banned, matching the response payload from the Talk API ({"error":"You are banned"}).
• Case 2: When trying to send a DM as a user with an unconfirmed email, the error message presented to the user is You must confirm your account, matching the response payload from the Talk API ({"error":"You must confirm your account"}).
• Together: these error messages provide OK feedback, and must result from a slightly different error case than when the user is trying to add a post to a Talk thread. Further improvement is a nice-to-have -- see messages above.

Steps to replicate

Try to post using an account that is unverified or banned.

[lcjohnso]

Note: the following relevant fields are serialized out into the https://www.zooniverse.org/api/me response:

• In case of banned user: "banned": true
• In case of unconfirmed email: "confirmed_at": null

[lcjohnso]

Error from Talk (i.e., not allowed to create this Comment) could be caught in similar way to this case for the Lab's collaborator page: https://github.com/zooniverse/Panoptes-Front-End/blob/master/app/pages/lab/collaborators/CollaboratorCreator.jsx#L78-L83

[shaunanoordin]

Dev Notes

Here's a breakdown of everything I'm accounting for.

Possible causes for error states:

• User is banned (takes precedence over everything else)
• User is not verified (email not verified)

Possible avenues for error states:

• Creating a discussion: https://www.zooniverse.org/projects/darkeshard/test-project-2022/talk/269?env=staging
  • POSTing to https://talk-staging.zooniverse.org/discussions
• Posting a comment: https://www.zooniverse.org/projects/darkeshard/test-project-2022/talk/269/407?env=staging
  • POSTing to https://talk-staging.zooniverse.org/comments
• Sending a DM: https://www.zooniverse.org/inbox?env=staging
  • POSTing to https://talk-staging.zooniverse.org/conversations

NOTE: if a user is banned, they may not even get the opportunity to reach the possible avenues above, or see the "you are banned" message.

• Talk pages won't even load.
• When attempting to send a DM, the username search is blocked (meaning the pertinent error message they see is "you need to type in a username")
• There are error messages in the console, but nothing obvious is displayed to the user.
• Fixing this may be beyond the scope of this issue, but still worth noting.

Known error messages/error responses:

• Creating a discussion, but banned: 🔴 403 {error: "You are banned"}
• Posting a comment, but banned: 🔴 403 {error: "You are banned"}
• Sending a DM, but banned: 🔴 403 {error: "You are banned"}
• Creating a discussion, but unverified: 🟣 401 {error: "not allowed to create this Discussion"}
• Posting a comment, but unverified: 🟣 401 {error: "not allowed to create this Comment"}
• Sending a DM, but unverified: 🟠 403 {error: "You must confirm your account"}

Shaun TODO: note that when unverified, there are two possible 🟣 🟠 error responses. The 🟣 401s return a very generic "nuh-uh" so a helper function should check for user.confirmed_at.

For all avenues listed above, the affected component is <CommentBox> (link), at the onSubmitComment's .catch() (link)