Discuss

Password Reset Functionality: Part 2

On this page

In Part 1 of Password Reset Functionality tutorial you learned how to:

  • Create the request new password page
  • Add user email validation
  • Generate and send the unique password reset link to user’s email

In Part 2 we will cover the rest:

  • Create the password reset page
  • Create the server action which will update the password in the database

Let's start with the password reset page. We added a Form, containing two inputs for the new password. The form ID is new_password and the method is set to POST:

Screenshot_1|690x379

It contains two inputs - one for the new password and the other one for password confirmation. We will add validation to them:

Screenshot_2|690x379

The Form also contains a submit button:

Screenshot_3|690x379

First, let's the define the two query (url) parameters that will be used to filter our users table. In the Part 1 of this tutorial we generated a link which sends two values to the reset page - id and email. We need to defined them on this page, so they become available in the data picker dialogs. Select App, then click the define Query Params button:

Screenshot_4|690x379

Click the Add New button:

Screenshot_5|690x379

Add two variables there: id and email (as these are what we expect from the URL to provide):

Screenshot_6|690x379

We need to pass these URL parameters to our server action, so we will store their values in hidden fields in the form. Right click the Form:

Screenshot_7|690x379

Open Forms and select text input:

Screenshot_8|690x379

We will store the hash, from the id URL parameter here. So we set this field ID and Name to hash. We also set its type to hidden:

Screenshot_9|690x379

We create one more hidden field like this, for the email. We set this field ID and Name to email and also set its type to hidden:

Screenshot_10|690x379

Our hidden fields are now added, we need to assign the URL parameter values to them. Select the hash hidden field and add new dynamic attribute:

Screenshot_11|690x379

Select Value:

Screenshot_12|690x379

And click the dynamic data picker:

Screenshot_13|690x379

We select the query (url) parameter called id as a value:

Screenshot_14|690x379

We do the same for the email hidden field. We just select here the query (url) parameter called email as a value here:

Screenshot_16|690x379

Now, let's add the required validation rules to the two password fields. Select the first one and add new validation rule:

Screenshot_17|690x379

We need this field to have a value, when submitting the form, so we add the required rule:

Screenshot_18|690x379

Then we select the second input - password confirm:

Screenshot_19|690x379

Add new validation rule:

Screenshot_20|690x379

Here we also need the required validation:

Screenshot_21|690x379

We also need a check if the password entered here match the one entered in the first field, so we add one more validation rule:

Screenshot_22|690x379

Open Other and select Equal To:

Screenshot_23|690x379

Here we enter the name of the field we want to compare values with. In our case this is the password field which name is input1:

Screenshot_24|690x379

Enter your custom error message, that will appear when the values of both fields don't match:

Screenshot_25|690x379

We are done setting up our form. Save your page and open Server Connect:

Screenshot_26|690x379

Create new Server Action:

Screenshot_27|690x379

We call it update_password. Select Globals:

Screenshot_28|690x379

Click the browse icon, next to the Linked Page field. Browse to the page containing your password reset form:

Screenshot_29|690x379

Then select password reset form from the menu:

Screenshot_30|690x379

And click the Import from form button:

Screenshot_31|690x379

Now, right click steps:

Screenshot_32|690x379

Add a database connection. Setup your connection or select it from the drop-down if you have already defined it:

Screenshot_33|690x379

Then right click the database connection step:

Screenshot_34|690x379

And add a database query. We will use this query to check if the email provided with the url parameters exists in the database:

Screenshot_35|690x379

Turn off the Output option:

Screenshot_36|690x379

Then click the query builder button:

Screenshot_37|690x379

Select the users table and add it to the query:

Screenshot_38|690x379

Open the Conditions tab:

Screenshot_39|690x379

And select the email column:

Screenshot_40|690x379

Click the dynamic data picker to select its value:

Screenshot_41|690x379

This should be the hidden email field from our form:

Screenshot_42|690x379

We are done with the query setup. Click OK:

Screenshot_43|690x379

Now we should check - if the query returns results, i.e. if an user with the provided email is found. This check is done using a condition. Right click the steps inside the repeat:

Screenshot_48|690x379

Add a Condition:

Screenshot_49|690x379

And click the dynamic data picker button, to setup the condition:

Screenshot_50|690x379

This is the database query itself. If it's empty the condition will be false, if it returns a record the condition will be true:

Screenshot_51|690x379

First we will setup what happens when the condition is true. Right click the steps under THEN:

Screenshot_52|690x379

And add a repeat. We need a repeat step in order to be able to work with the results from the query:

Screenshot_53|690x379

Click the dynamic data picker to select an expression for the repeater:

Screenshot_54|690x379

This should be the database query step:

Screenshot_55|690x379

Right click the steps inside the repeat:

Screenshot_56|690x379

