Pinafore-Web-Client-Frontend/src/routes/_components/settings/instance/PushNotificationSettings.html

<div class="push-notifications">
  {#if pushNotificationsSupport === false}
    <p>Your browser doesn't support push notifications.</p>
  {:elseif $notificationPermission === "denied"}
    <p role="alert">You have denied permission to show notifications.</p>
  {:elseif $loggedInInstancesInOrder.length > 1}
    <p>Note that you can only have push notifications for one instance at a time.</p>
  {/if}
  <form id="push-notification-settings"
        disabled="{!pushNotificationsSupport}"
        ref:form
        aria-label="Push notification settings">
    {#each options as option, i (option.key)}
      {#if i > 0}
        <br>
      {/if}
      <input type="checkbox"
             id="push-notifications-{option.key}"
             name="{option.key}"
             disabled="{!pushNotificationsSupport}"
             on:change="onPushSettingsChange(event)">
      <label for="push-notifications-{option.key}">{option.label}</label>
    {/each}
  </form>
</div>
<style>
  .push-notifications {
    background: var(--form-bg);
    border: 1px solid var(--main-border);
    border-radius: 4px;
    display: block;
    padding: 20px;
    line-height: 2em;
  }
  form[disabled="true"] {
    opacity: 0.5;
  }
  p {
    margin: 0 0 10px 0;
  }
</style>
<script>
  import { store } from '../../../_store/store'
  import { importShowTextConfirmationDialog } from '../../dialog/asyncDialogs/importShowTextConfirmationDialog.js'
  import { logOutOfInstance } from '../../../_actions/instances'
  import { updatePushSubscriptionForInstance, updateAlerts } from '../../../_actions/pushSubscription'
  import { toast } from '../../toast/toast'
  import { get } from '../../../_utils/lodash-lite'

  export default {
    async oncreate () {
      const { instanceName, options } = this.get()
      await updatePushSubscriptionForInstance(instanceName)

      const { form } = this.refs
      const pushSubscription = this.store.getInstanceData(instanceName, 'pushSubscriptions')

      for (const { key } of options) {
        form.elements[key].checked = get(pushSubscription, ['alerts', key])
      }
    },
    store: () => store,
    data: () => ({
      options: [
        {
          key: 'follow',
          label: 'New Followers'
        },
        {
          key: 'favourite',
          label: 'Favorites'
        },
        {
          key: 'reblog',
          label: 'Boosts'
        },
        {
          key: 'mention',
          label: 'Mentions'
        },
        {
          key: 'poll',
          label: 'Poll results'
        }
      ]
    }),
    computed: {
      pushNotificationsSupport: ({ $pushNotificationsSupport }) => $pushNotificationsSupport
    },
    methods: {
      async onPushSettingsChange (e) {
        const { instanceName, options } = this.get()
        const { form } = this.refs
        const alerts = {}

        for (const { key } of options) {
          alerts[key] = form.elements[key].checked
        }

        try {
          await updateAlerts(instanceName, alerts)
        } catch (err) {
          e.target.checked = !e.target.checked

          // TODO: Better way to detect missing authorization scope
          if (err.message.startsWith('403:')) {
            const showTextConfirmationDialog = await importShowTextConfirmationDialog()
            showTextConfirmationDialog({
              text: `You need to reauthenticate in order to enable push notification. Log out of ${instanceName}?`
            }).on('positive', () => {
              /* no await */ logOutOfInstance(instanceName)
            })
          } else {
            toast.say(`Failed to update push notification settings: ${err.message}`)
          }
        }
      }
    }
  }
</script>