misc push-related fixes and improvements

backend/server.js

@@ -272,7 +272,7 @@ sbp('okTurtles.data/set', PUBSUB_INSTANCE, createServer(hapi.listener, {
           await handler.call(socket, payload)
         } catch (error) {
           const message = error?.message || `push server failed to perform [${action}] action`
-          console.warn(`Handler '${REQUEST_TYPE.PUSH_ACTION}' failed: ${message}`)
+          console.warn(error, `Action '${action}' for '${REQUEST_TYPE.PUSH_ACTION}' handler failed: ${message}`)
           socket.send(createPushErrorResponse({ actionType: action, message }))
         }
       } else {

frontend/assets/style/components/_forms.scss

@@ -527,6 +527,10 @@ p.error {
   &:disabled:not(:checked)::after {
     opacity: 0.6;
   }
+
+  &:disabled {
+    background: $general_0;
+  }
 }
 
 .is-dark-theme {

frontend/controller/actions/identity.js

@@ -11,7 +11,7 @@ import { SETTING_CHELONIA_STATE } from '@model/database.js'
 import sbp from '@sbp/sbp'
 import { imageUpload, objectURLtoBlob } from '@utils/image.js'
 import { SETTING_CURRENT_USER } from '~/frontend/model/database.js'
-import { JOINED_CHATROOM, KV_QUEUE, LOGIN, LOGOUT } from '~/frontend/utils/events.js'
+import { JOINED_CHATROOM, KV_QUEUE, LOGIN, LOGOUT, LOGGING_OUT } from '~/frontend/utils/events.js'
 import { GIMessage } from '~/shared/domains/chelonia/GIMessage.js'
 import { Secret } from '~/shared/domains/chelonia/Secret.js'
 import { encryptedIncomingDataWithRawKey, encryptedOutgoingData, encryptedOutgoingDataWithRawKey } from '~/shared/domains/chelonia/encryptedData.js'
@@ -413,15 +413,15 @@ export default (sbp('sbp/selectors/register', {
 
       try {
         if (!state) {
-        // Make sure we don't unsubscribe from our own identity contract
-        // Note that this should be done _after_ calling
-        // `chelonia/storeSecretKeys`: If the following line results in
-        // syncing the identity contract and fetching events, the secret keys
-        // for processing them will not be available otherwise.
+          // Make sure we don't unsubscribe from our own identity contract
+          // Note that this should be done _after_ calling
+          // `chelonia/storeSecretKeys`: If the following line results in
+          // syncing the identity contract and fetching events, the secret keys
+          // for processing them will not be available otherwise.
           await sbp('chelonia/contract/retain', identityContractID)
         } else {
-        // If there is a state, we've already retained the identity contract
-        // but might need to fetch the latest events
+          // If there is a state, we've already retained the identity contract
+          // but might need to fetch the latest events
           await sbp('chelonia/contract/sync', identityContractID)
         }
       } catch (e) {
@@ -437,7 +437,7 @@ export default (sbp('sbp/selectors/register', {
         await syncContractsInOrder(contractIDs)
 
         try {
-        // The state above might be null, so we re-grab it
+          // The state above might be null, so we re-grab it
           const cheloniaState = sbp('chelonia/rootState')
 
           // The updated list of groups
@@ -451,8 +451,8 @@ export default (sbp('sbp/selectors/register', {
           // Call 'gi.actions/group/join' on all groups which may need re-joining
           await Promise.allSettled(
             groupIds.map(async groupId => (
-            // (1) Check whether the contract exists (may have been removed
-            //     after sync)
+              // (1) Check whether the contract exists (may have been removed
+              //     after sync)
               has(cheloniaState.contracts, groupId) &&
               has(cheloniaState[identityContractID].groups, groupId) &&
               // (2) Check whether the join process is still incomplete
@@ -486,8 +486,8 @@ export default (sbp('sbp/selectors/register', {
             // $FlowFixMe[incompatible-use]
             .filter(([, { hasLeft }]) => !hasLeft)
             .forEach(([cId]) => {
-            // We send this action only for groups we have fully joined (i.e.,
-            // accepted an invite and added our profile)
+              // We send this action only for groups we have fully joined (i.e.,
+              // accepted an invite and added our profile)
               if (cheloniaState[cId]?.profiles?.[identityContractID]?.status === PROFILE_STATUS.ACTIVE) {
                 sbp('gi.actions/group/kv/updateLastLoggedIn', { contractID: cId, throttle: false }).catch((e) => console.error('Error sending updateLastLoggedIn', e))
               }
@@ -520,6 +520,7 @@ export default (sbp('sbp/selectors/register', {
   // error occurs)
   'gi.actions/identity/_private/logout': async function () {
     let cheloniaState
+    sbp('okTurtles.events/emit', LOGGING_OUT)
     try {
       console.info('logging out, waiting for any events to finish...')
       // wait for any pending operations to finish before calling state/vuex/save

frontend/controller/actions/utils.js

@@ -316,7 +316,7 @@ export async function createInvite ({ contractID, quantity = 1, creatorID, expir
   }
 }
 
-export function groupContractsByType (contracts: Object): Object {
+export function groupContractsByType (contracts?: Object): Object {
   const contractIDs = Object.create(null)
   if (contracts) {
     // Note: `references` holds non-ephemeral references (i.e., explicit
@@ -357,15 +357,30 @@ export async function syncContractsInOrder (groupedContractIDs: Object): Promise
     const index = contractSyncPriorityList.indexOf(key)
     return index === -1 ? contractSyncPriorityList.length : index
   }
-
+  const failedSyncs = []
   try {
-    // $FlowFixMe[incompatible-call]
-    await Promise.all(Object.entries(groupedContractIDs).sort(([a], [b]) => {
-      // Sync contracts in order based on type
+    const sortedContractTypes = Object.entries(groupedContractIDs).sort(([a], [b]) => {
       return getContractSyncPriority(a) - getContractSyncPriority(b)
-    }).map(([, ids]) => {
-      return sbp('chelonia/contract/sync', ids)
-    }))
+    })
+    for (const [type, contractIDs] of sortedContractTypes) {
+      // For each contract of this type, check if it still exists before syncing because
+      // e.g. syncing a group contract could have removed one of the chatroom contracts
+      // $FlowFixMe[incompatible-type]
+      for (const contractID of contractIDs) {
+        const { contracts } = sbp('chelonia/rootState')
+        if (contractID in contracts) {
+          try {
+            await sbp('chelonia/contract/sync', contractID)
+          } catch (e) {
+            console.error(`syncContractsInOrder: failed to sync ${type}(${contractID}):`, e)
+            failedSyncs.push(`${type}(…${contractID.slice(-5)}) failed sync with '${e.message}'`)
+          }
+        } else {
+          console.warn(`syncContractsInOrder: skipping ${type}(${contractID}) as it was removed while syncing previous contracts`)
+        }
+      }
+    }
+    if (failedSyncs.length > 0) throw new Error(failedSyncs.join(', '))
   } catch (err) {
     console.error('Error during contract sync (syncing all contractIDs)', err)
     throw err

frontend/controller/app/identity.js

@@ -349,9 +349,9 @@ export default (sbp('sbp/selectors/register', {
             const loginCompleteHandler = ({ identityContractID: id }) => {
               removeLoginErrorHandler()
               if (id === identityContractID) {
-              // Before the promise resolves, we need to save the state
-              // by calling 'state/vuex/save' to ensure that refreshing the page
-              // results in a page with the same state.
+                // Before the promise resolves, we need to save the state
+                // by calling 'state/vuex/save' to ensure that refreshing the page
+                // results in a page with the same state.
                 resolve(sbp('state/vuex/save'))
               } else {
                 reject(new Error(`Identity contract ID mismatch during login: ${identityContractID} != ${id}`))

frontend/controller/service-worker.js

@@ -8,7 +8,7 @@ import { HOURS_MILLIS } from '~/frontend/model/contracts/shared/time.js'
 import { GIMessage } from '~/shared/domains/chelonia/GIMessage.js'
 import { Secret } from '~/shared/domains/chelonia/Secret.js'
 import { deserializer, serializer } from '~/shared/serdes/index.js'
-import { ONLINE } from '../utils/events.js'
+import { getSubscriptionId } from '~/shared/functions.js'
 
 const pwa = {
   deferredInstallPrompt: null,
@@ -183,72 +183,83 @@ sbp('sbp/selectors/register', {
   // In theory, the `PushManager` APIs used are available in the SW and we could
   // have this function there. However, most examples perform this outside of the
   // SW, and private testing showed that it's more reliable doing it here.
-  'service-worker/setup-push-subscription': async function (retryCount?: number) {
-    if (process.env.CI) {
+  'service-worker/setup-push-subscription': async function (attemptNumber = 1) {
+    if (window.Cypress || process.env.CI) {
       throw new Error('Push disabled in CI mode')
     }
+    let retryAttemptsPromise = null
     await sbp('okTurtles.eventQueue/queueEvent', 'service-worker/setup-push-subscription', async () => {
+      const { notificationEnabled } = sbp('state/vuex/state').settings
       // Get the installed service-worker registration
       const registration = await navigator.serviceWorker.ready
 
       if (!registration) {
-        console.error('No service-worker registration found!')
-        return
+        throw new Error('No service-worker registration found!')
       }
-
+      // Safari sometimes incorrectly reports 'prompt' when using `registration.pushManager.permissionState`
       const permissionState = await registration.pushManager.permissionState({ userVisibleOnly: true })
+      const granted = permissionState === 'granted' || Notification.permission === 'granted'
+      console.info(`[service-worker/setup-push-subscription] setup: notifications (${notificationEnabled}) perms (${granted})`)
 
-      // Safari sometimes incorrectly reports 'prompt' when using
-      // `registration.pushManager.permissionState`.
-      const existingSubscription = permissionState === 'granted' || Notification.permission === 'granted'
-        ? await registration.pushManager.getSubscription().then((subscription) => {
-          if (
-            !subscription ||
-            (subscription.expirationTime != null &&
-            subscription.expirationTime <= Date.now())
-          ) {
-            console.info(
-              'Attempting to create a new subscription',
-              subscription
-            )
-            return sbp('push/getSubscriptionOptions').then(function (options) {
-              return registration.pushManager.subscribe(options)
-            })
+      let subscription = null
+      // report a real push subscription only if both browser permissions allow and user wants us to
+      if (notificationEnabled && granted) {
+        try {
+          subscription = await registration.pushManager.getSubscription()
+          let newSub = false
+          let endpoint = null
+          let subID = null
+          if (!subscription || (subscription.expirationTime != null && subscription.expirationTime <= Date.now())) {
+            subscription = await registration.pushManager.subscribe(await sbp('push/getSubscriptionOptions'))
+            newSub = true
+          }
+          if (subscription?.endpoint) {
+            endpoint = new URL(subscription.endpoint).host // hide the full endpoint from the logs for privacy
+            subID = await getSubscriptionId(subscription.toJSON())
           }
-          return subscription
-        }).catch(e => {
-          if (!(retryCount > 3) && e?.message === 'WebSocket connection is not open') {
-            return new Promise((resolve, reject) => {
-              const errorTimeoutId = setTimeout(() => {
-                reject(new Error('Timed out waiting to come back online'))
-                cancel()
-              }, 600e3)
-              const cancel = sbp('okTurtles.events/once', ONLINE, () => {
-                clearTimeout(errorTimeoutId)
-                setTimeout(() => resolve(sbp('service-worker/setup-push-subscription', (retryCount || 0) + 1)), 200)
-              })
+          console.info(`[service-worker/setup-push-subscription] got ${newSub ? 'new' : 'existing'} subscription '${subID}':`, endpoint)
+        } catch (e) {
+          console.error('[service-worker/setup-push-subscription] error getting a subscription:', e)
+          if (e?.message === 'WebSocket connection is not open') {
+            if (attemptNumber >= 3) {
+              console.error('[service-worker/setup-push-subscription] maxAttempts reached, giving up')
+              throw e // give up
+            }
+            // this outer promise is a way to wait on this sub-call to finish with getting the eventQueue stuck
+            retryAttemptsPromise = new Promise((resolve, reject) => {
+              // try again in 1 second
+              setTimeout(() => {
+                sbp('service-worker/setup-push-subscription', attemptNumber + 1).then(resolve).catch(reject)
+              }, 1e3)
+            })
+            return // exit the event queue immediately and do not rethrow
+          } else {
+            sbp('gi.ui/prompt', {
+              heading: L('Error setting up push notifications'),
+              question: L('Error setting up push notifications: {errMsg}{br_}{br_}Please make sure {a_}push services are enabled{_a} in your Browser settings, and then try toggling the push notifications toggle in the Notifications settings in the app to try again.', {
+                errMsg: e?.message,
+                a_: '<a class="link" target="_blank" href="https://stackoverflow.com/a/69624651">',
+                _a: '</a>',
+                br_: '<br/>'
+              }),
+              primaryButton: L('Close')
             })
           }
-          console.error('[service-worker/setup-push-subscription] Error setting up push subscription', e)
-          sbp('gi.ui/prompt', {
-            heading: L('Error setting up push notifications'),
-            question: L('Error setting up push notifications: {errMsg}{br_}{br_}Please make sure {a_}push services are enabled{_a} in your Browser settings, and then try toggling the push notifications toggle in the Notifications settings in the app to try again.', {
-              errMsg: e?.message,
-              a_: '<a class="link" target="_blank" href="https://stackoverflow.com/a/69624651">',
-              _a: '</a>',
-              br_: '<br/>'
-            }),
-            primaryButton: L('Close')
-          })
           throw e
-        })
-        : null
-
-      await sbp('push/reportExistingSubscription', existingSubscription?.toJSON()).catch(e => {
-        console.error('[service-worker/setup-push-subscription] Error reporting existing subscription', e)
-      })
-      return true
+        }
+      }
+      try {
+        console.info('[service-worker/setup-push-subscription] calling push/reportExistingSubscription...')
+        await sbp('push/reportExistingSubscription', subscription?.toJSON())
+      } catch (e) {
+        console.error('[service-worker/setup-push-subscription] error reporting subscription:', e)
+        throw e
+      }
     })
+    if (retryAttemptsPromise) {
+      // wait until all attempts have finished
+      await retryAttemptsPromise
+    }
   },
   'service-worker/update': async function () {
     // This function manually checks for the service worker updates and trigger them if there are.
@@ -359,26 +370,14 @@ const swRpc = (() => {
 })()
 
 sbp('sbp/selectors/register', {
-  'gi.actions/*': swRpc
-})
-sbp('sbp/selectors/register', {
-  'chelonia/*': swRpc
-})
-sbp('sbp/selectors/register', {
+  'gi.actions/*': swRpc,
+  'chelonia/*': swRpc,
   'sw-namespace/*': (...args) => {
     // Remove the `sw-` prefix from the selector
     return swRpc(args[0].slice(3), ...args.slice(1))
-  }
-})
-sbp('sbp/selectors/register', {
-  'gi.notifications/*': swRpc
-})
-sbp('sbp/selectors/register', {
-  'sw/*': swRpc
-})
-sbp('sbp/selectors/register', {
-  'swLogs/*': swRpc
-})
-sbp('sbp/selectors/register', {
+  },
+  'gi.notifications/*': swRpc,
+  'sw/*': swRpc,
+  'swLogs/*': swRpc,
   'push/*': swRpc
 })