search

nuxt-modules / turnstile

🔥 Cloudflare Turnstile integration for Nuxt
https://cloudflare.com/products/turnstile
MIT License
215 stars 17 forks source link

Support for appearance="interaction-only" #305

Closed nicokempe closed 2 months ago

nicokempe commented 2 months ago

🆒 Your use case

I am utilizing the Nuxt 3 Turnstile Module for my application to leverage Cloudflare's Turnstile widget for bot management. The current limitation is the lack of support for the appearance="interaction-only" mode within the module. This feature is crucial for maintaining the aesthetic consistency of the pages where the widget is implemented. The interaction-only mode offers a streamlined appearance, which would significantly improve the user experience by not disrupting the UI design of my application.

At least I have not found that option or am I just blind? Even better if it is already accessible. 🙂

🆕 The solution you'd like

I would like the Nuxt 3 Turnstile Module to incorporate the appearance attribute with support for the interaction-only value as described in Cloudflare's documentation (https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#appearance-modes). The addition of this feature would allow for a more discreet integration of the Turnstile widget, enhancing the page design and user interaction without the need for the visible banner after a successful challenge.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

The request is specifically for a feature that is already available in Cloudflare's Turnstile when implemented directly as per their documentation. Since the Nuxt 3 Turnstile Module serves as a bridge for Nuxt 3 apps, it would be highly beneficial for it to have parity with the features offered by Cloudflare's native implementation. This feature would also help others facing similar UI/UX challenges. Attached is a screenshot that shows the current aesthetic issue with the Turnstile widget.

dargmuesli commented 2 months ago

Thank you for this suggestion! I think only one line needs to be added to https://github.com/nuxt-modules/turnstile/blob/34a5c6e298cd763946ace1af5b009c502f13f711/src/runtime/types.ts for this ticket to be resolved. PR welcome :heart:

nathansmedley commented 2 months ago

I also was after this option i think i've added it correctly seems to be working in the playground with no errors i've opened a PR: https://github.com/nuxt-modules/turnstile/pull/308 (This is my first ever contribution to a project so sorry if its not correct)

dargmuesli commented 2 months ago

Great work for your first contribution! Feel encouraged to continue this way :)