diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-08-31 00:24:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-08-31 00:24:33 +0900 |
| commit | 786b150ea75111b5f6102c256d5cfa42cb83d1fb (patch) | |
| tree | d552d0c371829d7ff027890d1036a80bb08517f7 /packages/client/src/components/captcha.vue | |
| parent | update deps (diff) | |
| download | misskey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.tar.gz misskey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.tar.bz2 misskey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.zip | |
refactor(client): align filename to component name
Diffstat (limited to 'packages/client/src/components/captcha.vue')
| -rw-r--r-- | packages/client/src/components/captcha.vue | 114 |
1 files changed, 0 insertions, 114 deletions
diff --git a/packages/client/src/components/captcha.vue b/packages/client/src/components/captcha.vue deleted file mode 100644 index 7360734914..0000000000 --- a/packages/client/src/components/captcha.vue +++ /dev/null @@ -1,114 +0,0 @@ -<template> -<div> - <span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span> - <div ref="captchaEl"></div> -</div> -</template> - -<script lang="ts" setup> -import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'; -import { defaultStore } from '@/store'; -import { i18n } from '@/i18n'; - -type Captcha = { - 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; - getResponse(id: string): string; -}; - -type CaptchaProvider = 'hcaptcha' | 'recaptcha'; - -type CaptchaContainer = { - readonly [_ in CaptchaProvider]?: Captcha; -}; - -declare global { - interface Window extends CaptchaContainer { } -} - -const props = defineProps<{ - provider: CaptchaProvider; - sitekey: string; - modelValue?: string | null; -}>(); - -const emit = defineEmits<{ - (ev: 'update:modelValue', v: string | null): void; -}>(); - -const available = ref(false); - -const captchaEl = ref<HTMLDivElement | undefined>(); - -const variable = computed(() => { - switch (props.provider) { - case 'hcaptcha': return 'hcaptcha'; - case 'recaptcha': return 'grecaptcha'; - } -}); - -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'; - } -}); - -const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha); - -if (loaded) { - available.value = true; -} else { - (document.getElementById(props.provider) || document.head.appendChild(Object.assign(document.createElement('script'), { - async: true, - id: props.provider, - 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 { - window.setTimeout(requestRender, 1); - } -} - -function callback(response?: string) { - emit('update:modelValue', typeof response === 'string' ? response : null); -} - -onMounted(() => { - if (available.value) { - requestRender(); - } else { - watch(available, requestRender); - } -}); - -onBeforeUnmount(() => { - reset(); -}); - -defineExpose({ - reset, -}); - -</script> |