From 7418b7cab800a3c90bdeb4d9cad72696577e1409 Mon Sep 17 00:00:00 2001
From: alinakuzina <kuzina.lg.4.1@gmail.com>
Date: Wed, 15 Nov 2023 18:19:45 +0100
Subject: [PATCH] feat: Internationalize turnstile widget

Enable language customization for the turnstile widget.
---
 playground/pages/index.vue | 15 +++++++++++++--
 src/runtime/types.ts       |  5 +++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 4e9b77e4..b1493848 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -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>
@@ -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()
 
diff --git a/src/runtime/types.ts b/src/runtime/types.ts
index a98e9e5c..d1bb9293 100644
--- a/src/runtime/types.ts
+++ b/src/runtime/types.ts
@@ -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.
    */