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',
-            filename: 'serviceWorker.ts',
-            strategies: 'injectManifest',
-            devOptions: {
-                enabled: true,
-                type: 'module'
-            },
+            srcDir: "src",
+            filename: "serviceWorker.ts",
+            strategies: "injectManifest",
         }),
     ],
     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,31 +17,31 @@ 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
                 const data = JSON.stringify({
-                    title: "TEST", 
+                    title: "TEST",
                     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, 
+            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) {
             this.throwGeneralAxiosError(error);
@@ -50,4 +49,4 @@ class Webpush extends NotificationProvider {
     }
 }
 
-module.exports = Webpush;
+module.exports = Webpush;

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");
@@ -1493,14 +1493,14 @@ let needSetup = false;
         socket.on("getWebpushVapidPublicKey", async (callback) => {
             try {
                 let publicVapidKey = await Settings.get("webpushPublicVapidKey");
-                
+
                 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);
-                    
+
                     publicVapidKey = vapidKeys.publicKey;
                 }
 

src/components/notifications/Webpush.vue

@@ -1,16 +1,14 @@
 <template>
-    <button 
+    <button
+        class="mb-3"
         type="button" :class="[
-            'btn', 
+            'btn',
             canRegister ? 'btn-primary' : 'btn-danger'
-        ]" :disabled="!canRegister || subscriptionReceived" 
-        @click="registerWebpush"
-        class="mb-3">
+        ]" :disabled="!btnEnabled" @click="registerWebpush">
         <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
-        <span v-else-if="subscriptionReceived" class="me-1">✓</span>
-        {{ registerText }}
+        <span v-else-if="$parent.notification.subscription" class="me-1">✓</span>
+        {{ btnText }}
     </button>
-   
 
     <div class="mb-3 form-text">
         <a href="TODO" target="_blank">{{ $t("documentationOf", ["Webpush"]) }}</a>
@@ -21,21 +19,33 @@
 export default {
     data() {
         return {
-            subscription: '',
-            registerText: '',
+            //store subscription info
+            btnEnabled: false,
+            btnText: "",
             processing: false,
+            //determines if browser supports service worker
             canRegister: false,
-            subscriptionReceived: false,
-            publicVapidKey: "",
-        }
+            //store public vapid key
+            publicVapidKey: null,
+        };
     },
     mounted() {
-        if (("serviceWorker" in navigator)) {
-            this.registerText = "Allow Notifications";
+        // if already subscribed
+        if (this.$parent.notification.subscription) {
+            this.btnEnabled = false;
             this.canRegister = true;
-        } else {
-            this.registerText = "Browser not supported";
-            this.canRegister = false;
+            this.btnText = "Notifications Enabled";
+        } else { //not subscribed
+            //check if browser supports service worker
+            if (("serviceWorker" in navigator)) {
+                this.btnText = "Allow Notifications";
+                this.canRegister = true;
+                this.btnEnabled = true;
+            } else { //browser does not support service worker
+                this.btnText = "Browser not supported";
+                this.canRegister = false;
+                this.btnEnabled = false;
+            }
         }
     },
     methods: {
@@ -52,9 +62,10 @@ export default {
                         resolve(resp.msg);
                     });
                 });
-                
+
+                //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,23 +74,29 @@ 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.subscriptionReceived = true;
-                this.registerText = "Notifications Enabled";
+                this.btnEnabled = false;
+                this.canRegister = true;
+                this.btnText = "Notifications Enabled";
             } catch (error) {
-                console.error('Subscription failed:', error);
-                this.$root.toastRes({ ok: false, msg: error });
+                console.error("Subscription failed:", error);
+                this.$root.toastRes({
+                    ok: false,
+                    msg: error
+                });
             } finally {
                 this.processing = false;
             }
         }
     },
 };
-</script>
+</script>

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) {
-        let message = e.data.json();
-        e.waitUntil(self.registration.showNotification(message.title, {
+    if (event.data) {
+        console.log(event);
+        let message = event.data.json();
+        self.registration.showNotification(message.title, {
             body: message.body,
-            // actions: message.actions
-        }));
+        });
     }
 });