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.

This commit is contained in:
F4ilji
2025-09-05 17:13:04 +05:00
parent c8ab16aecb
commit ff33023643
5 changed files with 72 additions and 57 deletions
+10 -10
View File
@@ -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",
+1 -1
View File
@@ -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": {
-5
View File
@@ -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: {
@@ -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>
@@ -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>