feat(ntfy): add custom title and message templates for notifications (#6804)

Co-authored-by: epifeny <epifeny@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>

server/notification-providers/ntfy.js

@@ -33,10 +33,27 @@ class Ntfy extends NotificationProvider {
             config = this.getAxiosConfigWithProxy(config);
             // If heartbeatJSON is null, assume non monitoring notification (Certificate warning) or testing.
             if (heartbeatJSON == null) {
+                // Default values for test notification
+                let title = (monitorJSON?.name || notification.ntfytopic) + " [Uptime-Kuma]";
+                let message = msg;
+
+                // Apply custom templates from notification settings if enabled
+                if (notification.ntfyUseTemplate) {
+                    const customTitle = notification.ntfyCustomTitle?.trim() || "";
+                    if (customTitle !== "") {
+                        title = await this.renderTemplate(customTitle, msg, monitorJSON, heartbeatJSON);
+                    }
+
+                    const customMessage = notification.ntfyCustomMessage?.trim() || "";
+                    if (customMessage !== "") {
+                        message = await this.renderTemplate(customMessage, msg, monitorJSON, heartbeatJSON);
+                    }
+                }
+
                 let ntfyTestData = {
                     topic: notification.ntfytopic,
-                    title: (monitorJSON?.name || notification.ntfytopic) + " [Uptime-Kuma]",
-                    message: msg,
+                    title: title,
+                    message: message,
                     priority: notification.ntfyPriority,
                     tags: ["test_tube"],
                 };
@@ -70,11 +87,28 @@ class Ntfy extends NotificationProvider {
                 tags = tags.concat(monitorTagNames);
             }
 
+            // Default values
+            let title = monitorJSON.name + " " + status + " [Uptime-Kuma]";
+            let message = heartbeatJSON.msg;
+
+            // Apply custom templates from notification settings if enabled
+            if (notification.ntfyUseTemplate) {
+                const customTitle = notification.ntfyCustomTitle?.trim() || "";
+                const customMessage = notification.ntfyCustomMessage?.trim() || "";
+
+                if (customTitle !== "") {
+                    title = await this.renderTemplate(customTitle, msg, monitorJSON, heartbeatJSON);
+                }
+                if (customMessage !== "") {
+                    message = await this.renderTemplate(customMessage, msg, monitorJSON, heartbeatJSON);
+                }
+            }
+
             let data = {
                 topic: notification.ntfytopic,
-                message: heartbeatJSON.msg,
+                message: message,
                 priority: priority,
-                title: monitorJSON.name + " " + status + " [Uptime-Kuma]",
+                title: title,
                 tags: tags,
             };
 

src/components/notifications/Ntfy.vue

@@ -102,14 +102,59 @@
             {{ $t("ntfyCallHelptext") }}
         </div>
     </div>
+
+    <div class="mb-3">
+        <div class="form-check form-switch">
+            <input
+                id="ntfy-use-template"
+                v-model="$parent.notification.ntfyUseTemplate"
+                class="form-check-input"
+                type="checkbox"
+            />
+            <label class="form-check-label" for="ntfy-use-template">
+                {{ $t("ntfyUseTemplate") }}
+            </label>
+        </div>
+        <div class="form-text">
+            {{ $t("ntfyUseTemplateDescription") }}
+        </div>
+    </div>
+
+    <div v-show="$parent.notification.ntfyUseTemplate">
+        <div class="mb-3">
+            <label for="ntfy-title" class="form-label">{{ $t("ntfyCustomTitle") }}</label>
+            <TemplatedInput
+                id="ntfy-title"
+                v-model="$parent.notification.ntfyCustomTitle"
+                :required="false"
+                placeholder=""
+            ></TemplatedInput>
+            <div class="form-text">{{ $t("ntfyNotificationTemplateFallback") }}</div>
+        </div>
+
+        <div class="mb-3">
+            <label for="ntfy-message" class="form-label">{{ $t("ntfyCustomMessage") }}</label>
+            <TemplatedTextarea
+                id="ntfy-message"
+                v-model="$parent.notification.ntfyCustomMessage"
+                :required="false"
+                placeholder=""
+            ></TemplatedTextarea>
+            <div class="form-text">{{ $t("ntfyNotificationTemplateFallback") }}</div>
+        </div>
+    </div>
 </template>
 
 <script>
 import HiddenInput from "../HiddenInput.vue";
+import TemplatedInput from "../TemplatedInput.vue";
+import TemplatedTextarea from "../TemplatedTextarea.vue";
 
 export default {
     components: {
         HiddenInput,
+        TemplatedInput,
+        TemplatedTextarea,
     },
     computed: {
         authenticationMethods() {
@@ -139,6 +184,13 @@ export default {
                 this.$parent.notification.ntfyAuthenticationMethod = "usernamePassword";
             }
         }
+
+        // Auto-enable template checkbox if either field has content
+        if (typeof this.$parent.notification.ntfyUseTemplate === "undefined") {
+            const hasTitle = !!this.$parent.notification.ntfyCustomTitle?.trim();
+            const hasMessage = !!this.$parent.notification.ntfyCustomMessage?.trim();
+            this.$parent.notification.ntfyUseTemplate = hasTitle || hasMessage;
+        }
     },
 };
 </script>

src/lang/en.json

@@ -259,7 +259,10 @@
     "Content Type": "Content Type",
     "webhookJsonDesc": "{0} is good for any modern HTTP servers such as Express.js",
     "webhookFormDataDesc": "{multipart} is good for PHP. The JSON will need to be parsed with {decodeFunction}",
-    "liquidIntroduction": "Templatability is achieved via the Liquid templating language. Please refer to the {0} for usage instructions. These are the available variables:",
+    "liquidIntroduction": "Templatability is achieved via the Liquid templating language. Please refer to the {0} for usage instructions.",
+    "templateAvailableVariables": "Available variables",
+    "example": "Example",
+    "Result": "Result",
     "templateMsg": "message of the notification",
     "templateHeartbeatJSON": "object describing the heartbeat",
     "templateMonitorJSON": "object describing the monitor",
@@ -980,6 +983,11 @@
     "ntfyUsernameAndPassword": "Username and Password",
     "ntfyCall": "Phone Call",
     "ntfyCallHelptext": "Make a phone call when alert fires. Set to 'yes' to use your first verified number, or enter a specific phone number (e.g. +12223334444). Requires ntfy Pro and a verified phone number.",
+    "ntfyUseTemplate": "Customize notification templates",
+    "ntfyUseTemplateDescription": "Enable this to customize notification titles and messages using LiquidJS templating",
+    "ntfyCustomTitle": "Custom Title Template",
+    "ntfyCustomMessage": "Custom Message Template",
+    "ntfyNotificationTemplateFallback": "Leave blank to use the default Uptime Kuma format",
     "twilioAccountSID": "Account SID",
     "twilioApiKey": "Api Key (optional)",
     "twilioApiKeyHelptext": "The API key is optional but recommended. You can provide either Account SID and AuthToken from the may TwilioConsole page or Account SID and the pair of Api Key and Api Key secret",