diff --git a/web/src/components/misc/Turnstile.svelte b/web/src/components/misc/Turnstile.svelte index 4cf5e112..109403d0 100644 --- a/web/src/components/misc/Turnstile.svelte +++ b/web/src/components/misc/Turnstile.svelte @@ -2,6 +2,8 @@ import env from "$lib/env"; import { onMount } from "svelte"; + import { turnstileLoaded } from "$lib/state/turnstile"; + let turnstileElement: HTMLElement; let turnstileScript: HTMLElement; @@ -15,6 +17,9 @@ console.log("turnstile error code:", error); return true; }, + callback: () => { + $turnstileLoaded = true; + } }); }); }); diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte index 510a6765..dc0c919c 100644 --- a/web/src/components/save/Omnibox.svelte +++ b/web/src/components/save/Omnibox.svelte @@ -3,17 +3,20 @@ import { goto } from "$app/navigation"; import { SvelteComponent, tick } from "svelte"; + import env from "$lib/env"; import { t } from "$lib/i18n/translations"; import dialogs from "$lib/dialogs"; import { link } from "$lib/state/omnibox"; import { updateSetting } from "$lib/state/settings"; + import { turnstileLoaded } from "$lib/state/turnstile"; - import type { DownloadModeOption } from "$lib/types/settings"; import type { Optional } from "$lib/types/generic"; + import type { DownloadModeOption } from "$lib/types/settings"; import IconLink from "@tabler/icons-svelte/IconLink.svelte"; + import IconLoader2 from "@tabler/icons-svelte/IconLoader2.svelte"; import ClearButton from "$components/save/buttons/ClearButton.svelte"; import DownloadButton from "$components/save/buttons/DownloadButton.svelte"; @@ -28,12 +31,11 @@ import IconClipboard from "$components/icons/Clipboard.svelte"; let linkInput: Optional; - let isFocused = false; - - let isDisabled: boolean = false; - let downloadButton: SvelteComponent; + let isFocused = false; + let isDisabled = false; + const validLink = (url: string) => { try { return /^https:/i.test(new URL(url).protocol); @@ -54,6 +56,14 @@ goto("/", { replaceState: true }); } + $: if (env.TURNSTILE_KEY) { + if ($turnstileLoaded) { + isDisabled = false; + } else { + isDisabled = true; + } + } + const pasteClipboard = () => { if (isDisabled || $dialogs.length > 0) { return; @@ -122,7 +132,11 @@ class:focused={isFocused} class:downloadable={validLink($link)} > - + {#if isDisabled} + + {:else} + + {/if}