Skip to content

Commit

Permalink
feat: Internationalize turnstile widget
Browse files Browse the repository at this point in the history
Enable language customization for the turnstile widget.
  • Loading branch information
alinakuzina committed Nov 15, 2023
1 parent 46ce9ab commit 7418b7c
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 2 deletions.
15 changes: 13 additions & 2 deletions playground/pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
<template>
<div>
<NuxtLink id="home-link" to="/home">to /home</NuxtLink>
<div>
<label for="language">Select Turnstile Language : </label>
<select id="language" v-model="selectedLanguage">
<option v-for="lang in languages" :key="lang" :value="lang">{{ lang }}</option>
</select>
</div>
<button @click="toggle = !toggle">Load Turnstiles</button>
<form @submit.prevent="onSubmit">
<h2>Using vue model</h2>
<NuxtTurnstile v-if="toggle" v-model="token" :options="{ action: 'vue' }" />
<NuxtTurnstile v-if="toggle" :key="selectedLanguage" v-model="token"
:options="{ action: 'vue', language: selectedLanguage }" />
<input type="submit" />
</form>
<pre>{{ response1 }}</pre>
<hr />
<form @submit.prevent="onNativeSubmit">
<h2>Using native form</h2>
<NuxtTurnstile v-if="toggle" ref="turnstile" :options="{ action: 'native' }" />
<NuxtTurnstile v-if="toggle" :key="selectedLanguage" ref="turnstile"
:options="{ action: 'native', language: selectedLanguage }" />
<input type="submit" />
</form>
<button :disabled="!turnstile" @click="turnstile.reset()">Reset</button>
Expand All @@ -20,6 +28,9 @@
</template>

<script setup lang="ts">
const selectedLanguage = ref('en')
const languages = ['en', 'de', 'fr']
const toggle = ref(false)
const token = ref()
Expand Down
5 changes: 5 additions & 0 deletions src/runtime/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@ export interface TurnstileRenderOptions {
* A customer payload that can be used to attach customer data to the challenge throughout its issuance and which is returned upon validation.
*/
cData?: any
/**
* A custom language setting. Use 'auto' (default) for the visitor's chosen language, ISO 639-1 two-letter language code (e.g., en), or language and country code (e.g., en-US).
* Consult the list of supported languages: https://developers.cloudflare.com/turnstile/reference/supported-languages/
*/
language?: string
/**
* A JavaScript callback that is invoked upon success of the challenge. The callback is passed a token that can be validated.
*/
Expand Down

0 comments on commit 7418b7c

Please sign in to comment.