Logo

dev-resources.site

for different kinds of informations.

Getting Started with Email Templates and Custom User-Facing pages

Published at
10/28/2019
Categories
tutorial
emailtemplates
verification
cloudcode
Author
veselinastaneva
Author
15 person written this
veselinastaneva
open
Getting Started with Email Templates and Custom User-Facing pages

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 know that you use SashiDo.io as your backend. Today we'll share with you unparalleled control over your branding with Parse Server and SashiDo. The following features are accessible from your app settings page:

Email Templates

Customize Parse Server Emails with SashiDo Dashboard

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 on board. 
To access our premium features, please verify your email address by clicking this link: %link%.
Enter fullscreen mode Exit fullscreen mode

Would send the following email to your users:

Thank you for joining AnyWall. We're excited to have you on board.
To access our premium features, please verify your email address by clicking on this link: some link

Custom User-Facing Pages

Another good feature 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.

password-reset-mvc

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.

user-facing-pages-sashido-dashboard

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 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 verified 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 the 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.

Update your custom user-facing pages

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 those 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.

Update your advanced custom user-facing pages

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!

verification Article's
30 articles in total
Favicon
How to verify NIN for Nigerians on the ecitizen platform.
Favicon
Stay Safe Online: Why You Need Two-Step Verification Now!
Favicon
How to Verify User Accounts in Passkey-Based Systems
Favicon
A Developerโ€™s Guide to Verifying Customer Financial Data in Nigeria
Favicon
User Registration and Account Verification Processes
Favicon
Exploring Advanced Techniques in Portable Stimulus Standard (PSS) for Semiconductor Verification
Favicon
Masto-meta: Gaining insights into fediverse accounts
Favicon
Financial Security in Insurance Companies with KYC
Favicon
Building Digital Trust: A Look at Top Identity Verification Solutions
Favicon
Title: Exploring the Benefits and Applications of Virtual Phone Numbers for SMS Verification
Favicon
Checky - Verify Phone Number API
Favicon
Beyond Passwords: 7 Emerging Technologies in Identity Verification
Favicon
X-Ray.contact - Access in-depth data about people from open sources
Favicon
Phone Number Validation for Enhanced Data Accuracy, User Trust, & Fraud Prevention
Favicon
Queuing Laravel email verification
Favicon
Verify Your Smart Contract Code
Favicon
Verifying your Mastodon Account
Favicon
Verify your Smart Contracts on Etherscan Programmatically using Hardhat
Favicon
Implementing Email validation and verification on our website
Favicon
Laravel 8 Custom Email Verification Tutorial
Favicon
Writing lemmas in Dafny
Favicon
Dafny programming language and software verification system
Favicon
Automatic Program Verification using Dafny
Favicon
Standardizing Data โ€” Making data consistent with 30+ data sources
Favicon
Alloy and an adventure with database concurrency
Favicon
Email Verification API (EVA)
Favicon
Laravel Email Verification APIs
Favicon
Verifying a Nuxt Site on Flattr
Favicon
Setup your Multilingual Email templates and User-Facing pages
Favicon
Getting Started with Email Templates and Custom User-Facing pages

Featured ones: