How do I send User Activation Links?

In this episode, we'll learn how to send User Activation links that allow a User to be invited to an application, set their own password, and activate their account.

Features Discussed:

1. Form Component (Time: 4:04)
   Learn how to configure form components for efficient data entry.
2. Custom Email Notification (Time: 5:22)
   Learn how to create tailored emails where you can dynamically customize fields like "To," "From," subject, and body based on your application’s data.
3. Security (Time: 8:38)
   Learn how to secure your page by adding a condition that checks if a user is an admin. If the user is an admin, they will be redirected to a specific page; otherwise, access will be restricted or redirected to another page.
4. Email Notifications (Time: 10:40)
   Learn how to set up an email template by assigning a predefined template to a specific field in your application.
5. HTML Component (Time: 14:39)
   Learn how to use the HTML Component effectively. Example: Display icons and messages (e.g., "Activation was successful") after record updates to enhance user experience.
6. Link Button (Time: 15:33)
   Learn about using the Link Button, including how to add a custom class and display the button centered on the page.

Transcript Summary

Introduction

Hey everybody, welcome back to Build It with Tadabase! On this week's episode, we're talking about user activation links. We're going to be sending an email to a user after we've added them to our application, allowing them to come back to the application, activate their account, and start using the application right away. As usual, we're going to take a quick look at the finished product first and then jump into the Builder to build the whole thing from scratch.

Overview of the Finished Product

I'm logged into the finished application here as an administrator, and I'm going to add a new user to this application by giving them a name, an email address, and a role. I'll save this form, and it's going to send an email to the user I just defined. When that user receives the email, they'll get this nice, fancy email with their name in it and a button that takes them to a page specifically for them to add a password. Once they submit it, they go to an activation page saying everything was successful, and there's a button to go back to the login and start using the app.

Setting Up the Data Structure

The great thing about what we're doing here is that we don't need to make many modifications to our data structure, and nothing is overly complex in terms of relationships or connections—everything is very straightforward. The only thing we need to add is one field in our users' table. We're going to navigate to the users' table and the Fields tab, and we're going to add a text field to store a record ID. We'll call this field "Record ID" and save it.

To populate this field, we'll set up one table rule. On record creation, we'll set the value of that Record ID to the record value of Record ID, and we're done. Now, whenever we add new users, that Record ID field will be populated with the unique ID assigned to every single record in the application. This unique ID will be used inside a URL, so we can send the user a link to a page where they can edit a form specifically for them.

Building the Pages

Now we're ready to build out the pages. In this particular workflow, users are not allowed to register themselves; an administrator or supervisor will add the user record manually. From there, we'll send an email to the new user with an activation link that takes them to a page with an edit form specifically for their user record. They can then set their own password, submit the form, and activate their account. After that, they can start using the application.

Admin Add Users Page

We'll start by adding a page called "Admin Add Users," intended for an administrator. This page will have a table component of the users' table, and we'll include a form to add new users. This form will be used by the administrator to add new users. We'll remove all fields except for the name, email, and possibly the role. The Record ID field will be set through a table rule, but if you don't have access to table rules, you could do this in the record rules by including a rule to update the record and set the Record ID to the form value of Record ID.

Email Notification

When this form is submitted, we'll send an email notification to the new user. In the Notifications tab, we'll add a new email. I'm going to use an HTML template I've created to send a beautiful email. We'll set the recipient to the user's email, fill out the rest of the information, and set the subject to "Activate Your New Account."

Now, we need to set up the page where the user will land when they click the activation button in the email.

Creating the Activation Page

We'll add a new layout called "Blank Layout" without any pre-configured styles. This will be a simple page with just a container. Then, we'll create a page under this layout for users to come back to when they click the activation link.

This page will be a detail page for the user's record, allowing them to set their password. We'll secure the parent page so only admins can access it, but the user detail page will be public. We'll need the URL of this page to include in our email.

Customizing the Email Template

After retrieving the URL for the user detail page, we'll go back to the email notification and customize it. We'll replace the placeholder record ID with a dynamic value using curly brackets, and we'll include the user's name in the email as well. Once everything is set, we'll save the email notification.

Testing the Workflow

Now, let's test the entire workflow. I'll add a new user with just a name, email, and role, and it should send an email out. The status will show as not active because the user hasn't set a password yet. I received the email on my phone, so I'll open it. The email has my name, the activation link, and when I click it, it takes me to the user detail page where I can set my password.

On this page, we'll add a form to edit the user record, allowing them to set their password. We'll customize the form title to "Set Your Password" and make the password field required. We'll also change the submit button text to "Activate."

We'll add a record rule to update the user status to active once the form is submitted, allowing them to log in. We'll also create a new page called "Activation Successful" with a simple message and a button to redirect them to the login page.

Once the form is submitted, they'll be redirected to the "Activation Successful" page, where they can click the "Login Now" button to go to the login page and use the password they just set.

Final Test

Let's run through the entire process. I'll preview the admin page, add a new user, set their name and email, and submit the form. The user will receive an email, click the activation link, set their password, and be redirected to the activation success page. From there, they can go to the login page and log in with their new credentials.

That's how we build this workflow. It's very easy and straightforward, requiring just a little maneuvering to guide and redirect users to the right pages. That's it for this week's episode of Build It with Tim. I hope you enjoyed this episode, and I'll see you next week. Thanks for watching, everybody!