@dargmuesli/nuxt-vio 20.2.0 → 20.3.0

package/app/components/vio/form/VioFormContact.vue

@@ -1,5 +1,10 @@
 <template>
-  <VioForm :form="v$" :is-form-sent="isFormSent" @submit="submit">
+  <VioForm
+    :form="v$"
+    :is-loading="isLoading"
+    :is-form-sent="isFormSent"
+    @submit.prevent="submit"
+  >
     <input type="hidden" name="static-form-name" value="contact" />
     <VioFormInput
       id-label="input-name"
@@ -61,6 +66,10 @@
         </VioFormInputStateError>
       </template>
     </VioFormInput>
+    <VioFormInputCaptcha
+      :form-input="v$.captcha"
+      @input="form.captcha = $event"
+    />
   </VioForm>
 </template>
 
@@ -68,12 +77,28 @@
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 
+type FormValid = { emailAddress: string; name: string; message: string }
+
+withDefaults(
+  defineProps<{
+    isLoading?: boolean
+  }>(),
+  {
+    isLoading: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  submit: [form: FormValid]
+}>()
+
 const { t } = useI18n()
 const runtimeConfig = useRuntimeConfig()
 const siteConfig = useSiteConfig()
 
 // data
 const form = reactive({
+  captcha: ref<string>(),
   emailAddress: ref<string>(),
   name: ref<string>(),
   message: ref<string>(),
@@ -81,11 +106,16 @@ const form = reactive({
 const isFormSent = ref(false)
 
 // methods
-const submit = async (e: Event) =>
-  !(await isFormValid({ v$, isFormSent })) ? e.preventDefault() : undefined
+const submit = async () => {
+  if (!(await isFormValid({ v$, isFormSent }))) return
+  emit('submit', form as FormValid)
+}
 
 // vuelidate
 const rules = {
+  captcha: {
+    required,
+  },
   emailAddress: {
     // maxLength: maxLength(100),
     required,

package/app/components/vio/form/input/VioFormInputCaptcha.vue

@@ -0,0 +1,99 @@
+<template>
+  <VioFormInput
+    :class="{
+      hidden: !isVisible && !formInput.$error,
+    }"
+    :title="t('captcha')"
+    :value="formInput"
+  >
+    <NuxtTurnstile
+      ref="turnstileRef"
+      :class="{ 'h-16.25': isVisible }"
+      :options="{
+        'error-callback': () => (isLoading = false),
+        'expired-callback': () => emit('input', undefined),
+      }"
+      @update:model-value="update"
+    />
+    <VioFormInputStateError
+      v-if="!isVisible"
+      :form-input="formInput"
+      validation-property="required"
+    >
+      {{ t('globalValidationRequired') }}
+    </VioFormInputStateError>
+    <template v-if="isVisible" #stateError>
+      <VioFormInputStateError
+        :form-input="formInput"
+        validation-property="required"
+      >
+        {{ t('globalValidationRequired') }}
+      </VioFormInputStateError>
+    </template>
+    <template v-if="!isVisible && isLoading" #stateInfo>
+      <VioFormInputStateInfo>
+        {{ t('globalStatusLoading') }}
+      </VioFormInputStateInfo>
+    </template>
+    <template v-if="formInput.$error" #assistance>
+      <VioButtonColored :aria-label="t('reset')" @click="reset">
+        {{ t('reset') }}
+        <template #prefix>
+          <!-- <IHeroiconsArrowPath /> -->
+        </template>
+      </VioButtonColored>
+    </template>
+  </VioFormInput>
+</template>
+
+<script setup lang="ts">
+import type { BaseValidation } from '@vuelidate/core'
+
+withDefaults(
+  defineProps<{
+    formInput: BaseValidation
+  }>(),
+  {},
+)
+
+const emit = defineEmits<{
+  input: [event?: string]
+}>()
+
+const { t } = useI18n()
+const runtimeConfig = useRuntimeConfig()
+
+// refs
+const turnstileRef = ref()
+
+// data
+const isLoading = ref(true)
+
+// computations
+const isVisible = computed(
+  () => !runtimeConfig.public.vio.isTesting,
+  // TODO: implement invisible widget type with fallback in case of required user interaction (https://github.com/maevsi/maevsi/issues/1239)
+  // !['1x00000000000000000000BB', '2x00000000000000000000BB'].includes(
+  //   config.public.turnstile.siteKey
+  // )
+)
+
+// methods
+const reset = () => {
+  isLoading.value = true
+  turnstileRef.value.reset()
+}
+const update = (e: string) => {
+  isLoading.value = false
+  emit('input', e)
+}
+</script>
+
+<i18n lang="yaml">
+de:
+  captcha: Captcha
+  reset: Captcha neu laden
+en:
+  captcha: Captcha
+  reset: Reload captcha
+</i18n>

package/nuxt.config.ts

@@ -54,6 +54,7 @@ export default defineNuxtConfig(
         '@nuxtjs/html-validator',
         '@nuxtjs/i18n',
         '@nuxtjs/seo',
+        '@nuxtjs/turnstile',
         '@pinia/nuxt',
         'nuxt-gtag',
         'shadcn-nuxt',

package/package.json

@@ -3,6 +3,7 @@
     "@dargmuesli/nuxt-cookie-control": "9.1.13",
     "@eslint/compat": "2.0.1",
     "@heroicons/vue": "2.2.0",
+    "@nuxtjs/turnstile": "1.1.1",
     "@http-util/status-i18n": "0.9.0",
     "@intlify/eslint-plugin-vue-i18n": "4.1.1",
     "@nuxt/devtools": "3.1.1",
@@ -114,5 +115,5 @@
     "start:static": "serve playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "20.2.0"
+  "version": "20.3.0"
 }