Reset Password

//ResetPassword Component
//Create a ResetPassword component where the user can enter their new password:

import React, { useState } 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();

    const handleSubmit = (e) => {
        e.preventDefault();
        axios.post(`/api/reset-password/${uidb64}/${token}/`, { password })
            .then(response => {
                setMessage('Password has been reset successfully.');
                history.push('/signin'); // 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;