Adding a forgot password page - React.js教程

- [Instructor] So now that we have a good idea of how the reset password flow actually works, let's start implementing it. The first step here is going to be for us to create the forgot password page that we send the user to when they click the forgot password button and this is going to be pretty straightforward. So let's open up our front end here and under source pages, let's create a new page which we'll call ForgotPasswordPage.js. So this page is going to be pretty straight forward. We're going to start off by importing a few things up at the top. We're going to import the useState hook from 'react' we're going to import the useHistory hook, from react-router-dom, and we're going to import axios from 'axios.' And then let's define our forgot password page component. We're going to say export const ForgotPassword page, it's not going to take any props. And basically what this page is going to do is allow the user to enter their email and this will of course, send a request to the server and if that email exists, we'll then send the user instructions on how to reset their password. So we're going to need to have a few state variables here. One is going to be for the value of the text box that's going to be on this page. We'll call that email value and setEmailValue and those are going to start off as an empty string. And we're also going to want to have variables to display an error message or a success message as well. So we'll say const errorMessage, setErrorMessage equals useState. And that's going to be an empty string as well and we're going to have a state variable called success setSuccess and the initial value of that is going to be false. So this is going to indicate whether or not we've successfully sent an email. And the last hook we're going to use is the useHistory hook. So we'll say const history = useHistory, just like that. And the next thing we're going to define is the body of our component. So what we're going to display on this page is really going to depend on whether or not we've succeeded sort of like what we did on the email verification landing page. So what we're going to do here is we're going to check and see if we're successful first, and if we are successful, we're just going to display a very brief message telling the user that everything went well. So we'll just say something like div for styling purposes here, we'll have the className = "content-container" and inside here we'll have a message that says Success and under that we'll have a message that says, check your email for a reset link. So that's if the user inputs their email and everything goes well, but if the user hasn't actually entered anything yet, then we're going to display the actual component with the text box and everything and what that's going to look like, we're going to use a div with the className of content container here as well. Inside here, we'll have a heading that says, Forgot Password. Under that, we'll just have a little message that describes what they're supposed to do. We'll say, enter your email and we'll send you a reset link. Under that is where we're going to want to display our error message so we'll just say errorMessage and if an errorMessage exists, we'll display a div with the class name of fail, which will contain our error message like that. And under this is where we're going to have our text input now. So here's what that's going to look like. It's just going to be linked to our email value state. So we'll say value=emailValue under that we'll say onChange= and we'll set the email value to the value of the text input. So e.target.value and under that, we will define the placeholder and for that, we'll just put in a fake email. So we'll say something like this, [email protected] and that is all we need to do there. So underneath that, we're going to want to have a button that the user will click when they have entered their email, so we'll say button under that, it will say disabled and we'll want the button to be disabled if there is no email value and then we'll say onClick, and we're going to have to define for ourselves a function here that our button will call when it's clicked. We'll just call that onSubmitClicked and we'll just make our button to say something like Send Reset Link. And then up here at the top is where we're going to define that function. So we'll say const onSubmitClicked. It's going to be an async function and we'll put it all in a try-catch block. So we're going to send a put request to our end point that we haven't defined yet. So we'll say put, and we're going to use back ticks here and say /api/forgot-password/ and then we going to use an URL parameter here. We'll say email value. That's what the server will use to actually send an email to that email address. And after that's happened, we'll say setSuccess to true and then we'll set a timeout that will automatically navigate the user to the login page. So we'll say history.push and send them to login and we'll want that to happen after about three seconds. And then we just need to catch any errors that occur and if an error occurs, we'll say setErrorMessage to error.message. So that is our ForgotPasswordPage. The other thing we have to do here is go to our routes component and add a route for our forgot password page. So let's import it up at the top import ForgotPasswordPage from ./pages/ForgotPasswordPage and down here, we'll say route. The path here is going to be /forgot-password and we're going to put our ForgotPasswordPage inside of there. So let's see, see what this looks like. Now, we're going to log out and click on, Forgot your Password and here we see our ForgotPasswordPage. Now, currently we don't have anything on the backend but this is what the page is going to look like.