itube-specs 0.0.443 → 0.0.445

package/components/auth/s-auth-recovery.vue

@@ -40,7 +40,8 @@
 import type { IPasswordForm } from '../../types';
 import { validateEmail } from '../../runtime';
 import { AuthorizationApiService } from '~/services/api/authorization.service';
-import { useReCaptcha } from 'vue-recaptcha-v3';
+
+import { initRecaptcha, getRecaptchaToken } from '../../composables/use-recaptcha';
 
 const {t} = useI18n();
 
@@ -53,8 +54,6 @@ const error = ref({
   email: false,
 });
 
-const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-
 const emit = defineEmits<{
   (eventName: 'login'): void
 }>()
@@ -65,7 +64,17 @@ function onLoginClick() {
 
 const loading = ref(false)
 
-const { setErrorState, snackbarTheme, snackbarText, showErrorSnack, resetSnackbar } = useSnackbar()
+const { setErrorState, snackbarTheme, snackbarText, showErrorSnack, resetSnackbar } = useSnackbar();
+
+// Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
+onMounted(async () => {
+  try {
+    await initRecaptcha();
+    console.log('reCAPTCHA готов для этой формы');
+  } catch (err) {
+    console.error('Ошибка инициализации reCAPTCHA:', err);
+  }
+});
 
 async function submit() {
   resetSnackbar()
@@ -79,8 +88,7 @@ async function submit() {
 
   try {
     loading.value = true;
-    await recaptchaLoaded();
-    form.value.token = await executeRecaptcha('password_reset');
+    form.value.token = await getRecaptchaToken('password_reset');
     await useUser(AuthorizationApiService).password(form.value);
     useAuthPopup().closeAuthPopup();
     snackbarTheme.value = 'success';

package/components/auth/s-auth-register.vue

@@ -75,7 +75,8 @@
 import type { IRegistrateForm } from '../../types';
 import { validateEmail, validatePassword, validateUsername } from '../../runtime';
 import { AuthorizationApiService } from '~/services/api/authorization.service';
-import { useReCaptcha } from 'vue-recaptcha-v3';
+
+import { initRecaptcha, getRecaptchaToken } from '../../composables/use-recaptcha';
 
 defineProps<{
   additionalText?: string;
@@ -83,9 +84,6 @@ defineProps<{
 
 const { t } = useI18n();
 
-// Правильное использование composable для Vue 3
-const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-
 const form = ref({
   username: '',
   email: '',
@@ -110,6 +108,15 @@ function onLoginClick() {
 const loading = ref(false);
 
 const { setErrorState, snackbarText, snackbarTheme, showErrorSnack, resetSnackbar } = useSnackbar();
+// Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
+onMounted(async () => {
+  try {
+    await initRecaptcha();
+    console.log('reCAPTCHA готов для этой формы');
+  } catch (err) {
+    console.error('Ошибка инициализации reCAPTCHA:', err);
+  }
+});
 
 function validateForm(): boolean {
   const { username, email, password_hash } = form.value;
@@ -131,28 +138,30 @@ function validateForm(): boolean {
 
 async function submit() {
   resetSnackbar();
-  if (!validateForm()) {
-    console.log('Form is invalid');
-    return;
-  }
+  if (!validateForm()) return;
 
   try {
     loading.value = true;
 
-    await recaptchaLoaded();
-    form.value.token = await executeRecaptcha('register');
+    // Уникальное действие для каждой формы
+     // здесь 'register', в других формах — 'password_reset' или 'contact_form'
+    form.value.token = await getRecaptchaToken('register');
 
     await useUser(AuthorizationApiService).register(form.value);
 
     useAuthPopup().closeAuthPopup();
     snackbarTheme.value = 'success';
     snackbarText.value = 'Registration success';
+
+    // ... успех
   } catch (err) {
     setErrorState(err);
-    // Опционально: обработка ошибки reCAPTCHA (например, если загрузка не удалась)
-    console.error('reCAPTCHA error:', err);
+    console.error('Ошибка reCAPTCHA или регистрации:', err);
   } finally {
     loading.value = false;
   }
 }
 </script>
+
+<style scoped>
+</style>

package/components/page-components/s-report.vue

@@ -114,7 +114,8 @@
 import { reportFormsScheme } from '../../lib/report-forms-scheme';
 import { EReportFormsSubjects, validateEmail, validatePhone } from '../../runtime';
 import type { InputTypes, IReportForm, IReportRequest } from '../../types';
-import { useReCaptcha } from 'vue-recaptcha-v3';
+
+import { initRecaptcha, getRecaptchaToken } from '../../composables/use-recaptcha';
 
 const reasonValue = ref('');
 const errorRadio = ref(false);
@@ -139,8 +140,6 @@ const loading = ref(false);
 const activeCategory = computed(() => reportFormsScheme.find((subItem) => subItem.subject === form.value.categoryName))
 const requiredFields = computed(() => activeCategory.value?.items?.filter(item => item.required).map(item => item.value));
 
-const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
-
 const { snackbarText, snackbarTheme, showErrorSnack, resetSnackbar } = useSnackbar();
 
 function resetForm() {
@@ -158,6 +157,16 @@ const emit = defineEmits<{
   (eventName: 'submit', eventValue: IReportRequest): IReportRequest
 }>()
 
+// Загружаем reCAPTCHA при открытии формы (onMounted) — даёт Google время собрать данные о поведении
+onMounted(async () => {
+  try {
+    await initRecaptcha();
+    console.log('reCAPTCHA готов для этой формы');
+  } catch (err) {
+    console.error('Ошибка инициализации reCAPTCHA:', err);
+  }
+});
+
 async function submit() {
   resetSnackbar();
   errorRadio.value = false;
@@ -196,8 +205,7 @@ async function submit() {
   try {
     const baseURL = window.location.origin;
     loading.value = true;
-    await recaptchaLoaded();
-    form.value.token = await executeRecaptcha('contact_form');
+    form.value.token = await getRecaptchaToken('contact_form');
     form.value.url = `${baseURL}/videos/${reportedVideoCard.value.id}`;
 
     if (reasonValue.value) {

package/composables/use-recaptcha.ts

@@ -0,0 +1,75 @@
+// composables/useRecaptcha.ts
+import { useRuntimeConfig } from '#imports';
+
+let recaptchaLoaded = false;
+let siteKey: string | null = null;
+
+async function loadRecaptchaScript(): Promise<void> {
+  // Всё только на клиенте (SSR-safe)
+  if (process.server) return;
+
+  if (recaptchaLoaded) return;
+
+  siteKey = useRuntimeConfig().public.recaptchaSiteKey;
+
+  if (!siteKey) {
+    console.warn('reCAPTCHA siteKey не задан — защита отключена');
+    return;
+  }
+
+  const useRecaptchaNet = true; // true = recaptcha.net (для регионов с блокировкой Google)
+  const domain = useRecaptchaNet ? 'recaptcha.net' : 'www.google.com';
+
+  const script = document.createElement('script');
+  script.src = `https://${domain}/recaptcha/api.js?render=${siteKey}&hl=ru`;
+  script.async = true;
+  script.defer = true;
+  document.head.appendChild(script);
+
+  // Polling до готовности grecaptcha (надёжно и без ошибок listener)
+  const maxAttempts = 100; // ~10 сек
+  let attempts = 0;
+
+  while (typeof (window as any).grecaptcha === 'undefined' || !(window as any).grecaptcha.execute) {
+    if (attempts >= maxAttempts) {
+      throw new Error('reCAPTCHA не загрузился (таймаут)');
+    }
+    await new Promise(resolve => setTimeout(resolve, 100));
+    attempts++;
+  }
+
+  recaptchaLoaded = true;
+
+  // Опционально: скрываем бейдж (если хотите глобально)
+  const style = document.createElement('style');
+  style.textContent = '.grecaptcha-badge { visibility: hidden !important; }';
+  document.head.appendChild(style);
+
+  console.log('reCAPTCHA v3 загружен глобально');
+}
+
+// Инициализация — вызывайте в onMounted формы (даёт время на мониторинг поведения)
+export async function initRecaptcha(): Promise<void> {
+  if (process.server) return;
+  if (recaptchaLoaded || !siteKey) return;
+
+  await loadRecaptchaScript();
+}
+
+// Получение токена — вызывайте в submit
+export async function getRecaptchaToken(action: string): Promise<string> {
+  if (process.server) {
+    throw new Error('reCAPTCHA работает только на клиенте');
+  }
+
+  if (!recaptchaLoaded) {
+    await loadRecaptchaScript();
+  }
+
+  if (!siteKey) {
+    throw new Error('reCAPTCHA siteKey не задан');
+  }
+
+  // @ts-ignore grecaptcha глобальный
+  return await grecaptcha.execute(siteKey, { action });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.443",
+  "version": "0.0.445",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
@@ -49,7 +49,6 @@
   },
   "dependencies": {
     "@vueform/slider": "2.1.10",
-    "@vueuse/core": "12.8.2",
-    "vue-recaptcha-v3": "^2.0.1"
+    "@vueuse/core": "12.8.2"
   }
 }