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.

2025-09-05 17:13:04 +05:00
parent c8ab16aecb
commit ff33023643
5 changed files with 72 additions and 57 deletions
@@ -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>