[Frontend] Account Recovery Pages Updates and Integratation with Backend

[samarth52]

Context

This is a carryover of #7. In addition to matching the screens to Figma and implementing the requirements from #7, we want to perform error handling and integrate the screens with our backend.

Use #12 for API reference for the required routes

Requirements

/auth/account-recovery

• Match the updated Account Recovery Figma user flow as closely as possible
• When the user clicks "Continue":
  • First check if any of the fields are blank. If they are, throw errors as seen in these Figma screens
  • If no field is blank, use the internalRequest function from /src/utils/requests.ts to send a request to /api/volunteer/auth/password-reset/create. Check the brain-exercise app repo's code for reference on its usage.
    • Display this if the request fails and has the error message "You do not have permissions to access this API route"
    • Display this if the request fails and has the error message "Name doesn't match to existing value"
    • Display this for all other errors due to this request
  • On success, display this screen

/auth/password-reset

• Match the updated Password Reset Figma user flow as closely as possible
• Before the page loads, use the internalRequest to make a request to /api/volunteer/auth/password-reset/validate with the token parameter from the URL.
  • If the request returns true, load the page
  • Else, redirect to /auth/password-reset/error (create an empty route for this temporarily, else you will run into an infinite loop)
• When the user clicks "Confirm":
  • First check if any of the fields are of appropriate format. The password should be at least 8 characters long. If they are not, throw errors as seen in these Figma screens
  • If they are in the correct format, check if the confirm password field matches the password field. If not, display this screen
  • If there is no error, use the internalRequest function to send a request to /api/volunteer/auth/password-reset/update-password with the required info
    • Display this if the request fails
  • On success, display the success message as seen here, and redirect the user to /auth/login after 5 seconds.

Note: Any error messages should disappear once the user makes any change to a field or clicks any button

Acceptance Criteria

• /auth/account-recovery matches the Figma user flow
• /auth/account-recovery displays error messages according to the Figma
• /auth/account-recovery correctly makes a request to /api/patient/auth/password-reset/create
• /auth/password-reset matches the Figma user flow
• /auth/password-reset displays error messages according to the Figma
• /auth/password-reset correctly makes a request to /api/patient/auth/password-reset/validate and redirects if need be
• /auth/password-reset correctly makes a request to /api/patient/auth/password-reset/update-password
• All changes and integrations are tested and verified