Hold Button

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { Check, Loader2, ShieldCheck, X } from '@lucide/svelte';
4	import { onMount } from 'svelte';
5
6	let {
7		class: className,
8		onVerify,
9		verified = $bindable(false)
10	}: {
11		class?: string;
12		onVerify?: () => void;
13		verified?: boolean;
14	} = $props();
15
16	let status = $state<'idle' | 'verifying' | 'verified' | 'failed'>('idle');
17	let mountTime = 0;
18	let humanInteraction = false;
19	let honeypot = $state(false);
20
21	onMount(() => {
22		mountTime = Date.now();
23
24		const markHuman = () => {
25			humanInteraction = true;
26		};
27		window.addEventListener('mousemove', markHuman, { once: true });
28		window.addEventListener('touchstart', markHuman, { once: true });
29		window.addEventListener('keydown', markHuman, { once: true });
30
31		return () => {
32			window.removeEventListener('mousemove', markHuman);
33			window.removeEventListener('touchstart', markHuman);
34			window.removeEventListener('keydown', markHuman);
35		};
36	});
37
38	function runHeuristics(e: MouseEvent | TouchEvent | KeyboardEvent) {
39		if (honeypot) return false;
40
41		if (Date.now() - mountTime < 500) return false;
42
43		if (!humanInteraction) return false;
44
45		if (!e.isTrusted) return false;
46
47		return true;
48	}
49
50	async function handleClick(e: any) {
51		if (status !== 'idle' && status !== 'failed') return;
52
53		status = 'verifying';
54
55		await new Promise((r) => setTimeout(r, 800));
56
57		if (runHeuristics(e)) {
58			status = 'verified';
59			verified = true;
60			onVerify?.();
61		} else {
62			status = 'failed';
63			verified = false;
64			setTimeout(() => {
65				status = 'idle';
66			}, 2000);
67		}
68	}
69</script>
70
71<input
72	type="checkbox"
73	class="absolute opacity-0 -z-10 w-0 h-0"
74	tabindex="-1"
75	bind:checked={honeypot}
76	autocomplete="off"
77/>
78
79<button
80	onclick={handleClick}
81	class={cn(
82		'group flex items-center justify-between w-[300px] h-16 px-4 rounded-md border bg-card text-card-foreground shadow-sm transition-all select-none',
83		status === 'idle' && 'hover:bg-accent/5 cursor-pointer',
84		status === 'failed' && 'border-red-500/50 bg-red-500/5 cursor-not-allowed',
85		(status === 'verifying' || status === 'verified') && 'cursor-default',
86		className
87	)}
88	type="button"
89>
90	<div class="flex items-center gap-3">
91		<div
92			class={cn(
93				'relative flex items-center justify-center w-7 h-7 rounded border-2 bg-background transition-all duration-300',
94// … truncated