Captcha

SVG image based captchas

You can incorporate image based captchas using the captchas package

socialstack install Captchas

You need 2 images, one background and another foreground svg with some tagged elements, these tagged elements can then be used to check if the user can click on the required regions

For each choice in the foreground image, add a Captcha database entry including the images and tagname, there is also a debug toggle which will show the region as you move around the image to assist with testing

A sample usage is below

import CaptchaModal from 'UI/CaptchaModal';
import { useSession } from 'UI/Session';

export default function VoteTest(props) {

	var [isVotingOpen, setIsVotingOpen] = React.useState();
	var [isCaptchaModalOpen, setCaptchaModalOpen] = React.useState();

	const { session } = useSession();
	const user = session.user;

	console.log('user can vote', user.id, user.canVote);

	const onCloseCaptchaModal = () => {
		setCaptchaModalOpen(false);

		if(user.canVote) {
			setIsVotingOpen(true);
		} 
	}

	React.useEffect(() => {
		if(user.canVote) {
			setIsVotingOpen(true);
		} else {
			setCaptchaModalOpen(true);
		}	
	}, []);

	return <>
			{isVotingOpen && 
				<p> do some voting</p>
			}	

			{isCaptchaModalOpen && 
				<CaptchaModal visible={isCaptchaModalOpen} onClose={onCloseCaptchaModal}/>
			}	

		</>
}

Vote.propTypes = {
	iconStyle: 'string'
};

// use defaultProps to define default values, if required
Vote.defaultProps = {
	iconStyle: "fa-arrow-right"
}

// icon used to represent component when adding to a page via /en-admin/page
// see https://fontawesome.com/icons?d=gallery for available classnames
// NB: exclude the "fa-" prefix
Vote.icon='check-to-slot'; // fontawesome icon