Introduction

One of the more common workflows is a typical Password Reset. What makes this process fairly complex is that it involves multiple steps in a workflow scenario. The steps involved in this workflow are as follows.

1. A user fills out a form to reset their password.

2. This form has an action that sends the user an email with a special SSO link to reset their password.

3. Once the user clicks on this link, they are sent to a different form where they will provide their new password.

4. Once they submit this form it gives them a message that their password has been reset.

There are a few ways to accomplish this, but this tutorial will walk you through a method that incorporates the Email Login functionality which will illustrate how flexible you can be with the Password Reset workflow.

User Self Access

In order to allow each user to update their own account, we will first need to ensure that we enable the Self Access setting on the User resource. This configuration allows each user to update and have admin access over their own submission (including update and delete). This will allow them to save their new password. To do this, we will need to navigate to the User resource, and then click on Access. Under this tab, we will need to enable Self Access as follows.

Next we will need to make sure we Save Access at the bottom of the page.

Send Password Reset Form

After we have done this, the next step in this process is to create a form that will serve as the first form the user will see when they want to reset their password. Since the purpose of this form is to send the user an email for them to login and reset their password, we will call this the "Send Password Reset" form. We can do this by creating a new form and providing the following fields.

Once you have this form, you will press the Create Form button.

Access Settings

Next, we will need to ensure that we can submit this form anonymously, so click on the Access settings, and then ensure that Anonymous has been granted the Create Own Submission permission.

Email Action

Next, we will need to setup the Email action for this form, so first we will Remove the Save Submission action, and then after that we will need to add an Email action to this form.

Make sure you click Add Action to add the Email action to this form.

Within this email, we will need to make sure we first send the email to the user who submitted the form. We can do this by referencing the Email field using the {{ data.email }} token in the To field.

We will then need to send an Email Login token to this user. We can do this using the Email Login System. This makes it so that it will add an SSO token for the user to login to. We will also need to provide an application that will be hosting this form for the user to come back to once they click on the link. We will use our hosted FormView application @ https://pro.formview.io as the application, and the form they will come to will be the next form in our workflow which will be the password reset form. This will look like the following in the Message section of the Email action.

<p>Please click on the following link to Reset your Password:</p>
<a href="https://pro.formview.io/#/humanresources/reset?token=[[token(data.email=user)]]&reset=true">Click here to reset Your password</a>

If you are in a Deployed Environment, the href link will look like the following.

https://yourserver.com/yourproject/manage/view/#/form/reset?token=[[token(data.email=user)]]&reset=true

Here is how it will look in the message body.

What this will do is make it so that it sends the user an email with an SSO token. This will then navigate to another form (where they will then be authenticated) and it will allow the user to reset their password. Let's click the Save Action button, and now move onto building the Reset Password form.

Password Reset Form

This will be the form that the user is sent to after they click on the link in the Email. Since we have already defined the path to be "reset" we will just need to make sure that our paths match when creating this new form. It will look like the following.

The Validate Password field has a Custom Validation as follows.

valid = (input === data.newPassword) ? true : 'Passwords must match';

The Change Password button is configured as follows.

Next we will click the Create Form button to ensure it is created.

Access Settings

We will now need to ensure that we allow Authenticated users the ability to submit this form.

Password Reset Controller

Now that we have our form, the last thing we need to do is to add a Form Controller that will handle the User Password reset. We can do this by clicking on the Form Settings, and then paste the following in the Form Controller section.

// Listen for the "changePassword" event.
instance.on('changePassword', function() {
  // Get the current form submission.
  var submission = instance.submission;
  
  // Get the current user object.
  var user = Formio.getUser();
  
  // Set the user password to the form password value.
  user.data.password = submission.data.password;
  
  // Save the user
  (new Formio(Formio.getProjectUrl() + '/user/submission')).saveSubmission(user).then(function() {
    var projectName = (new Formio(Formio.getProjectUrl())).projectId;
    
    // Redirect to a thank you page.
    window.location.href = 'https://pro.formview.io/#/' + projectName + '/thanks?reset=true';
  })
});

For deployed servers, this configuration will change slightly where the redirect will look like the following.

window.location.href = 'https://yourserver.com/' + projectName + '/manage/view/#/form/thanks?reset=true';

Make sure you Save Settings when you do this.

Thank you page

The last thing we will do is create a form that will serve as our Thank You page. This can be a simple form that does not have any controls on it, like the following.

Try it out

Now that we have this configured, let's try it out.

Create a User

First let's create a user in the User resource, by clicking on the Use tab in the user resource.

Login to this User

We can test the login by using Postman and doing a POST to the user/login form.

Reset the Password

Next, we will navigate to the following application URL.

https://pro.formview.io/#/yourproject/sendpasswordreset

We will then fill out the form with the email address of the user we just created and then press the Send Reset button.

We should then get the following email.

Once we click on this link we will then see the following.

​