read message_delivery_method_web_push_vapid_public_key from public settings db

apps/frontend/src/components/create/CreateMessageDeliveryOption.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="flex items-center gap-2">
+    <i class="pi pi-spin pi-spinner" v-if="isLoading"></i>
+
     <RadioButton
+      v-else
       v-model="model"
       :inputId="method"
       name="delivery"
@@ -15,7 +18,11 @@
 import type { QRCodeDocument } from '@/types/DBDocumentTypes'
 import type { DeliveryOption } from '@/constants/deliveryOptions'
 
-defineProps<{ label: DeliveryOption['label']; method: DeliveryOption['method'] }>()
+defineProps<{
+  label: DeliveryOption['label']
+  method: DeliveryOption['method']
+  isLoading?: boolean
+}>()
 defineEmits<{
   (e: 'change', value: Event): void
 }>()

apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue

@@ -1,19 +1,20 @@
 <template>
-  <CreateMessageDeliveryOption :label :method v-model="model" @change="handleSelection()" />
+  <CreateMessageDeliveryOption :isLoading="isLoading" :label :method v-model="model" />
 
   <!-- Ошибка разрешений -->
-  <p v-if="permissionError && model === method" class="text-red-500 mb-2">
-    Не удалось получить разрешение на отправку уведомлений.<br />
-    <button @click="retryPushSubscription" class="text-blue-500 underline">Повторить</button>
+  <p v-if="isError && model === method" class="text-red-500 mb-2">
+    {{ error }}.<br />
+    <button @click="retry()" class="text-blue-500 underline">Повторить</button>
   </p>
 </template>
 
 <script setup lang="ts">
 import { type QRCodeDocument } from '@/types/DBDocumentTypes'
 import { type DeliveryOption, DELIVERY_METHOD_WEB_PUSH } from '@/constants/deliveryOptions'
-import { ref } from 'vue'
+import { computed } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import { saveWebPushSubscription } from '@/api/webPush'
+import { getVapidPublicKey, saveWebPushSubscription } from '@/api/webPush'
 
 type DeliveryOptionWebPush = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_WEB_PUSH }>
 
@@ -28,52 +29,44 @@ const emit = defineEmits<{
 
 const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()
 
-// Локальное состояние для уведомлений и ошибок
-const permissionError = ref(false)
-
-// Обработчик выбора
-async function handleSelection() {
-  permissionError.value = false
-  const permission = await requestNotificationPermission()
-  if (permission) {
-    emit('change')
-  } else {
-    permissionError.value = true
-  }
-}
-
 // Функция запроса разрешений и подписки
-async function requestNotificationPermission(): Promise<boolean> {
+async function requestNotificationPermission() {
   if (!('Notification' in window)) {
-    console.error('Уведомления не поддерживаются этим браузером.')
-    return false
+    throw new Error('Уведомления не поддерживаются этим браузером.')
   }
 
   try {
+    const applicationServerKeyPromise = getVapidPublicKey()
+
     const permission = await Notification.requestPermission()
     if (permission !== 'granted') {
-      console.error('Разрешение на уведомления не предоставлено.')
-      return false
+      throw new Error('Разрешение на уведомления не предоставлено.')
     }
 
     const registration = await navigator.serviceWorker.ready
     const subscription = await registration.pushManager.subscribe({
       userVisibleOnly: true,
-      applicationServerKey:
-        'BMPwpR1Q24ZOFxy2T9M-I-Y6F6bucsHFVZKP8QYslgD_4hGCDv16qnZnji-ldngcZ_vBWVBwJ6OIfknVBnCxLsY',
+      applicationServerKey: await applicationServerKeyPromise,
     })
 
-    await saveWebPushSubscription(subscription)
-    return true
+    const webPushSubscriptionDoc = await saveWebPushSubscription(subscription)
+    emit('change')
+
+    return webPushSubscriptionDoc
   } catch (err) {
-    console.error('Ошибка при создании Push-подписки:', err)
-    return false
+    throw new Error('Ошибка при создании Push-подписки: ' + (err as Error).message)
   }
 }
 
-// Повторный запрос разрешений
-function retryPushSubscription() {
-  permissionError.value = false
-  handleSelection()
-}
+const {
+  isLoading,
+  isError,
+  error,
+  refetch: retry,
+} = useQuery({
+  enabled: computed(() => model.value === DELIVERY_METHOD_WEB_PUSH),
+  queryKey: ['createPushSubscription'],
+  queryFn: () => requestNotificationPermission(),
+  retry: false,
+})
 </script>