80.229.4.125 at 15:13, 5 August 2022

2022-08-05T15:13:33Z

← Older revision		Revision as of 15:13, 5 August 2022
Line 3:		Line 3:
	You can incorporate image based captchas using the captchas package		You can incorporate image based captchas using the captchas package

	socialstack install Captchas		<code>socialstack install Captchas</code>

	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		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
Line 10:		Line 10:

	=== A sample usage is below ===		=== A sample usage is below ===
			<syntaxhighlight lang="javascript">
	import CaptchaModal from 'UI/CaptchaModal';		import CaptchaModal from 'UI/CaptchaModal';
	import { useSession } from 'UI/Session';		import { useSession } from 'UI/Session';
Line 65:		Line 65:
	// NB: exclude the "fa-" prefix		// NB: exclude the "fa-" prefix
	Vote.icon='check-to-slot'; // fontawesome icon		Vote.icon='check-to-slot'; // fontawesome icon

			</syntaxhighlight>

80.229.4.125: Created page with "= 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..."

2022-08-05T15:10:19Z

Created page with "= 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..."

New page

= 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

Captcha - Revision history

80.229.4.125 at 15:13, 5 August 2022

80.229.4.125: Created page with "= 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..."