User Profile

In a previous step, we added the ability for experience visitors to register for an account. Now, we'll build on the changes we made there and allow our experience users to manage their profiles.

User Profile Overview

Create the Endpoints

We'll be adding four endpoints: two for profile management and two for password changing. From your experience overview page, click "Endpoints" in the left column, then click "Add Endpoint" in the top right corner.

Add Endpoint

GET /edit-profile

This endpoint is responsible for handling requests to view the "Edit Profile" page. From the "New Endpoint" page ...

  1. Leave the Method set as GET.
  2. Set the Route to /edit-profile.
  3. Change the Access Control to All public users.

Save the route, then return to the endpoints list page and click "Add Endpoint" to add the next route.

POST /edit-profile

This endpoint is responsible for handling form submissions from the "Edit Profile" page.

  1. Set the Method to POST.
  2. Set the Route to /edit-profile.
  3. Change the Access Control to All public users.

Same as before, save this route and back out to the endpoints list to make another one.

GET /change-password

This endpoint is responsible for handling requests to view the "Change Password" page.

  1. Leave the Method set as GET.
  2. Set the Route to /change-password.
  3. Change the Access Control to All public users.

POST /change-password

This endpoint is responsible for handling form submissions from the "Change Password" page.

  1. Set the Method to POST.
  2. Set the Route to /change-password.
  3. Change the Access Control to All public users.

Create the Views

Now that all the endpoints have been created, let's move on to creating our new views. We'll be creating two new pages; making one new component; and editing a component we created in a previous step. Click "Views" in the left column to return to your Experience Views list.

Add Page

Page: Edit Profile

First we'll create a new page to render when the /edit-profile endpoint is requested. From here, users can change their name and email address. Click "Views" in the left column to return to your Experience Views list, then click the "Add" button in the "Pages" list.

  1. Name the page Edit Profile.
  2. Add a description if you would like; the field is optional and does not affect the page as it is presented to your experience users.
  3. Select your previously created layout for the page's Layout.
  4. Choose Custom for the Page Type.
  5. Copy this snippet and paste it for the page's Content.

Once the page is ready, click "Create Page" to save your work.

Page: Change Password

Now, we'll add a page where users can change their password. They will have to enter their current password to set a new one. Click "Views" in the left column again to return to the "Views" list, then once again click "Add" in the "Pages" list.

  1. Name this new page Change Password.
  2. Select the same Layout as for your other pages.
  3. Choose Custom for the Page Type.
  4. Copy this code to serve as the page's Content.

Component: successAlert

We're referencing a new component in each of our newly created pages. This component is a simple confirmation box for telling the user that his/her profile changes were successful.

Return to the "Views" page one more time, then click the "Add" button in the "Components" list.

  1. Name the component successAlert.
  2. Use this snippet for the component's Content.

This component is almost identical to our errorAlert component, except it will display in friendly green instead of scary red.

Component Edit: profileForm

Finally, we'll tweak the profileForm component we created for user registration so we can reuse the component in our "Edit Profile" page.

  1. Navigate to the profileForm component from your list of components.
  2. Replace its Content with this snippet.

We're making one significant change to the component, which can be seen just above the closing </form> tag: If the component is being called from the /edit-profile route, we are excluding the password input from the form and changing the text of the submit button. We do this by checking against the current route in the {{#eq request.path "/create-account"}} block helper and condionally rendering one bit of content or the other based on the route.

Create the Workflows

Let's continue with the model we've followed so far by including the GET and POST methods for each route within the same workflow.

Edit Profile Workflow

Edit Profile Workflow

  1. Download the workflow template, then import the file endpoint-edit-profile.flow as a new workflow.
  2. Update each of the endpoint triggers to point to the POST /edit-profile and GET /edit-profile endpoints you created above.
  3. Update the endpoint reply nodes to point to your Edit Profile page.

As a general overview, this workflow handles the following:

  • If a user visits /edit-profile, we respond to the request with our new Edit Profile page – unless the user is not logged in, in which case we redirect them to the Log In page.
  • When that user submits the Edit Profile form, we validate that they have submitted all fields correctly. Then, we attempt to make the update. (It could fail if, for example, the user attempts to change their email address to one that is already registered to another experience user.) If either of these operations fail, we re-render the Edit Profile page with an error message.
  • If the user update is successful, we redirect the user to the same URL with a success=true query parameter. The presence of this on the URL tells us if we should show our successAlert component.

There is a comment on each workflow node describing its function in more detail.

Change Password Workflow

Now let's create a workflow allowing our logged-in users to update their passwords.

Change Password Workflow

  1. Download the workflow template, then import the file endpoint-change-password.flow as a new workflow.
  2. Update each of the endpoint triggers to point to the POST /change-password and GET /change-password endpoints you created above.
  3. Update the endpoint reply nodes to point to your Change Password page.

As a general overview, this workflow handles the following:

  • If a user visits /change-password, we respond to the request with our new Change Password page – unless the user is not logged in, in which case we redirect them to the Log In page.
  • When that user submits the Change Password form, we validate that they have submitted valid old and new passwords. Then, we try authenticating using the old password provided by the user. If any of those checks fail, we re-render the Change Password page with an error message.
  • If authentication succeeds, we change the user's password and display a confirmation message.

There is a comment on each workflow node describing its function in more detail.

Finally, let's give our experience users a way to reach the features we just completed.

Edit Profile Links

Component Edit: userIndicator

Currently, our userIndicator component displays a single-item dropdown menu in our layout's top right corner when the user is logged in. Let's add links to our two new features into that menu.

Navigate to the userIndicator component from the "Components" list. In the Content, immediately above this line ...

<li><a href="/logout">Log Out</a></li>

...add the following two links:

<li><a href="/edit-profile">Edit Profile</a></li>
<li><a href="/change-password">Change Password</a></li>

Alternatively, you can copy this content and overwrite the entire userIndicator component.

Now, a signed-in user can access the /edit-profile and /change-password links from their contextual menu.

Review

This concludes this tutorial, in which we've added the ability for experience users to update their profiles and change their passwords.

There are plenty more tutorials to come, so check back often for more lessons on building out your application experiences.