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