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

class ForgotPassword extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      message: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ email: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();

    axios.post('/forgot_password.php', { email: this.state.email })
      .then(response => {
        if (response.data === 'success') {
          this.setState({ message: 'An email has been sent with instructions to reset your password.' });
        } else {
          this.setState({ message: 'The email address you entered is not registered in our system.' });
        }
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div>
        <h2>Forgot Password</h2>
        <form onSubmit={this.handleSubmit}>
          <label>
            Email:
            <input type="email" value={this.state.email} onChange={this.handleChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
        <p>{this.state.message}</p>
      </div>
    );
 

PHP and MySQL Backend:

1. Create a database table named users with the following fields: id (INT, auto-increment), email (VARCHAR), password (VARCHAR), reset_token (VARCHAR), and reset_token_expiry (DATETIME).

2. Create a PHP script named forgot_password.php that will generate a reset token and update the users table with the token and expiry date for the user's email address:

<?php
require_once('config.php');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $email = $_POST['email'];

  // check if email exists in database
  $query = "SELECT id FROM users WHERE email = ?";
  $stmt = $conn->prepare($query);
  $stmt->bind_param("s", $email);
  $stmt->execute();
  $stmt->store_result();
  
  if ($stmt->num_rows > 0) {
    // generate reset token
    $reset_token = bin2hex(random_bytes(32));
    $reset_expiry = date('Y-m-d H:i:s', strtotime('+1 day'));

    // update database with reset token and expiry
    $query = "UPDATE users SET reset_token = ?, reset_token_expiry = ? WHERE email = ?";
    $stmt = $conn->prepare($query);
    $stmt->bind_param("sss", $reset_token, $reset_expiry, $email);
    $stmt->execute();

    // send email to user with reset link
    $reset_link = "http://example.com/reset_password.php?token=$reset_token";
    $to = $email;
    $subject = "Password Reset Link";
    $message = "Click on this link to reset your password: $reset_link";
    $headers = "From: webmaster@example.com ";
    $headers .= "Content-type: text/html ";
    mail($to, $subject, $message, $headers);

    echo "success";
  } else {
    echo "failure";
  }
}
?>
 

ReactJS Frontend:

1. Create a class component named ForgotPassword that will render a form to input the user's email address and handle the form submission:

2. import React, { Component } from 'react';
   import axios from 'axios';

   class ForgotPassword extends Component {
     constructor(props) {
       super(props);

       this.state = {
         email: &
   [ ]

   
   (A).
   (B).
   (C).
   (D).