4. Add a Forgot password function and an updatable account profile
How to implement lost password function that send an email to the user ...

Transcript

Hello and welcome to the fourth episode of AppDrag Academy. I'm Mike Sabbah, and in this episode, we'll complete our authentication system, and then move on to developing our client area.    

Creating a Forgot Password API Using Node.Js
First off, let's add a forgot-password option to our login page.  So let's open our project, and head straight to the backend to create the API.
This one will only take in one input parameter, which will be the email.  Let's include the Cloud Backend package and plug in the initialization details.  

(Note: This API was written using the new "Environment Variables" Cloud Backend feature that no longer requires you to input the App-ID and API-Key)

And this function will do for us six things.  

 - Receive the email parameter
 - Ensure the email exists in our database
 - Return an error object if there's no such user
 - Create the email variables 
 - Send out the email
 - Return a success response

Just like the previous APIs, we're going to make this handler asynchronous, addClean var to the bottom of the    script, and call cleanVar when receiving the email parameter.

Ensuring the Email Exists in the Database and Setting up the Email Variables
Let's fetch the SQL select from Cloud Backend, and verify the email received.  
If it returns null, then return the error object.  If not, then it contains our user, and we go ahead and prepare the pieces we'll need for his email.

From the object received, we're going to grab his first name and his password. The next variable will be the email you want to send from.  So for the purposes of this tutorial, I'm going to use my email address.  The following variable will be the subject line of the email, which will be "Your forgotten password".  And the final variable will be the actual message.  And I'm going to concatenate the first name and password variables I just created.

Setting up the Email Function
All set, we go and grab the send email function from the documentation.  This one takes in six parameters.  
The first is the sender's email address.
The second is the sender's name, which we will put as "Password Administrator".
The third is the to-email address, which we have set from the top as "email".
The fourth is the subject line. 
The fifth is the actual message.
And the last is a Boolean of, if the message is simple text, or if it's an HTML block.

Create the Success Response and Set Up Sender Address
Great, now that that's done, let's return a success response.  Hit save, and let's try it out.
Let's put in a bogus email, and we get the error.  Now, we put in the real one we added earlier, and what we get is a notification that the sender's email has not yet been verified. So I'm going to go into my inbox and open the email I just received from AppDrag.  Click the link.

Go back to the API, try again, and this time we get the success response.  Which means that we got an email with our password.  And sure enough, an email was sent from the Password Administrator containing the password.

(Full source code of this API is at the end of the transcript.)

Frontend Development
We move on to the front end.  In the login page, we're going to duplicate this section, copy it to the clipboard.
Let's create a new page called Forgot Password.  Here, we'll paste it in, delete the blank one, delete the password field, and configure the button.

So select the forgotPassword API, match the source, open the JavaScript, and check the result from the response.  If the payload error is equal to "email not found", let's alert that the email doesn't exist.  Otherwise, it means the email was sent, and therefore alert that it was sent, then redirect to the login page.

One last thing to do before we test it out is to add a link to this page from the login page.  So we'll just duplicate this line, replace the text, and the link.  Save and preview.  

Type in the email address, hit send, and there's the alert. Click OK, I'm redirected to my login page.  And once again, received an email from the password administrator.

And now that our authentication system is complete, let's move on to the client area.

Developing a Client-Area
We're going to transform this page that currently displays a placeholder, for a page containing a form where our user will receive his contact information from our database, and have the ability to modify any of the details.
Let's just prepare the API that we'll need in order to get going.

Creating an API to Display Current Details in Form
What we need is an API that will return to us the user's information, that way we can manipulate that response in our front end.  So I'm going to open this checkToken API, which is the API called upon landing on this page, and duplicate it.  Let's call it getDetails.

Now, the only thing I'm going to change to this API is the addition of output columns.  And what that means is that once I call the API, if I now add the columns I want in response, so say in our case, we're going to need first name, last name, email, phone, now I get all of these in return.

So back to the front-end, if I open the jQuery block right here and replace the API from checkToken to getDetails, it'll work just the same, except this time, I have the values I need in the response, and I can manipulate my form with them.

Creating an API to Update User's Details
Now, let's just jump back to the backend for a second so we can create the second API that we'll need for today. And that's going to be a visual update function that will take the new details the user has entered, and replace them with the old ones in the database. So for the inputs, that's going to be the modified information, so we'll change those up a little. There we have first name, last name, email, and phone, but we're going to add another one which is the token, as we'll need to make sure we're updating the right person. 

In the mapping, we will match them up with their respective parameters, and in the conditions, we simply say, where token is equal to the parameter token.

So if we try this out and put an erroneous token, 0 rows were affected. If the token is correct, we see that there was indeed an affected row.
Let's check the database.  And there's our modified user. 

Client-Area Frontend Development
Awesome.  Let's head to the front end and create our form. I'm going to pull in a new section and quickly design up a sleek little form. Wonderful. We fix the placeholders and name attributes.  One other thing I want to do is deselect the empty field from the validation options, and our form is ready.

So what we want to do next is write up some logic that will populate the fields automatically with the user's information once he lands here. 

So we open our jQuery block and continue where we left off earlier. As a quick recap, the API we're calling returns a table with the row of the user matching the email and the token. And this row contains an object with the details. And since it's a JSON, we went ahead and parsed it, then checked to see if indeed a user returned. If it's empty, we redirect to login, and if not, we start to work with the values. 

So we're going to assign them some variables. We'll start with first name. The row is an array, and we're always going to receive one, so it'll be position 0, and the value we want is first name. And we do the same with the rest. And now we can drop them into the inputs as their respective values. So we call the input containing a name attribute that is equal to first name, and makes its value the variable we generated right above. And the same thing for the rest. Hit save, and let's try it out.

(This code block is placed inside the 'JqueryLoaded' event listener)

I get to my profile page with all my info right in front of me. Which takes us to the second part, which is updating the info. All we need to do here is open the button's action, click Cloud Backend, select the update API, map the sources, and for the token, I'm going to give it a formula that'll check the local storage and get the token. After the API call, we'll display a success message, hit save, and let's try it out. 

I'm going to modify these fields real quick.  Click update, and here's my success message. Let's check the database, and there's my user with his updated information. 

That wraps up this episode, in the next episode we're going to learn the various methods of how to create dynamic content on AppDrag.

► 1. Create your first database and API function.

► 2. Create an authentication system

► 3. Create an account form.

► 4. Add a Forgot Password function and an updatable account details page

► 5. List dynamic data from the db and display a detail page for a particular item of the list.

► 6. Event Reservation function, email template with variables, send.