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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user