From d7ffa33950e783828990829d668e8568237a70a3 Mon Sep 17 00:00:00 2001
From: sctnightcore <23263315+sctnightcore@users.noreply.github.com>
Date: Fri, 18 Oct 2024 07:25:23 +0700
Subject: [PATCH] feat: add notification provider `SendGrid` (#5205)

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 server/notification-providers/send-grid.js | 65 ++++++++++++++++++++++
 server/notification.js                     |  2 +
 src/components/NotificationDialog.vue      |  1 +
 src/components/notifications/SendGrid.vue  | 47 ++++++++++++++++
 src/components/notifications/index.js      |  4 +-
 src/lang/en.json                           |  4 +-
 6 files changed, 121 insertions(+), 2 deletions(-)
 create mode 100644 server/notification-providers/send-grid.js
 create mode 100644 src/components/notifications/SendGrid.vue

diff --git a/server/notification-providers/send-grid.js b/server/notification-providers/send-grid.js
new file mode 100644
index 000000000..3489f6385
--- /dev/null
+++ b/server/notification-providers/send-grid.js
@@ -0,0 +1,65 @@
+const NotificationProvider = require("./notification-provider");
+const axios = require("axios");
+
+class SendGrid extends NotificationProvider {
+    name = "SendGrid";
+
+    /**
+     * @inheritdoc
+     */
+    async send(notification, msg, monitorJSON = null, heartbeatJSON = null) {
+        const okMsg = "Sent Successfully.";
+
+        try {
+            let config = {
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${notification.sendgridApiKey}`,
+                },
+            };
+
+            let personalizations = {
+                to: [{ email: notification.sendgridToEmail }],
+            };
+
+            // Add CC recipients if provided
+            if (notification.sendgridCcEmail) {
+                personalizations.cc = notification.sendgridCcEmail
+                    .split(",")
+                    .map((email) => ({ email: email.trim() }));
+            }
+
+            // Add BCC recipients if provided
+            if (notification.sendgridBccEmail) {
+                personalizations.bcc = notification.sendgridBccEmail
+                    .split(",")
+                    .map((email) => ({ email: email.trim() }));
+            }
+
+            let data = {
+                personalizations: [ personalizations ],
+                from: { email: notification.sendgridFromEmail.trim() },
+                subject:
+          notification.sendgridSubject ||
+          "Notification from Your Uptime Kuma",
+                content: [
+                    {
+                        type: "text/plain",
+                        value: msg,
+                    },
+                ],
+            };
+
+            await axios.post(
+                "https://api.sendgrid.com/v3/mail/send",
+                data,
+                config
+            );
+            return okMsg;
+        } catch (error) {
+            this.throwGeneralAxiosError(error);
+        }
+    }
+}
+
+module.exports = SendGrid;
diff --git a/server/notification.js b/server/notification.js
index 26daeb042..e7977eb4a 100644
--- a/server/notification.js
+++ b/server/notification.js
@@ -68,6 +68,7 @@ const GtxMessaging = require("./notification-providers/gtx-messaging");
 const Cellsynt = require("./notification-providers/cellsynt");
 const Onesender = require("./notification-providers/onesender");
 const Wpush = require("./notification-providers/wpush");
+const SendGrid = require("./notification-providers/send-grid");
 
 class Notification {
 
@@ -153,6 +154,7 @@ class Notification {
             new GtxMessaging(),
             new Cellsynt(),
             new Wpush(),
+            new SendGrid()
         ];
         for (let item of list) {
             if (! item.name) {
diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index ec86d15f8..f6d728029 100644
--- a/src/components/NotificationDialog.vue
+++ b/src/components/NotificationDialog.vue
@@ -165,6 +165,7 @@ export default {
                 "whapi": "WhatsApp (Whapi)",
                 "gtxmessaging": "GtxMessaging",
                 "Cellsynt": "Cellsynt",
+                "SendGrid": "SendGrid"
             };
 
             // Put notifications here if it's not supported in most regions or its documentation is not in English
diff --git a/src/components/notifications/SendGrid.vue b/src/components/notifications/SendGrid.vue
new file mode 100644
index 000000000..18118f469
--- /dev/null
+++ b/src/components/notifications/SendGrid.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="mb-3">
+        <label for="sendgrid-api-key" class="form-label">{{ $t("SendGrid API Key") }}</label>
+        <HiddenInput id="push-api-key" v-model="$parent.notification.sendgridApiKey" :required="true" autocomplete="new-password"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="sendgrid-from-email" class="form-label">{{ $t("From Email") }}</label>
+        <input id="sendgrid-from-email" v-model="$parent.notification.sendgridFromEmail" type="email" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="sendgrid-to-email" class="form-label">{{ $t("To Email") }}</label>
+        <input id="sendgrid-to-email" v-model="$parent.notification.sendgridToEmail" type="email" class="form-control" required>
+    </div>
+    <div class="mb-3">
+        <label for="sendgrid-cc-email" class="form-label">{{ $t("smtpCC") }}</label>
+        <input id="sendgrid-cc-email" v-model="$parent.notification.sendgridCcEmail" type="email" class="form-control">
+        <div class="form-text">{{ $t("Separate multiple email addresses with commas") }}</div>
+    </div>
+    <div class="mb-3">
+        <label for="sendgrid-bcc-email" class="form-label">{{ $t("smtpBCC") }}</label>
+        <input id="sendgrid-bcc-email" v-model="$parent.notification.sendgridBccEmail" type="email" class="form-control">
+        <small class="form-text text-muted">{{ $t("Separate multiple email addresses with commas") }}</small>
+    </div>
+    <div class="mb-3">
+        <label for="sendgrid-subject" class="form-label">{{ $t("Subject:") }}</label>
+        <input id="sendgrid-subject" v-model="$parent.notification.sendgridSubject" type="text" class="form-control">
+        <small class="form-text text-muted">{{ $t("leave blank for default subject") }}</small>
+    </div>
+    <i18n-t tag="p" keypath="More info on:" style="margin-top: 8px;">
+        <a href="https://docs.sendgrid.com/api-reference/mail-send/mail-send" target="_blank">https://docs.sendgrid.com/api-reference/mail-send/mail-send</a>
+    </i18n-t>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+    mounted() {
+        if (typeof this.$parent.notification.sendgridSubject === "undefined") {
+            this.$parent.notification.sendgridSubject = "Notification from Your Uptime Kuma";
+        }
+    },
+};
+</script>
diff --git a/src/components/notifications/index.js b/src/components/notifications/index.js
index 35a3a920a..efa2af5c4 100644
--- a/src/components/notifications/index.js
+++ b/src/components/notifications/index.js
@@ -66,6 +66,7 @@ import Whapi from "./Whapi.vue";
 import Cellsynt from "./Cellsynt.vue";
 import WPush from "./WPush.vue";
 import SIGNL4 from "./SIGNL4.vue";
+import SendGrid from "./SendGrid.vue";
 
 /**
  * Manage all notification form.
@@ -139,7 +140,8 @@ const NotificationFormList = {
     "whapi": Whapi,
     "gtxmessaging": GtxMessaging,
     "Cellsynt": Cellsynt,
-    "WPush": WPush
+    "WPush": WPush,
+    "SendGrid": SendGrid,
 };
 
 export default NotificationFormList;
diff --git a/src/lang/en.json b/src/lang/en.json
index c07e06fab..5bfc3bd92 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1051,5 +1051,7 @@
     "From":"From",
     "Can be found on:": "Can be found on: {0}",
     "The phone number of the recipient in E.164 format.": "The phone number of the recipient in E.164 format.",
-    "Either a text sender ID or a phone number in E.164 format if you want to be able to receive replies.":"Either a text sender ID or a phone number in E.164 format if you want to be able to receive replies."
+    "Either a text sender ID or a phone number in E.164 format if you want to be able to receive replies.":"Either a text sender ID or a phone number in E.164 format if you want to be able to receive replies.",
+    "SendGrid API Key": "SendGrid API Key",
+    "Separate multiple email addresses with commas": "Separate multiple email addresses with commas"
 }