Merge pull request #836 from Hexastack/feat/use-handlebars-infavor-of-ejs

feat: use handlebars as template engine for mailing & remove ejs

api/package-lock.json

@@ -33,7 +33,6 @@
         "connect-mongo": "^5.1.0",
         "cookie-parser": "^1.4.6",
         "dotenv": "^16.3.1",
-        "ejs": "^3.1.9",
         "express-session": "^1.17.3",
         "handlebars": "^4.7.8",
         "module-alias": "^2.2.3",
@@ -7408,7 +7407,8 @@
     "node_modules/async": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
+      "optional": true
     },
     "node_modules/async-mutex": {
       "version": "0.4.1",
@@ -9629,6 +9629,7 @@
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
       "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "optional": true,
       "dependencies": {
         "jake": "^10.8.5"
       },
@@ -10805,6 +10806,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
       "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "optional": true,
       "dependencies": {
         "minimatch": "^5.0.1"
       }
@@ -10813,6 +10815,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "optional": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -10821,6 +10824,7 @@
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
       "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "optional": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -12526,6 +12530,7 @@
       "version": "10.8.7",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.7.tgz",
       "integrity": "sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==",
+      "optional": true,
       "dependencies": {
         "async": "^3.2.3",
         "chalk": "^4.0.2",

api/package.json

@@ -68,7 +68,6 @@
     "connect-mongo": "^5.1.0",
     "cookie-parser": "^1.4.6",
     "dotenv": "^16.3.1",
-    "ejs": "^3.1.9",
     "express-session": "^1.17.3",
     "handlebars": "^4.7.8",
     "module-alias": "^2.2.3",

api/src/app.module.ts

@@ -71,7 +71,15 @@ const i18nOptions: I18nOptions = {
               debug: false,
             }),
             template: {
-              adapter: new MjmlAdapter('ejs', { inlineCssEnabled: false }),
+              adapter: new MjmlAdapter(
+                'handlebars',
+                {
+                  inlineCssEnabled: false,
+                },
+                {
+                  handlebar: {},
+                },
+              ),
               dir: path.join(process.cwd(), 'dist', 'templates'),
               options: {
                 context: {

api/src/templates/account_confirmation.mjml

@@ -2,34 +2,38 @@
   <mj-body>
     <mj-section>
       <mj-column>
-        <mj-image width="186px" src="https://hexabot.ai/assets/images/logo.png"></mj-image>
+        <mj-image
+          width="186px"
+          src="https://hexabot.ai/assets/images/logo.png"
+        ></mj-image>
         <mj-divider border-color="#000"></mj-divider>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('hi') %> <%= first_name %>,</mj-text
+          {{t 'hi'}} {{first_name}},
-        >
+        </mj-text>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('account_successfully_created_confirm_password') %></mj-text
+          {{t 'account_successfully_created_confirm_password'}}
-        >
+        </mj-text>
 
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('confirm_account') %></mj-text
+          {{t 'confirm_account'}}
-        >
+        </mj-text>
         <mj-button
-          href="<%= this.appUrl %>/login/<%= token %>"
+          href="{{appUrl}}/login/{{token}}"
           font-size="16px"
           background-color="#000"
-          ><%= t('confirm') %></mj-button
         >
+          {{t 'confirm'}}
+        </mj-button>
       </mj-column>
     </mj-section>
     <mj-section>
       <mj-column>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('best_regards') %></mj-text
+          {{t 'best_regards'}}
-        >
+        </mj-text>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= this.appName %></mj-text
+          {{appName}}
-        >
+        </mj-text>
       </mj-column>
     </mj-section>
   </mj-body>

api/src/templates/invitation.mjml

@@ -2,36 +2,39 @@
   <mj-body>
     <mj-section>
       <mj-column>
-        <mj-image width="186px" src="https://hexabot.ai/assets/images/logo.png"></mj-image>
+        <mj-image
+          width="186px"
+          src="https://hexabot.ai/assets/images/logo.png"
+        ></mj-image>
         <mj-divider border-color="#000"></mj-divider>
         <mj-text font-size="16px" color="#000" font-family="helvetica">
-          <%= t('welcome') %>,
+          {{t 'welcome'}}
+        </mj-text>
+
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
+          {{t 'invitation_for_account_creation'}} {{appName}} {{t 'account'}}.
         </mj-text>
 
         <mj-text font-size="16px" color="#000" font-family="helvetica"
-          ><%= `${t('invitation_for_account_creation')} ${this.appName}
+          >{{ t 'create_account'}}</mj-text
-          ${t('account')}.` %></mj-text
-        >
-
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
-          ><%= t('create_account') %></mj-text
         >
         <mj-button
-          href="<%= this.appUrl %>/register/<%= token %>"
+          href="{{appUrl}}/register/{{token}}"
           font-size="16px"
           background-color="#000"
-          ><%= t('join') %></mj-button
+        >
+          {{t 'join'}}</mj-button
         >
       </mj-column>
     </mj-section>
     <mj-section>
       <mj-column>
         <mj-text font-size="16px" color="#000" font-family="helvetica"
-          ><%= t('best_regards') %></mj-text
+          >{{t 'best_regards'}}
-        >
+        </mj-text>
 
         <mj-text font-size="16px" color="#000" font-family="helvetica"
-          ><%= this.appName %></mj-text
+          >{{this.appName }}</mj-text
         >
       </mj-column>
     </mj-section>

api/src/templates/password_reset.mjml

@@ -2,33 +2,37 @@
   <mj-body>
     <mj-section>
       <mj-column>
-        <mj-image width="186px" src="https://hexabot.ai/assets/images/logo.png"></mj-image>
+        <mj-image
+          width="186px"
+          src="https://hexabot.ai/assets/images/logo.png"
+        ></mj-image>
         <mj-divider border-color="#000"></mj-divider>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('hi') %> <%= first_name %>,</mj-text
+          {{t 'hi'}} {{first_name}},
-        >
+        </mj-text>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('password_reset_request') %></mj-text
+          {{t 'password_reset_request'}}
-        >
+        </mj-text>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('click_to_reset_password') %></mj-text
+          {{t 'click_to_reset_password'}}
-        >
+        </mj-text>
         <mj-button
-          href="<%= this.appUrl %>/reset/<%= token %>"
+          href="{{appUrl}}/reset/{{token}}"
           font-size="16px"
           background-color="#000"
-          ><%= t('reset') %></mj-button
         >
+          {{t 'reset'}}
+        </mj-button>
       </mj-column>
     </mj-section>
     <mj-section>
       <mj-column>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= t('best_regards') %></mj-text
+          {{t 'best_regards'}}
-        >
+        </mj-text>
-        <mj-text font-size="16px" color="#000" font-family="helvetica"
+        <mj-text font-size="16px" color="#000" font-family="helvetica">
-          ><%= this.appName %></mj-text
+          {{appName}}
-        >
+        </mj-text>
       </mj-column>
     </mj-section>
   </mj-body>

api/src/user/services/invitation.service.ts

@@ -1,11 +1,13 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+// eslint-disable-next-line import/order
+import { MailerService } from '@nestjs-modules/mailer';
 import {
   Inject,
   Injectable,
@@ -13,7 +15,6 @@ import {
   Optional,
 } from '@nestjs/common';
 import { JwtService, JwtSignOptions } from '@nestjs/jwt';
-import { MailerService } from '@nestjs-modules/mailer';
 
 import { config } from '@/config';
 import { I18nService } from '@/i18n/services/i18n.service';
@@ -69,6 +70,8 @@ export class InvitationService extends BaseService<
           to: dto.email,
           template: 'invitation.mjml',
           context: {
+            appName: config.parameters.appName,
+            appUrl: config.uiBaseUrl,
             token: jwt,
             // TODO: Which language should we use?
             t: (key: string) =>

api/src/user/services/passwordReset.service.ts

@@ -1,11 +1,13 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+// eslint-disable-next-line import/order
+import { MailerService } from '@nestjs-modules/mailer';
 import {
   BadRequestException,
   Inject,
@@ -16,7 +18,6 @@ import {
   UnauthorizedException,
 } from '@nestjs/common';
 import { JwtService, JwtSignOptions } from '@nestjs/jwt';
-import { MailerService } from '@nestjs-modules/mailer';
 import { compareSync } from 'bcryptjs';
 
 import { config } from '@/config';
@@ -66,6 +67,8 @@ export class PasswordResetService {
           to: dto.email,
           template: 'password_reset.mjml',
           context: {
+            appName: config.parameters.appName,
+            appUrl: config.uiBaseUrl,
             token: jwt,
             first_name: user.first_name,
             t: (key: string) =>

api/src/user/services/validate-account.service.ts

@@ -1,11 +1,13 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+// eslint-disable-next-line import/order
+import { MailerService } from '@nestjs-modules/mailer';
 import {
   Inject,
   Injectable,
@@ -14,7 +16,6 @@ import {
   UnauthorizedException,
 } from '@nestjs/common';
 import { JwtService, JwtSignOptions } from '@nestjs/jwt';
-import { MailerService } from '@nestjs-modules/mailer';
 
 import { config } from '@/config';
 import { I18nService } from '@/i18n/services/i18n.service';
@@ -83,6 +84,8 @@ export class ValidateAccountService {
           to: dto.email,
           template: 'account_confirmation.mjml',
           context: {
+            appName: config.parameters.appName,
+            appUrl: config.uiBaseUrl,
             token: confirmationToken,
             first_name: dto.first_name,
             t: (key: string) =>