feat: show re-auth message when missing `vapid_key` (#542)

components/notification/NotificationEnablePushNotification.client.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 defineProps<{
+  showReAuthMessage: boolean
   withHeader?: boolean
   busy?: boolean
   animate?: boolean
@@ -29,6 +30,9 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
     <p>
       {{ $t(withHeader ? 'notification.settings.warning.enable_description' : 'notification.settings.warning.enable_description_short') }}
     </p>
+    <p v-if="isLegacyAccount && showReAuthMessage">
+      {{ $t('notification.settings.warning.re_auth') }}
+    </p>
     <button
       btn-outline rounded-full font-bold py4 flex="~ gap2 center" m5
       type="button"

components/notification/NotificationPreferences.client.vue

@@ -161,6 +161,7 @@ onActivated(() => (busy = false))
               v-else
               :animate="animateSubscription"
               :busy="busy"
+              :show-re-auth-message="!showWarning"
               @hide="hideNotification"
               @subscribe="doSubscribe"
             />
@@ -173,6 +174,7 @@ onActivated(() => (busy = false))
     </Transition>
     <NotificationEnablePushNotification
       v-if="showWarning"
+      :show-re-auth-message="true"
       with-header
       px5
       py4

locales/en-US.json

@@ -193,7 +193,8 @@
         "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:notification.settings.show_btn{'\"'} button above once enabled.",
         "enable_description_short": "To change push notifications settings when Elk is not open, you must first enable push notifications.",
         "enable_desktop": "Enable push notifications",
-        "enable_title": "Never miss anything"
+        "enable_title": "Never miss anything",
+        "re_auth": "It seems that your server does not support push notifications. Try sign out and sign in again, if this message still appears contact your server administrator."
       }
     },
     "signed_up": "signed up",

locales/es-ES.json

@@ -193,7 +193,8 @@
         "enable_description": "Para recibir notificaciones cuando Elk no esté abierto, habilite las notificaciones push. Puedes controlar con precisión qué tipos de interacciones generan notificaciones push a través del botón \"@:notification.settings.show_btn{'\"'} de arriba una vez que estén habilitadas.",
         "enable_description_short": "Para cambiar los ajustes de las notificaciones push cuando Elk no esté abierto, debe habilitar antes las notificaciones push.",
         "enable_desktop": "Habilitar notificaciones push",
-        "enable_title": "Nunca te pierdas nada"
+        "enable_title": "Nunca te pierdas nada",
+        "re_auth": "Parace que su servidor no soporta notificaciones push. Pruebe a cerrar la sesión y volver a iniciarla, si este mensaje sigue apareciendo contacte con el administrador de su servidor."
       }
     },
     "update_status": "ha actualizado su estado"