如何使电子邮件输入保持在同一页面上，以便用户不必再次输入电子邮件？

Question

我使用 AWS Amplify 实现了重置密码功能。最初，我创建了两个表单，一个用于接受用户名的 forgotPassword，另一个用于更改密码的 forgotPasswordSubmit。为此，我创建了多个路由，密码重置工作正常。

现在我想让所有东西都在同一条路线上，比方说 /forgot。用户成功请求忘记密码后，我们将显示代码和新密码输入（同一页面）。这样，我可以处理更少的页面。密码重置成功（或错误）消息也是如此。

我的问题是如何使电子邮件输入保持在同一页面上，因为 forgotPasswordSubmit 接受三个参数 code、username 和 new_password。

这是我的重置代码，它会将代码发送到电子邮件

const ResetContainer: NextPage = (): JSX.Element => {
    const {
        register,
        handleSubmit,
        formState: {errors},
    } = useForm();
    const [email, setEmail] = useState('');
    const {replace} = useRouter();

    const forgotPassword = async () => {
        try {
            await Auth.forgotPassword(email);
            replace('/forgot');
        } catch (error) {
            console.error(error);
        }
    }; 

    <form onSubmit={handleSubmit(forgotPassword)}>
        <label className='block text text-gray-600 font-normal ' htmlFor='email'>
            EMAIL ADDRESS
        </label>

此代码用于更改之前在不同路由中的密码

const forgotPasswordSubmit = async () => {
    try {
        Auth.forgotPasswordSubmit(email, code, password);
        replace('/backtosignin');
    } catch (error) {
        console.error(error);
    }
};

Answer 1

实现此目的的一个选项是使用一个状态来确定他们何时提交表单，然后在输入时调用 forgotPassword 后更新该状态时更改显示的字段他们的电子邮件。这将使用相同的路线并根据当前状态更改正在呈现的内容。以下是该组件的示例：

const ForgotPassword = () => {
  const {
        register,
        handleSubmit,
        formState: {errors},
    } = useForm();
  const [email, setEmail] = useState('');
  const [isPasswordSubmitVisible, setIsPasswordSubmit] = useState(false);
  const {replace} = useRouter();

  const forgotPassword = async () => {
        try {
            await Auth.forgotPassword(email);
            setIsPasswordSubmit(true)
        } catch (error) {
            console.error(error);
        }
  };

  const forgotPasswordSubmit = async () => {
        try {
            Auth.forgotPasswordSubmit(email, code, password);
            replace('/backtosignin');
        } catch (error) {
            console.error(error);
        }
  };

  return (
     // Call correct submit handler based on what's visible
     <form onSubmit={handleSubmit(isPasswordSubmitVisible ? forgotPasswordSubmit : forgotPassword)}>
       {!isPasswordSubmitVisible ?
          (
             <label className='block text text-gray-600 font-normal' htmlFor='email'>
               EMAIL ADDRESS
             </label>
          )
        : (
            // Other fields for password reset here (code, username, new password)
        )
     </form>
  ) 
}

如何使电子邮件输入保持在同一页面上，以便用户不必再次输入电子邮件？

How to make the email input stay on the same page so that user does not have to enter the email again?

reactjs

next.js

aws-amplify