reactjs - 反应：重置密码发送带有重置密码链接的电子邮件以重置密码

Question

我正在尝试创建一个forgot password具有email field. 用户将输入他的电子邮件。现在，该组件应该向password reset email输入的电子邮件发送一个。

然后，用户将在其邮件客户端中单击该电子邮件链接，该链接会将用户重定向到另一个password reset page用户将在其中输入其email、new-password和confirm password.

我该如何做到这一点？到目前为止，我刚刚能够创建一个forgot password页面。不确定，如何进行。

Code for my forgot password：

import React, { useState } from "react";
import { useHistory } from "react-router-dom";

import { Button, Form, Input, InputGroup, InputGroupAddon } from "reactstrap";

const ResetPassword = () => {
  const [email, setEmail] = useState("");

  const history = useHistory();

  const validateForm = () => {
    return email.length > 0;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
  };

  return (

      <div className="password-reset">
        <div className="password-reset-form-container">

          <div className="content">
            <Form className="password-reset-form">
              <h3 className="form-title">Password Reset</h3>
              <InputGroup>
                <InputGroupAddon
                  className="input-group-addon"
                  addonType="prepend"
                >
                  <i className="fa fa-user"></i>
                </InputGroupAddon>
                <Input
                  autoFocus
                  type="email"
                  aria-label="Username"
                  aria-describedby="username"
                  aria-invalid="false"
                  placeholder="Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                />
              </InputGroup>

              <div className="form-actions">
                <Button
                  className="pull-left"
                  block
                  bssize="small"
                  type="submit"
                  onClick={() => history.push("/")}
                >
                  Cancel
                </Button>

                <Button
                  className="pull-right"
                  block
                  bssize="small"
                  disabled={!validateForm()}
                  type="submit"
                  onSubmit={handleSubmit}
                >
                  Reset
                </Button>
              </div>
            </Form>
          </div>
        </div>

      </div>
    </div>
  );
};

export default ResetPassword;

标签： reactjs