add an unsubscribe to the web push

src/App.vue

@@ -235,7 +235,10 @@
                   Turn Off Notifications
                 </button>
                 <button
-                  @click="close(notification.id)"
+                  @click="
+                    close(notification.id);
+                    turnOffNotifications();
+                  "
                   class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
                 >
                   Leave it On
@@ -534,5 +537,50 @@ export default class App extends Vue {
       console.log("Subscription sent to server successfully.");
     });
   }
+
+  async turnOffNotifications() {
+    let subscription;
+    const pushProviderSuccess = await navigator.serviceWorker.ready
+      .then((registration) => {
+        return registration.pushManager.getSubscription();
+      })
+      .then((subscript) => {
+        subscription = subscript;
+        if (subscription) {
+          return subscription.unsubscribe();
+        } else {
+          console.log("Subscription object is not available.");
+          return false;
+        }
+      })
+      .catch((error) => {
+        console.log("Push provider server communication failed:", error);
+        return false;
+      });
+
+    const pushServerSuccess = await fetch("/web-push/unsubscribe", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(subscription),
+    })
+      .then((response) => {
+        return response.ok;
+      })
+      .catch((error) => {
+        console.log("Push server communication failed:", error);
+        return false;
+      });
+
+    alert(
+      "Notifications are off. Push provider unsubscribe " +
+        (pushProviderSuccess ? "succeeded" : "failed") +
+        (pushProviderSuccess === pushServerSuccess ? " and" : " but") +
+        " push server unsubscribe " +
+        (pushServerSuccess ? "succeeded" : "failed") +
+        ".",
+    );
+  }
 }
 </script>

src/views/AccountViewView.vue

@@ -91,13 +91,21 @@
         for="toggleNotifications"
         class="flex items-center cursor-pointer"
         @click="
-          this.$notify(
-            {
-              group: 'modal',
-              type: 'notification-permission',
-            },
-            -1,
-          )
+          !toggleNotifications
+            ? this.$notify(
+                {
+                  group: 'modal',
+                  type: 'notification-permission',
+                },
+                -1,
+              )
+            : this.$notify(
+                {
+                  group: 'modal',
+                  type: 'notification-off',
+                },
+                -1,
+              )
         "
       >
         <!-- label -->
@@ -321,10 +329,11 @@
       <div class="flex py-2">
         <button
           @click="alertWebPushSubscription()"
-          class="block text-center text-md bg-blue-500 text-white px-1.5 py-2 rounded-md mb-2"
+          class="block text-center text-md bg-blue-500 text-white px-1.5 py-2 rounded-md mr-2 mb-2"
         >
           Show Subscription from Web Push Server
         </button>
+        ... but don't do that too frequently lest you get throttled.
       </div>
 
       <div class="flex py-4">