Allow HTML for custom email bodies (#5635)

server/notification-providers/smtp.js

@@ -42,6 +42,7 @@ class SMTP extends NotificationProvider {
         // default values in case the user does not want to template
         let subject = msg;
         let body = msg;
+        let useHTMLBody = false;
         if (heartbeatJSON) {
             body = `${msg}\nTime (${heartbeatJSON["timezone"]}): ${heartbeatJSON["localDateTime"]}`;
         }
@@ -50,11 +51,11 @@ class SMTP extends NotificationProvider {
             // cannot end with whitespace as this often raises spam scores
             const customSubject = notification.customSubject?.trim() || "";
             const customBody = notification.customBody?.trim() || "";
-
             if (customSubject !== "") {
                 subject = await this.renderTemplate(customSubject, msg, monitorJSON, heartbeatJSON);
             }
             if (customBody !== "") {
+                useHTMLBody = notification.htmlBody || false;
                 body = await this.renderTemplate(customBody, msg, monitorJSON, heartbeatJSON);
             }
         }
@@ -67,7 +68,8 @@ class SMTP extends NotificationProvider {
             bcc: notification.smtpBCC,
             to: notification.smtpTo,
             subject: subject,
-            text: body,
+            // If the email body is custom, and the user wants it, set the email body as HTML
+            [useHTMLBody ? "html" : "text"]: body
         });
 
         return okMsg;

src/components/notifications/SMTP.vue

@@ -79,6 +79,15 @@
             <div class="form-text">{{ $t("leave blank for default body") }}</div>
         </div>
 
+        <div class="mb-3">
+            <div class="form-check">
+                <input id="use-html-body" v-model="$parent.notification.htmlBody" class="form-check-input" type="checkbox" value="">
+                <label class="form-check-label" for="use-html-body">
+                    {{ $t("Use HTML for custom E-mail body") }}
+                </label>
+            </div>
+        </div>
+
         <ToggleSection :heading="$t('smtpDkimSettings')">
             <i18n-t tag="div" keypath="smtpDkimDesc" class="form-text mb-3">
                 <a href="https://nodemailer.com/dkim/" target="_blank">{{ $t("documentation") }}</a>

src/lang/en.json

@@ -517,6 +517,7 @@
     "Clone": "Clone",
     "cloneOf": "Clone of {0}",
     "smtp": "Email (SMTP)",
+    "Use HTML for custom E-mail body": "Use HTML for custom E-mail body",
     "secureOptionNone": "None / STARTTLS (25, 587)",
     "secureOptionTLS": "TLS (465)",
     "Ignore TLS Error": "Ignore TLS Error",