Getting Started with Email Templates and Custom User-Facing pages

by Marian Ignev

Parse Server and SashiDo users love the password reset and email verification features, but some of you have asked for better control over these experiences. Perhaps your customers don't speak English, or you have a well defined brand that you want these experiences to adhere to. Or maybe you just don't like your users knowing that you use SashiDo.io as your backend. Today we'll share with you an unparalleled control over your branding with Parse Server and SashiDo. The following features are accessible from your app settings page:

Email Templates

Password resets and email verifications require us to email links to your users. With Parse Server and SashiDo you have the ability to customize the email text very easy. Email templates use a simple markup language that replaces %username%, %email%, %appname%, and %link% with their appropriate values.

For example, the body:

Thank you for joining %appname%. We're excited to have you onboard. 
To access our premium features, please verify your email address by clicking this link: %link%.

Would send the following email to your users:

Thank you for joining AnyWall. We're excited to have you onboard.

To access our premium features, please verify your email address by clicking on this link: some link

Custom User-Facing Pages

Another good feautre in SashiDo with the Parse Server are the User-Facing pages. The Parse Server's password reset and email verification features are implemented with the Model-View-Controller design pattern. The Parse Server is the "controller" for your app and provides default views. Developers who wish to control the design of these pages can tell SashiDo to use modified versions of these pages instead. Each view is a simple and clearly written HTML/CSS/JavaScript page. Download any user-facing page and modify it as you wish. Put your modified version online and give us its address to replace that view in your app.

Consider the Password Reset workflow:

  1. A user is mailed a link with which he or she can choose a new

    password
  2. The user clicks the link and is forwarded to choose_password.html to select a new password.
  3. The user submits his or her new password and he will receive a confirmation that the new password has been successfully changed by password_reset_success.html
  4. If malicious users attempt to reverse engineer the password reset link, they are sent to invalid_link.html

Each of these three pages can be replaced in the app settings page in SashiDo Dashboard. You could add a corporate logo or stylesheets to each page. SashiDo will use your pages as a replacement for Parse Server defaults.

When you change the links in the app settings page you need somehow to deploy your custom pages to the application itself. Let me give you 2 simple ways to do this.

If you are not familiar with SashiDo yet, I want to share with you that we are creating a FREE Private GitHub repo for every application deployed in our platform in order to give you the best experience to collaborate with your colleagues, customize and deploy your Cloud Code with just a git push command. If you want to learn more about this feature you can take a look at our Cloud Code Tutorials Section.

For demo purposes, we have a public GitHub repo that demonstrates the basics of the integration. The demo repo is available at the following link:

CloudCode Public Static Pages

This is the easiest best way if you want just to customize these pages with your logos, stylesheets or some JavaScript.

Opening the repo mentioned above you can see in its structure the public directory. This is the directory where you can add all of your static assets, css, js, images including your HTML files.

When you open the public directory you can see another directory called pages and this is the directory where we suggest you to store your custom user-facing pages if you decide to follow this approach.

For your comfort we have uploaded all the user-facing pages that can be customized:

1. choose_password.html

This page is displayed when someone clicks a valid 'reset password' link. You should feel free to add to this page (i.e. branding or security widgets) but should be sure not to delete any of the form inputs or the JavaScript from the template file.

This JavaScript is what adds the necessary values to authenticate this session with the Parse Server.

The query params 'username' and 'app' hold the friendly names for your current user and your app. You should feel free to incorporate their values to make the page more personal.

If you are missing form parameters in your POST, the Parse Server will navigate back to this page and add an 'error' query parameter.

2. password_reset_success.html

This page is displayed whenever someone has successfully reset their password. This page will be called with the query param 'username'

3. verify_email_success.html

This page is displayed whenever someone has successfully verify their email address. This page will be called with the query param 'username'

4. invalid_link.html

This page is displayed when someone navigates to a verify email or reset password link but their security token is wrong. This can either mean the user has clicked on a stale link (i.e. re-click on a password reset link after resetting their password) or (rarely) this could be a sign of a malicious user trying to tamper with your app.

The custom user-facing pages URLs

If you follow this approach and you put your custom pages in <your-repo>/public/pages/<page>.html so your pages will be available after you deploy them to the repo on the following addresses:

  • https://<your-sashido-app-address>.scalabl.cloud/pages/choose_password.html
  • https://<your-sashido-app-address>.scalabl.cloud/pages/password_reset_success.html
  • https://<your-sashido-app-address>.scalabl.cloud/pages/verify_email_success.html
  • https://<your-sashido-app-address>.scalabl.cloud/pages/invalid_link.html

The final step after you're sure that your custom user-facing pages are live is to tell the Parse Server to use them.

And Yes ... it's that easy :)

Advanced Cloud Code

Following the same principles as the section above, this is the way when you need some dynamic or advanced behavior on that pages.

Sometimes you need to do some things behind the scenes when an error appears or the customer visits some of these pages. Here the Advanced Cloud Code is your friend.

SashiDo's Advanced Cloud Code functionality is actually an ExpressJS application with the ability to use custom NPM modules.

Here is what you need to know when you decide to follow this approach. What we are doing behind the scenes is to mount that ExpressJS application to the Parse Server Router. As you can see in the example we have defined a custom get routes:

  • /advanced_choose_password
  • /advanced_password_reset_success
  • /advanced_verify_email_success
  • /advanced_invalid_link

p.s: More information about how to use ExpressJS res you can find here:

If you want to access these routes you just need to do a GET request to the following URL:

  • https://<your-sashido-app-address>.scalabl.cloud/advanced_choose_password
  • https://<your-sashido-app-address>.scalabl.cloud/advanced_password_reset_success
  • https://<your-sashido-app-address>.scalabl.cloud/advanced_verify_email_success
  • https://<your-sashido-app-address>.scalabl.cloud/advanced_invalid_link

The final step after you're sure that your custom advanced user-facing pages are live is to tell the Parse Server to use them.

p.s: If you don't know what your handlers should return as a response take a look at the static user facing pages for ideas here:

Yes, it's that simple :)

SashiDo's Advanced Cloud Code approach will be the best option if you need to put some server-side logic on your user-facing pages.

The Advanced Cloud Code links:

If you want to learn more about the SashiDo's Cloud Code functionality and the Static WebSite Hosting you can take a look at the following sections:

Fin

I think this is all you need! You're GURU now! :)

Do not forget! If you have any questions you can always contact our support for further assistance.

Happy Coding!