cv2/components/AltchaValidation.client.vue

<template>
  <altcha-widget
    v-show="widget !== null"
    ref="widget"
    :challengeurl="runtimeConfig.public.challengeUrl"
    :expire="expire"
    debug
  />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, type Ref } from 'vue'
import 'altcha'
import { useRuntimeConfig } from 'nuxt/app'
import type { PropType } from '@vue/runtime-core'

const runtimeConfig = useRuntimeConfig()
const appStore = useAppStore()

// Setup a 15min expiration date for the payload
const expire: number = 15 * 60 * 1000

const widget: Ref<HTMLElement | null> = ref(null)

defineProps({
  modelValue: {
    type: String as PropType<string | null>,
    required: true
  }
})

const emit = defineEmits(['update:payload'])

const onStateChange = (e: CustomEvent | Event) => {
  if ('detail' in e) {
    const { payload, state } = e.detail
    if (state === 'verified' && payload) {
      appStore.setAltchaPayload(payload)
      emit('update:modelValue', payload)
    }
  }
}

onMounted(() => {
  setTimeout(() => {
    if (widget.value) {
      widget.value.addEventListener('statechange', onStateChange)
    }
  }, 10)
})

onUnmounted(() => {
  if (widget.value) {
    widget.value.removeEventListener('statechange', onStateChange)
  }
})
</script>

<style scoped lang="scss">

</style>