SSF-122 auth page frontend #94
Conversation
dburkhart07
left a comment
dburkhart07
left a comment
There was a problem hiding this comment.
Mostly just some small nits. This looks amazing for a first pass!
| path: '/pantry-dashboard/:pantryId', | ||
| element: ( | ||
| <Authenticator components={components}> | ||
| <ProtectedRoute> |
There was a problem hiding this comment.
Note for later: The pantry id loader I think makes u navigate to a 404 error instead (while still navigating to request-form/1). I think my role based auth backend may have fixed this, but once this get's merged in we should check to see if it still works. If not, we may need to adjust how the ProtectedRoute and loader interact with each other.
| @@ -0,0 +1,195 @@ | |||
| import { useState } from 'react'; | |||
There was a problem hiding this comment.
I think the Figma file might have this different. Right now we have the resend code and reset password in one. The Figma however has them separated into 2 pages. Was this intentional?
There was a problem hiding this comment.
Yeah sorry, forgot to mention this in PR body but we are changing it such that these are on the same page
| : 'Please confirm your verification code and set a new password.'} | ||
| </Text> | ||
| </Box> | ||
|
|
There was a problem hiding this comment.
Perhaps here, can we also add the requirements for what the new password needs to be? I see there are some in place (i cant make mine 123), but perhaps specifying that is good UX. This would be specifying how long it needs to be, and any inclusion or exclusion of certain characters (probably as a list format)
dburkhart07
left a comment
dburkhart07
left a comment
There was a problem hiding this comment.
One small thing to investigate, but after that should be good!
| <Text textStyle="p2" color="#52525B"> | ||
| Your password must: | ||
| </Text> | ||
| <Text textStyle="p2" color="#52525B">• Be at least 8 characters</Text> |
There was a problem hiding this comment.
Are we sure this is what the criteria is? I successfully reset my password to 12345678910 and had no issues at all
3 participants
ℹ️ Issue
Closes https://vidushimisra.atlassian.net/jira/software/projects/SSF/boards/1?selectedIssue=SSF-122
📝 Description
I refactored the application to move away from using the prebuilt Authenticator component to handle AWS cognito functionality with amplify. This allowed me to manually call amplify api functions so that the login/signup flow frontend could be customized to match the figma designs. I also fixed the css styling issue that the authenticator component was causing by removing its use.
I added 3 new frontend pages: /login, /signup, and /forgot-password. The forgot-password page features a modal that will change based on if you are on the stage of setting a new password, or the verification code stage.
✔️ Verification
I went through all the login flow testing signing in, up, forgetting and resetting my password etc. I made sure the frontend designs matched the figma as well.
🏕️ (Optional) Future Work / Notes
Note: the signup page has a button to navigate to the food manufacturer application. This is not currently in main but there is a pr up by Amy to implement the frontend for that application. I based the navigation route based on that but it currently wont work.
NOTE: I have some alerts in here for some error states, I understand theres a ticket to make these to chakra ones so to make everything uniform I didn't want to do those yet. If that gets in first I will update these alerts to match.