Created Captcha
This commit is contained in:
danidfra
parent
e787da4e02
commit
96d2070ae9
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Modal, Stack } from 'soapbox/components/ui';
|
||||
|
||||
import Captcha from './captcha';
|
||||
|
||||
interface ICaptchaModal {
|
||||
onClose: (type?: string) => void;
|
||||
}
|
||||
|
||||
const CaptchaModal: React.FC<ICaptchaModal> = ({ onClose }) => {
|
||||
return (
|
||||
<Modal title={<FormattedMessage id='nostr_signup.captcha_title' defaultMessage='Human Verification' />} onClose={onClose} width='sm'>
|
||||
<Stack justifyContent='center' alignItems='center' space={4}>
|
||||
<Captcha />
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaptchaModal;
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Button, Spinner, Stack, Text } from 'soapbox/components/ui';
|
||||
|
||||
import { PuzzleCaptcha } from './puzzle';
|
||||
import useCaptcha from './useCaptcha';
|
||||
|
||||
const Captcha: React.FC = () => {
|
||||
const {
|
||||
captcha,
|
||||
loadCaptcha,
|
||||
handleChangePosition,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
tryAgain,
|
||||
yPosition,
|
||||
xPosition,
|
||||
} = useCaptcha();
|
||||
|
||||
return (
|
||||
<Stack space={2} justifyContent='center' alignItems='center'>
|
||||
<Text align='center'>
|
||||
<FormattedMessage id='nostr_signup.captcha_instruction' defaultMessage='Complete the puzzle by dragging the puzzle piece to the correct position.' />
|
||||
</Text>
|
||||
|
||||
<div className='relative flex min-h-[358px] min-w-[330px] items-center justify-center'>
|
||||
{captcha ? <PuzzleCaptcha bg={captcha.bg} puzzle={captcha.puzzle} position={{ x: xPosition!, y: yPosition! }} onChange={handleChangePosition} /> : <Spinner size={40} withText={false} />}
|
||||
</div>
|
||||
|
||||
<Stack className='w-[330px]' space={2}>
|
||||
<Button
|
||||
block
|
||||
theme='primary'
|
||||
type='button'
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<FormattedMessage id='nostr_signup.captcha_check_button.checking' defaultMessage='Checking…' />
|
||||
) : (tryAgain ?
|
||||
<FormattedMessage id='nostr_signup.captcha_try_again_button' defaultMessage='Try again' /> :
|
||||
<FormattedMessage id='nostr_signup.captcha_check_button' defaultMessage='Check' />
|
||||
)}
|
||||
</Button>
|
||||
<Button onClick={loadCaptcha}>
|
||||
<FormattedMessage id='nostr_signup.captcha_reset_button' defaultMessage='Reset puzzle' />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default Captcha;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import React, { useRef, useState } from 'react';
|
||||
|
||||
interface IPuzzleCaptcha {
|
||||
bg: string;
|
||||
puzzle: string;
|
||||
position: { x: number; y: number };
|
||||
onChange(point: { x: number; y: number }): void;
|
||||
}
|
||||
|
||||
export const PuzzleCaptcha: React.FC<IPuzzleCaptcha> = ({ bg, puzzle, position, onChange }) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [touchOffsetX, setTouchOffsetX] = useState(0);
|
||||
const [touchOffsetY, setTouchOffsetY] = useState(0);
|
||||
|
||||
const handlePointerDown = (e: React.PointerEvent<HTMLImageElement>) => {
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
};
|
||||
|
||||
const handlePointerMove = (e: React.PointerEvent<HTMLImageElement>) => {
|
||||
if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
|
||||
|
||||
const rect = ref.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
|
||||
const newPosition = {
|
||||
x: e.clientX - rect.left - e.currentTarget.width / 2,
|
||||
y: e.clientY - rect.top - e.currentTarget.height / 2,
|
||||
};
|
||||
|
||||
onChange(newPosition);
|
||||
};
|
||||
|
||||
const handleTouchStart = (event: React.TouchEvent<HTMLImageElement>) => {
|
||||
const imageElement = event.currentTarget.getBoundingClientRect();
|
||||
const touch = event.touches[0];
|
||||
|
||||
const offsetX = touch.clientX - imageElement.left;
|
||||
const offsetY = touch.clientY - imageElement.top;
|
||||
|
||||
setTouchOffsetX(offsetX);
|
||||
setTouchOffsetY(offsetY);
|
||||
};
|
||||
|
||||
|
||||
const handleTouchMove = (event: React.TouchEvent<HTMLImageElement>) => {
|
||||
const touch = event.touches[0];
|
||||
|
||||
const dropArea = document.getElementById('drop-area')?.getBoundingClientRect();
|
||||
if (!dropArea) return;
|
||||
|
||||
const newLeft = touch.clientX - dropArea.left - touchOffsetX;
|
||||
const newTop = touch.clientY - dropArea.top - touchOffsetY;
|
||||
|
||||
const imageWidth = 61;
|
||||
const imageHeight = 61;
|
||||
const limitedLeft = Math.min(Math.max(newLeft, 0), dropArea.width - imageWidth);
|
||||
const limitedTop = Math.min(Math.max(newTop, 0), dropArea.height - imageHeight);
|
||||
|
||||
onChange({ x: limitedLeft, y: limitedTop });
|
||||
};
|
||||
|
||||
const handlePointerUp = (e: React.PointerEvent<HTMLImageElement>) => {
|
||||
e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
};
|
||||
|
||||
const handleTouchDrop = (event: React.TouchEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
const dropArea = document.getElementById('drop-area')?.getBoundingClientRect();
|
||||
if (!dropArea) return;
|
||||
|
||||
const touch = event.changedTouches[0];
|
||||
|
||||
const newLeft = touch.clientX - dropArea.left - touchOffsetX;
|
||||
const newTop = touch.clientY - dropArea.top - touchOffsetY;
|
||||
|
||||
const imageWidth = 61;
|
||||
const imageHeight = 61;
|
||||
|
||||
const limitedLeft = Math.min(Math.max(newLeft, 0), dropArea.width - imageWidth);
|
||||
const limitedTop = Math.min(Math.max(newTop, 0), dropArea.height - imageHeight);
|
||||
|
||||
onChange({ x: limitedLeft, y: limitedTop });
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<div id='drop-area' ref={ref} className='relative' onTouchEnd={handleTouchDrop}>
|
||||
<img
|
||||
className='drop-shadow-black absolute z-[101] w-[61px] drop-shadow-2xl hover:cursor-grab'
|
||||
src={puzzle}
|
||||
alt=''
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
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,
|
||||
top: position.y,
|
||||
}}
|
||||
draggable={false}
|
||||
/>
|
||||
|
||||
<img src={bg} alt='' className='rounded-2xl' draggable={false} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import { AxiosError } from 'axios';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { closeModal } from 'soapbox/actions/modals';
|
||||
import { startOnboarding } from 'soapbox/actions/onboarding';
|
||||
import { useApi, useAppDispatch, useInstance } from 'soapbox/hooks';
|
||||
import { captchaSchema, type CaptchaData } from 'soapbox/schemas/captcha';
|
||||
import toast from 'soapbox/toast';
|
||||
|
||||
|
||||
|
||||
const messages = defineMessages({
|
||||
sucessMessage: { id: 'nostr_signup.captcha_message.sucess', defaultMessage: 'Incredible! You\'ve successfully completed the captcha. Let\'s move on to the next step!' },
|
||||
wrongMessage: { id: 'nostr_signup.captcha_message.wrong', defaultMessage: 'Oops! It looks like your captcha response was incorrect. Please try again.' },
|
||||
errorMessage: { id: 'nostr_signup.captcha_message.error', defaultMessage: 'It seems an error has occurred. Please try again. If the problem persists, please contact us.' },
|
||||
misbehavingMessage: { id: 'nostr_signup.captcha_message.misbehaving', defaultMessage: 'It looks like we\'re experiencing issues with the {instance}. Please try again. If the error persists, try again later.' },
|
||||
});
|
||||
|
||||
function getRandomNumber(min: number, max: number): number {
|
||||
return Number((Math.random() * (max - min) + min).toFixed());
|
||||
}
|
||||
|
||||
const useCaptcha = () => {
|
||||
const api = useApi();
|
||||
const instance = useInstance();
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const [captcha, setCaptcha] = useState<CaptchaData>();
|
||||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
const [tryAgain, setTryAgain] = useState<boolean>(false);
|
||||
const [yPosition, setYPosition] = useState<number>();
|
||||
const [xPosition, setXPosition] = useState<number>();
|
||||
|
||||
const loadCaptcha = async () => {
|
||||
try {
|
||||
const topI = getRandomNumber(0, (356 - 61));
|
||||
const leftI = getRandomNumber(0, (330 - 61));
|
||||
const { data } = await api.get('/api/v1/ditto/captcha');
|
||||
if (data) {
|
||||
const normalizedData = captchaSchema.parse(data);
|
||||
setCaptcha(normalizedData);
|
||||
setYPosition(topI);
|
||||
setXPosition(leftI);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
toast.error('Error loading captcha:');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadCaptcha();
|
||||
}, []);
|
||||
|
||||
const handleChangePosition = (point: { x: number; y: number }) => {
|
||||
setXPosition(point.x);
|
||||
setYPosition(point.y);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (captcha) {
|
||||
const result = {
|
||||
x: xPosition,
|
||||
y: yPosition,
|
||||
};
|
||||
|
||||
try {
|
||||
await api.post(`/api/v1/ditto/captcha/${captcha.id}/verify`, result).then(() => {
|
||||
setTryAgain(true);
|
||||
|
||||
dispatch(closeModal('CAPTCHA'));
|
||||
toast.success(messages.sucessMessage);
|
||||
dispatch(startOnboarding());
|
||||
});
|
||||
} catch (e) {
|
||||
setTryAgain(true);
|
||||
const error = e as AxiosError;
|
||||
const status = error.request?.status;
|
||||
|
||||
let message;
|
||||
|
||||
switch (status) {
|
||||
case 400:
|
||||
message = intl.formatMessage(messages.wrongMessage);
|
||||
break;
|
||||
case 422:
|
||||
message = intl.formatMessage(messages.misbehavingMessage, { instance: instance.title });
|
||||
break;
|
||||
default:
|
||||
message = intl.formatMessage(messages.errorMessage);
|
||||
break;
|
||||
}
|
||||
toast.error(message);
|
||||
}
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
captcha,
|
||||
loadCaptcha,
|
||||
handleChangePosition,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
tryAgain,
|
||||
yPosition,
|
||||
xPosition,
|
||||
};
|
||||
};
|
||||
|
||||
export default useCaptcha;
|
||||
Loading…
Reference in New Issue