moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'captcha-modal' into 'main' 

Fix problem with captcha

See merge request soapbox-pub/soapbox!3149
This commit is contained in:
Alex Gleason 2024-10-11 16:16:34 +00:00
parent 008dbb35d1 4ffad405c7
commit c2260abc97
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/features/ui/components/modals/captcha-modal/components/puzzle.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from 'react';
import React, { useRef, useEffect } from 'react';
interface IPuzzleCaptcha {
bg: string;
@ -31,15 +31,26 @@ export const PuzzleCaptcha: React.FC<IPuzzleCaptcha> = ({ bg, puzzle, position,
onChange(newPosition);
};
const handleTouchMove = (event: React.TouchEvent<HTMLImageElement>) => {
useEffect(() => {
const imgElement = ref.current;
const touchMoveHandler = (event: TouchEvent) => {
event.preventDefault();
const touch = event.touches[0];
const dropArea = ref.current?.getBoundingClientRect();
const dropArea = imgElement?.getBoundingClientRect();
if (!dropArea) return;
const newPosition = calculateNewPosition(touch.clientX, touch.clientY, 61, 61, dropArea);
onChange(newPosition);
};
imgElement?.addEventListener('touchmove', touchMoveHandler, { passive: false });
return () => {
imgElement?.removeEventListener('touchmove', touchMoveHandler);
};
}, [onChange]);
return (
<div id='drop-area' ref={ref} className='relative'>
<img
@ -49,7 +60,6 @@ export const PuzzleCaptcha: React.FC<IPuzzleCaptcha> = ({ bg, puzzle, position,
onPointerDown={(e) => e.currentTarget.setPointerCapture(e.pointerId)}
onPointerMove={handlePointerMove}
onPointerUp={(e) => e.currentTarget.releasePointerCapture(e.pointerId)}
onTouchMove={handleTouchMove}
style={{
filter: 'drop-shadow(2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff)',
left: position.x,