Add roughed-in UI for setting up notifications

1 files changed, 80 insertions, 4 deletions

diff --git a/ui/lib/components/NotificationSettings.svelte b/ui/lib/components/NotificationSettings.svelte
index c690b21..81c3708 100644
--- a/ui/lib/components/NotificationSettings.svelte
+++ b/ui/lib/components/NotificationSettings.svelte
@@ -1,13 +1,89 @@
 <script>
+  import { onMount } from "svelte";
   import Toggle from '$lib/components/Toggle.svelte';
-  // let { invites, createInvite = async () => {} } = $props();
 
-  async function onsubmit(event) {
-    event.preventDefault();
-    await createInvite();
+  let subscriptionJson = $state(null);
+
+  function doSubscribe() {
+    navigator.serviceWorker.ready
+      .then(async (registration) => {
+        const response = await fetch("/api/vapid");
+        // and if we fail to get it?
+        const vapidPublicKey = await response.text();
+        const convertedVapidKey = vapidPublicKey;
+        return registration.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: convertedVapidKey
+        });
+      }).then((subscription) => {
+        const subJson = subscription.toJSON();
+        subscriptionJson = {
+          endpoint: subJson.endpoint,
+          p256dh: subJson.keys.p256dh,
+          auth: subJson.keys.auth,
+        };
+        return fetch("/api/push", {
+          method: "post",
+          headers: { "Content-type": "application/json" },
+          body: JSON.stringify(subscriptionJson),
+        });
+      });
+  }
+
+  function doUnsubscribe() {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        return registration.pushManager.getSubscription();
+      }).then((subscription) => {
+        const { endpoint } = subscription.toJSON();
+        return subscription.unsubscribe()
+          .then(() => {
+            fetch("/api/push", {
+              method: "delete",
+              headers: { "Content-type": "application/json" },
+              body: JSON.stringify({ endpoint }),
+            });
+            subscriptionJson = null;
+          });
+      });
+  }
+
+  function toggleSub() {
+    if (subscriptionJson !== null) {
+      doUnsubscribe();
+    } else {
+      doSubscribe();
+    }
   }
+
+  onMount(() => {
+    navigator.serviceWorker.ready.then((registration) => {
+      return registration.pushManager.getSubscription();
+    }).then((subscription) => {
+      if (subscription) {
+        subscriptionJson = JSON.parse(JSON.stringify(subscription));
+      }
+    });
+  });
 </script>
 
+<h2>Enable notifications</h2>
+
+<p>
+  {#if subscriptionJson === null}
+    Notifications are currently disabled.
+  {:else}
+    Notifications are currently enabled.
+  {/if}
+</p>
+<button class="btn" onclick="{toggleSub}">
+  {#if subscriptionJson === null}
+    Enable notifications
+  {:else}
+    Disable notifications
+  {/if}
+</button>
+
 <h2>Notify me when:</h2>
 
 <Toggle