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.
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.
GET /edit-profile
This endpoint is responsible for handling requests to view the “Edit Profile” page. From the “New Endpoint” page …
- Leave the
Method
set asGET
. - Set the
Route
to/edit-profile
. - Change the
Access Control
toAny authenticated user
. - Set the
Unauthorized Reply Type
toRedirect
, with aStatus Code
of302
and aPath
of/login
.
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.
- Set the
Method
toPOST
. - Set the
Route
to/edit-profile
. - Change the
Access Control
toAny authenticated user
. - Set the
Unauthorized Reply Type
toRedirect
, with aStatus Code
of302
and aPath
of/login
.
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.
- Leave the
Method
set asGET
. - Set the
Route
to/change-password
. - Change the
Access Control
toAny authenticated user
. - Set the
Unauthorized Reply Type
toRedirect
, with aStatus Code
of302
and aPath
of/login
.
POST /change-password
This endpoint is responsible for handling form submissions from the “Change Password” page.
- Set the
Method
toPOST
. - Set the
Route
to/change-password
. - Change the
Access Control
toAny authenticated user
. - Set the
Unauthorized Reply Type
toRedirect
, with aStatus Code
of302
and aPath
of/login
.
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.
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.
Name
the pageEdit Profile
.- 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.
- Select your previously created layout for the page’s
Layout
. - Choose
Custom
for thePage Type
. - 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.
Name
this new pageChange Password
.- Select the same
Layout
as for your other pages. - Choose
Custom
for thePage Type
. - 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.
Name
the componentsuccessAlert
.- 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.
- Navigate to the
profileForm
component from your list of components. - 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 if there is a current user with the {{#if experience.user}}
block helper and conditionally 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
- Download the workflow template, then import the file
endpoint-edit-profile.flow
as a new experience workflow. - Update each of the endpoint triggers to point to the
POST /edit-profile
andGET /edit-profile
endpoints you created above. - Update the endpoint reply nodes to point to your
Edit Profile
page. - Enable the workflow (since imported workflows are by default disabled).
As a general overview, this workflow handles the following:
- If a user visits
/edit-profile
, we respond to the request with our newEdit Profile
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 theEdit 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 oursuccessAlert
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.
- Download the workflow template, then import the file
endpoint-change-password.flow
as a new experience workflow. - Update each of the endpoint triggers to point to the
POST /change-password
andGET /change-password
endpoints you created above. - Update the endpoint reply nodes to point to your
Change Password
page. - Enable the workflow (since imported workflows are by default disabled).
As a general overview, this workflow handles the following:
- If a user visits
/change-password
, we respond to the request with our newChange Password
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 theChange 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.
Link to the Feature
Finally, let’s give our experience users a way to reach the features we just completed.
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.
This concludes this tutorial, in which we’ve added the ability for experience visitors to register for an account and start accessing parts of the experience that were previously open only to logged-in visitors. Next, we’ll build on top of what we’ve done here to add a forgot password flow.
Was this page helpful?
Still looking for help? You can also search the Losant Forums or submit your question there.