From ff3302364360724dd993f0f5962c733ff87ea684 Mon Sep 17 00:00:00 2001
From: F4ilji <F4ilj@yandex.ru>
Date: Fri, 5 Sep 2025 17:13:04 +0500
Subject: [PATCH] Add @gladesinger/vue3-yandex-smartcaptcha dependency, replace
 vue3-yandex-smartcaptcha with YandexSmartCaptcha in CaptchaBlock component,
 and update PersonalDataBlock label for compliance with data protection laws.

---
 package-lock.json                             | 20 ++--
 package.json                                  |  2 +-
 resources/js/app.js                           |  5 -
 .../formBuilder/blocks/CaptchaBlock.vue       | 98 +++++++++++--------
 .../formBuilder/blocks/PersonalDataBlock.vue  |  4 +-
 5 files changed, 72 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8dbbbd8..29fcd7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@gladesinger/vue3-yandex-smartcaptcha": "^1.0.0",
         "@heroicons/vue": "^2.2.0",
         "@inertiajs/inertia": "^0.11.1",
         "@inertiajs/inertia-vue3": "^0.6.0",
@@ -28,7 +29,6 @@
         "preline": "^1.9.0",
         "slugify": "^1.6.6",
         "vite": "^6.3.5",
-        "vue3-yandex-smartcaptcha": "^1.0.0",
         "vuex": "^4.1.0"
       },
       "devDependencies": {
@@ -515,6 +515,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@gladesinger/vue3-yandex-smartcaptcha": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@gladesinger/vue3-yandex-smartcaptcha/-/vue3-yandex-smartcaptcha-1.0.0.tgz",
+      "integrity": "sha512-FWCcte2hyFMwdT3YVIFwbNAaP94xFBOY2/s/NhNgZ+QI1GN6+gddaJZOWXAW7u0MuQVIQCKpHtcIUDJN+MeS4w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@heroicons/vue": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
@@ -9845,15 +9854,6 @@
         }
       }
     },
-    "node_modules/vue3-yandex-smartcaptcha": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/vue3-yandex-smartcaptcha/-/vue3-yandex-smartcaptcha-1.1.0.tgz",
-      "integrity": "sha512-SRHJ4Ln0YKKgFbd3y7BqNcptgfMJtTsA+IPc8GQyvETawcc/bedYPbpYDrYoWzDdoOjOz28gXt94ucRKFY/CZg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": "^3.3.8"
-      }
-    },
     "node_modules/vuex": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz",
