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