Open Aspyryan opened 9 months ago
I'm also facing this issue. @Aspyryan did u find some workaround fo this ?
@DanSnow is possible to hide/show the badge ? Something like, when unmounted -> hide(), then mounted -> show()
@DanSnow can u pls answer ?
Please check out here for how to hide it https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge
@DanSnow if i set the style globally, it will hide the captcha everywhere.. I need to hide it depeding on the current route 🧐
Ok.. i found an workaround.. but i think that u @DanSnow should add an switch show() / hide() to the composable.
Add global stlye:
.grecaptcha-badge {
visibility: hidden !important;
}
.grecaptcha-badge-show {
visibility: visible !important;
}
i have an component where i use everywhere i need the Captcha & there i have:
onMounted(() => {
const grecaptchaBadgeEl = document.querySelector('.grecaptcha-badge');
if (grecaptchaBadgeEl) {
grecaptchaBadgeEl.classList.add('grecaptcha-badge-show');
}
});
onUnmounted(() => {
const grecaptchaBadgeEl = document.querySelector('.grecaptcha-badge');
if (grecaptchaBadgeEl) {
grecaptchaBadgeEl.classList.remove('grecaptcha-badge-show');
}
});
Description
Captcha v3 popup not disappearing when navigation from page to page.
When I navigate using the router.push. The popup is still visible but not needed anymore. Can I somehow destroy the captcha?
Minimal Reproducible Example
https://stackblitz.com/edit/vue-rrrchm?file=src%2Fviews%2FLoginView.vue
System info
System: OS: Windows 11 10.0.22631 CPU: (12) x64 AMD Ryzen 5 7600X 6-Core Processor Memory: 15.25 GB / 31.15 GB Binaries: Node: 16.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (120.0.2210.91) Internet Explorer: 11.0.22621.1 npmPackages: @vitejs/plugin-vue: ^4.5.2 => 4.5.2 vite: ^5.0.10 => 5.0.10 vue-recaptcha: ^3.0.0-alpha.2 => 3.0.0-alpha.2