From fd8877900b7ec9c5756ccb183e95547b11713d24 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Mon, 25 Dec 2023 12:51:06 -0700
Subject: [PATCH] add another alert message & test button

---
 project.task.yaml                   |  1 +
 src/App.vue                         |  9 ++++++
 src/views/HelpNotificationsView.vue | 44 +++++++++++++++++++++++++++--
 sw_scripts/additional-scripts.js    |  2 +-
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/project.task.yaml b/project.task.yaml
index 36808bfb..ba36658e 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -46,6 +46,7 @@ tasks:
   blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
 
 - make identicons for contacts into more-memorable faces (and maybe change project identicons, too)
+- 04 split out notification logic & tests from web-push-subscription logic & tests
 - 01 server - show all claim details when issued by the issuer
 - bug - got error adding on Firefox user #0 as contact for themselves
 - bug - back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity
diff --git a/src/App.vue b/src/App.vue
index 7b41d478..85489c8d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -449,6 +449,15 @@ export default class App extends Vue {
             console.log(
               "Subscription data sent to server and all finished successfully.",
             );
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Notifications Turned On",
+                text: "Notifications are on. You should see one on your device; if not, see the 'Troubleshoot' page.",
+              },
+              -1,
+            );
           })
           .catch((error) => {
             console.error(
diff --git a/src/views/HelpNotificationsView.vue b/src/views/HelpNotificationsView.vue
index 12c055f3..77b284b4 100644
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -22,10 +22,16 @@
     </div>
 
     <div>
-      <p>Here are things to get notifications working.</p>
+      <p>Here are ways to get notifications working.</p>
 
       <h2 class="text-xl font-semibold">Test</h2>
       <p>Somehow call the service-worker self.showNotification</p>
+      <button
+        @click="showTestNotification()"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      >
+        See a Test Notification
+      </button>
 
       <h2 class="text-xl font-semibold">Check OS-level permissions</h2>
       <div>
@@ -150,7 +156,7 @@ export default class HelpNotificationsView extends Vue {
         pushUrl = settings.webPushServer;
       }
 
-      // This should be a constant shared with the service worker. See TEST_PUSH_TITLE in additional-scripts.js
+      // This is shared with the service worker and should be a constant. Look for the same name in additional-scripts.js
       // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
       const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
 
@@ -172,7 +178,7 @@ export default class HelpNotificationsView extends Vue {
           auth: authB64,
           p256dh: p256dhB64,
         },
-        message: "This is a test message, hopefully triggered by you.",
+        message: "This is a test message, triggered by you.",
         title: DIRECT_PUSH_TITLE,
       };
       console.log("Sending a test web push message:", newPayload);
@@ -211,5 +217,37 @@ export default class HelpNotificationsView extends Vue {
       );
     }
   }
+
+  showTestNotification() {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        return registration.showNotification("It Worked", {
+          body: "This is your test notification.",
+        });
+      })
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Sent",
+            text: "A notification was triggered, so one should show on your device soon.",
+          },
+          5000,
+        );
+      })
+      .catch((error) => {
+        console.error("Got a notification error:", error);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Failed",
+            text: "Got an error sending a notification.",
+          },
+          -1,
+        );
+      });
+  }
 }
 </script>
diff --git a/sw_scripts/additional-scripts.js b/sw_scripts/additional-scripts.js
index b96f5f25..79b42a72 100644
--- a/sw_scripts/additional-scripts.js
+++ b/sw_scripts/additional-scripts.js
@@ -45,7 +45,7 @@ self.addEventListener("push", function (event) {
           }
         }
 
-        // This should be a constant shared with the notification-test code. See TEST_PUSH_TITLE in HelpNotificationsView.vue
+        // This is shared with the notification-test code and should be a constant. Look for the same name in HelpNotificationsView.vue
         // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
         const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";