feat: Implemented forgot password. issue: #144

[kaali001]

Description

This PR introduces a Forgot Password feature to the website, allowing users to reset their passwords by receiving a reset link via email. The main changes include the creation of a ForgotPassword component, integration with the backend API, and user feedback through toast notifications and a confirmation message.

Changes

1. ForgotPassword Component:

   • Created a new ForgotPassword component using React.
   • Added a form with an email input field for users to request a password reset.
   • Integrated axios for making API requests to the backend.

2. State Management:

   • Utilized React's useState to manage the email input and success message state.

3. API Integration:

   • Configured the form to submit the email to the backend API at http://localhost:3000/api/users/forgot-password.
   • Handled API responses to display appropriate success or error messages.

4. User Feedback:

   • Integrated react-hot-toast to show toast notifications for success and error messages.
   • Added a success message above the form that informs users to check their email for the reset link upon successful submission.

5. UI Enhancements:

   • Styled the form and success message to match the existing website design.
   • Used Tailwind CSS classes for consistent styling.

Before:

After:

How to test

Before testing , add a valid mail credentials in .env file , mail should be with two-factor-auth on.

1. Navigate to Login page click on Forgot Password link.
2. Make sure you created an account with a valid mail address, enter a valid email address in the form and submit.
3. Verify that a toast notification appears with the success message.
4. Enter an invalid email or simulate a server error to ensure error handling works correctly and displays an appropriate toast notification.
5. Check your mail for the reset link, click on that and submit new password.
6. you are done.

Issue #144: Implement Forgot Password Feature

[dvjsharma]

Few questions, rest looks good.

[dvjsharma]

Is this URL correct? If so, are we redirecting to a different server?

[kaali001]

No It wouldn't, Actuallly react provide us two URL for rendering our site - one is localhost and another for over network.

I used 'Network URL ' here because generally multiple gmail accunts signed in the mobile devices, so the reset link which we are sending on user mail will render the reset password page on mobile devices also.

[dvjsharma]

Network URLs are not static :)
They'll change if you switch to a different network. So hard-coding them won't work. IMO keep it localhost because that can be rendered anywhere once the site is deployed and localhost changes to a server address.

[kaali001]

I made the changes.

[kaali001]

@dvjsharma , merge this PR.

[dvjsharma]

LGTM