Forgot Password request

//Create a ForgotPassword component where the user can enter their email to request a password reset:



import React, { useState } from 'react';
import axios from 'axios';

const ForgotPassword = () => {
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');
    const [error, setError] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post('/api/request-password-reset/', { email })
            .then(response => {
                setMessage('Check your email for the reset link.');
            })
            .catch(error => {
                setError('Failed to request password reset.');
            });
    };

    return (
        <div>
            <h1>Forgot Password</h1>
            {message && <p>{message}</p>}
            {error && <p style={{ color: 'red' }}>{error}</p>}
            <form onSubmit={handleSubmit}>
                <label>
                    Email:
                    <input
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />
                </label>
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

export default ForgotPassword;