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

Question

I implemented the reset password feature using AWS Amplify. Initially, I created two forms one for forgotPassword that accepts usernames, and forgotPasswordSubmit to change the password. For this I created multiple routes and the password reset is working fine.

Now I want to have everything in the same route, let's say /forgot. After the user successfully requests the forget PW, then we show the code and new PW inputs (same page). In this way, I can handle fewer pages. The same goes for the password reset successful (or error) message.

My problem is how to make the email input stay on the same page as forgotPasswordSubmit accepts three parameters code, username, and new_password.

This is my reset code which sends code to the email

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>

This code is for changing the password which was previously in a different route

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

Answer 1

An option you have to achieve this is by using a piece of state that determines when they have submitted the form then change the fields being presented when that piece of state has been updated after calling forgotPassword when entering their email. This would use the same route and change what is being rendered based on the current state. Here is an example of what that component might look like:

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>
  ) 
}