• Errors now handled through the screen instead of alert() on login and create account pages.
• AWS errors are being displayed using error.message, i.e. "Password did not conform with policy: Password not long enough."
• Frontend checks are limited to the most basic ones so far (not empty, has @, only numbers, etc.)

Summary

• Added Next Steps component
• Added styling in index.css that can be used across all pages since there are some elements that will have the same styling across all pages.
• Added DonationPage component to show Next Steps. This component would be used to show all the different steps of the donations process. Let me know if you planned to do it differently.

@ObjectJosh Feel free to let me know if you would like me to change anything. 🚀🚀

The routing for the donor pages & authentication pages is completed for the completed pages.

Missing Pages:

1. "Make a Donation-Item Info" Page
2. "Make a Donation - Review + Submit (Drop off & Pickup)

Description

Create the "Profile - Edit" screen based on Figma. Don't worry about the navbar at the top for this task (this was assigned in a separate issue).

Setup

1. Navigate to /frontend/src/components/
2. Create a folder named "profile" (if it already exists, skip this step)
3. Navigate into that folder named "profile"
4. Create a folder with the PascalCase naming convention (name based on the component you're working on)
5. Inside the folder, create a .tsx file with the same name as the folder
6. Be sure to update the App.js file with your new component, or else you wont see any changes you make. This file is located in /frontend/src/

Success Metrics Checklist

• [ ] Looks exactly like the Figma (again, disregarding the navbar)
• [ ] Responsive screen handling
• [ ] Error pops up for invalid/empty input field
• [ ] Cursor changes on hover for buttons
• [ ] Store submitted input into state variable

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Implemented redux and redux-persist.

Features added:

Features added:

(also the whitespace in login email causing the app to crash is now fixed).

Description

On the donor's view, implement redux so that the data from each screen saves into the donation object, and send it to MongoDB under "ItemsDB" once they review + submit. Redux won't need any DB pushing/pulling, until the very end, as it's local. If you have any trouble saving these things into redux, especially the "available times", please feel free to msg me.

When you send the event, I'd also add a field in the event data called "status", where it can be "pending", "declined", and "approved" (strings). I'd also add "approverName" and "volunteerName" fields which will both be strings as well. This will help us in the future.

Success Metrics Checklist

• [x] Redux implemented for donor "make a donation" screens
• [x] Connected and event items sent to DB "ItemsDB"
• [x] Error checking and handling of fields/DB request errors (to the best of your ability, let me know if you are uncertain about anything)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

So when a user creates an account they still need to verify their account. Make sure the create account page correctly redirects to VerifyAccountPage and add verify functionality.

Verify email api should be VerifyUserAttribute if I'm not mistaken: https://docs.aws.amazon.com/cognito/latest/developerguide/signing-up-users-in-your-app.html#:~:text=user%27s%20email%20address.-,Present%20a%20confirmation%20page%20where%20the%20user%20enters%20the%20verification%20code,At%20this%20point%2C%20the%20email%20address%20is%20verified.,-Allowing%20users%20to

Success Metrics Checklist

• [x] Email autofill (make sure you account for it being blank or null. If that happens, just leave it blank
• [x] Verify email works
• [x] When a user doesn't verify their account after account creation for whatever reason, please check on the login page as well and if they login and still aren't verified, do the same flow as the create account page (send them a code & direct them to verify account page)
• [x] Get new code button works (sends a new code)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Description

Add error messages for authentication pages

• Login
• Create account

The login page/create account has a couple different errors, the task is to "catch" each error and display the appropriate error. Some may include: email already exists, password incorrect, password too short, empty field error, etc. You can also check the documentation for the error types, if necessary.

Success Metrics Checklist

• [ ] Login errors handled (best of your ability)
• [ ] Create account errors handled (best of your ability)

Finally, on your pull request, please request a code review from me (@ObjectJosh)

Connected Auth with our Screens! I believe you should have seen most of the error catching and messages during hackathon day and I ran out of emails for screen shots of errors

• Fixed Event and Item schemas to connect to MongoDB.
• Created singular generic PUT requests for Events and Items.
• Created POST request for Events that grab all needed information given: /*

• Posts a new Event to EventsDB
• @param {string} title title of the new Event
• @param {Date} startTime starting time represented as a Date object
• @param {Date} endTime ending time represented as a Date object
• @param {ObjectId} volunteerId volunteer assigned to event
• @param {ObjectId} itemId item to be picked up */

Description

Fix the donor view's Create Account Page based on the Figma. Make sure the page will resize based on the screen size. You only need to account for screen sizes larger than 640px width. The mobile view (<640px) will be completed in a separate issue.

Success Metrics Checklist

• [ ] Looks exactly like the Figma
• [ ] Resizes appropriately according to screen size

Finally, on your pull request, please request a code review from either Josh (@ObjectJosh) or me (@scallait )

Description

Create admin view's donation approval - receipt page based on Figma. This task is just adding the receipt content inside the card already created in https://github.com/hack4impact-calpoly/habitat-for-humanity/pull/96

Success Metrics Checklist

• [ ] Looks exactly like the Figma
• [ ] Working input fields and saves in state variables

Finally, on your pull request, please request a code review from me (@ObjectJosh)