PronounsPage/components/Captcha.vue

<template>
    <div style="height: 73px" @click="render"></div>
</template>

<script lang="ts">
import dark from '../plugins/dark.ts';

interface Turnstile {
    render(
        element: Element,
        config: { sitekey: string, theme: 'dark' | 'light', language: string, callback: (token: string) => void },
    ): void;
}

declare global {
    interface Window {
        turnstile?: Turnstile;
    }
}

export default dark.extend({
    props: {
        value: {},
    },
    async mounted() {
        await this.$loadScript(
            'turnstile',
            `https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&language=${this.$config.locale}`,
        );
        setTimeout(() => {
            this.render();
        }, 500);
    },
    methods: {
        render() {
            if (!window.turnstile || this.$el.innerHTML.length) {
                return;
            }
            window.turnstile.render(this.$el, {
                sitekey: process.env.TURNSTILE_SITEKEY!,
                theme: this.detectDark() ? 'dark' : 'light',
                language: this.$config.locale,
                callback: this.solved,
            });
        },
        solved(token: string) {
            this.$emit('input', token);
        },
    },
});
</script>