egirlskey/packages/frontend/src/components/MkCaptcha.vue

120 lines
3 KiB
Vue
Raw Normal View History

2020-04-29 00:15:18 +00:00
<template>
<div>
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
<div ref="captchaEl"></div>
2020-04-29 00:15:18 +00:00
</div>
</template>
<script lang="ts" setup>
import { ref, shallowRef, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
2020-04-29 00:15:18 +00:00
// APIs provided by Captcha services
export type Captcha = {
2020-04-29 00:15:18 +00:00
render(container: string | Node, options: {
readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
}): string;
remove(id: string): void;
execute(id: string): void;
reset(id?: string): void;
2020-04-29 00:15:18 +00:00
getResponse(id: string): string;
};
type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile';
2020-04-29 00:15:18 +00:00
type CaptchaContainer = {
readonly [_ in CaptchaProvider]?: Captcha;
};
declare global {
interface Window extends CaptchaContainer { }
2020-04-29 00:15:18 +00:00
}
const props = defineProps<{
provider: CaptchaProvider;
sitekey: string | null; // null will show error on request
modelValue?: string | null;
}>();
const emit = defineEmits<{
2022-01-25 18:26:34 +00:00
(ev: 'update:modelValue', v: string | null): void;
}>();
const available = ref(false);
const captchaEl = shallowRef<HTMLDivElement | undefined>();
const variable = computed(() => {
switch (props.provider) {
case 'hcaptcha': return 'hcaptcha';
case 'recaptcha': return 'grecaptcha';
case 'turnstile': return 'turnstile';
}
});
const loaded = !!window[variable.value];
const src = computed(() => {
switch (props.provider) {
case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
case 'turnstile': return 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
}
2020-04-29 00:15:18 +00:00
});
const scriptId = computed(() => `script-${props.provider}`);
2022-12-19 16:31:21 +00:00
const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
if (loaded) {
available.value = true;
} else {
2023-02-22 06:28:17 +00:00
(document.getElementById(scriptId.value) ?? document.head.appendChild(Object.assign(document.createElement('script'), {
async: true,
2022-12-19 16:31:21 +00:00
id: scriptId.value,
src: src.value,
})))
.addEventListener('load', () => available.value = true);
}
function reset() {
if (captcha.value.reset) captcha.value.reset();
}
function requestRender() {
if (captcha.value.render && captchaEl.value instanceof Element) {
captcha.value.render(captchaEl.value, {
sitekey: props.sitekey,
theme: defaultStore.state.darkMode ? 'dark' : 'light',
callback: callback,
'expired-callback': callback,
'error-callback': callback,
});
} else {
2022-01-16 01:14:14 +00:00
window.setTimeout(requestRender, 1);
}
}
function callback(response?: string) {
2022-03-01 12:36:20 +00:00
emit('update:modelValue', typeof response === 'string' ? response : null);
}
onMounted(() => {
if (available.value) {
requestRender();
} else {
watch(available, requestRender);
}
});
onBeforeUnmount(() => {
reset();
});
defineExpose({
reset,
});
2020-04-29 00:15:18 +00:00
</script>