better code reuse and "Username" to "Bot Display Name"

server/notification.js

@@ -84,10 +84,12 @@ class Notification {
 
         } else if (notification.type === "discord") {
             try {
+                const discordDisplayName = notification.discordUsername || "Uptime Kuma";
+
                 // If heartbeatJSON is null, assume we're testing.
                 if (heartbeatJSON == null) {
                     let discordtestdata = {
-                        username: notification.discordUsername || "Uptime Kuma",
+                        username: discordDisplayName,
                         content: msg,
                     }
                     await axios.post(notification.discordWebhookUrl, discordtestdata)
@@ -96,7 +98,7 @@ class Notification {
                 // If heartbeatJSON is not null, we go into the normal alerting loop.
                 if (heartbeatJSON["status"] == 0) {
                     let discorddowndata = {
-                        username: notification.discordUsername || "Uptime Kuma",
+                        username: discordDisplayName,
                         embeds: [{
                             title: "❌ One of your services went down. ❌",
                             color: 16711680,
@@ -126,7 +128,7 @@ class Notification {
 
                 } else if (heartbeatJSON["status"] == 1) {
                     let discordupdata = {
-                        username: notification.discordUsername || "Uptime Kuma",
+                        username: discordDisplayName,
                         embeds: [{
                             title: "✅ Your service " + monitorJSON["name"] + " is up! ✅",
                             color: 65280,

src/components/NotificationDialog.vue

@@ -143,8 +143,11 @@
                             <div class="mb-3">
                                 <label for="discord-webhook-url" class="form-label">Discord Webhook URL</label>
                                 <input id="discord-webhook-url" v-model="notification.discordWebhookUrl" type="text" class="form-control" required autocomplete="false">
-                                <label for="discord-username" class="form-label">Username</label>
-                                <input id="discord-username" v-model="notification.discordUsername" type="text" class="form-control" autocomplete="false">
+                            </div>
+
+                            <div class="mb-3">
+                                <label for="discord-username" class="form-label">Bot Display Name</label>
+                                <input id="discord-username" v-model="notification.discordUsername" type="text" class="form-control" autocomplete="false" :placeholder="$root.appName">
                                 <div class="form-text">
                                     You can get this by going to Server Settings -> Integrations -> Create Webhook
                                 </div>
@@ -235,13 +238,13 @@
                         <template v-if="notification.type === 'pushy'">
                             <div class="mb-3">
                                 <label for="pushy-app-token" class="form-label">API_KEY</label>
-                                <input type="text" class="form-control" id="pushy-app-token" required v-model="notification.pushyAPIKey">
+                                <input id="pushy-app-token" v-model="notification.pushyAPIKey" type="text" class="form-control" required>
                             </div>
 
                             <div class="mb-3">
                                 <label for="pushy-user-key" class="form-label">USER_TOKEN</label>
                                 <div class="input-group mb-3">
-                                    <input type="text" class="form-control" id="pushy-user-key" required v-model="notification.pushyToken">
+                                    <input id="pushy-user-key" v-model="notification.pushyToken" type="text" class="form-control" required>
                                 </div>
                             </div>
                             <p style="margin-top: 8px;">
@@ -336,7 +339,6 @@
                                 </div>
                             </div>
                         </template>
-
                     </div>
                     <div class="modal-footer">
                         <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">

src/main.js

@@ -15,6 +15,7 @@ import Details from "./pages/Details.vue";
 import EditMonitor from "./pages/EditMonitor.vue";
 import Settings from "./pages/Settings.vue";
 import Setup from "./pages/Setup.vue";
+import { appName } from "./util.ts";
 
 const routes = [
     {
@@ -77,6 +78,11 @@ const app = createApp({
     mixins: [
         socket,
     ],
+    data() {
+        return {
+            appName: appName
+        }
+    },
     render: () => h(App),
 })
 

src/util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = void 0;
+exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.PENDING = exports.UP = exports.DOWN = exports.appName = void 0;
+exports.appName = "Uptime Kuma";
 exports.DOWN = 0;
 exports.UP = 1;
 exports.PENDING = 2;

src/util.ts

@@ -3,6 +3,7 @@
 // Frontend uses util.ts
 // Need to run "tsc" to compile if there are any changes.
 
+export const appName = "Uptime Kuma";
 export const DOWN = 0;
 export const UP = 1;
 export const PENDING = 2;