[Enhancement] for expired password reset link in sign-up flow

[joshbeam]

Steps to reproduce condition where there could be a UX enhancement:

1. on desktop, visit c0d3.com
2. sign-up as new user
3. receive password link in email
4. wait until link has expired
5. open link on mobile device
6. see message "link has expired, request a new password reset"

Suggested enhancement: allow users to request the new password reset from this screen (I navigated to log-in and then to "Forgot your password?" in order to complete the sign up flow after the link initially expired)

Note: I only mentioned the devices (desktop and mobile) because that was how I encountered the issue, but I assume it's the same across a single device

[joshbeam]

The root cause of the expired link portion may be a duplicate of: #244

(I signed up with an uppercase email because of my browser's autofill)

[danielthalhuber]

I've outlined a few options below that involve minimal changes to the confirm/[token] component.

In looking at the first 3 options, it occurred to me that the form is no longer necessary if the token/link has expired. Option 4 removes the form and just leaves an Alert wrapped in a NavLink. This might be the better UX option.

Please let me know which (if any) of the the options makes the most sense. Have a different idea? Please let me know.

Option 1

• Description: add link to existing "Request a new password reset" text

• Pro: minimal code change (just pass different props to Alert)

• Con: user might not know to click on "Request a new password reset" text (poor call to action?)

• Example

  

Option 2

• Description: wrap the Alert in a NavLink

• Pro: somewhat improved call to action

• Con: none, unless wrapping an Alert in a NavLink is a discouraged pattern (since Alert already has an internal NavLink implementation)

• Example:

  

Option 3

• Description: Move the string "Request a new password reset" from the original Alert to a separate, informational Alert

• Pro: clearer call to action

• Con: ugly/busy UI

• Example:

  

Option 4

• Description: wrap the Alert in a NavLink and remove form

• Pro: clear(est) call to action, no unnecessary UI clutter

• Con: ???

• Example: