Untitled

mport React, { Component } from "react";

const usedPasswords = ["password1", "password2"];

const validatePassword = (oldPassword, newPassword, previouslyUsed) => {
  if (newPassword === oldPassword) {
    return "New password cannot be the same as old password";
  }
  if (previouslyUsed.includes(newPassword)) {
    return "Password has already been used";
  }
  return null;
};

class PasswordForm extends Component {
  state = {
    oldPassword: "",
    newPassword: "",
    error: null,
    previouslyUsed: [],
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.newPassword !== this.state.newPassword) {
      const error = validatePassword(
        this.state.oldPassword,
        this.state.newPassword,
        this.state.previouslyUsed
      );
      this.setState({ error });
    }
  }

  componentDidMount() {
    this.setState({ previouslyUsed: usedPasswords });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const previouslyUsed = [...this.state.previouslyUsed, this.state.newPassword];
    this.setState({ previouslyUsed, oldPassword: this.state.newPassword });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="password"
          value={this.state.oldPassword}
          onChange={(e) => this.setState({ oldPassword: e.target.value })}
          placeholder="Old password"
        />
        <input
          type="password"
          value={this.state.newPassword}
          onChange={(e) => this.setState({ newPassword: e.target.value })}
          placeholder="New password"
        />
        {this.state.error && <p style={{ color: "red" }}>{this.state.error}</p>}
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default PasswordForm;