Lint cleanup and comments

config/vite.config.js

@@ -3,7 +3,7 @@ import { defineConfig } from "vite";
 import visualizer from "rollup-plugin-visualizer";
 import viteCompression from "vite-plugin-compression";
 import VueDevTools from "vite-plugin-vue-devtools";
-import { VitePWA } from 'vite-plugin-pwa';
+import { VitePWA } from "vite-plugin-pwa";
 
 const postCssScss = require("postcss-scss");
 const postcssRTLCSS = require("postcss-rtlcss");
@@ -35,13 +35,9 @@ export default defineConfig({
         VueDevTools(),
         VitePWA({
             registerType: null,
-            srcDir: 'src',
+            srcDir: "src",
-            filename: 'serviceWorker.ts',
+            filename: "serviceWorker.ts",
-            strategies: 'injectManifest',
+            strategies: "injectManifest",
-            devOptions: {
-                enabled: true,
-                type: 'module'
-            },
         }),
     ],
     css: {

package.json

@@ -145,6 +145,7 @@
     },
     "devDependencies": {
         "@actions/github": "~5.1.1",
+        "@eslint/js": "^9.17.0",
         "@fortawesome/fontawesome-svg-core": "~1.2.36",
         "@fortawesome/free-regular-svg-icons": "~5.15.4",
         "@fortawesome/free-solid-svg-icons": "~5.15.4",
@@ -177,6 +178,7 @@
         "eslint-plugin-vue": "~8.7.1",
         "favico.js": "~0.3.10",
         "get-port-please": "^3.1.1",
+        "globals": "^15.13.0",
         "node-ssh": "~13.1.0",
         "postcss-html": "~1.5.0",
         "postcss-rtlcss": "~3.7.2",

server/notification-providers/Webpush.js

@@ -1,7 +1,6 @@
 const NotificationProvider = require("./notification-provider");
-const axios = require("axios");
 const { UP } = require("../../src/util");
-const web_push = require('web-push');
+const webpush = require("web-push");
 const { setting } = require("../util-server");
 
 class Webpush extends NotificationProvider {
@@ -18,7 +17,7 @@ class Webpush extends NotificationProvider {
             const publicVapidKey = await setting("webpushPublicVapidKey");
             const privateVapidKey = await setting("webpushPrivateVapidKey");
             // Set Vapid keys in web-push helper lib
-            web_push.setVapidDetails("https://github.com/louislam/uptime-kuma", publicVapidKey, privateVapidKey);
+            webpush.setVapidDetails("https://github.com/louislam/uptime-kuma", publicVapidKey, privateVapidKey);
 
             if (heartbeatJSON === null && monitorJSON === null) {
                 // Test message
@@ -27,21 +26,21 @@ class Webpush extends NotificationProvider {
                     body: "Test Alert - " + msg
                 });
                 //send push notification using web-push lib
-                await web_push.sendNotification(notification.subscription, data);
+                await webpush.sendNotification(notification.subscription, data);
 
                 return okMsg;
             }
 
             const title = `Monitor ${heartbeatJSON["status"] === UP ? "UP" : "DOWN"}`;
             const down = "❌ " + monitorJSON["name"] + " is DOWN ❌";
-            const up = "✅ " + monitorJSON["name"] + " is UP ✅";;
+            const up = "✅ " + monitorJSON["name"] + " is UP ✅";
 
             const data = JSON.stringify({
                 title: title,
                 body: `${heartbeatJSON["status"] === UP ? up : down}`
             });
             //send push notification using web-push lib
-            await web_push.sendNotification(notification.subscription, data);
+            await webpush.sendNotification(notification.subscription, data);
 
             return okMsg;
         } catch (error) {

server/server.js

@@ -97,7 +97,7 @@ log.debug("server", "Importing Notification");
 const { Notification } = require("./notification");
 Notification.init();
 log.debug("server", "Importing Web-Push");
-const web_push = require('web-push');
+const webpush = require("web-push");
 
 log.debug("server", "Importing Database");
 const Database = require("./database");
@@ -1496,7 +1496,7 @@ let needSetup = false;
 
                 if (!publicVapidKey) {
                     console.debug("Generating new VAPID keys");
-                    const vapidKeys = web_push.generateVAPIDKeys();
+                    const vapidKeys = webpush.generateVAPIDKeys();
 
                     await Settings.set("webpushPublicVapidKey", vapidKeys.publicKey);
                     await Settings.set("webpushPrivateVapidKey", vapidKeys.privateKey);

src/components/notifications/Webpush.vue

@@ -1,17 +1,15 @@
 <template>
     <button
+        class="mb-3"
         type="button" :class="[
             'btn',
             canRegister ? 'btn-primary' : 'btn-danger'
-        ]" :disabled="!canRegister || subscriptionReceived" 
+        ]" :disabled="!btnEnabled" @click="registerWebpush">
-        @click="registerWebpush"
-        class="mb-3">
         <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
-        <span v-else-if="subscriptionReceived" class="me-1">✓</span>
+        <span v-else-if="$parent.notification.subscription" class="me-1">✓</span>
-        {{ registerText }}
+        {{ btnText }}
     </button>
 
-
     <div class="mb-3 form-text">
         <a href="TODO" target="_blank">{{ $t("documentationOf", ["Webpush"]) }}</a>
     </div>
@@ -21,21 +19,33 @@
 export default {
     data() {
         return {
-            subscription: '',
+            //store subscription info
-            registerText: '',
+            btnEnabled: false,
+            btnText: "",
             processing: false,
+            //determines if browser supports service worker
             canRegister: false,
-            subscriptionReceived: false,
+            //store public vapid key
-            publicVapidKey: "",
+            publicVapidKey: null,
-        }
+        };
     },
     mounted() {
+        // if already subscribed
+        if (this.$parent.notification.subscription) {
+            this.btnEnabled = false;
+            this.canRegister = true;
+            this.btnText = "Notifications Enabled";
+        } else { //not subscribed
+            //check if browser supports service worker
             if (("serviceWorker" in navigator)) {
-            this.registerText = "Allow Notifications";
+                this.btnText = "Allow Notifications";
                 this.canRegister = true;
-        } else {
+                this.btnEnabled = true;
-            this.registerText = "Browser not supported";
+            } else { //browser does not support service worker
+                this.btnText = "Browser not supported";
                 this.canRegister = false;
+                this.btnEnabled = false;
+            }
         }
     },
     methods: {
@@ -53,8 +63,9 @@ export default {
                     });
                 });
 
