Utilizing Wix for verification link in email

I am currently navigating Wix at . I have successfully created a registration page that sends an email to the user with a link to confirm their account activation. Although I did manage to code the email sending process effectively, I encountered difficulty in inserting the activation link within the email message to direct users to the confirmation page for verifying their accounts. Below are the snippets of my code:

Verify Registration Page:

import wixLocation from 'wix-location';
import wixUsersBackend from 'wix-users';
import {doApproval} from 'backend/register';

$w.onReady( () => {
  // fetch token from the URL
    let token = wixLocation.query.token;
    doApproval(token)
    .then( (result) => {
      if (result.approved){
        // log the user in
         wixUsersBackend.applySessionToken(result.sessionToken);
         console.log("Approved");
     } else {
         console.log("Not approved!");
      }
  });
});

Register Page:

import wixData from 'wix-data';
import wixWindow from 'wix-window';
import wixUsers from 'wix-users';
import wixUsersBackend from 'wix-users';
import {doRegistration} from 'backend/register';
import {sendEmail, sendEmailWithRecipient} from 'backend/email';

function sendFormData() {
   let subject = `Activate your account ${$w("#firstname").value}`;
   let body = `Dear ${$w("#firstname").value} ${$w("#lastname").value},
            
Thank you for registering on TIMLANDS, we hope you find it rewarding! Please note that your account at TIMLANDS needs to be activated.
Please click on the following URL: xxxxxxxxxx If the link above does not work, try copying and pasting it into the address bar 
in your browser. This email is to confirm your registration. If you have received this email by mistake, please notify us.

TIMLANDS Team`;

const recipient = $w("#email").value;

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response)); 

sendEmail(subject, body)
.then(response => console.log(response));
}

email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
   const key = "SG.IIM7kezyQXm4UD........";
   const sender = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6d7b707a7b6c5e79737f7772307d7173">[email protected]</a>";
   const recipient = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e5f2f4fee7fef2f9e3d7f0faf6fefbb9f4f8fa">[email protected]</a>";
   return sendWithService(key, sender, recipient, subject, body);
}

export function sendEmailWithRecipient(subject, body, recipient) {
   const key = "SG.IIM7kezyQXm4UD......";  
   const sender = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daa9bfb4bebfa89abdb7bbb3b6f4b9b5b7">[email protected]</a>";
   return sendWithService(key, sender, recipient, subject, body);
}

register.jsw

import wixUsersBackend from 'wix-users-backend';

export function doRegistration(email, password, firstName, lastName) {
               
// register the user
return wixUsersBackend.register(email, password, {
   "contactInfo": {
       "firstName": firstName,
       "lastName": lastName
   }
})
.then( (results) => {
   // user is now registered and pending approval
   // send a registration verification email
   wixUsersBackend.emailUser('verifyRegistration', results.user.id, {
       "variables": {
           "name": firstName,
           "verifyLink": `http://timlands/verificationpage?token=${results.approvalToken}`
       }
   });
});
}
export function doApproval(token) {
   // approve the user
   return wixUsersBackend.approveByToken(token)
   // user is now active, but not logged in
   // return the session token to log in the user client-side
   .then( (sessionToken) => {
       return {sessionToken, "approved": true};
    })
    .catch( (error) => {
       return {"approved": false, "reason": error};
    });
}

I am looking to integrate the activation link present in the register.jsw file into the message body displayed on the register page. Kindly refer to the image below for clarity. Any assistance would be greatly appreciated! https://i.sstatic.net/Zwtwq.png

Answer №1

One issue arose when I forgot to create a variable in the triggered email, which caused some confusion. You can learn more about triggered emails here: Hopefully, this experience can help someone else facing a similar challenge.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring techniques for effectively utilizing Meteor's template helpers in an asynchronous manner

I currently have this code in my HTML file: <div class="col-sm-6"> <div class="hpanel"> <div class="panel-heading">Total Views</div> <div class="panel-body"> <div class="stat-num">{{Views}}</div> ...

What is the best way to arrange this object alphabetically by name using Angular?

My client is in need of an AngularJS application that will interact with an API from an existing app. The API returns JSON data structured like the following: { "groups":{ "60":{ "name":"History" }, "74":{ "n ...

What is the best way to adjust the autoplay volume to a set level?

I have a page with an audio element that autoplays, but I want to ensure the volume is set to a specific level in case a user has their volume turned up to 100%. Any suggestions on how to accomplish this? Here's the HTML code: <audio autoplay> ...

What is the best way to create a CSS class for a list element in React?

I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...

Unexpected unhandled_exception_processor in Google Chrome

I keep encountering a strange uncaught exception handler in Google Chrome. After updating all follow buttons to download JavaScript asynchronously, I noticed an error in the content.js file mentioned in the exception message which advises against polluting ...

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

Steps for Building and Exporting a Next.js Project Without Minification and Optimization

Is there a way to build and export a Next.js project without minifying and optimizing the output files? ...

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

Breaking down a URL based on one of two distinct components

Currently, I have a piece of code that splits the URL and removes everything after &7. Is there a way to modify it so that it also checks for |relevance simultaneously and splits based on whichever one is found? $(document).ready(($) => { const pa ...

Angular 5 - Strategies for excluding specific properties from Observable updates

Currently, I am in the process of developing a webpage where users can view and like various videos. The video content and user likes are stored in a database, and I have implemented two Angular services for handling data retrieval and storage. However, I ...

Node.js MySQL REST API query fails to execute

I am developing a login/sign up API using nodejs, express, and mysql. Despite receiving the "Successful Sign Up!" message without any errors during testing, the user table in the database remains empty. Below is the query I am attempting to execute: con. ...

What is the best way to stack several elements on top of each other?

<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </div> The main concept here ...

The object has an unspecified type

I have a simple Rxjs function involving observables and operators to return a new observable. In my code, I am using filter and map operators chained inside a pipe. Unfortunately, I am receiving the error TS2571: Object is of type 'unknown' insid ...

The functionality of JavaScript in jQuery mobile seems to require a manual refresh to work properly

Recently, I encountered an issue with my jQuery mobile page that contains JavaScript. The trouble is that the JavaScript doesn't function properly until the page is refreshed. Below is the snippet of code causing the problem: jQuery(function($) { ...

Utilizing a series of linked jQuery functions

Is there a more efficient way to write this code snippet? $('#element').html( $('#element').data('test') ); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="el ...

CryptoJS consistently produces identical hash values for distinct files

Utilizing CryptoJS to generate a hash value for uploaded files has presented me with a challenge. Despite my efforts, all files I upload seem to produce identical hash values. It appears that the issue lies within my "onFileChange" function, but pinpointin ...

Gathering all components prior to the comment

I am in the process of scraping information from a webpage. The data I require is contained within separate divs that have a specific class assigned to them. For instance: <div class="temp">text </div> The challenge arises when the number of ...

Disable the draggable feature upon clicking the button

I am currently working on a code challenge where I need to disable the draggable functionality of all divs styled with .myDivs when the user clicks the 'Remove Draggable' button. You can view my progress in this JSFiddle: http://jsfiddle.net/adri ...

Despite applying the style to the image, my rotateY function is not functioning properly

I have created a unique slider feature where images rotate either 180deg or 360deg before sliding. However, I've encountered an issue that I can't seem to figure out. The slider works perfectly until the image reaches its initial position. At thi ...

Go to the child router using the specified outlet

I am attempting to display the expanded item within a grid of components that are being rendered inside a named outlet. In order to achieve this, I have added children to my named outlet path. Currently using Angular 7, I have followed various guides from ...