Password Reset Email Comms (Barebones)

[aaronashby]

Overview

To finalize the login/signup flow, we need a way for users to reset their password. When the user provides a registered email and hits "Send," our existing API (see apps/backend/src/auth/auth.controller.ts and apps/backend/src/auth/auth.service.ts) uses Cognito to send a one-time code to the given email (/forgotPassword). You can then complete the reset process by passing in that verification code along with the new password (confirmPassword).

The goal of this ticket is to wire our frontend to these two endpoints.

Tasks

In apiClient.ts, add two new methods:

• forgotPassword(email: string) that takes in the email and calls the /forgotPassword endpoint
• confirmPassword(body: ConfirmPasswordRequest)
  • ConfirmPasswordRequest should be a type consisting of the email, confirmation code, and new password (all strings)

Expand ConfirmSentEmailPage.tsx

• Show fields for the confirmation code, new password, and password confirmation after the email has been sent.
  • Reuse the password criterion component (apps/frontend/src/containers/auth/PasswordCriterion.tsx)
• If the email is invalid/unregistered, an error message should be shown like the one in Figma (see below).
• On successful email sending, call the /forgotPassword endpoint, and on successful password reset, call the confirm-password endpoint

Acceptance Criteria

• The frontend should call the two endpoints as specified above
• As there are currently no designs for the password reset fields, don't worry about styling for now. Just make them similar to the password and confirm password fields in LoginPage.tsx
• After confirming the new password, the user should be brought to the original "Forgot password" view where they can go back to the login page.