+                //request permission to send notifications
                 const permission = await Notification.requestPermission();
-                if (permission !== 'granted') {
+                if (permission !== "granted") {
                     this.$root.toastRes({
                         ok: false,
                         msg: "Unable to get permission to notify.",
@@ -63,19 +74,25 @@ export default {
                     return;
                 }
 
+                //get service worker registration
                 const registration = await navigator.serviceWorker.ready;
+                //subscribe to push notifications
                 const subscription = await registration.pushManager.subscribe({
                     userVisibleOnly: true,
                     applicationServerKey: publicKey,
                 });
 
+                //store subscription info and update button
                 this.$parent.notification.subscription = subscription;
-
+                this.btnEnabled = false;
-                this.subscriptionReceived = true;
+                this.canRegister = true;
-                this.registerText = "Notifications Enabled";
+                this.btnText = "Notifications Enabled";
             } catch (error) {
-                console.error('Subscription failed:', error);
+                console.error("Subscription failed:", error);
-                this.$root.toastRes({ ok: false, msg: error });
+                this.$root.toastRes({
+                    ok: false,
+                    msg: error
+                });
             } finally {
                 this.processing = false;
             }

src/serviceWorker.ts

@@ -4,20 +4,22 @@ declare let self: ServiceWorkerGlobalScope
 precacheAndRoute(self.__WB_MANIFEST)
 
 // Receive push notifications
-self.addEventListener('push', function (e) {
+self.addEventListener('push', function (event) {
+    
     if (!(
         self.Notification &&
         self.Notification.permission === 'granted'
     )) {
         //notifications aren't supported or permission not granted!
+        console.log("Notifications aren't supported or permission not granted!");
         return;
     }
 
-    if (e.data) {
+    if (event.data) {
-        let message = e.data.json();
+        console.log(event);
-        e.waitUntil(self.registration.showNotification(message.title, {
+        let message = event.data.json();
+        self.registration.showNotification(message.title, {
             body: message.body,
-            // actions: message.actions
+        });
-        }));
     }
 });