Password.js

import React from "react";
import { Container, Form, Col, Row, Button, Alert } from "react-bootstrap";
import AuthContext from "./AuthContext";

class OwnPassword extends React.Component {
  static contextType = AuthContext;

  constructor(props) {
    super(props);
    this.state = {
      oldPassword: "",
      newPassword: "",
      newPassword2: "",
      formErrors: "",
      isNewPasswordValid: false,
      isNewPassword2Valid: false,
      isFormValid: false,
      error: null,
      passwordChanged: false,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  /** Check whether the new password is valid, and matches with its confirmation. */
  checkNewPassword() {
    let isNewPasswordValid = this.state.newPassword.length >= 6;
    let isNewPassword2Valid =
      this.state.newPassword === this.state.newPassword2;

    let formErrors = isNewPasswordValid
      ? isNewPassword2Valid
        ? ""
        : "Las contraseñas no coinciden."
      : "La contraseña es demasiado corta.";

    this.setState(
      {
        error: null,
        passwordChanged: null,
        formErrors: formErrors,
        isNewPasswordValid: isNewPasswordValid,
        isNewPassword2Valid: isNewPassword2Valid,
      },
      this.validateForm
    );
  }

  /** Check all the fields are valid, so the form may be submitted. */
  validateForm() {
    this.setState({
      isFormValid:
        this.state.isNewPasswordValid && this.state.isNewPassword2Valid,
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    this.setState({ isLoading: true, error: null });
    const body = JSON.stringify({
      old_password: this.state.oldPassword,
      password: this.state.newPassword,
    });
    fetch("/api/member/me", {
      headers: { "x-authentication": this.context.token },
      method: "PUT",
      body,
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error(
            response.status.toString() + " " + response.statusText
          );
        }
        return response.json();
      })
      .then((json) => {
        // console.log(json);
        this.setState({
          isLoading: false,
          passwordChanged: true,
        });
      })
      .catch((error) => {
        this.setState({ isLoading: false, error: error.message });
      });
  }

  render() {
    let alert;

    if (this.state.formErrors) {
      alert = <Alert variant="warning">{this.state.formErrors}</Alert>;
    }

    if (this.state.error) {
      alert = (
        <Alert variant="danger">
          Se produjo un error al intentar cambiar la contraseña:
          {this.state.error}
        </Alert>
      );
    }

    if (this.state.passwordChanged) {
      alert = (
        <Alert variant="success">La contraseña se ha cambiado con éxito.</Alert>
      );
    }

    return (
      <Container>
        <h2>Cambio de contraseña</h2>

        {alert}

        <Form onSubmit={this.handleSubmit}>
          <Form.Group as={Row}>
            <Form.Label as="legend" column sm={4}>
              Contraseña actual
            </Form.Label>
            <Col sm={8}>
              <Form.Control
                placeholder="Contraseña actual"
                type="password"
                onChange={(e) =>
                  this.setState({ oldPassword: e.target.value })
                }
              />
            </Col>
          </Form.Group>

          <Form.Group as={Row}>
            <Form.Label as="legend" column sm={4}>
              Nueva contraseña
            </Form.Label>
            <Col sm={8}>
              <Form.Control
                placeholder="Nueva contraseña"
                type="password"
                onChange={(e) =>
                  this.setState({ newPassword: e.target.value }, () => {
                    this.checkNewPassword();
                  })
                }
              />
            </Col>
          </Form.Group>

          <Form.Group as={Row}>
            <Form.Label as="legend" column sm={4}>
              Confirme la nueva contraseña
            </Form.Label>
            <Col sm={8}>
              <Form.Control
                placeholder="Repita la nueva contraseña"
                type="password"
                onChange={(e) =>
                  this.setState({ newPassword2: e.target.value }, () => {
                    this.checkNewPassword();
                  })
                }
              />
            </Col>
          </Form.Group>

          <Form.Group as={Row}>
            <Col sm={{ offset: 4, span: 8 }}>
              <Button
                type="submit"
                variant="primary"
                disabled={!this.state.isFormValid}
              >
                Cambiar la contraseña
              </Button>
            </Col>
          </Form.Group>
        </Form>
      </Container>
    );
  }
}

export default OwnPassword;