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!
| </Box> | ||
|
|
||
| <Field.Root required> | ||
| <Field.Label {...fieldHeaderStyles}> |
There was a problem hiding this comment.
Correct me if I'm wrong (maybe ask Priya), but I think the verification code should not be hidden
| fontWeight={600} | ||
| mt={8} | ||
| > | ||
| Resend Code |
There was a problem hiding this comment.
I think this button should alert the user.
| <Field.Label {...fieldHeaderStyles}>New Password</Field.Label> | ||
| <Input | ||
| type="password" | ||
| borderColor="neutral.100" |
There was a problem hiding this comment.
For this border.100, textStyle p2, color neutral.700, and _placeholder values, it seems to be repeating a lot. Can we create a separate style for this to make things cleaner?
| variant="outline" | ||
| onClick={() => setShowPassword((prev) => !prev)} | ||
| > | ||
| <Eye color="#CFCFCF"></Eye> |
There was a problem hiding this comment.
I think the color of this should be neutral 200
| bgColor="neutral.800" | ||
| w="full" | ||
| onClick={handleLogin} | ||
| borderRadius={5} |
There was a problem hiding this comment.
Think borderRadius of 4 to match Figma.
| </Link> | ||
| </Text> | ||
|
|
||
| <Text fontSize="sm" textAlign="center" mt={12}> |
| 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.
| </Box> | ||
|
|
||
| <Button | ||
| bgColor="#F89E19" |
There was a problem hiding this comment.
This is the yellow defined in our theme, we can use that.
| </Button> | ||
|
|
||
| <Button | ||
| bgColor="#2B4E60" |
There was a problem hiding this comment.
Can we confirm with Priya that this is the blue we want to use, and not ssf.blue from the theme file?
| textStyle="p2" | ||
| color="neutral.600" | ||
| onClick={() => navigate('/login')} | ||
| variant="underline" |
There was a problem hiding this comment.
Same thing with this overline as the signup button.
ℹ️ 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.