From 0cc4c41315309d10f39dc9ba9c1275c82820eb6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sat, 4 Feb 2023 19:43:24 +0100
Subject: [PATCH] feat(pwa): add more errors and elk repo link in push
 notifications subscription errors (#1610)

---
 components/notification/NotificationPreferences.client.vue  | 2 --
 .../NotificationSubscribePushNotificationError.vue          | 6 ++++++
 composables/push-notifications/createPushSubscription.ts    | 4 ++--
 composables/push-notifications/types.ts                     | 3 ++-
 locales/en.json                                             | 5 ++++-
 locales/es.json                                             | 5 ++++-
 6 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/components/notification/NotificationPreferences.client.vue b/components/notification/NotificationPreferences.client.vue
index eb553afb..c7462cc7 100644
--- a/components/notification/NotificationPreferences.client.vue
+++ b/components/notification/NotificationPreferences.client.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { PushSubscriptionError } from '~/composables/push-notifications/types'
-
 defineProps<{ show?: boolean }>()
 
 const {
diff --git a/components/notification/NotificationSubscribePushNotificationError.vue b/components/notification/NotificationSubscribePushNotificationError.vue
index 9da057d2..f929d715 100644
--- a/components/notification/NotificationSubscribePushNotificationError.vue
+++ b/components/notification/NotificationSubscribePushNotificationError.vue
@@ -36,5 +36,11 @@ const { modelValue } = defineModel<{
       </CommonTooltip>
     </head>
     <p>{{ message }}</p>
+    <p py-2>
+      <NuxtLink font-bold text-primary href="https://github.com/elk-zone/elk" target="_blank" flex="~ row" items-center gap-x-2>
+        {{ $t('settings.notifications.push_notifications.subscription_error.repo_link') }}
+        <span inline-block aria-hidden="true" i-ri:external-link-line class="rtl-flip" />
+      </NuxtLink>
+    </p>
   </div>
 </template>
diff --git a/composables/push-notifications/createPushSubscription.ts b/composables/push-notifications/createPushSubscription.ts
index b73f8214..63363be9 100644
--- a/composables/push-notifications/createPushSubscription.ts
+++ b/composables/push-notifications/createPushSubscription.ts
@@ -46,9 +46,9 @@ export const createPushSubscription = async (
       if (error.code === 11 && error.name === 'InvalidStateError')
         useError = new PushSubscriptionError('too_many_registrations', 'Too many registrations')
       else if (error.code === 20 && error.name === 'AbortError')
-        console.error('Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.')
+        useError = new PushSubscriptionError('vapid_not_supported', 'Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol.')
       else if (error.code === 5 && error.name === 'InvalidCharacterError')
-        console.error('The VAPID public key seems to be invalid:', vapidKey)
+        useError = new PushSubscriptionError('invalid_vapid_key', `The VAPID public key seems to be invalid: ${vapidKey}`)
 
       return getRegistration()
         .then(getPushSubscription)
diff --git a/composables/push-notifications/types.ts b/composables/push-notifications/types.ts
index c5da0540..979c7669 100644
--- a/composables/push-notifications/types.ts
+++ b/composables/push-notifications/types.ts
@@ -25,7 +25,8 @@ export interface CustomEmojisInfo {
   emojis: mastodon.v1.CustomEmoji[]
 }
 
-export type PushSubscriptionErrorCode = 'too_many_registrations'
+export type PushSubscriptionErrorCode = 'too_many_registrations' | 'vapid_not_supported' | 'invalid_vapid_key'
+
 export class PushSubscriptionError extends Error {
   code: PushSubscriptionErrorCode
   constructor(code: PushSubscriptionErrorCode, message?: string) {
diff --git a/locales/en.json b/locales/en.json
index b694e3c1..abd4a000 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -370,10 +370,13 @@
         "save_settings": "Save settings",
         "subscription_error": {
           "clear_error": "Clear error",
+          "invalid_vapid_key": "The VAPID public key seems to be invalid.",
           "permission_denied": "Permission denied: enable notifications in your browser.",
+          "repo_link": "Elk's repository in Github",
           "request_error": "An error occurred while requesting the subscription, try again and if the error persists, please report the issue to the Elk repository.",
           "title": "Could not subscribe to push notifications",
-          "too_many_registrations": "Due to browser limitations, Elk cannot use the push notifications service for multiple accounts on different servers. You should unsubscribe from push notifications on another account and try again."
+          "too_many_registrations": "Due to browser limitations, Elk cannot use the push notifications service for multiple accounts on different servers. You should unsubscribe from push notifications on another account and try again.",
+          "vapid_not_supported": "Your browser supports Web Push Notifications, but does not seem to implement the VAPID protocol."
         },
         "title": "Push notifications settings",
         "undo_settings": "Undo changes",
diff --git a/locales/es.json b/locales/es.json
index 4422cc2f..50cf46bb 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -370,10 +370,13 @@
         "save_settings": "Guardar cambios",
         "subscription_error": {
           "clear_error": "Limpiar error",
+          "invalid_vapid_key": "La clave pública VAPID parece no ser válida.",
           "permission_denied": "Permiso denegado: habilita las notificaciones en tu navegador.",
+          "repo_link": "Repositorio de Elk en Github",
           "request_error": "Se produjo un error al solicitar la suscripción, inténtalo de nuevo y si el error persiste, notifica la incidencia en el repositorio de Elk.",
           "title": "No se pudo suscribir a las notificaciones push",
-          "too_many_registrations": "Debido a las limitaciones del navegador, Elk no puede habilitar las notificaciones push para múltiples cuentas en diferentes servidores. Deberá cancelar las subscripciones a notificaciones push en las otras cuentas e intentarlo de nuevo."
+          "too_many_registrations": "Debido a las limitaciones del navegador, Elk no puede habilitar las notificaciones push para múltiples cuentas en diferentes servidores. Deberá cancelar las subscripciones a notificaciones push en las otras cuentas e intentarlo de nuevo.",
+          "vapid_not_supported": "Su navegador es compatible con las notificaciones web push, pero no parece implementar el protocolo VAPID."
         },
         "title": "Ajustes de notificaciones push",
         "undo_settings": "Deshacer cambios",