Skip to content
Snippets Groups Projects
ResetPassword.js 3.01 KiB
Newer Older
  • Learn to ignore specific revisions
  • meskio's avatar
    meskio committed
    import React, { useState, useEffect } from "react";
    import { Link, useParams } from "react-router-dom";
    import { Alert, Form, Col, Row, Button, Spinner } from "react-bootstrap";
    import PasswordForm from "./PasswordForm";
    import Sender from "./Sender";
    
    meskio's avatar
    meskio committed
    import { url } from "./util";
    
    meskio's avatar
    meskio committed
    
    
    function ResetPassword() {
    
    meskio's avatar
    meskio committed
      const [password, setPassword] = useState("");
    
    meskio's avatar
    meskio committed
      const [login, setLogin] = useState("");
    
    meskio's avatar
    meskio committed
      const [validPass, setValidPass] = useState(false);
      const [validToken, setValidToken] = useState("loading");
    
      const [needsLogin, setNeedsLogin] = useState(false);
    
    meskio's avatar
    meskio committed
      const [success, setSuccess] = useState(false);
      const { token } = useParams();
    
      useEffect(() => {
        if (validToken === "loading") {
    
          fetch(url("/api/reset/" + token))
            .then((response) => {
              setValidToken(response.ok);
              return response.json();
            })
    
            .then((member) => {
    
              setNeedsLogin(!member.login);
    
            })
            .catch((e) => {
              console.log("Error with reset: " + e.message);
              setValidToken("");
    
    meskio's avatar
    meskio committed
        }
      });
    
      if (validToken === "loading") {
        return (
          <Row className="justify-content-center">
            <Spinner animation="border" />
          </Row>
        );
      } else if (!validToken) {
        return (
          <div>
            <Alert variant="danger">
              La dirección de recuperación de la contraseña es invalida. Recuerda
    
              que solo son validas por 7 días
    
    meskio's avatar
    meskio committed
            </Alert>
            <p className="text-right">
              <Link to="/reset/">... vuelve a pedir que te envie el email</Link>
            </p>
          </div>
        );
      }
    
      if (success) {
        return (
          <Alert variant="success">
            Contraseña cambiada con exito, ahora ya puedes{" "}
            <Link to="/">entrar con tu nueva contraseña</Link>
          </Alert>
        );
      }
    
    
      const body = needsLogin ? { password, login } : { password };
      const disabled = !validPass || (needsLogin && !login);
    
    meskio's avatar
    meskio committed
    
      let head = <h2>Cambio de contraseña</h2>;
    
      if (needsLogin) {
    
    meskio's avatar
    meskio committed
        head = (
          <div>
            <h2>Configura tu nombre de acceso y contraseña</h2>
            <Form.Group as={Row}>
              <Form.Label as="legend" column sm={4}>
                Nombre de acceso
              </Form.Label>
              <Col sm={8}>
                <Form.Control
                  placeholder="nombre de acceso"
                  value={login}
    
    meskio's avatar
    meskio committed
                  onChange={(e) => setLogin(e.target.value)}
    
    meskio's avatar
    meskio committed
                  isInvalid={!login}
                />
              </Col>
            </Form.Group>
          </div>
        );
      }
    
    
    meskio's avatar
    meskio committed
      return (
        <Sender
          url={"/api/reset/" + token}
          method="PUT"
    
    meskio's avatar
    meskio committed
          body={body}
    
    meskio's avatar
    meskio committed
          onSuccess={() => setSuccess(true)}
        >
          <br />
    
    meskio's avatar
    meskio committed
          {head}
    
    meskio's avatar
    meskio committed
          <PasswordForm
            password={password}
            onChange={setPassword}
            setValid={setValidPass}
          />
          <Form.Group as={Row}>
            <Col sm={{ offset: 4, span: 8 }}>
    
    meskio's avatar
    meskio committed
              <Button type="submit" variant="primary" disabled={disabled}>
    
    meskio's avatar
    meskio committed
                Cambiar la contraseña
              </Button>
            </Col>
          </Form.Group>
        </Sender>
      );
    }
    
    export default ResetPassword;