diff --git a/package.json b/package.json
index aabaaaf..6372e51 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "    \"@editorjs/image\": \"^2.8.1\",\n    \"@editorjs/quote\": \"^2.5.0\","
   ],
   "dependencies": {
+    "@gladesinger/vue3-yandex-smartcaptcha": "^1.0.0",
     "@heroicons/vue": "^2.2.0",
     "@inertiajs/inertia": "^0.11.1",
     "@inertiajs/inertia-vue3": "^0.6.0",
@@ -49,7 +50,6 @@
     "preline": "^1.9.0",
     "slugify": "^1.6.6",
     "vite": "^6.3.5",
-    "vue3-yandex-smartcaptcha": "^1.0.0",
     "vuex": "^4.1.0"
   },
   "optionalDependencies": {
diff --git a/resources/js/app.js b/resources/js/app.js
index e89162e..78df97a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -8,7 +8,6 @@ import { createSSRApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue3';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
 import {linksReform} from "@/mixins/LinksReform.js";
-import YSmartCaptcha from 'vue3-yandex-smartcaptcha'
 import cookieMixin from "@/mixins/cookieMixin.js";
 import store from '@/store/index.js';
 import '@vuepic/vue-datepicker/dist/main.css';
@@ -30,10 +29,6 @@ createInertiaApp({
             .mixin(linksReform)
             .mixin(cookieMixin)
             .use(ZiggyVue)
-            .use(YSmartCaptcha, {
-                siteKey: "ysc1_jxb2IcslgBuHgHbmmKY1F7Nvb8zYHuAeBgjoaTka6886f893",
-                lang: "Язык ('ru' | 'en' | 'be' | 'kk' | 'tt' | 'uk' | 'uz' | 'tr')"
-            })
             .mount(el);
     },
     progress: {
diff --git a/resources/js/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue b/resources/js/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue
index 9b3a69e..ca3cea3 100644
--- a/resources/js/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue
+++ b/resources/js/componentss/shared/builder/formBuilder/blocks/CaptchaBlock.vue
@@ -1,48 +1,66 @@
 <template>
-	<div class="mb-4 sm:mb-8">
-		<div class="relative">
-			<!-- Компонент капчи -->
-			<YSmartCaptcha v-model="token" />
-			<!-- Скрытое поле ввода -->
-			<input
+  <div class="mb-4 sm:mb-8">
+    <!-- Рендерим компонент только после того, как родитель примонтирован -->
+    <YandexSmartCaptcha
+        v-if="isMounted"
+        :siteKey="yandexCaptchaKey"
+        @onSuccess="handleSuccess"
+        @onTokenExpired="handleTokenExpired"
+    />
+
+    <div class="relative">
+      <input
           name="captcha"
-					v-model="inputValue"
-					required="required"
-					type="text"
-					class="hidden"
-			/>
-		</div>
-	</div>
+          v-model="inputValue"
+          required="required"
+          type="text"
+          class="hidden"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
+import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha';
+
 export default {
-	name: "CaptchaBlock",
-	data() {
-		return {
-			token: null, // Токен капчи
-			inputValue: "", // Значение, которое будет отправлено в input
-		};
-	},
-	watch: {
-		// Отслеживаем изменения токена
-		token(newToken) {
-			if (newToken) {
-				// Если токен получен, считаем капчу успешно пройденной
-				this.inputValue = "Капча успешно пройдена";
-			} else {
-				// Если токен сброшен, очищаем поле
-				this.inputValue = "";
-			}
-		},
-	},
-	props: {
-		block: {
-			type: Object,
-		},
-		error: {
-			type: Object,
-		},
-	},
+  name: "CaptchaBlock",
+  components: {
+    YandexSmartCaptcha,
+  },
+  data() {
+    return {
+      yandexCaptchaKey: import.meta.env.VITE_YANDEX_CAPTCHA_KEY,
+      token: null,
+      inputValue: "",
+      isMounted: false, // 1. Добавляем новый флаг
+    };
+  },
+  mounted() {
+    // 2. Хук mounted() вызывается, когда компонент вставлен в DOM.
+    //    Теперь можно безопасно рендерить капчу.
+    this.isMounted = true;
+  },
+  watch: {
+    token(newToken) {
+      if (newToken) {
+        this.inputValue = "Капча успешно пройдена";
+      } else {
+        this.inputValue = "";
+      }
+    },
+  },
+  methods: {
+    handleSuccess(token) {
+      this.token = token;
+    },
+    handleTokenExpired() {
+      this.token = null;
+    }
+  },
+  props: {
+    block: { type: Object },
+    error: { type: Object },
+  },
 };
 </script>
\ No newline at end of file
diff --git a/resources/js/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue b/resources/js/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue
index 13472a8..9f703aa 100644
--- a/resources/js/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue
+++ b/resources/js/componentss/shared/builder/formBuilder/blocks/PersonalDataBlock.vue
@@ -6,7 +6,9 @@
 						required="required"
 						class="shrink-0 mb-0.5 border-gray-200 rounded text-primary focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
 						id="personal-data-id">
-			<label for="personal-data-id" class="text-sm text-gray-500 ms-2">Даю свое согласие на сбор, обработку, хранение и использование персональных данных в соответствии с <a class="underline text-primary" target="_blank" href="https://ntspi.ru/upload/824_%D0%9E%D0%B1_%D1%83%D1%82%D0%B2_%D0%9F%D0%BE%D0%BB%D0%B8%D1%82_%D0%BE%D0%B1%D1%80_%D0%B7%D0%B0%D1%89%D0%B8%D1%82_%D0%BF%D0%B5%D1%80%D1%81_%D0%B4%D0%B0%D0%BD.pdf">Пользовательским соглашением</a> </label>
+			<label for="personal-data-id" class="text-sm text-gray-500 ms-2">
+        Согласно Федеральному закону от 27.07.2006 № 152-ФЗ "О персональных данных", даю свое согласие на обработку персональных данных.
+      </label>
 		</div>
 	</div>