Discuss

Password Reset Functionality: Part 1

On this page

In Part 1 of Password Reset Functionality we will cover the following:

  • Creating the request new password page
  • User email validation
  • Generating and sending the unique password reset link to user's email

The Form

First, let's start with the request new password page. This is actually a pretty simple page containing a form with a single field and a submit button. You already know how to create a form and add elements inside it, so we won't show this in details.

Form method is set to post:

Form method is set to post|690x378

The input is a simple text field:

Screenshot_2|690x378

And the button is a submit button:

Screenshot_3|690x378

We will use the field, to check user's email, and if a valid email address and if it exists into our database, we will use it to send the password reset link to it. Let's add the client-side validation first. Select the email field, and add new validation rule:

Screenshot_4|690x378

From the text category select the E-mail validation rule:

Screenshot_5|690x378

Then add new rule:

Screenshot_6|690x378

And select Required:

Screenshot_7|690x378

We are done with the client-side validation.

The Server Action

Save your page and open the Server Connect Panel:

Screenshot_9|690x378

Create new server action:

Screenshot_10|690x378

We create it in the Passwords folder and call it request_new:

Screenshot_11|690x378

Click Globals and click the browse icon, next to the Linked Page field:

Screenshot_12|690x378

Browse to your page, and select it (the password request page we just created). Then select your form from the Form menu:

Screenshot_13|690x378

And click the Import from form button:

Screenshot_14|690x378

Right click steps:

Screenshot_15|690x378

Add database connection:

Screenshot_16|690x378

Select your connection if you already defined one, or setup a new one:

Screenshot_17|690x378

Right click the database connection step:

Screenshot_17|690x378

And from the Validator category add Validate Data:

Screenshot_18|690x378

Click the validate options button:

Screenshot_19|690x378

Add new validation rule:

Screenshot_20|690x378

Double click the expression field and click the dynamic data picker:

Screenshot_21|690x378

Choose your form input, under $_POST as a value:

Screenshot_22|690x378

In the linked field enter the form input name, this way the validation message will be displayed under the input and the validation styles will be applied to it:

Screenshot_23|690x378

Then add a validation rule:

Screenshot_24|690x378

From the Databse category add Exists in Database rule. It checks if the field exists in the database and displays an error if does not exist:

Screenshot_25|690x378

Select your database connection, the table containing your users details and the column you want to check. In our case this is the email column. Customize the error message per your needs:

Screenshot_26|690x378

Click the save button:

Screenshot_27|690x378

We are done with the validation. If the validation fails, the rest of the steps below it won't run. Right click the validation step:

Screenshot_28|690x378

Add Database query:

Screenshot_29|690x378

And click the query builder button, to setup the query:

Screenshot_30|690x378

Select and add your users table:

Screenshot_31|690x378

We will need the password and email fields only, so add them:

Screenshot_32|690x378

Then open the Conditions tab:

Screenshot_33|690x378

We will filter the table by the email column, so select it from the dropdown and click the dynamic data picker button to select a filter value:

Screenshot_34|690x378

This should be the email form input, which validated in the previous step:

Screenshot_35|690x378

Click OK:

Screenshot_36|690x378

IMPORTANT! TURN OFF THE OUTPUT OPTION FOR THE DATABASE QUERY STEP! This is required as you don't want your user details exposed in the browser console:

Screenshot_1|690x378

Then right click the query step:

Screenshot_2|690x378

From the Core Actions add Repeat:

Screenshot_38|690x378

Click the dynamic data picker to select a value for the repeat:

Screenshot_39|690x378

This should be your database query:

Screenshot_40|690x378

IMPORTANT! TURN OFF THE OUTPUT OPTION FOR THE REPEAT STEP!

Screenshot_44|690x378

Then right click steps inside the repeat and from the Core Actions, add Set Value:

Screenshot_3|690x378

Add same name in both Name and Global Name fields. This is what we are going to use later in the password reset link. We call this step hash:

Screenshot_4|690x378

Select a dynamic value for it:

Screenshot_5|690x378

We will create a hashed value using users email and the current password as a salt. Select the email, under repeat and click the formatter button:

Screenshot_6|690x378

Right click email, open the cryptographic menu and select Generate SHA1 Hash:

Screenshot_7|690x378

Select Salt and click the dynamic data picker button to select a value:

Screenshot_8|690x378

Select the password under repeat, and click the select button:

Screenshot_9|690x378

Click Select:

Screenshot_10|690x378

And click Select to apply the dynamic value for the Set Value step:

Screenshot_11|690x378

The step generating the unique hash for the dynamic reset link is ready. We will also need the email, so right click the hash set value step:

Screenshot_1|690x379

And add another Set Value step:

Screenshot_2|690x379

We enter email in the name and global name fields:

Screenshot_3|690x379

Then click the dynamic data picker to select a value for it. The value should be the email returned by the repeat:

Screenshot_4|690x379

Now as we have our setvalue steps ready let's setup mail options. Right click the Repeat step:

Screenshot_5|690x379

Add Setup Mailer:

Screenshot_53|690x378

Setup your send mail options (SMTP or default server mailer) and right click the Setup Mailer step, when you are done:

Screenshot_54|690x378

Add Send Mail:

Screenshot_55|690x378

Select your mailer and enter your mail subject:

Screenshot_56|690x378

Then setup the sender name and email:

Screenshot_57|690x378

Click the dynamic data picker button, for the recipient email:

Screenshot_58|690x378

This is the email entered in the form input, so select it:

Screenshot_59|690x378

Change the Format to HTML:

Screenshot_60|690x378

And click the edit content button:

Screenshot_61|690x378

Enter some text. For example Click here to reset your password. Then highlight some part of the text to convert to a link:

Screenshot_62|690x378

Click the link button from the editor toolbar:

Screenshot_63|690x378

Enter the link to the page, that will be used for entering the new password, and add ?email={{email}}&id={{hash}} after it. We are going to use the email URL parameter to filter the users by the email and the id URL parameter to validate the user. So {{email}} and {{hash}}` here are the global names of the Set Value steps we created earlier. They will be replaced by the email and unique hash in the link:

Screenshot_1|690x379

Example link: https://yoursite.com/password_reset.html?email={{email}}&id={{hash}}

Click Save when you are done:

Screenshot_67|690x378

Save your server action and close the server connect panel:

Screenshot_68|690x378

Back on the page, select the form and click the Make Server Connect Form button:

Screenshot_70|690x378

Then select your server action:

Screenshot_71|690x378

Select the server action which we just created and click the select button:

Screenshot_72|690x378

And you are done, just save your page. The email with the dynamic reset page link will be generated and send to any user, which email exists in the database. For invalid emails you will see an error message:

Screenshot_13|690x254

Of course you can add a form reset action on success, or redirect to any other page if you like.

In Part 2 we will show you how to create the password reset page and the server action which will update the password in the database.