Merge new user settings screen and old web push settings screen

Author: mikebroberts

README.md

@@ -62,7 +62,7 @@ Now try logging in - click the "login with your GitHub user" link. You'll go thr
 
 ## Using Push Notifications
 
-On each Cicada screen you'll see a "Manage Web Push Notifications" link - choosing this will allow you to subscribe for notifications.
+On each Cicada screen you'll see a "User Settings" link - choosing this will allow you to subscribe for notifications.
 
 **IMPORTANT FOR IPHONE USERS** :
 On an iPhone you need to "install" Cicada as a Progressive Web App (PWA) first - you do this by adding it to your home screen via the "share" button in Safari.

src/app/web/viewResultWrappers.ts

@@ -22,7 +22,7 @@ export function pageViewResultWithoutHtmx(bodyContents: HiccoughContent[], logge
       element('hr'),
       ...(loggedIn
         ? [
-            p(a('web-push.html', 'Manage Web Push Notifications')),
+            p(a('/userSettings', 'User Settings')),
             p(a('/', 'Back to home')),
             p(a('/github/auth/logout', 'Logout'))
           ]

src/web/app/index.html

@@ -25,7 +25,7 @@ <h3 class="mt-4">Recent Branch Activity</h3>
        hx-swap='outerHTML'>Loading Recent Activity...
   </div>
   <hr />
-  <p><a href='../web-push.html'>Manage Web Push Notifications</a></p>
+  <p><a href="/userSettings">User Settings</a></p>
   <p><a href='/github/auth/logout'>Logout</a></p>
 </div>
 </body>

src/web/js/web-push.js

@@ -13,6 +13,7 @@ async function subscribeToPush() {
     return
   }
 
+  updateStatus('Attempting to subscribe for notifications')
   const registration = await navigator.serviceWorker.getRegistration(serviceWorkerScript)
   const subscription = await registration.pushManager.subscribe({
     userVisibleOnly: true,
@@ -21,15 +22,18 @@ async function subscribeToPush() {
   console.log(JSON.stringify(subscription))
   await postToServer('webPushSubscribe', subscription)
   await updateUI()
+  updateStatus('Subscribed for push notifications ✅')
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function unsubscribeFromPush() {
+  updateStatus('Attempting to unsubscribe from push notifications')
   const registration = await navigator.serviceWorker.getRegistration(serviceWorkerScript)
   const subscription = await registration.pushManager.getSubscription()
   await postToServer('webPushUnsubscribe', { endpoint: subscription.endpoint })
   await subscription.unsubscribe()
   await updateUI()
+  updateStatus('Unsubscribed from push notifications')
 }
 
 async function testPing() {
@@ -38,15 +42,13 @@ async function testPing() {
 }
 
 async function updateUI() {
-  updateFurtherStatus('')
   if (!('serviceWorker' in navigator)) {
     updateStatus('Web Push not supported by this browser - no service worker')
     return
   }
   if (!('PushManager' in window)) {
-    updateStatus('Web Push not supported by this browser')
-    updateFurtherStatus(
-      'If using an iOS device then use Cicada as a PWA by adding a shortcut to your home screen, and open from there.'
+    updateStatus(
+      'Web Push not supported by this browser. If using an iOS device then use Cicada as a PWA by adding a shortcut to your home screen, and open from there.'
     )
     return
   }
@@ -66,33 +68,30 @@ async function updateUI() {
   const pushSubscription = await serviceWorkerRegistration.pushManager.getSubscription()
   if (pushSubscription) {
     console.log(`Push Subscription Endpoint = ${pushSubscription.endpoint}`)
-    updateStatus('Subscribed for push notifications ✅')
-    updateSubscriptionButton('Unsubscribe', unsubscribeFromPush)
+    updateSubscribeToggle(true, unsubscribeFromPush)
   } else {
-    updateStatus('You need to subscribe for push notifications')
-    updateSubscriptionButton('Subscribe', subscribeToPush)
+    updateSubscribeToggle(false, subscribeToPush)
   }
 
   document.getElementById('pingButton').onclick = testPing
+  updateStatus('')
 }
 
 function updateStatus(s) {
   const status = document.getElementById('status')
   status.textContent = s
 }
 
-function updateFurtherStatus(s) {
-  const status = document.getElementById('furtherStatus')
-  status.textContent = s
-}
-
-function updateSubscriptionButton(s, onclick) {
-  const button = document.getElementById('updateSubscription')
-  const enabled = s && s.length > 0
-  button.disabled = !enabled
-  button.setAttribute('class', enabled ? 'btn btn-primary btn-lg' : 'invisible')
-  button.textContent = s
-  button.onclick = onclick
+function updateSubscribeToggle(checked, onclick) {
+  const toggle = document.getElementById('subscribeToggle')
+  toggle.removeAttribute('disabled')
+  toggle.disabled = false
+  toggle.onclick = onclick
+  if (checked) {
+    toggle.setAttribute('checked', checked)
+  } else {
+    toggle.removeAttribute('checked')
+  }
 }
 
 async function getOrRegisterServiceWorker() {

src/web/repo/index.html

@@ -39,7 +39,7 @@ <h4 class="mt-4">Recent Activity</h4>
   </div>
   <hr />
   <p>
-    <a href="/web-push.html">Manage Web Push Notifications</a>
+    <a href="/userSettings">User Settings</a>
   </p>
   <p>
     <a href="/">Back to home</a>

src/web/userSettings/index.html

@@ -5,22 +5,34 @@
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <title>Cicada User Settings</title>
+  <script src='/js/web-push.js' type="module"></script>
   <script src='/js/htmx.min.js' crossorigin='anonymous'></script>
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css'>
 </head>
 
 <body>
 <script src="/js/checkLoggedIn.js"></script>
 <div class='container' id='toplevel'>
   <h1 class="display-3 mt-4">User Settings</h1>
+  <h2>Web Push Settings</h2>
+  <div class="form-check form-switch">
+    <input id="subscribeToggle" class="form-check-input" type="checkbox" role="switch" disabled>
+    <label class="form-check-label" for="subscribeToggle">Subscribe for web push notifications on this
+      device</label>
+  </div>
+  <p id='status' class='lead'>Finding Web Push Status...</p>
+  <hr />
+  <h2>Visibility and Notifications</h2>
   <script src="/js/checkForHtmxUnauthorizedResponse.js"></script>
   <div id="topUserSettings"
        hx-get='/app/fragment/userSettings'
        hx-trigger='load'
        hx-swap='innerHTML'>Finding user settings...
   </div>
-  <div>
+  <hr/>
+  <h2>Advanced</h2>
     <button type="button"
             class="btn btn-danger"
             hx-post="/app/fragment/resetUserSettings"
@@ -30,7 +42,12 @@ <h1 class="display-3 mt-4">User Settings</h1>
     >
       Reset User Settings
     </button>
-  </div>
+    <button type="button"
+            id="pingButton"
+            class="btn btn-primary"
+    >
+      Test push notifications</button>
+    <button type="button" class="btn btn-secondary" id='updateServiceWorker' disabled>Update Service Worker</button>
   <hr />
   <p>
     <a href="/">Back to home</a>

src/web/workflow/index.html

@@ -36,7 +36,7 @@ <h1 class="display-3 mt-4">Cicada</h1>
   </div>
   <hr />
   <p>
-    <a href="/web-push.html">Manage Web Push Notifications</a>
+    <a href="/userSettings">User Settings</a>
   </p>
   <p>
     <a href="/">Back to home</a>

test/local/functional/domain/github/githubUserAuth/githubWebAuthHandler.test.ts

@@ -114,7 +114,7 @@ test('failedOauthCallback', async () => {
       <p>Unable to login because there was no code on request</p>
       <hr></hr>
       <p>
-        <a href="web-push.html">Manage Web Push Notifications</a>
+        <a href="/userSettings">User Settings</a>
       </p>
       <p>
         <a href="/">Back to home</a>

test/remote/authorizedContent.test.ts

@@ -53,7 +53,7 @@ testuser
       </p>
       <hr></hr>
       <p>
-        <a href="web-push.html">Manage Web Push Notifications</a>
+        <a href="/userSettings">User Settings</a>
       </p>
       <p>
         <a href="/">Back to home</a>