Improve password recovery experience

[mikermcneil]

This is part of the following Q2 OKR: "Deliver a simple, trustworthy, actively-used product that works every time."

Goal

As a user, I want to see a consistent, better-looking user experience when going through the password recovery flow.

As a user using an instance of Fleet without SMTP set up, I want a better password recovery experience that makes it clear that I will need help from an admin to reset my password. (This is related to #3059)

Related

New FAQ entry: #5619

Figma

Improve password recovery experience: https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/?node-id=5982%3A255515

Tasks

1

• On the Login page, update the "Forgot password?" button's font weight to bold.
  

2

• Update the Forgot login page (/login/forgot) update the copy to: "Enter your email below to receive an email with instructions to reset your password."
• Add a close button icon. This icon will take the user back to the Login page.
  

3

• On the Forgot login page, update the success state displayed after the user enters their email.
• Update the copy to the following: "An email was sent to {supplied_email}. Click the link in the email to proceed with the password reset process. If you did not receive an email please contact your Fleet administrator."
  • Use bold font weight for {supplied email}
• Add a link to a new FAQ entry: fleetdm.com/docs/using-fleet/faq#how-do-i-reset-my-password
• Add a "Close" button and a close "X" icon. These will both take the user back to the Login page.

Notes

The linked FAQ page, doesn't exist yet.

/docs/using-fleet/faq#how-do-i-reset-my-password will outline how a user can have their password reset (by a Fleet administrator) or by receiving an email.

The second scenario, email, will only work if SMTP is configured properly. The FAQ should mention this and either provide steps to configure SMTP or link out to the proper existing documentation.

[noahtalerman]

TODO Reed: Add entire screen around the cards to indicate that the page changes (new URL)

[noahtalerman]

TODO Noah:

• Add specs to issue
• Break out a separate issue for FAQ

[noahtalerman]

@xpkoala heads up, I'm removing you as an assignee from this issue.

I'm adding myself to file a separate issue and complete specs for this issue.