diff --git a/demos/client-pow-example/src/App.tsx b/demos/client-pow-example/src/App.tsx index 21c26e2bbe..1a44c321dc 100644 --- a/demos/client-pow-example/src/App.tsx +++ b/demos/client-pow-example/src/App.tsx @@ -14,7 +14,7 @@ import { EnvironmentTypes, EnvironmentTypesSchema, ProsopoClientConfigSchema } from '@prosopo/types' import { ProcaptchaPow } from '@prosopo/procaptcha-pow' -import { useState } from 'react' +import { useState, useRef, useEffect } from 'react' function App() { const [account, setAccount] = useState('') @@ -30,9 +30,43 @@ function App() { serverUrl: process.env.PROSOPO_SERVER_URL || '', atlasUri: process.env._DEV_ONLY_WATCH_EVENTS === 'true' || false, }) + + const formRef = useRef(null) + + useEffect(() => { + const form = formRef.current + + if (form) { + const handleSubmit = async (event: Event) => { + event.preventDefault() + console.log('Form submitted:', form) + + console.log('Dummy form submission with data:', event) + } + + form.addEventListener('submit', handleSubmit) + + return () => { + form.removeEventListener('submit', handleSubmit) + } + } + return + }, []) + return (
- +
+
+ + +
+
+ + +
+ + +
) } diff --git a/packages/procaptcha-pow/src/Services/Manager.ts b/packages/procaptcha-pow/src/Services/Manager.ts index 15e1844a0e..7c40fd512f 100644 --- a/packages/procaptcha-pow/src/Services/Manager.ts +++ b/packages/procaptcha-pow/src/Services/Manager.ts @@ -65,6 +65,13 @@ export const Manager = ( updateState({ timeout: undefined }) } + const clearSuccessfulChallengeTimeout = () => { + // clear the timeout + window.clearTimeout(state.successfullChallengeTimeout) + // then clear the timeout from the state + updateState({ successfullChallengeTimeout: undefined }) + } + const getConfig = () => { const config: ProcaptchaClientConfigInput = { userAccountAddress: '', @@ -129,6 +136,7 @@ export const Manager = ( const resetState = () => { // clear timeout just in case a timer is still active (shouldn't be) clearTimeout() + clearSuccessfulChallengeTimeout() updateState(defaultState()) } @@ -231,5 +239,6 @@ export const Manager = ( return { start, + resetState, } } diff --git a/packages/procaptcha-pow/src/components/Captcha.tsx b/packages/procaptcha-pow/src/components/Captcha.tsx index d70481ca46..1a4a43b1bc 100644 --- a/packages/procaptcha-pow/src/components/Captcha.tsx +++ b/packages/procaptcha-pow/src/components/Captcha.tsx @@ -30,7 +30,7 @@ import { import { Manager } from '../Services/Manager.js' import { ProcaptchaProps } from '@prosopo/types' import { buildUpdateState, useProcaptcha } from '@prosopo/procaptcha-common' -import { useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' const Procaptcha = (props: ProcaptchaProps) => { const config = props.config @@ -40,10 +40,29 @@ const Procaptcha = (props: ProcaptchaProps) => { const [state, _updateState] = useProcaptcha(useState, useRef) // get the state update mechanism const updateState = buildUpdateState(state, _updateState) - const manager = Manager(config, state, updateState, callbacks) + const manager = useRef(Manager(config, state, updateState, callbacks)) + const captchaRef = useRef(null) + + useEffect(() => { + const element = captchaRef.current + if (!element) return + + const form = element.closest('form') + if (!form) return + + const handleSubmit = () => { + manager.current.resetState() + } + + form.addEventListener('submit', handleSubmit) + + return () => { + form.removeEventListener('submit', handleSubmit) + } + }, []) return ( -
+
@@ -96,7 +115,7 @@ const Procaptcha = (props: ProcaptchaProps) => { ) : (