summaryrefslogtreecommitdiff
path: root/packages/client/src/components/captcha.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2022-08-31 00:24:33 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2022-08-31 00:24:33 +0900
commit786b150ea75111b5f6102c256d5cfa42cb83d1fb (patch)
treed552d0c371829d7ff027890d1036a80bb08517f7 /packages/client/src/components/captcha.vue
parentupdate deps (diff)
downloadmisskey-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.vue114
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>