fix(auth): add forgot password page

[Divv1524]

Issue Link

Closes #82

Changes Made

• Added a functional /forgot-password page matching the existing auth UI.
• Integrated forgot password API call with /public/api/v1/auth/forgot-password.
• Added validation, loading, success, retry, and API error states.
• Wrapped the actual frontend entry point with GoogleOAuthProvider so the login page renders correctly and the forgot password link can be used.

Type of Change

• Bug fix
• New feature
• Documentation update
• Code refactor

Testing Performed

Frontend Testing

• Component renders correctly
• Responsive layout checked through browser route testing
• No new console errors on forgot-password flow
• Production build passed

Test Cases:

• Direct /forgot-password route renders reset form.
• Empty email shows required validation and does not call API.
• Invalid email shows format validation and does not call API.
• Whitespace-only email is treated as empty.
• Valid email is trimmed before API submission.
• API success: false response shows inline error.
• HTTP error response shows backend error message.
• Successful API response shows confirmation message.
• “Try another email” returns to the form.
• Login page “Forgot Password?” link navigates to /forgot-password.

UI/UX Changes

• Added forgot password screen consistent with login/register design.
• Added inline success and error states.

Additional Notes

• npm.cmd run build passes.
• npm.cmd run lint could not run because the repo does not currently include an ESLint 9 eslint.config.js file.

[rdodiya]

Hi @Divv1524 ,
Please resolve conflicts

[rdodiya]

Hi @Divv1524 ,
Please resolve conflicts and ensure that the forgot password frontend should follow the below flow,
#117 (comment)

If possible please integrate the Frontend with backend api created in #117

[Copilot]

Pull request overview

Implements a functional forgot/reset password UI for the public auth flow, replacing the previous placeholder screen.

Changes:

• Replaced the placeholder ForgotPassword page with a multi-step flow (request reset code → submit code + new password → completion state).
• Added client-side validation (Formik + Yup), loading states, and inline success/error messaging.
• Integrated API calls for forgot-password and reset-password via the shared Axios client.

Comments suppressed due to low confidence (1)

RestroHub-FrontEnd/src/pages/public/ForgotPassword.jsx:222

• The reset-password catch block has the same issue as the request step: getApiMessage(..., fallback) returns a non-empty fallback when err.response is absent, preventing err.message (including messages from locally thrown Errors) from being displayed. Reorder the fallback logic so err.message is used when there is no backend response message.

      } catch (err) {
        const message =
          getApiMessage(err.response?.data, "Password reset failed.") ||
          err.message ||
          "Password reset failed.";

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rdodiya]

Hi @Divv1524 ,
Please review the suggestions

[Divv1524]

Hi @Divv1524 , Please review the suggestions

Hi @rdodiya,

Reviewed and addressed the Copilot suggestions:

• Fixed error message fallback order so API/local thrown errors are shown correctly.
• Updated reset-password request to send email, token, and newPassword in a form-encoded POST body instead of query params, avoiding password leakage in URLs while staying compatible with Spring @RequestParam.
• Added explicit completion-state helper text.

Testing:

• npm.cmd run build passed
• Verified forgot/reset password browser flow
• Verified invalid token error displays correctly
• Verified newPassword is sent in request body, not query params

[Divv1524]

Hi @rdodiya

Just a gentle follow-up.
Could you please take a final look and merge when you get a chance? Happy to make any additional changes if needed. Thanks for your time!

[rdodiya]

Hi @Divv1524,

For invalid input like test123 (shown below), the backend returns a 500 error which is correctly displayed in the UI, but the previous success message is still visible. The previous success message should be cleared when an error occurs, or you can add a small timeout (around 300ms) for handling success/error message transitions.

Currently, both success and error messages are displayed together, which creates incorrect UI behavior.

Also, after entering the correct token value again, two success messages are displayed simultaneously. It seems the current implementation is appending the new success message without clearing the previous state/message properly.

Please handle the message state correctly so only one relevant message is visible at a time.