We need an additional check here - to see if the hash provided with the URL parameter is valid. So we add another condition:

Screenshot_57|690x379

Click the dynamic data picker to setup the condition:

Screenshot_58|690x379

As you remember from Part 1, the hash we are sending is generated by the user email and user password as a salt. So we should do the same here - select the email, returned from the repeat step and click the formatter icon:

Screenshot_59|690x379

Select the SHA1 hash:

Screenshot_60|690x379

Then select Salt and click the dynamic data icon:

Screenshot_62|690x379

Select the password as a value for the salt:

Screenshot_63|690x379

Now we need to compare this hash value with the one from the URL parameter on our page. Right click the Generate SHA1 Hash step:

Screenshot_64|690x379

Select operation:

Screenshot_65|690x379

Set the operator to equals == and click the dynamic data picker icon:

Screenshot_66|690x379

Then select the hidden hash input from our form (the one which gets the hash value from the URL):

Screenshot_67|690x379

Click Select:

Screenshot_68|690x379

And click Select to apply the condition:

Screenshot_69|690x379

Now, as our condition is setup, if true (i.e. hash matches) it will update the database record and set the new password. So right click the steps under Then:

Screenshot_70|690x379

Add database update:

Screenshot_71|690x379

Set the update options:

Screenshot_72|690x379

Select to update the users table, but we only need to update the password so we select the rest and delete them:

Screenshot_73|690x379

Double click the value to select your password input:

Screenshot_74|690x379

We select the second password input in our form (the one where we confirm the password) and click the formatter icon:

Screenshot_75|690x379

You don't want to store your passwords as plain text, so select any of the Hash options. In our example we use the SHA1 Hash (but you can use ANY of the other options):

Screenshot_76|690x379

Enter a value for the hash salt and click the select button:

Screenshot_77|690x379

Click Select to apply the value:

Screenshot_78|690x379

Then open the conditions tab:

Screenshot_79|690x379

The identity column is automatically added here, so we need to select a value:

Screenshot_80|690x379

Select the identity value returned from the repeat step:

Screenshot_81|690x379

Click OK:

Screenshot_82|690x379

Now, we need to setup the else step - i.e. when the hash does not match. Right click the steps, under ELSE:

Screenshot_83|690x379

We will return an "invalid" response back to our page. Add Response:

Screenshot_84|690x379

For the response step we add a name (use whatever name you like), status should be 400 and the text will be used later on the page, so enter a custom error message:

Screenshot_85|690x379

We are done with this Condition. Now back to the main Condition which we added first. This one we used to check if the query returns results (i.e. if the email exists in the database).

Right click steps under ELSE there. We will also need an error response here:

Screenshot_86|690x379

Add Response:

Screenshot_87|690x379

Add a name for this step, then set the status to 400 and add a custom error message in the Text field:

Screenshot_88|690x379

We are done with the work on the Server Action. Save it and close the Server Connect panel:

Screenshot_89|690x379

Back to our form, we need to add an alert which will show the success or error messages when we submit the form. Select the password confirm form group and click Add After:

Screenshot_90|690x379

Open Components and add Alert:

Screenshot_91|690x379

We don't need to do anything with the alert. Let's setup when should it appear. Select the form:

Screenshot_92|690x379

Click the Make Server Connect Form button:

Screenshot_93|690x379

And click select server action:

Screenshot_94|690x379

Select the update_password server action:

Screenshot_95|690x379

With the form still selected, add new dynamic event:

Screenshot_96|690x379

Open Server Connect group and select Invalid. This event will be triggered by the response steps with status of 400, which we added in the server action:

Screenshot_97|690x379

And click the dynamic action picker icon:

Screenshot_98|690x379

Under Alert, select Show and click the add button:

Screenshot_99|690x379

Then add the Set Alert Type action:

Screenshot_100|690x379

We set the alert type to Danger (red):

Screenshot_101|690x379

And then we add the Set Text Content action:

Screenshot_102|690x379

Select a dynamic value for this action:

Screenshot_103|690x379

We want to show the custom error messages, which we added in the response steps. So, under your form open lastError and select response:

Screenshot_104|690x379

Click select:

Screenshot_105|690x379

We are done with the error alerts, now let's add a success one. Add new Dynamic Event:

Screenshot_106|690x379

Open Server Connect and click Success:

Screenshot_107|690x379

Click the dynamic action picker button:

Screenshot_108|690x379

Under Alert, select the Show action and add it:

Screenshot_109|690x379

Then add the Set Alert Type action:

Screenshot_110|690x379

We set its type to Success (green):

Screenshot_111|690x379

And then we add the Set Text Content action:

Screenshot_112|690x379

Enter the text that should be displayed, when the password has successfully been changed. Make sure to wrap it in single quotes, when you enter static text: 'Your password has been changed!'

Screenshot_113|690x379

Save your page and you are done!