Make changes to Login-Related Screens

[entrotech]

Overview

This issue addresses a number of mostly minor changes to the Login and Registration - related screens. Note that changes to these screen concerning the Header #1303 and #1304 and Footer #1302 are addressed in separate issues.

Action Items

• [ ] On the Forgot Password screen, remove the Register link and center the Login Link, renaming it to "Return to Login".
• [ ] On the same screen, change the label on the button to "Send Password Reset Link". The wireframe shows this button text using title casing (the first letter of each word capitalized), but the other screens' action button have labels in all caps, so we need to find out from @JohnHaoHuang if this is intentional.
• [ ] When the "Send Password Rest Link" is pressed, and the password is successfully transmitted, the current design shows a toast message. Get rid of the toast message and replace it with a screen as shown in the Figma wireframe called "Reset Password Link". If the request is not successful (i.e., the entered email does not correspond to a registered user, then retain the current behavior of displaying the toast (right @JohnHaoHuang ?)
• [ ] When the user receives the reset password email and clicks on the "RESET PASSWORD" link, they arrive at the Reset Password Screen. This screen should be modified by:
  • [ ] Changing the title to Password Reset
  • [ ] Changing the placeholders to "New Password" and "Confirm Password", respectively, and
  • [ ] Removing the "Forgot Password?" link.
  • [ ] Until both New Password and Confirm Password fields are valid, the Reset Password button should be disabled.
• [ ] After the password has been successfully reset, return to the Login page, but the Login Page should display the "Password has been successfully updated" message above the lock icon, as shown in the "Password Reset, Return to Login" wireframe.

Resources/Instructions

For questions about the design, work with @JohnHaoHuang

The figma file link is https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2943%3A7813

The Sections are called "Recommended Food Oasis Workflow - there are two of these - one for desktop and one for mobile.

[JohnHaoHuang]

Yes. The blue button label should all have capitalization on each word. For example, "Send Password Reset Link".

That is right, for an unsuccessful password reset link, when the entered email does not exist in the data base or invalid, then the border line will turn red and a red message will display an error message for the user. Something like "the email does not match within data or is invalid.

[staceyrebekahscott]

@VirginiaWu11 Approved issue, added Milestone and moved to In Progress.

[VirginiaWu11]

@JohnHaoHuang Hey John, I believe all our buttons in the application have all letters capitalized. Are we changing all buttons to first letter of each word capitalized or only for specific buttons?

[JohnHaoHuang]

@VirginiaWu11 Hi Virgina, Thank you for pointing that point. After reviewing the screens, please keep all the buttons capitalize. I have also updated the Figma File and other post regarding the toast message. For example, "RESET PASSWORD" and "SEND PASSWORD RESET LINK".

Please Refer to FIgma Link: https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2943%3A7813