ResetPassword.jsx

import { Button, Container, Heading, Input, VStack } from '@chakra-ui/react'; // Importing Chakra UI components
import React, { useEffect, useState } from 'react'; // Importing React and hooks
import toast from 'react-hot-toast'; // Importing toast for notifications
import { useDispatch, useSelector } from 'react-redux'; // For accessing Redux state and dispatch
import { useNavigate, useParams } from 'react-router-dom'; // For navigation and URL parameters
import { resetPassword } from '../../redux/actions/profile'; // Importing reset password action

const ResetPassword = () => {
  const [password, setPassword] = useState(''); // State to hold the new password

  const params = useParams(); // Extracting token from URL parameters
  const navigate = useNavigate(); // Hook to programmatically navigate

  const { loading, message, error } = useSelector(state => state.profile); // Selecting relevant state from Redux

  const dispatch = useDispatch(); // Hook to access dispatch function

  // Handler for form submission
  const submitHandler = e => {
    e.preventDefault(); // Prevent default form submission
    dispatch(resetPassword(params.token, password)); // Dispatch reset password action with token and new password
  };

  // Effect to handle error and success messages
  useEffect(() => {
    if (error) {
      toast.error(error); // Show error message
      dispatch({ type: 'clearError' }); // Clear error from Redux state
    }
    if (message) {
      toast.success(message); // Show success message
      dispatch({ type: 'clearMessage' }); // Clear message from Redux state
      navigate('/login'); // Redirect to login page after successful password reset
    }
  }, [dispatch, error, message, navigate]); // Dependencies for the effect

  return (
    <Container py={'16'} h="90vh"> {/* Main container for the form */}
      <form onSubmit={submitHandler}> {/* Form for password reset */}
        <Heading
          children="Reset Password" // Heading for the form
          my="16"
          textTransform={'uppercase'}
          textAlign={['center', 'left']} // Responsive text alignment
        />

        <VStack spacing={'8'}> {/* Vertical stack for spacing */}
          <Input
            required // Input is required
            value={password} // Controlled input value
            onChange={e => setPassword(e.target.value)} // Update password state on change
            placeholder="New Password" // Placeholder text
            type={'password'} // Input type for password
            focusBorderColor="yellow.500" // Border color on focus
          />

          <Button
            isLoading={loading} // Show loading state on button
            type="submit" // Submit button
            w={'full'} // Full width
            colorScheme="yellow" // Button color scheme
          >
            Reset Password
          </Button>
        </VStack>
      </form>
    </Container>
  );
};

export default ResetPassword; // Exporting ResetPassword component