ResetPassword component

//ResetPassword Component
//Your ResetPassword component will use the useParams hook to extract uidb64 and token from the URL:





import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams, useHistory } from 'react-router-dom';

const ResetPassword = () => {
    const { uidb64, token } = useParams();
    const [password, setPassword] = useState('');
    const [message, setMessage] = useState('');
    const [error, setError] = useState('');
    const history = useHistory();

    useEffect(() => {
        // Check if the token is valid
        axios.get(`/api/reset-password/${uidb64}/${token}/`)
            .then(response => {
                setMessage(response.data.message);
            })
            .catch(error => {
                setError('Invalid or expired token.');
            });
    }, [uidb64, token]);

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post(`/api/reset-password/${uidb64}/${token}/`, { password })
            .then(response => {
                setMessage(response.data.message);
                history.push('/login'); // Redirect to login page after success
            })
            .catch(error => {
                setError('Failed to reset password.');
            });
    };

    return (
        <div>
            <h1>Reset Your Password</h1>
            {message && <p>{message}</p>}
            {error && <p style={{ color: 'red' }}>{error}</p>}
            <form onSubmit={handleSubmit}>
                <label>
                    New Password:
                    <input
                        type="password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />
                </label>
                <button type="submit">Reset Password</button>
            </form>
        </div>
    );
};

export default ResetPassword;